ElkArte Community

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

Title: 1.1 default theme (Light variant) colors
Post by: emanuele on June 18, 2016, 12: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, 02: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, 06:06:57 am
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, 12:06:17 pm
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.
Title: Re: 1.1 default theme (Light variant) colors
Post by: emanuele on January 23, 2018, 03: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.

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.
Title: Re: 1.1 default theme (Light variant) colors
Post by: Jorin on January 24, 2018, 01: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, 08:50:30 am
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, 09:04:04 am
No, that's not what I meant.  :(
Title: Re: 1.1 default theme (Light variant) colors
Post by: hartiberlin on January 24, 2018, 01: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, 01: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, 04:36:36 pm
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
Title: Re: 1.1 default theme (Light variant) colors
Post by: Jorin on January 25, 2018, 01: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, 01:03:30 am
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
Title: Re: 1.1 default theme (Light variant) colors
Post by: Zioclive on February 16, 2019, 08:57:26 am
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, 12: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, 01:38:37 am
Perfect Thanks  :)
Title: Re: 1.1 default theme (Light variant) colors
Post by: JesusGod-Pope666.Info on October 12, 2020, 06:37:47 am
So let me get this straight, we can make CSS Files in themes and change them, and because they are loaded last, it should fix whatever is in them. Is there a specific thing they need to be named as? Or how does it work.
Do I just make an CSS file and put it in the folder or...
Well...
Title: Re: 1.1 default theme (Light variant) colors
Post by: darrenjcleaver on May 15, 2021, 04:35:26 am
Hi all

I am unsure it was best to start a new post. But I am also wanting to make some slight modifications to the default theme.


    Browse the templates and files in this theme.
    Edit this theme's stylesheets.
    Copy a template from the theme this is based on.

I have no idea where to start  :-\
Title: Re: 1.1 default theme (Light variant) colors
Post by: Spuds on May 15, 2021, 06:15:27 pm
Since its always nice to have the default theme to fall back on, my thoughts would

1) Copy the default theme to a new theme, give it a name like test
2) Create a test user and set them to use that theme so you can test w/o causing issue to your admin account
3) Edit CSS (stylesheet for fonts, size, color, etc)  or Template (structural changes like where things are located on a page)
4) When done, set the forum to the new theme.
Title: Re: 1.1 default theme (Light variant) colors
Post by: ahrasis on May 16, 2021, 12:53:10 am
Or you can just create css variant without a need for creating new (copied) theme at all.

Last time I did this using my addon, but I haven't tested its compatibality with 1.1.7.