Custom.css Questions

TheStrangeAttractor

I am trying to customize my theme and have ran in to a few problems. I've posted a picture below showing the areas I want to change.

A. I want to change the color/ padding of this title bard
B. I want to add a background box for this category panel
C. I want to change the color of the discussion container

I also want to look into adding backgrounds for the discussion/ profile pages and changing the color of the calendar.

The problem is my theme doesn't seem to respond to any of the changes I make in the custom.css file. I've made sure I'm in the right directory, and I am editing a custom copy of the default theme. Is there anywhere that gives a run down of the custom.css file, or is there some sort of simplified theme customization plugin that I have yet to hear about?

Either way you guys have been more than helpful thus far. I'm not in any rush to hear back.

R_J

If you don't see any effects, it might also be a browser caching issue. Use the private mode of your browser and visit your page to see if that has been a problem.

If you want to customize your forum, you should learn about your browser tools. All modern browsers have a right click option like "Inspect element" which would help you find the correct name of the class you are searching for. You should look up tutorials for that.

A) The background for the title bar could be changed by styling #Head
B) The panel can be styled by styling #Panel
C) Styling the #Content isn't equally easy, because it consists of different elements which all have their individual stylings.

TheStrangeAttractor

@R_J again ftw. Browser's incognito mode showed a mess of changes to my theme. a success!

Caylus

To add to R_J's answer: you don't have to use incognito mode, you can also clear the cache in other ways (for example in Chrome ctrl + f5 clears the cache). I'd recommend searching "clearing cache [insert your browser here]"

Additional complications that you might run into: Some elements are styled with the !important CSS tag, which means they're really hard to change.

If you run into that problem, you have to use the !imporant tag yourself, and be very specific, because the more specific instruction takes precedence over less specific ones (div {display:block !important;} gets overwritten by div.ExampleClass {display:none !important;}) for example.

I believe it's best practice not to use !important tags yourself unless absolutely necessary.