1

How to change the border-radius in the below image?

Using Mantra Theme, Ubuntu 18.04

enter image description here

Here is the link to the Theme: https://drive.google.com/file/d/11tX3e8uqo_dOegklSvhg9ZQ3b9virBWD/view?usp=sharing

Update 1:

It looks like this now

enter image description here

Update 2 :

The button is too grey. Can we make it lighter ?

enter image description here

Improve this question
  • 1
    the theme Materia you mentioned is GTK or Shell theme?? – UnKNOWn Nov 18 '19 at 1:13
  • Looks like it is the gnome-shell.css we need to change. Changed now :) Thanks. – user227495 Nov 18 '19 at 1:34
  • @PRATAP , I have another issue. Added as an update to the original post. Please check. – user227495 Nov 18 '19 at 1:43
  • Updated, please check. – user227495 Nov 18 '19 at 1:59
  • Updated original post. – user227495 Nov 18 '19 at 2:14
0

Workaround

I have chosen 48px as the border-radius for the below workaround. you may change this value according to your needs.

Edit the file ..../themes/Mantra/gtk-3.22/gtk.css

enter image description here

look for the below content:

/***********
 * Dialogs *
 ***********/
messagedialog.background {
  background-color: #FAFAFA;
}

messagedialog .titlebar {
  min-height: 24px;
  border-style: none;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
  background-color: #FAFAFA;
  color: rgba(0, 0, 0, 0.87);
}

messagedialog .titlebar:backdrop {
  color: rgba(0, 0, 0, 0.54);
}

messagedialog.csd.background {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

messagedialog.csd .dialog-action-area button {
  padding: 8px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
}

messagedialog.csd .dialog-action-area button:first-child {
  border-bottom-left-radius: 2px;
}

messagedialog.csd .dialog-action-area button:last-child {
  border-bottom-right-radius: 2px;
}

and edit it like below:

/***********
 * Dialogs *
 ***********/
messagedialog.background {
  background-color: #FAFAFA;
border-radius: 0 0 48px 48px;
}

messagedialog .titlebar, messagedialog.csd .titlebar {
  min-height: 48px;
  border-style: none;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
  background-color: #FAFAFA;
  color: rgba(0, 0, 0, 0.87);
border-radius: 48px 48px 0 0;
}

messagedialog .titlebar:backdrop {
  color: rgba(0, 0, 0, 0.54);
}

messagedialog.csd .dialog-action-area button {
  padding: 8px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
}

messagedialog.csd .dialog-action-area button:first-child {
  border-bottom-left-radius: 2px;
}

messagedialog.csd .dialog-action-area button:last-child {
  border-bottom-right-radius: 2px;
}

Then go to line number around 3739 and find below content:

messagedialog.csd decoration {
  border-radius: 2px;
}

Change 2px to 48px as I have chosen this size as border-radius.. you have to put as per your liking.

le

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.