Here is what to know about ElkArte, and I'll say this is generally true, except when its not.
Themes are all in the themes directory, each theme in their own folder, what ships with ElkArte is in the default folder. The css files are in the css directory of that theme, so themes/default/css
Theme structure, which is margin, padding, border size, shadows, font size, menus, button size, etc are all in the css directory, for the default this is themes/default/css. These files are index.css, admin.css, etc
Theme colors including font, buttons, background, border, etc etc are in variant files. In each theme css directory you will find one or more _xxx "variant" directorys. For the default that is themes/default/css/_light and themes/default/css/_besocial In those directories you will find index_light.css, admin_light.css, etc Its these files that set the color for the theme.
Lastly you can add one file, called custom.css this is a file that is not included but that you can place in the themes base css directory, again for the default theme that would be themes/default/css In that file you can add your custom css rules and they will "overwrite" any of the other theme values. You can place structure and color values here and have them take effect without having to mess around with the actual theme files. This allows for easy overrides and easy upgrades should a theme be updated.
I'm not familiar with all the details of the clean theme, so asking for some help from that themes author in its thread would be a good idea. But to give you something to try, create a file called custom.css and place it in themes/clean-1/css and in that file add
body {
background: #000000;
color: #ffffff;
}
thats a rather boring black background with with white text just for an example. If I recall clean was done in scss as well which should make creating your own variant easier, but again ask the author in that thread.
If your not lost yet, its time for icons. Most all icons in the system are SVG and follow the same folder layout as the CSS files, so you will find icons_svg.css in the base and then icons_svg_besocial.css in the variant. You can add new ones to your custom.css file to overwrite the existing ones.
You can tweak the colors of the existing ones, or replace them with new SVG ones that you find. Adding new ones is not difficult but you must convert them to SVG data urls which is not difficult but takes a little learning. The board icons are all defined in the .i-board-xyz::before definitions.
To simply tweak the color for example, find
.i-board-off::before
in your themes/clean-1/css/icons_svg.css That is the no new messages board icon, it will look like
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23aeaeae' viewBox='0 0 32 32'%3E%3Cpath d='M26 30l6-16H6L0 30zM4 12L0 30V4h9l4 4h13v4z'/%3E%3C/svg%3E")
its that %23aeaeae that defines the color (the fill in svg terms) ... and specifically its the
aeaeae that you want to change to a valid hex color, so a pure orange would be
ffa500 so
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffa500' viewBox='0 0 32 32'%3E%3Cpath d='M26 30l6-16H6L0 30zM4 12L0 30V4h9l4 4h13v4z'/%3E%3C/svg%3E")
If you don't like any of the SVG ones you can also suppress them and convert back to png/jpg files as well.
Spuds, thank you so much. This is perfect!
If you need any help in the future, I am the creator of the Clean theme and you can get support for it in this topic: https://www.elkarte.net/community/index.php?topic=5716
(BTW, I would love to see your forum using my theme when it's ready :) )
Hi TaliaJoy,
Thanks for your work, I really like your theme. I've create a secondary theme that is available to members based on your theme. The default theme of the site is your standard theme and you can see it here:
https://www.carltonsc.com/
The "blue" theme that was created using your theme can be seen in the attached JPG.
Once again, thanks for sharing your work... :)
I know this is very late, but I just wanted to say it really makes my day in a very special way to see my theme being used and adapted :)