Skip to main content ↑ ↓
How do I edit theme colours? (Im not very good) Started by Cheese22 · · Read 9022 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

How do I edit theme colours? (Im not very good)

Hey, I am currently using ElkArte for my Game Server Forum, but the colour of our brand doesn't match the template we use and having little to no knowledge about web stuff, I was wondering if anybody knew where I need to go to find the file that has the web colour codes and things like that. IM not sure what it is called. I'm only 16, so im not a super smart web coder like most of you guys. Haha.

This is my forum that im trying to personalize:
https://parallaxnetworks.hexn.co/forums/index.php

The background uses blue, but I wanted to change it to this:
Background:
#FFFFFF or (255,255,255)
Header:
#D9534F or (217,83,79)
Footer: (The black part)
#D9534F or (217,83,79)
Other things: (like button hover colours and that stuff)
#D9534F or (217,83,79)

If this is the wrong thread for this, please let me know so I can copy and paste it into the correct one.
If someone is willing to do this for me, I would massively appreciate it. Let me know if you need any of my files for it or something.

Much appreciated
-Cheese

Re: How do I edit theme colours? (Im not very good)

Reply #1 –

Looks like a hosted forum. Do you really have access to the css files?

For the
background (around line 61 at "html"),
footer (around line 570 at "#footer_section") and
other things (I think you meant the menu buttons, line 1051 and 1056 at "linktree:hover"): change the values for "background" in the css file:
somewhere at /themes/elk_theme_storm_cloud/css/_grey/index_grey.css

For the header: there you'll have to add some lines to file at the end.
somewhere at /themes/elk_theme_storm_cloud/css/index.css
Code: [Select]
#upper_container {
background: #D9534F;
}
▬|████|▬ This is a Nudelholz! Take it und hau it on the Kopp of a bekloppt Person .... to give you a better Gefühl than vorher.

ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.0.8 FPM

Re: How do I edit theme colours? (Im not very good)

Reply #2 –

Thank you for your reply, but im still having issues finding the correct lines in the index.css file, could you take a look for me, im completely clueless. I don't even know what I should edit it with. (Using Notepad++ right now)
http://www.mediafire.com/file/nj55c6jef55dscs/index.css

Re: How do I edit theme colours? (Im not very good)

Reply #3 –

On Windows notepad++ is a very good choice!   :D

Just open the file and search for "#upper_section", you'll find it at line 122. Place your cursor behind the ";" at line 123, press "Enter" and add "background: #D9534F;". Save the file and upload it to your server. That's it...  ;D
▬|████|▬ This is a Nudelholz! Take it und hau it on the Kopp of a bekloppt Person .... to give you a better Gefühl than vorher.

ElkArte 1.1.x & TP on Apache2.4.48, PHP 8.0.8 FPM

Re: How do I edit theme colours? (Im not very good)

Reply #4 –

I've added this code in, but after uploading the index.css back to the forum, it still looks the same after I refresh the page.
No idea what I'm doing wrong.

Re: How do I edit theme colours? (Im not very good)

Reply #5 –

Hello Cheese22 and welcome. :)

My first suggestion in respect to tweak a theme is to always use a "custom.css", that has several advantages (like no need to find the place to modify in index.css :P).
In your case, what I would do is create a file named custom_grey.css and save it under "themes/elk_theme_storm_cloud/css/_grey/".

The custom_grey.css should then contain something like:
Code: [Select]
html {
    background-color: #FFF;
}
#upper_container {
    background-color: #D9534F;
}
#footer_section {
    background-color: #D9534F;
}
#main_menu .linklevel1.active, #main_menu .listlevel1:hover .active, #main_menu .linklevel1:hover .pm_indicator {
    background-color: #D9534F;
}
I think at least because I'm not exactly sure which pieces you want colored differently.
HTH!
Bugs creator.
Features destroyer.
Template killer.

Re: How do I edit theme colours? (Im not very good)

Reply #6 –

Thank you so much guys for the help, it's now got different colours. :D Although there are still a few changes that I'm missing, like the colour of the bar at the top with all the links on it, and the colour of all the buttons. How do I change those?

Re: How do I edit theme colours? (Im not very good)

Reply #7 –

The menu bar is #menu_nav.
But on top of that, I think I can tell you that using for example chrome (but usually comes with most of the browsers) you can right click on the element you are interested in and select "Inspect", from the window that opens you should be able to identify all the things you need immediately. :D
That's usually faster that having to wait for someone to answer. ;)
Of course certain things may not be as easy as everything else, but we are anyway here to help! :D
Bugs creator.
Features destroyer.
Template killer.

Re: How do I edit theme colours? (Im not very good)

Reply #8 –

Quote from: Mc Fly – On Windows notepad++ is a very good choice!   :D

Just open the file and search for "#upper_section", you'll find it at line 122. Place your cursor behind the ";" at line 123, press "Enter" and add "background: #D9534F;". Save the file and upload it to your server. That's it...  ;D
There is ftp in notepad++ of which you can use to edit files without a need to download / upload.

Re: How do I edit theme colours? (Im not very good)

Reply #9 –

Inspect element works great. Everything is sorted out now. Cheers guys!

Re: How do I edit theme colours? (Im not very good)

Reply #10 –

Great to hear! :D
Bugs creator.
Features destroyer.
Template killer.

Re: How do I edit theme colours? (Im not very good)

Reply #12 –

No.
Bugs creator.
Features destroyer.
Template killer.