Skip to main content ↑ ↓
Dark variant of default theme Started by radu81 · · Read 9357 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Dark variant of default theme

I am thinking to create a dark variant of the default style used in Elkarte. I am not sure which one, but probably I'll go fo BeSocial variant. I think the best way should be to copy the actual variant and use a custom.css file. I am wondering which is the best/quicker way to do this? Using the browser inspector and adding changes to custom.css or there is better way to start? Thank you.
sorry for my bad english

Re: Dark variant of default theme

Reply #1 –

I can't think of any other better way either except running your forum on a localhost might help you to achieve that a little faster.

And actually, if create new variants from admin panel[1]become a feature, we do not have to manually copy the actual variant.
1 This was previously discussed in here: http://www.elkarte.net/community/index.php?topic=2225.0↵

Re: Dark variant of default theme

Reply #2 –

Thanks for the info @ahrasis‍ I thought copying a variant was possible with one click from ACP. I'll try and let you know how it works.
sorry for my bad english

Re: Dark variant of default theme

Reply #3 –

It's not possible to simply copy, because the variants are defined in index.template.php, so you have at least to edit it in order to add the name of the new variant...
Bugs creator.
Features destroyer.
Template killer.

Re: Dark variant of default theme

Reply #4 –

I already covered adding the new variant to index.template.php in the packed addon. It should work when new variant is created. It also should cover version 1.1. Do report if it doesn't work or caused error(s) in any way.

Re: Dark variant of default theme

Reply #5 –

Is there somewhere a template Editor for Elkarte ?
Or how is it best done ?

I just only want to have different colors on the BeSocial Default theme...
Also the text color should be darker and not so light.... I always have problems to read the small not fully black text
on the grey background... not much contrast....I want to change this....

Many thanks. Regards, Stefan.

Re: Dark variant of default theme

Reply #6 –

The best option is to use a custom css file, inspect the css code using the inspector included into your browser, change the css into inspector window, and if you like the results copy and paste that code into your custom css file.
sorry for my bad english

Re: Dark variant of default theme

Reply #7 –

Quote from: radu81 – The best option is to use a custom css file, inspect the css code using the inspector included into your browser, change the css into inspector window, and if you like the results copy and paste that code into your custom css file.
Thanks for the info. Can this be done via the latest Firefox ?
Could you suggest a Youtube tutorial video about this ?
Many thanks.
P.S. How do I call then this custom CSS file up, or how does Elkarte know, that it should use this one ?

Re: Dark variant of default theme

Reply #8 –

The custom.css or custom_{name-of-the-variant}.css have t obe created respectively in the theme directory and the variant directory via ftp.

 emanuele feels a little guide would be very, very useful for custom.css stuff....
Bugs creator.
Features destroyer.
Template killer.

Re: Dark variant of default theme

Reply #9 –

Quote from: radu81 – The best option is to use a custom css file, inspect the css code using the inspector included into your browser, change the css into inspector window, and if you like the results copy and paste that code into your custom css file.
Thanks for the info. Can this be done via the latest Firefox ?
Could you suggest a Youtube tutorial video about this ?
Many thanks.
P.S. How do I call then this custom CSS file up, or how does Elkarte know, that it should use this one ?
Quote from: emanuele – The custom.css or custom_{name-of-the-variant}.css have t obe created respectively in the theme directory and the variant directory via ftp.

 emanuele feels a little guide would be very, very useful for custom.css stuff....


So it is basically like a child theme in Wordpress ?
But here you only need to create a new folder and put the custom.css file into it and
then in Admin panel  choose this directory as the "new theme" ?

Re: Dark variant of default theme

Reply #10 –

hmm... sort of, but not quite close.
WP child themes are basically full-fledged themes just built on top of another.
Variants here are more... variants. xD
The only thin that can be changed in variants are the assets (images and css), everything else is taken from the theme itself.

And to create a new variant (unfortunately) still require some code edits (and that's the reason @ahrasis created an addon https://www.elkarte.net/community/index.php?topic=4679.0
Bugs creator.
Features destroyer.
Template killer.

Re: Dark variant of default theme

Reply #11 –

so, it's not only done to create in the default theme css directory a new custom_css folder (for example: _dark)?
Now there are two folder _light and _besocial. I thought I have only to create a new custom folder and in this folder new custom css or copied css - files (renamed like the new folder) an do in this "new" files my changes.
 

Re: Dark variant of default theme

Reply #12 –

You basically need to add the new created variant in the theme index.template.php file too, other than creating its folder in the theme css directory and copy its contents.

My addon CNVE (as referred by @emanuele) should the trick with limitations that are the new created variant is only created to default theme and so far there is no way to delete it via admin control panel. For the first limitation, you can install a new theme (based on that default) after you created the new variant.

For the later, you will have to use ftp or ssh to access and delete the new created variant folder and in the theme index.template.php manually.