Skip to main content ↑ ↓
1.1 default theme (Light variant) colors Started by emanuele · · Read 28359 times 0 Members and 3 Guests are viewing this topic. previous topic - next topic

1.1 default theme (Light variant) colors

For testing I set up a very quick&dirty theme with just a different "main" color from the Light variant, so I thought it may be useful to track here the main shades of green present so that a simple search&replace can allow anyone to change the color of their theme.
Those I found are:
Code: [Select]
#5ba048 <= buttons background
#4b863c <= buttons background
#3d6e32 <= buttons background(hovers)
#27A348 <= used don't remember where and also in the form %2327A348 in the SVG
#377828 <= links text color
these are the 5 colors that characterize the Light variant in ElkArte 1.1.

Of course there are other colors (the various shades of grey and probably few others), but... well, if you spot them feel free to add to the topic. ;D
Bugs creator.
Features destroyer.
Template killer.

Re: 1.1 default theme (Light variant) colors

Reply #1 –

Wow, this is very useful! :) Thanks!
Facta, non verba.

Re: 1.1 default theme (Light variant) colors

Reply #2 –

One that comes to mind is the 'fake icon' - the online/offline circle that you see in places like next to 'Send Message'. It's not an image any longer, but a gradient. >_>

Trying to match it to Elkarte's greens did not look well.

Re: 1.1 default theme (Light variant) colors

Reply #3 –

Quote from: emanuele – For testing I set up a very quick&dirty theme with just a different "main" color from the Light variant, so I thought it may be useful to track here the main shades of green present so that a simple search&replace can allow anyone to change the color of their theme.
Those I found are:
Code: [Select]
#5ba048 <= buttons background
#4b863c <= buttons background
#3d6e32 <= buttons background(hovers)
#27A348 <= used don't remember where and also in the form %2327A348 in the SVG
#377828 <= links text color
these are the 5 colors that characterize the Light variant in ElkArte 1.1.

Of course there are other colors (the various shades of grey and probably few others), but... well, if you spot them feel free to add to the topic. ;D
Where can these be set ? Must this be set inside any CSS file ?

By the way, Is there any theme where a user can change the color palette or background color
on the fly, so if he likes a more darker green or darker text color, so that he can set this himself ?
Many thanks.

Re: 1.1 default theme (Light variant) colors

Reply #4 –

Yep, any CSS would do.
As usual, I'd suggest to setup a custom.css (or custom_{name-of-the-variant}.css)  to make your life easier.

Quote from: hartiberlin – By the way, Is there any theme where a user can change the color palette or background color
on the fly, so if he likes a more darker green or darker text color, so that he can set this himself ?
Not that I know.
Bugs creator.
Features destroyer.
Template killer.

Re: 1.1 default theme (Light variant) colors

Reply #5 –

I offered my custom.css for the light variant somewhere in this board. With this file a color change is easy and I explained what has to be edited. But I can't find it anymore.  :(

Re: 1.1 default theme (Light variant) colors

Reply #7 –

No, that's not what I meant.  :(

Re: 1.1 default theme (Light variant) colors

Reply #10 –

Quote from: Jorin – I offered my custom.css for the light variant somewhere in this board. With this file a color change is easy and I explained what has to be edited. But I can't find it anymore.  :(
I know the feeling... a "search among uploaded files" would be nice, isn't it? :P
Bugs creator.
Features destroyer.
Template killer.

Re: 1.1 default theme (Light variant) colors

Reply #11 –

Oh yes! lol

Wait... Didn't I asked for this feature once? Damn, I can't find it...  ;)

Re: 1.1 default theme (Light variant) colors

Reply #12 –

Quote from: hartiberlin – Is it this topic ?
https://www.elkarte.net/community/index.php?topic=3160.0

Yeah, could be. Maybe I should offer the file a second time!  ;D

Re: 1.1 default theme (Light variant) colors

Reply #13 –

Well, I'm using a 1.5 light variant :BeSocial.

I think it's nice and quite easily adaptable to various color style using the custom_besocial.css file.

Nevertheless most of my users are over 50 and most of them rarely use a desktop computer, actually they are basically whattsapp users and whattsapp addicted.
Due to this I'm trying to make my light variant a bit more readable.
In my opinion the submit button's fonts  are too small and I would like two enlarge the font's dimensions.

There is a way for doing it without messing up with the index.css file and achieve the same result changing only the custom_besocial.css?
Actually I've found a solution modifying the font-size value at  line  248:
Code: [Select]
input, .input_text, select, button {
	font-size: .99em;
}
of the index.css file but I would like to use and change only the custom_besocial.css for future compatibly .
Thanks  :)

Last Edit: February 18, 2019, 05:49:32 am by Zioclive
 

Re: 1.1 default theme (Light variant) colors

Reply #14 –

You should be able to simply copy that code to your custom css file and it will work.  The css files are loaded in order index then variants then custom ... the last loaded files declarations will take precedence over the others.