Minor theme edits

Forum rules
Before you post please read how to get help
mfreeman
Level 3
Level 3
Posts: 179
Joined: Thu Jan 21, 2010 3:11 am

Minor theme edits

Post by mfreeman »

I enjoy casually tweaking Mint here and there, and I've been wanting to tweak theming because I'm not 100% satisfied with any theme I've run across. My favorite theme is still the old Mint-X, as I don't like the "flat" trend, and Mint-X preserves some dimensionality that I like. That said, there are always things I don't like. For Mint-X, I would like to tweak two things: The slider bars and the drop-down menus. Are there any tools or tutorials that would help me make changes to themes? I've tried to figure out the .css files, and I've made some small adjustments to things like colors, but I can't seem to find what I need. I've also tried Oomox, but it doesn't seem to want to do what I'm wanting to do - maybe I'm doing it wrong?

Specifially:
I want to tweak the Mint-X slider bars to be a little more like the Mint-Y sliders, but with the Mint-X style. In other words, instead of having the slider bar completely fill the slider area, I'd like the bar to be a few pixels narrower, so that it has better definition, and to make it look less jarring when the bar goes from the flat gray thin overlay bar to the wide, dimensionally shaded actual bar. I'd like to make it the same width as the overlay bar, while the slider area remains its current width. I hope that makes sense.

I also want to round off the corners of the bottom edges of the drop-down menus in windows, so that it's somewhere between the rounded edges of the panel's menus and the rounded edges of the window title bar. I really like the rounded menu edges in the Canta theme. I'd like to get something like that in Mint-X.

Ideally, I'd love a GUI-based editor, but I'm willing to learn more about GTK's CSS theming, if there's a good, easy to understand tutorial for that.

Any suggestions? Thank you!
mfreeman
Level 3
Level 3
Posts: 179
Joined: Thu Jan 21, 2010 3:11 am

Re: Minor theme edits

Post by mfreeman »

Just for clarification, here are images. One is the original Mint-X slider, the other is a mock-up of what I want to edit it to look a little more like (not the best graphic work, sorry). I would post the same for the drop-down menus, but I can't make screenshots with menus open, at least with the default Linux Mint screenshot tool.

Original:
Original Mint-X Slider.png
Original Mint-X Slider.png (6.62 KiB) Viewed 756 times
Mock-up:
Mockup Slider.png
Mockup Slider.png (6.62 KiB) Viewed 756 times
User avatar
smurphos
Level 17
Level 17
Posts: 7132
Joined: Fri Sep 05, 2014 12:18 am
Location: Britisher
Contact:

Re: Minor theme edits

Post by smurphos »

Scrollbars - in /usr/share/themes/Mint-X/gtk-3.0/gtk-widgets.css

Look for this section and tweak the negative margins.

Code: Select all

scrollbar slider {
    min-width: 10px;
    min-height: 10px;
    margin: -1px;
    margin-top: 2px;
    margin-bottom: 2px;
    border: 1px solid @border;
    border-radius: 8px;
    background-clip: padding-box;
    background-color: transparent;
    background-image: linear-gradient(to right,
                                      shade(@theme_bg_color, 1.12),
                                      shade(@theme_bg_color, 0.95));
    box-shadow: 1px 0 alpha(white, 0.5);
}

scrollbar.horizontal slider {
    margin: -1px;
    margin-left: 2px;
    margin-right: 2px;
    background-image: linear-gradient(to bottom,
                                      shade(@theme_bg_color, 1.12),
                                      shade(@theme_bg_color, 0.95));
}
Menus - look for this section - tweak border radius definitions

Code: Select all

menu,
.menu,
.context-menu {
    margin: 4px;
    padding: 0;
    border: 1px solid @border;
    border-radius: 0;
    background-color: @menu_bg;
}

/* remove some really ugly borders in composited environments */
.csd menu,
.csd .menu,
.csd .context-menu {
    border: none;
}

.menu.button {
    border: 1px solid @border;
    border-radius: 0;
    border-image: none;
    background-color: shade(@menu_bg, 0.9);
    background-image: none;
    color: @menu_fg;
}

.menu.button:hover {
    border: 1px solid @border;
    border-radius: 0;
    border-image: none;
    background-color: mix(shade(@menu_bg, 0.9), @theme_selected_bg_color, 0.4);
    background-image: none;
    color: @menu_fg;
}

.menu.button:disabled {
    border: 1px solid @border;
    border-radius: 0;
    border-image: none;
    background-color: @menu_bg;
    background-image: none;
    color: @insensitive_fg_color;
}

.popup decoration {
    border-radius: 0;
}
For custom Nemo actions, useful scripts for the Cinnamon desktop, and Cinnamox themes visit my Github pages.
mfreeman
Level 3
Level 3
Posts: 179
Joined: Thu Jan 21, 2010 3:11 am

Re: Minor theme edits

Post by mfreeman »

Thank you for your reply!

I've got the slider bar looking exactly like I want it now, which was my main focus. But the menus are still problematic. Even if I change the border-radius, it's just not getting the desired effect yet.

The first problem is the black border. It does odd things when I change the border radius. Instead of outlining around the curve, it outlines up to the curve and then stops, so I get black lines on the side and top of the menu, but nothing but white around the corners. Looks a little strange. I experimented, and the only thing I could get that stopped that was a curved menu with a squared-off black line, which is also not what I want. I'll keep playing with that.

The second problem is that there are curves on EVERY corner of the drop-down menus. I'd like them just on the bottom corners so that they look like they remain connected to the menu bar at the top. The context menus can have curves on all corners, though, since there's no menu bar. So those are closer to what I want.

The third problem is that the highlight color (when you hover the mouse over the menu items) doesn't obey the curvature of the menu, so when you highlight the top or bottom menu item, the menu becomes squared off again. I think the way the Canta theme handled this was that it added extra space at the curved end of the menus so that the highlighting doesn't get to the curve.

I'll keep experimenting. If anyone has any suggestions for where to look for these problems, I'd appreciate the help, otherwise, I'll continue searching and playing with things.

Thank you for setting me on the right track, Smurphos!
Mick-Cork
Level 3
Level 3
Posts: 190
Joined: Sun Mar 23, 2014 10:10 pm
Location: West Cork & London

Re: Minor theme edits

Post by Mick-Cork »

Hi mfreeman,

Re: border radius...

I'm making an assumption here that CSS in LM works to the same rules as normal web development, and if so there's border-radius properties to control bottom left and bottom right, eg:

border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

Try adding those lines after border-radius: 0;

Haven't tried it here, but as you're already delving in you could probably test it quicker. Be interesting to see if it works?

Edit: I've just had a quick look at Mint-Y-Dark CSS and those properties are used for different elements there, so hopefully should also work in the theme you're editing.

Also, and can't remember if it's the LM default, try 'screenshot' to capture screens - it's got the option of a time delay on it (e.g, 10 secs) which gives you a chance to open up dynamic elements after you've initiated the screenshot and before the actual image is captured.
User avatar
smurphos
Level 17
Level 17
Posts: 7132
Joined: Fri Sep 05, 2014 12:18 am
Location: Britisher
Contact:

Re: Minor theme edits

Post by smurphos »

Try this for the menu section

Code: Select all

/********
 * menu *
 ********/

.context-menu {
    font: initial;
}

menu,
.menu,
.context-menu {
    margin: 4px;
    padding: 1px;
    border: 1px solid @border;
    border-radius: 0 0 10px 10px;
    background-color: @menu_bg;
}


/* remove some really ugly borders in composited environments */
.csd menu,
.csd .menu,
.csd .context-menu {
    border: none;
}

.menu.button {
    border: 1px solid @border;
    border-radius: 0;
    border-image: none;
    background-color: shade(@menu_bg, 0.9);
    background-image: none;
    color: @menu_fg;
}

.menu.button:hover {
    border: 1px solid @border;
    border-radius: 0;
    border-image: none;
    background-color: mix(shade(@menu_bg, 0.9), @theme_selected_bg_color, 0.4);
    background-image: none;
    color: @menu_fg;
}

.menu.button:disabled {
    border: 1px solid @border;
    border-radius: 0;
    border-image: none;
    background-color: @menu_bg;
    background-image: none;
    color: @insensitive_fg_color;
}

.popup decoration {
    border-radius: 0 0 10px 10px;
}

.popup {
    background-color: transparent;
}
You'll also want to give the buttons a little border-radius

Code: Select all

/************
 * menuitem *
 ************/

menu menuitem,
.menu menuitem,
.context-menu menuitem {
    min-height: 16px;
    min-width: 40px;
    padding: 4px;
    border: 1px solid transparent;
    text-shadow: none;
    border-radius: 10px;
}
Effect

Image
For custom Nemo actions, useful scripts for the Cinnamon desktop, and Cinnamox themes visit my Github pages.
Mick-Cork
Level 3
Level 3
Posts: 190
Joined: Sun Mar 23, 2014 10:10 pm
Location: West Cork & London

Re: Minor theme edits

Post by Mick-Cork »

Hi Smurphos,

I forgot you could specify all four corners in one border-radius statement, handy reminder.

I'm also wondering if LM would recognise the background-clip: padding-box; CSS statement, and whether this would resolve the hover background color bleeding over the border of curved corners. Pure guesswork on my behalf, maybe I should just try it myself and see :)
User avatar
smurphos
Level 17
Level 17
Posts: 7132
Joined: Fri Sep 05, 2014 12:18 am
Location: Britisher
Contact:

Re: Minor theme edits

Post by smurphos »

Mick-Cork wrote:
Wed Jun 24, 2020 9:33 am
Hi Smurphos,

I forgot you could specify all four corners in one border-radius statement, handy reminder.

I'm also wondering if LM would recognise the background-clip: padding-box; CSS statement, and whether this would resolve the hover background color bleeding over the border of curved corners. Pure guesswork on my behalf, maybe I should just try it myself and see :)
Yep you can use background-clip

Image
For custom Nemo actions, useful scripts for the Cinnamon desktop, and Cinnamox themes visit my Github pages.
mfreeman
Level 3
Level 3
Posts: 179
Joined: Thu Jan 21, 2010 3:11 am

Re: Minor theme edits

Post by mfreeman »

That looks like it could work. Is there a way to have just the bottom part of the menu extend below the highlighting, but still allow the highlighting to extend all the way to the left and right edge of the menu? That's the look I'm going for. (Yeah, I'm picky! :) )
mfreeman
Level 3
Level 3
Posts: 179
Joined: Thu Jan 21, 2010 3:11 am

Re: Minor theme edits

Post by mfreeman »

I made the above changes, and I'm still getting some weirdness at the corners, with the black border ending at the curve. Would it be possible to get rid of the black border altogether, and maybe make the shadow behind the menu a little stronger to add the definition the border currently offers?
Screenshot from 2020-06-25 11-49-00.png
mfreeman
Level 3
Level 3
Posts: 179
Joined: Thu Jan 21, 2010 3:11 am

Re: Minor theme edits

Post by mfreeman »

Also, right-click menu (not the menubar menu) needs rounded corners on all sides, not just the bottom. How would that be changed?
mfreeman
Level 3
Level 3
Posts: 179
Joined: Thu Jan 21, 2010 3:11 am

Re: Minor theme edits

Post by mfreeman »

I've solved the problem of having space at the bottom of the menu in order to keep the highlighting squared off, while having the corners rounded, by playing with the padding. I'm still a little worried that the right-click menu is following the same settings as the drop-down menu, so I can't seem to get round corners only on the bottom of the drop-down menu, while having rounded corners on all four corners of the right-click menu. Is there a way to separate the two? Other themes seem to be able to do it, but looking at their css, things just don't look the same, so they loose me. The good news: this is starting to make a little more sense!
Screenshot from 2020-06-25 12-28-52.png
User avatar
smurphos
Level 17
Level 17
Posts: 7132
Joined: Fri Sep 05, 2014 12:18 am
Location: Britisher
Contact:

Re: Minor theme edits

Post by smurphos »

mfreeman wrote:
Thu Jun 25, 2020 3:36 pm
Is there a way to separate the two?
Hi - so where you see things like this there are multiple style-classes sharing the same theming.

Code: Select all

menu,
.menu,
.context-menu {
    margin: 4px;
    padding: 1px;
    border: 1px solid @border;
    border-radius: 0 0 10px 10px;
    background-color: @menu_bg;
}
You can split those up to have something like this to specify different border schemes for drop down as opposed to context menus.

Code: Select all

menu,
.menu,
.context-menu {
    margin: 4px;
    padding: 1px;
    border: 1px solid @border;
    background-color: @menu_bg;
}

menu,
.menu { 
    border-radius: 0 0 10px 10px;
}

.context-menu { 
    border-radius: 0;
}
For custom Nemo actions, useful scripts for the Cinnamon desktop, and Cinnamox themes visit my Github pages.
mfreeman
Level 3
Level 3
Posts: 179
Joined: Thu Jan 21, 2010 3:11 am

Re: Minor theme edits

Post by mfreeman »

That doesn't seem to be making any difference. The right-click menu is still following the same look as the drop-down menus.
User avatar
smurphos
Level 17
Level 17
Posts: 7132
Joined: Fri Sep 05, 2014 12:18 am
Location: Britisher
Contact:

Re: Minor theme edits

Post by smurphos »

Hi,

A bit more experimentation. Revert the other changes to the menu css and just add this as extra. The right click context menu will stay square. The menu drop down menus will have the rounded bottom with a bit of padding

Code: Select all

.background .popup menu {
    padding-bottom: 6px;
    border-radius: 0 0 10px 10px;
}

.background .popup decoration {
    border-radius: 0 0 10px 10px;
}

.background .popup  {
    background-color: transparent;
}
Image
Image
For custom Nemo actions, useful scripts for the Cinnamon desktop, and Cinnamox themes visit my Github pages.
User avatar
smurphos
Level 17
Level 17
Posts: 7132
Joined: Fri Sep 05, 2014 12:18 am
Location: Britisher
Contact:

Re: Minor theme edits

Post by smurphos »

For context menus to be rounded on all 4 corners and drop down menus only on the bottom try this instead

Code: Select all

.popup menu {
    padding: 6px 0 6px 0;
    border-radius: 10px;
}

.background .popup menu {
    padding: 0 0 6px 0;
    border-radius: 0 0 10px 10px;
}

.popup decoration {
    border-radius: 10px;
}

.background .popup decoration {
    border-radius: 0 0 10px 10px;
}

.popup  {
    background-color: transparent;
}
Hint - if you add this code block to the file ~/.config/gtk-3.0/gtk.css it will apply to whatever theme you use. It works quite well across a large variety of themes - not just Mint X. Create this file if it doesn't exist. After making edits log off and back on to ensure it's being applied to all applications.
For custom Nemo actions, useful scripts for the Cinnamon desktop, and Cinnamox themes visit my Github pages.
Mick-Cork
Level 3
Level 3
Posts: 190
Joined: Sun Mar 23, 2014 10:10 pm
Location: West Cork & London

Re: Minor theme edits

Post by Mick-Cork »

smurphos wrote:
Sat Jun 27, 2020 1:19 am
Hint - if you add this code block to the file ~/.config/gtk-3.0/gtk.css it will apply to whatever theme you use. It works quite well across a large variety of themes - not just Mint X. Create this file if it doesn't exist. After making edits log off and back on to ensure it's being applied to all applications.
hi again Smurphos, that (for a different reason to the OP) is an interesting bit of info. Does LM call this file after it's loaded any/all other theme CSS files, and can any theme rules be added to this file. If so then CSS elements could be repeated here, but with new/different properties, and take precedence. The reason I'm musing on this is if that's the case it's only a small step away from having an app that could make it easier for users to change theme style elements via a GUI. And in a non-destructive way.

Or, the LM team could feasibly add something to the OS that builds the functionality directly into LM.

Hmmm?
User avatar
smurphos
Level 17
Level 17
Posts: 7132
Joined: Fri Sep 05, 2014 12:18 am
Location: Britisher
Contact:

Re: Minor theme edits

Post by smurphos »

Yep, this file over-rides the theme and also any .css embedded into applications (which can also be set by the application to over-ride the theme).

It's already used in Cinnamon to over-ride certain theme characteristics. The ability to adjust scrollbar width from the Themes GUI in Cinnamon works by writing to that file. However I don't think it would work for changing colours wholesale - for example the Mint Green #8fa876 occurs in 116 places in the Mint-Y-Dark GTK theme. That's a lot of lines to over-ride. Also a lot of the colours in Mint Y are in png image assets that would need to be rebuilt from source on any color switch.

I saw your post about an Oomox like GUI for Mint-Y - I did mean to respond, but forgot. It's certainly possible in principle. The bones are already in place in the Mint-Y source code - at the moment it's a set of python scripts that build all the colour variations from a single set of scss sourcecode. It basically just needs some tweaking and a GUI built around those scripts and you could have an app that could make personalised Mint-Y versions.
For custom Nemo actions, useful scripts for the Cinnamon desktop, and Cinnamox themes visit my Github pages.
Mick-Cork
Level 3
Level 3
Posts: 190
Joined: Sun Mar 23, 2014 10:10 pm
Location: West Cork & London

Re: Minor theme edits

Post by Mick-Cork »

smurphos wrote:
Sat Jun 27, 2020 9:26 am
Yep, this file over-rides the theme and also any .css embedded into applications (which can also be set by the application to over-ride the theme).

It's already used in Cinnamon to over-ride certain theme characteristics. The ability to adjust scrollbar width from the Themes GUI in Cinnamon works by writing to that file. However I don't think it would work for changing colours wholesale - for example the Mint Green #8fa876 occurs in 116 places in the Mint-Y-Dark GTK theme. That's a lot of lines to over-ride. Also a lot of the colours in Mint Y are in png image assets that would need to be rebuilt from source on any color switch.

I saw your post about an Oomox like GUI for Mint-Y - I did mean to respond, but forgot. It's certainly possible in principle. The bones are already in place in the Mint-Y source code - at the moment it's a set of python scripts that build all the colour variations from a single set of scss sourcecode. It basically just needs some tweaking and a GUI built around those scripts and you could have an app that could make personalised Mint-Y versions.
Thanks for the clarification Smurphos. I can see a way around over-riding multiple CSS colour statements but also see what you mean about the png files, that latter aspect does put a spanner in my initial thoughts. I will continue to muse on it though :)

I might also delve a bit further into Oomox, just to satisfy my own curiosity, see if it takes me anywhere.
mfreeman
Level 3
Level 3
Posts: 179
Joined: Thu Jan 21, 2010 3:11 am

Re: Minor theme edits

Post by mfreeman »

smurphos wrote:
Sat Jun 27, 2020 1:19 am
Hint - if you add this code block to the file ~/.config/gtk-3.0/gtk.css it will apply to whatever theme you use. It works quite well across a large variety of themes - not just Mint X. Create this file if it doesn't exist. After making edits log off and back on to ensure it's being applied to all applications.
You are my all-time hero! That is PERFECT! My Linux Mint system is exactly how I want it now! And I learned a lot, too! Thank you so much!!!
Post Reply

Return to “Themes, Icons, & Wallpaper”