Re: [1.4.2] Tutorial: How do I change the color of...
#nav .sf-menu a:hover, #nav .sf-menu li:hover, #nav .sf-menu li.sfHover, #nav .sf-menu ul li { background: #fff; }
Please ask questions about Arras on forum, not through mail, thanks.
Arras WordPress Theme Community Forums
Community support for Arras and other WordPress projects
You are not logged in. Please login or register.
Arras 1.5.2-RC2 Now Available: Download Here
Forum Rules: Please ensure that you have clearly read and understood the forum rules before posting.
User Confirmations / Password Reminders: Please check your spam folder before emailing for help if you have not received the confirmation or password reset emails.
Arras WordPress Theme Community Forums → Guides Database → [1.4.2] Tutorial: How do I change the color of...
#nav .sf-menu a:hover, #nav .sf-menu li:hover, #nav .sf-menu li.sfHover, #nav .sf-menu ul li { background: #fff; }
I notice that this CSS thread is for Arras 1.4.2, and I'm using 1.5.0.1 - could this be why some of my CSS isn't working?
I'm trying to achieve several things here, and none seems to work with the code given below each problem:
1) Changing the main content box colour from grey to white:
#wrapper { background: #fff; }
OR
#main { background-color: #ffffff; }
2) Changing the body font colour:
#body {
color:#5E5551;
font-family:'Georgia',sans-serif;
background-color:#ffffff;
}
3) Changing link colour:
a, a:link, a:visited {
color:#D2777C;
text-decoration:none;
}
a:hover {
color:#D2777C;
}
4) Changing colour of blockquote:
#blockquote {
color: #D2777C;
text-align: justify;
}
5) Tweaking the sidebar to match:
.widgetcontent
{
border: #5E5551;
color: #D2777C;
background: #fff;
}
.widgettitle
{
border-color: #D2777C;
color: #5E5551;
background: #fff;
}
Any thoughts on what I'm doing wrong?
Thanks!
Lauren
WP 3.0.1
Arras 1.5.01
fizgiggery.com
Last edited by fizgiggery (2010-10-10 18:34:56)
I looked through this but couldn't quite figure it out.
How do I disable the grey box on the menu categories on mouseover? I do not want any box highlight.
Thanks in advance for the help and amazing theme.
@ Fizgiggery.
The #wrapper is pink on your site with an !important statement attached to it. I guess you used the custom background option in the theme options for it.
And you already have this link color in user.css
a:link, a:visited {
color: #2FA4CD;
text-decoration:none;
}
a:hover, a:active {
color:#2FA4CD;
text-decoration:underline;
}
@ Fizgiggery.
The #wrapper is pink on your site with an !important statement attached to it. I guess you used the custom background option in the theme options for it.And you already have this link color in user.css
a:link, a:visited {
color: #2FA4CD;
text-decoration:none;
}a:hover, a:active {
color:#2FA4CD;
text-decoration:underline;
}
Thanks so much, Extatix! I'm closer to finishing, thanks to you - but I'm still a bit stuck!
I took out the CSS in the parent user.css, but when I apply them to the child theme the styling still defaults to the Arras CSS. I thought creating a child theme would override the parent theme?
When I look at your site the style.css from the Child Theme gets applied. Which part doens't get applied?
When I look at your site the style.css from the Child Theme gets applied. Which part doens't get applied?
Basically, all of it apart from the nav bar, blog title and blog description. Since my last post this morning, I've been able to make the changes I want to make by editing the user.css file in the parent theme folder.
The same CSS doesn't work when I use it in the child theme, so even though the code is pretty much the same in the child style.css as the parent, I only see the changes when I refresh the page after editing the parent user.css
Is it me, or is this a little weird?!
(Thanks for your responses so far!)
Yosh, there's a } missing here:
#nav .sf-menu a:hover, #nav .sf-menu li:hover, #nav .sf-menu li.sfHover, #nav .sf-menu ul li {
background-color:#ffffff;
color:#d2777c;
I looked through this but couldn't quite figure it out.
How do I disable the grey box on the menu categories on mouseover? I do not want any box highlight.
Thanks in advance for the help and amazing theme.
any more info on this?
thanks
#nav .sf-menu a:hover, #nav .sf-menu li:hover, #nav .sf-menu li.sfHover, #nav .sf-menu ul li { background: #fff; }
Arras theme is a god send!
how do you change the font color of just the older entries button.
and how do you manipulate the reply button in comments.
I have changed mine but that are hidden until you mouse over
my site is www.showmemama.com/blog
.navigation a { color: #fff; }
.navigation a { color: #fff; }
Thanks for the reply but that did not work.
I have been hacking and slashing my way through this.
Here is my user.css
/* This CSS file is created for you to create or override any of the existing CSS styles used in this theme */
#header { background: #fff; border-bottom: none;}
#nav { background: #b32c43;}
#nav .sf-menu a { color: #fff; }
.sf-menu a { color: #fff; }
.sf-menu a:hover { background: #B7B341; }
.navigation a { color: #fff; }
#searchbar { border: 4px solid #b32c43; background: #fff; }
#searchbar .searchform { border: 4px solid #fff;}
.searchform { background: #fff; }
.searchform .s { background: #fff; }
.blog-description { display: none; }
#main { background: #fff; border: 4px solid #b32c43; -webkit-box-shadow: 5px 5px 5px #4f4f4f;
-moz-box-shadow: 5px 5px 5px #4f4f4f;
box-shadow: 5px 5px 5px #4f4f4f;}
.home-title { color: #b32c43; }
#footer { background: #b32c43; border: 4px solid #b32c43; color: #fff;}
.posts-default .published { color: #fff; }
.arras { color: #fff !important; }
.widgetcontent { border: 1px solid #fff; }
.widgettitle { background: #b7b341; color: #fff; }
#footer .widgettitle { color: #fff; }
#footer .widgetcontainer a, a:link, a:visited { color: #fff; }
#commentlist .reply a, .comments-navigation a, .read-more, .navigation a { background: #b32c43; }
#commentlist .reply a:hover, .comments-navigation a:hover, .navigation a:hover, .read-more:hover
{ background: #b7b341;}input[type="submit"]:hover, #wp-email-submit:hover { background: #b7b341; }
input[type="submit"], #wp-email-submit {background: #b32c43; color: #fff; }
.posts-quick .quick-read-more a:link, .posts-quick .quick-read-more a:visited
{ background: #b32c43; color: #fff; border: none; -webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;}
.posts-quick .quick-read-more a:hover { background: #b7b341; -webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;}
.posts-default .entry-title a:link, .posts-default .entry-title a:visited { color: #b32c43; }
.single .post .entry-title a:link, .single .post .entry-title a:visited, .single-post .entry-title a:link, .single-post .entry-title a:visited { color: #b32c43; }
#commentlist .comment-controls a:link, #commentlist .comment-controls a:visited
{background: #b32c43; color: #fff;}
a, a:link, a:visited { color: #b32c43; text-decoration: none; }
Do you think something else is overriding it? Also in my comments the reply box is hidden unless you mouse over it and then it shows up. But I am trying to make the reply button like the other older entries button.
You can get the reply box back by adding:
#commentlist .comment-controls { display: block; }
And the .navigation a works. Put it below the a, a:link, a:visited { color: #b32c43; text-decoration: none; } though

Perfect! Thank you so much. With your first page css help, this is one of the best and easiest themes to adjust. ![]()
Hi,
Sorry for the primary question, but I could not change the header background even reading this excellent tutorial.
www.concurseiro.info / wordpress
I changed the user.css and added the following line:
# Hearder {background: # FFFFFF}
and also tried this line:
. Hearder {background: # FFFFFF}
I am attaching the header image ( http://www.concurseiro.info/wordpress/logotipox.gif ) I'm trying to change colors, if anyone can help me I appreciate it. I wrote the background colors I'm trying to leave. And I'm trying to put that right in the search box at the bottom corner with a white background and black outline.
I know the problem is not the tutorial but my lack of knowledge of programming language, but with a little effort and understanding of you I will walk in good arras themes.
Sorry for asking,
Sincerely,
Miguel.
Try header, not hearder.
Thank you, now it's ok!
There was a problem halfway between the chair and computer, this problem was me!
Please search box, how do I leave on the right side at the bottom without leaving the background white? (Www.concurseiro.info / wordpress), I found no topic about it, as I speak only Portuguese, and use google translator to read and write is a little hard to understand everything clearly.
Sincerely,
Miguel
You want to move it down?
Yes, I want to move down here like this image http://www.concurseiro.info/wordpress/logotipox.gif
Play with the 150
#searchbar { margin: 150px 0 0; }
The box came up and was not in the right corner. I wanted her to come down and stay on the right. I must have done something wrong.
How to get that gray background layout "square" arras larger theme and put a white background? 'm talking about that gray background that appears in all styles. css that the theme provides. This bottom ash is a constant on slide show, on the thumbnails of news and among the searchbar (gotta make it clear that I am not talking about the header and I'm not talking about the white background of the searchbar)
No comment on the tutorial how to change this background that I'm talking about.
Please Which file should I modify? and what is the command line?
The intention is to leave with a background like this blog also uses arras: http://showmemama.com/blog/
Thank you for your attention,
Miguel
See the theme options, you can fix a background on the 'custom background' part.
Powered by PunBB, supported by Informer Technologies, Inc.
Currently installed 9 official extensions. Copyright © 2003–2009 PunBB.
Generated in 0.081 seconds, 10 queries executed