Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: Shades. on January 22, 2022, 07:47:12 AM

Title: How to change color in main_content?
Post by: Shades. on January 22, 2022, 07:47:12 AM
This is my first attempt to create a theme and change colors without using a mod (color changer) in 2.1: :P 

I have used browser inspect tool from several different browsers (all seem the same to me) and I have looked under the main_content_section in index.css but I can't figure out how to change the background color of that table/section. (see attachment)

FYI, trying to create a dark theme, if you couldn't tell lol! O:)
Title: Re: How to change color in main_content?
Post by: Shades. on January 22, 2022, 08:29:00 AM
Finally found it!

Quote/* Styles for the general looks of the theme.
------------------------------------------------------- */

/* Box-shadow only on this one. */
#wrapper {
   clear: both;
   background: #2bff00;
   border: 1px solid #b8b8b8;
   border-radius: 8px;
   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.14);
}
Title: Re: How to change color in main_content?
Post by: TwitchisMental on January 22, 2022, 12:52:51 PM
Quote from: Shades. on January 22, 2022, 08:29:00 AMFinally found it!

Quote/* Styles for the general looks of the theme.
------------------------------------------------------- */

/* Box-shadow only on this one. */
#wrapper {
 clear: both;
 background: #2bff00;
 border: 1px solid #b8b8b8;
 border-radius: 8px;
 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.14);
}
You will most likely want to change the background for #inner_section aswell.

By default it is found on line 3815 for the index.css.

I usually make it a separate class and put it in my custom.css file instead. That way I am just editing that specific class and not the rest.

So something like -

#inner_section {
    background: #000;
}


Here are some other useful resources for you :).  Can't wait to see you submit your first theme here :).

Adobe Color (https://color.adobe.com/explore) - Adobe Color is a useful resource for finding color palettes. (Basically a set of 5 colors that work with each other)

FireFox Web Developer (https://addons.mozilla.org/en-US/firefox/addon/web-developer/) - This is a nifty plugin that makes it quick and easy to check your html and css for validation. It also allows you to do many other things.

Colorzilla (https://addons.mozilla.org/en-US/firefox/addon/colorzilla/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search) - This is another nifty FireFox plugin. This one allows you to grab any color from any part of a website and give you the hex code or rgb code for it.
Title: Re: How to change color in main_content?
Post by: Shades. on January 22, 2022, 04:29:07 PM
Thanks I will definitely check those links out! :)

I did a few themes several years ago but they were for earlier version of 2.0 and I've been out of practice for a while so I'm learning all over again but this is my first 2.1 theme doing on my own not cheating with mods lol! :P  :o  8)

I need some good dark background images to use if anyone has any. Preferably dark, metal or motorcycle related. The theme will be a replica of my current web site which is a based off of Crip's 2.0 BR Finale Theme (https://custom.simplemachines.org/index.php?theme=2393).

This one will probably be for my use only but if I get it all worked out I'm going to do some more. ;)

All thoughts and ideas greatly appreciated! 8)
Title: Re: How to change color in main_content?
Post by: Shades. on January 22, 2022, 04:47:13 PM
Still have a long ways to go but here is what I got so far...
Title: Re: How to change color in main_content?
Post by: Diego Andrés on January 22, 2022, 05:03:56 PM
Looks very og, I like it
Title: Re: How to change color in main_content?
Post by: Shades. on January 22, 2022, 08:58:12 PM
Quote from: Diego Andrés on January 22, 2022, 05:03:56 PMLooks very og, I like it

Thanks! :)

Although the theme is not complete (stills have lots to do), I have it installed and set as default on my Live Site (https://bikerhound.com) if anyone wants to check it out. And if you spot anything I missed and need to fix let me know thanks! 8)
Title: Re: How to change color in main_content?
Post by: TwitchisMental on January 22, 2022, 10:01:18 PM
Quote from: Shades. on January 22, 2022, 08:58:12 PM
Quote from: Diego Andrés on January 22, 2022, 05:03:56 PMLooks very og, I like it

Thanks! :)

Although the theme is not complete (stills have lots to do), I have it installed and set as default on my Live Site (https://bikerhound.com/) if anyone wants to check it out. And if you spot anything I missed and need to fix let me know thanks! 8)
It looks great :D.
Title: Re: How to change color in main_content?
Post by: Shades. on January 22, 2022, 10:44:09 PM
Thank you! :)

Decided to change the text color cause there was a little bit too much orange going on lol! 8)
Title: Re: How to change color in main_content?
Post by: Steve on January 23, 2022, 09:03:47 AM
I like it as well. Very nice.