How to change background colors in parabola

[Mark]

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

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.

body {
background: black;
}

If we want to change the background of the main navigation bar we would find:

#navigation {
 
}

and change to:

#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]

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]

All these heading use the tag "h3.heading" so you will want tofind tat in user.css
find this

h3.heading  {
 
}

change to

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]

thanks! Looking good now - I just needed an eye for the details ;-)

 

[Anna]

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?

 

[Mark]

HI Anna, do you have URL so we can see what you have (or not done)

 

[Anna]

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]

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

 

[Anna]

OK, continue to struggle.... As far as I can see I have done exactly the same as I did with the lists before:
body {background: #A0A0A0 url (http://www.findatarotreader.com/skins/parabola/img/tarotbg2.jpg) repeat fixed;
}
My image is uploaded under the following:
/findatarotreader.com/public_html/skins/parabola/img/
Can someone please proofread it with some sharper eyes because this is killing me!

 

[Mark]

looks like its working fine

 

[cajkan]

CSS is the key to make great designs

 

[Anna]

I blame cashe! Thanks for the help!