How to change background colors in parabola

Mark

Administrator
Staff member
This is a really basic quick start guide to modify colors in parabola skin.


First login to admin -> Settings -> Skins and categories

Click "edit" int he parabola box.

click on user.css to edit that template. We use user.css to ensure our changes are not overwritten when upgrading.

I will outline some basics, all the changes work the same so you will no doubt see a pattern.

How to chane the main background color?

this is defined in the "body", so whe you open user.css template you will see
Code:
body {
 
}
this means changes nothing, and use the colros as defined in screen.css.

So if we want a black background, you would simple add this.
Code:
body {
background: black;
}
If we want to change the background of the main navigation bar we would find:

Code:
#navigation {
 
}
and change to:
Code:
#navigation {
background: red;
}
This same pattern is applied to all elements in parabola, you can use "firebug" or any modern browsers like chrome and opera to show the class or ID that controls the style of any element. Nearly every element is already in the user.css file so go ahead and starting adding definitions to make your list your own.

Learn some CSS basics: http://www.w3schools.com/css/

Feel free to ask any questions.
 

Anna

Member
Thank you! Will play around with this! I assume I can use more nuances in colorscheme as well and using html code then?

Where do I change the color of the headers of the different plugins? I tried myself on featured members - but only thing I managed was to add the text background: green ^^ LOL
 

Basti

Administrator
Staff member
All these heading use the tag "h3.heading" so you will want tofind tat in user.css
find this
Code:
h3.heading  {
 
}
change to
Code:
h3.heading  {
    background: #f00 url(img/bg9.png) bottom left repeat-x;
}
the img code in the background is for the gradient look, #f00 is the color code
 

Anna

Member
OK, I have created a new toplist for a future project of mine and for now as a playground to try out new things on. On this one I have managed to change background and navigation bar. But the sidebar heading and footer. Whatever I try it remains stubbornly blue! And yes it feels like I have triple checked that I have written it all correctly etc.... Thoughts?
 

Anna

Member
http://www.swtortoplist.net . I remembered that I could change it in the screen.css. So sidebarcolor is changed now (but will be darker in the future). But I would love to make a more permanent change in user.css instead. Thats whats not working atm.
 

Basti

Administrator
Staff member
Hey Anna see my latest post here, user.css as also h3.heading class, so you will want to write your sstuff there, like i posted the last time
 
Top