News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

How to change color in main_content?

Started by Shades., January 22, 2022, 07:47:12 AM

Previous topic - Next topic

Shades.

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:)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Shades.

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);
}
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

TwitchisMental

#2
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 - Adobe Color is a useful resource for finding color palettes. (Basically a set of 5 colors that work with each other)

FireFox 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 - 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.

Shades.

#3
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.

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)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Shades.

Still have a long ways to go but here is what I got so far...
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Diego Andrés


SMF Tricks - Free & Premium Responsive Themes for SMF.

Shades.

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 if anyone wants to check it out. And if you spot anything I missed and need to fix let me know thanks! 8)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

TwitchisMental

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 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.

Shades.

Thank you! :)

Decided to change the text color cause there was a little bit too much orange going on lol! 8)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Steve

DO NOT pm me for support!

Advertisement: