ElkArte Community

Elk Development => Theme development => Topic started by: emanuele on June 18, 2016, 06:20:38 pm

Title: 1.1 default theme (Light variant) colors
Post by: emanuele on June 18, 2016, 06:20:38 pm
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
Title: Re: 1.1 default theme (Light variant) colors
Post by: niloc on June 21, 2016, 08:32:15 am
Wow, this is very useful! :) Thanks!
Title: Re: 1.1 default theme (Light variant) colors
Post by: Vekseid on June 21, 2016, 12:06:57 pm
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.
Title: Re: 1.1 default theme (Light variant) colors
Post by: hartiberlin on January 23, 2018, 06:06:17 pm
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.
Title: Re: 1.1 default theme (Light variant) colors
Post by: emanuele on January 23, 2018, 09:23:51 pm
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.

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.
Title: Re: 1.1 default theme (Light variant) colors
Post by: Jorin on January 24, 2018, 07:12:27 am
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.  :(
Title: Re: 1.1 default theme (Light variant) colors
Post by: Ruth on January 24, 2018, 02:50:30 pm
See here, Jorin: https://www.elkarte.net/community/index.php?topic=3969.msg28316#msg28316
Title: Re: 1.1 default theme (Light variant) colors
Post by: Jorin on January 24, 2018, 03:04:04 pm
No, that's not what I meant.  :(
Title: Re: 1.1 default theme (Light variant) colors
Post by: hartiberlin on January 24, 2018, 07:27:36 pm
Hmm, Jorin, canĀ“t you scan your old messages over here ?
https://www.elkarte.net/community/index.php?action=profile;area=showposts;sa=topics;u=141

How can one search by the way the best way after keywords on his own posts ?
Title: Re: 1.1 default theme (Light variant) colors
Post by: hartiberlin on January 24, 2018, 07:38:25 pm
Is it this topic ?
https://www.elkarte.net/community/index.php?topic=3160.0
Title: Re: 1.1 default theme (Light variant) colors
Post by: emanuele on January 24, 2018, 10:36:36 pm
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
Title: Re: 1.1 default theme (Light variant) colors
Post by: Jorin on January 25, 2018, 07:01:53 am
Oh yes! *lol*

Wait... Didn't I asked for this feature once? Damn, I can't find it...  ;)
Title: Re: 1.1 default theme (Light variant) colors
Post by: Jorin on January 25, 2018, 07:03:30 am
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
Title: Re: 1.1 default theme (Light variant) colors
Post by: Zioclive on February 16, 2019, 02:57:26 pm
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  :)

Title: Re: 1.1 default theme (Light variant) colors
Post by: Spuds on February 17, 2019, 06:56:26 pm
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.
Title: Re: 1.1 default theme (Light variant) colors
Post by: Zioclive on February 18, 2019, 07:38:37 am
Perfect Thanks  :)