Hello fellow Arras Theme User. So you want to change some colors on you freshly installed Arras Theme 1.4.2 and you don't know how? Well, here's a quick tutorial. I'll try to be as thorough as I can but I can miss a bit. Don't be afraid to ask.

This tutorial is based on the default.css. If you want to make a change do it to the user.css, it's an empty css which will 'overwrite' the default.css. So there's actually no need to fiddle with the default.css. In most parts I'll simply give the part which you can put in the user.css, so if you see .widgetcontent { color: #fff; } you can copy/paste that one into your user.css and change the colorcode to your liking. You can combine parts of course. If you see .widgetcontent { color: #fff; } and .widgetcontent { background: #fff; } you can combine it to .widgetcontent { color: #fff; background: #fff; }

There are parts which require some more tweaking but I'll put up an explanation why.

Question numbero uno, what colorcode is red (or yellow, or green)? I'm a lazy bastard, so here's a link.

This is the basic 'index' of the tutorial. I've added 14. Quick preview & 15. Older entries/Newer entries, which are not on the image

And yes, I have created a new install for this tutorial, hence the Arras Tutorial title of the blog

The forum will crop this beyond recognition so here's the url to the 'full' image

http://www.watkijkikoptv.info/mp3/Arras_Tutorial.png

1. Header Background

Header background

#header                    { background: #fff; }

Advanced: I want to have have a header which is 980px wide (like the page)

#header                    { background: none; }
#branding                    { background: #fff !important; }

2. Navbar

This one is a hoot to figure out

Navbar

#nav                    { background: #fff; } 

Advanced: I want to have have a navbar which is 980px wide (like the page)

#nav                    { background: none; }
#nav-content                     { background: #fff; } 

Color of links/text on the visible bar

.sf-menu a                 { color: #fff; }

Color of links/text on the dropdowns

.sf-menu li ul a                 { color: #fff !important; } 

3. Blogname

.blog-name a:link, .blog-name a:visited    { color: #fff !important; }

(Advice, don't display the blog description)

.blog-description                { display: none; }

4. Header Border

header                    { border-bottom: 5px solid #fff; }

Advanced: I want to have have a header border which is 980px wide (like the page)

#header                    { border-bottom: none; }
#branding                    { border-bottom: 5px solid #fff; }

5. Searchbar

Border around the searchbar

#searchbar                { border: 4px solid #fff; }

Color of the searchbar

#searchbar                { background: #fff; }

Color of the searchform (where people put in the sh*t what they are looking for)

.searchform .s                { background: #fff; }

6. Widgetcontent

Color of the border

.widgetcontent                { border: #fff; }

Color of the text

.widgetcontent                 { color: #fff; }

Color of the links in the text.
This one isn't actually there yet, but you can add it quite easily.

.widgetcontent a                { color: #fff; }

Color of the background

.widgetcontent                { background: #fff; }

7. Widgettitle & Border

Color of the border

.widgettitle                { border: #fff; }

Color of the title.

.widgettitle                { color: #fff; }

Color of the background

.widgettitle                { background: #fff; }

8. Main slideshow

Title

.featured-entry .entry-title        { color: #fff; } 

Description

.featured-entry .entry-summary        { color: #fff; } 

Border

.featured                    { border: 5px solid #fff; }

"Black bar"

.featured-entry                { background: #fff; }

9. Color of title

.home-title                { color: #383331; }

The border under it.

.home-title                { border-bottom: 1px solid #fff; }

Note: You can add a background color here, it will give a colored bar.

.home-title                { background: #fff; } 

You might want to add this one too if you do this

.home-title                { width: 645px; }

You can even put a border around the bar.

.home-title                { border: 1px solid #fff; }

You might want to add this one too if you do this

.home-title                { width: 643px; }

(You probably noticed the 643px vs 645px from above, this is because of the 1px border on both the left and right side of the bar.)

10. Nodes

Entry title

.posts-default .entry-title a:link, .posts-default .entry-title a:visited    { color: #fff; }

Entry summary

.posts-default .entry-summary        { color: #fff; } 

Border around the image

.posts-default .entry-thumbnails-link    { border: 5px solid #fff; }

'Black bar'

.posts-default .entry-meta        {  background: #fff; }

Date on the 'black bar'

.posts-default .published            { color: #fff; }

Number of comments on the 'black bar'

.posts-default .entry-comments     { color: #fff; }

11. Main background

#main                    { background: #fff; }

12. News Section (if you choose per line)

Color of the category the posts are in.

.posts-line .entry-cat        { color: #fff;}

Advanced: I do not want the category to be shown there. (Note: if you do this, the entry titles will shift to the left, so there won't be a blank space)

.posts-line .entry-cat        { display: none; }

Entry titles

.posts-line a:link, .posts-line a:visited    { color: #fff; }

Color of the comments

.posts-line .entry-comments    { color: #848485; }

Advanced: I do not want to show the (the amount of / or lack of) comments

.posts-line .entry-comments    { display: none; }

13. Footer

Color of the entire footer

#footer                    { background: #fff; }

Color the text

#footer                     { color: #fff; }

Color of 'About arras.theme

.arras                    { color: #fff !important; }

This footer is a widgetspace too. You can change the appearance of the widget like part 7. of this turorial, just add #footer in front.
Example:

#footer .widgetcontent                { background: #fff; }

14. Quick preview

Entry title

.posts-quick .entry-title a:link, .posts-default .entry-title a:visited    { color: #fff; }

Entry summary

.posts-quick .entry-summary    { color: #fff; } 

Border around the image

.posts-quick .entry-thumbnails    { border: 5px solid #fff; }

The things beneath have to be activated in the theme options, do this only if you are going to change the size of the thumbnails in the news section. These are by

default too small to handle date + comments. Make them as big as the normal quick preview size.

'Black bar'

.posts-quick .entry-meta    {  background: #fff; }

Date on the 'black bar'

.posts-quick .published    { color: #fff; }

Number of comments on the 'black bar'

.posts-quick .entry-comments { color: #fff; }

Read More text

.posts-quick .quick-read-more a:link, .posts-quick .quick-read-more a:visited    { color: #fff; }

Read More Background

.posts-quick .quick-read-more a:link, .posts-quick .quick-read-more a:visited    { background: #fff; }

Read More border

.posts-quick .quick-read-more a:link, .posts-quick .quick-read-more a:visited    { border: 1px solid #fff; }

15. Older/Newer Entries

Color of the older/newer entries (text)

.navigation a { color: #fff; }

Color of the older/newer entries (background)

.navigation a { background: #fff; }

Color of the older/newer entries (border)

.navigation a { border: 1px solid #fff;  }

EXTRA!

"I want the color to change when hovering the cursor of their mouse over something."

Yeah, me too. Just add :hover.

See this example:

.widgetcontent                { background: #000; }
.widgetcontent:hover                { background: #fff; }

Normally the widget in this example has a black background, when somebody moves their mouse over it it will change to white. You can virtually add this to any element.

But remember kids, less is sometimes better.

Last edited by extatix (2010-03-21 07:24:01)