Skip to main content
Topic: Asthetic Changes Help Required (Read 1717 times) previous topic - next topic
0 Members and 2 Guests are viewing this topic.

Asthetic Changes Help Required

Hi Everyone,

We've recently migrated to ElkArte and are using the clean-1 theme. I've been reading through the forum trying to figure out how to change the background colour of the forum from white to something else. I'm a newbie to CSS and I've been trawling through the index.css file, but can't find how to do it.

Obviously, Once the background colour is changes, I'll need to change the colour of the text to white as well, but I can't find that setting either.

One final query, and that is Folder icons for the forum list. I'm pretty sure these are not icons in the traditional sense that they're kept in the images folder of the theme because I can't find them. How do I change their "New Post" folder colour from green to say something like Orange?

Sorry for the newbie questions.

Thanks...

Duke

Re: Asthetic Changes Help Required

Reply #1

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

Code: [Select]
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
Code: [Select]
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
Code: [Select]
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.

Re: Asthetic Changes Help Required

Reply #2

Spuds, thank you so much. This is perfect!

Re: Asthetic Changes Help Required

Reply #3

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 :) )

Re: Asthetic Changes Help Required

Reply #4

Quote from: TaliaJoy – 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...  :) 

Re: Asthetic Changes Help Required

Reply #5

Quote from: DukeOfAwesome –
Quote from: TaliaJoy – 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 :)