|
CSS - [wordpress] Nav Bar Background Color
I'm using Wordpress 3.0.4 with the WP Remix theme 3.0 for my website. URL: joelwyant.com
I want to be able to add a page to the site during the Christmas season. To make it standout more, I'd like that specific page to always have a different background color in the navbar than the other "normal" pages. I have the CSS for the navbar style, but I don't know where to begin to make it specific to just that one page. In other words, how do I create CSS that overides the normal navbar background color for just that one specific page? Any thoughts, suggestions, or guidance is much appreciated! Joel Similar TutorialsHey Guys I am new to CCS. I started a blog about 2 weeks ago and I am using a domain/host with WordPress installed. I have a premium theme. I am very happy with the theme but I do not like the color/type/size of the contents font. I went into theme editor > stylesheet and began looking for something that would tell me where the code for the content would be. I changed the first few colors, refreshed the page and nothing changed. I did this about 20 times.... and I still can't find the code for the font! Please Help! Original Style Sheet Code: Code: body { background:#083550 url(images/bg_main.jpg) repeat-x top; font:12px Arial, Helvetica, sans-serif; padding:0; margin:0; color:#101010;}
html { padding:0; margin:0;}
a { text-decoration:none; color:#292929; border:0;}
a:hover { text-decoration:underline; color:#292929; border:0;}
a:focus { outline:none;}
.clr { clear:both;}
h1, h2, h3, h4 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
img { padding:0; margin:0; border:none; text-align:center;}
hr1 { border-left:0 solid #000000; border-right:0 solid #000000; border-top:0 dotted #000000; border-bottom:1px solid #000000; height :1px;}
hr { border-left:0 solid #7f262e; border-right:0 solid #7f262e; border-top:0 dotted #7f262e; border-bottom:1px solid #7f262e; height :1px;}
form { padding:0; margin:0;}
input { font-family:'Verdana'; color:#282b31; font-size:11px;}
textarea { font-family:'Verdana'; color:#282b31; font-size:11px;}
select { font-family:'Verdana'; color:#282b31; font-size:11px;}
/* Header +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#bgcontainer { margin:0; padding:0; background:url(images/bg_top.jpg) no-repeat top;}
.bgRasize { width:1024px; margin:0 auto; padding:0;}
/**/ * html .Header { height:197px;} /* */
.Header { width:1024px; margin:0; padding:0; height:197px;}
/* Menu ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + */
.Menu { padding:0; margin:0; height:50px; width:1024px; float: left;}
.Menu ul { list-style:none; margin:0; padding:0; height:50px;}
.Menu ul li { padding:17px 0 0 0; margin:0; float:left; line-height:14px;}
.Menu ul li a { padding:5px 15px 5px 20px; margin:0; outline:0; background:none; font:normal 12px Georgia, "Times New Roman", Times, serif; color:#50bed2; text-transform:uppercase;}
.Menu ul li a:hover { font:normal 12px Georgia, "Times New Roman", Times, serif; color:#d9d9d9; text-decoration: underline;}
.Logo { width:1024px; height:147px; margin:0; padding:0;}
.LogoText h1 {letter-spacing:-2px; padding:15px 0 5px 0; margin:0; font:normal 36px Georgia, "Times New Roman", Times, serif; color:#fff; text-align:center; text-transform:uppercase;}
.LogoText a { color:#ffffff; text-decoration:none;}
.LogoText a:visited { color:#ffffff; text-decoration:none;}
.LogoText a:hover { color:#ffffff; text-decoration:none;}
.Desc { color:#92dffd; line-height:12px; font:normal 14px Georgia, "Times New Roman", Times, serif; padding:0; margin:0; text-align:center; text-transform:uppercase;}
/* Syndicat ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + */
.Syn { width:325px; height:51px; padding:0; margin:0 0 0 10px; background: url(images/rss.gif) 0px 5px no-repeat; float:left; border-right:1px solid #fff;}
.Syn ul { margin:0; padding:5px 0 0 50px;}
.Syn li { margin:0; padding:0; list-style-type:none; color:#1e8baa; font:bold 18px Arial, Helvetica, sans-serif;}
.Syn li.text { color:#fffefe; font:normal 10px Arial, Helvetica, sans-serif;}
.Syn li a { color:#1e8baa; font:bold 18px Arial, Helvetica, sans-serif; text-decoration:underline;}
.Syn li a:visited { color:#1e8baa;}
.Syn li a:hover { color:#1e8baa;}
/* Syndicat ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + */
.twit { width:300px; height:51px; padding:0; margin:0 0 0 10px; background: url(images/twitter.gif) 0px 5px no-repeat; float:left; border-right:1px solid #fff;}
.twit ul { margin:0; padding:5px 0 0 50px;}
.twit li { margin:0; padding:0; list-style-type:none; color:#1e8baa; font:bold 18px Arial, Helvetica, sans-serif;}
.twit li.text { color:#fffefe; font:normal 10px Arial, Helvetica, sans-serif;}
.twit li a { color:#1e8baa; font:bold 18px Arial, Helvetica, sans-serif; text-decoration:underline;}
.twit li a:visited { color:#1e8baa;}
.twit li a:hover { color:#1e8baa;}
/* Search ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/**/ * html .Search {} /**/
.Search { width:300px; padding:0; margin:0 0 0 10px; float:left; height:51px; border-right:1px solid #fff;}
.Search form { padding:10px 5px 0 5px;}
.Search h2 { padding:5px 20px; color:#979797; font:bold 18px Tahoma, Arial; margin:0; background:url(images/bg_searth_h2.gif) left no-repeat;}
.Search input { color:#ffffff;}
.Search input.keyword {border:1px solid #b4b4b4; width:190px; color:#b4b4b4; padding:6px 10px; height:15px; float:left;}
.Search input.search { border:none; background: url(images/search.gif) top no-repeat; height:30px; width:30px; padding:0; margin:0 5px; float:left;}
/* Container +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.CON { width:1024px; padding:0; margin:0; background:#fff;}
/* Side Central +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SC { width:570px; padding:20px; margin:0; float:left; font:normal 11px Georgia, "Times New Roman", Times, serif; color:#888888;}
.SC p { padding:5px; margin:5px 0;}
/* Post +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.pagetitle { color:#848484; font:normal 26px Georgia, "Times New Roman", Times, serif;}
.Post {padding:10px; margin:0 0 10px 0; border:1px solid #ededed; background:#f6f6f6;}
.PostHead { padding:0; margin:0;}
.PostHead h2 {color:#2e2e2e; font:bold 20px Arial, Helvetica, sans-serif; margin:0; padding:10px 0;}
.PostHead h2 a { color:#2e2e2e; text-decoration: none;}
.PostHead h2 a:visited { color:#2e2e2e; text-decoration:none;}
.PostHead h2 a:hover { color:#2e2e2e; text-decoration: none;}
/**/ * html .PostTime {} /**/
.PostTime { padding:5px 0 5px 10px; font:normal 11px Georgia, "Times New Roman", Times, serif; color:#fff; margin:0; background:url(images/bg_post_time.gif) top repeat-x;}
.PostTime strong { font:normal 11px Georgia, "Times New Roman", Times, serif; color:#fff;}
.PostTime .day { font-size:11px;}
.PostTime .month { font-size:11px;}
.PostTime .year { font-size:11px;}
.PostTime a { font:bold 11px Georgia, "Times New Roman", Times, serif; color:#fff; text-decoration:underline;}
.PostContent a { color:#989898; text-decoration:underline;}
.PostContent a:hover { color:#989898; text-decoration:none;}
.PostContent img { margin:0; padding:0;}
.PostContent ol { padding:10px 0 10px 25px; margin:0;}
.PostContent ol li { padding:2px 0 2px 0; font-size:12px; line-height:15px; color:#989898;}
.PostContent ul { padding:5px 0; margin:0; float:left; width:45%;}
.PostContent ul li { padding:2px 0 2px 15px; list-style-type:none; font-size:11px; line-height:15px; color:#989898;}
.PostContent blockquote { padding:10px; margin:0; color:#989898; background:#000;}
.PostContent blockquote p { font-size:12px; padding:0; margin:0; line-height:15px;}
.PostContent blockquote li { padding:2px 0 2px 15px; list-style-type:none; font-size:12px; line-height:15px;}
.PostContent blockquote a { color:#989898;}
.PostContent blockquote a:visited { color:#989898;}
.PostContent blockquote a:hover { color:#989898; text-decoration:underline;}
.PostContent strong { color:#373737; font:normal 12px Arial, Helvetica, sans-serif; text-transform:uppercase;}
/**/ * html .PostContent p img {} /* */
.PostContent p img { max-width:350px;}
.PostContent img { margin:0 10px 10px 0; float:left; background:#0d0e09; padding:3px; border:1px solid #a3a3a3;}
.PostCom { padding:10px; font:normal 11px Arial, Helvetica, sans-serif; color:#797979; margin:0; background:url(images/bg_com.gif) left no-repeat;}
.PostCom ul { padding:0 10px; margin:0;}
.PostCom li { padding:5px 0; margin:0; list-style-type: none; color:#797979; font: normal 11px Arial, Helvetica, sans-serif; display: inline;}
.PostCom li a { font-weight:normal; text-decoration:none; color:#797979;}
.PostCom li a:hover { font-weight:normal; text-decoration: underline; color:#797979;}
.PostCom .Com {}
.PostCom .Tags { padding-left:10px;}
/* Note ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.Note { padding:0; margin:0;}
.Note li { padding:3px 0 3px 15px; margin:0; list-style-type:none; font-size:12px;}
/* TrackbackList ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.TrackList { background:#848484; padding:15px; margin-top:20px; position:relative;}
.TrackListTop { background:#848484; position:absolute; top:0; left:0; width:455px; height:10px;}
.TrackList h3 { font-size:14px; font-weight:bold; margin:0 0 5px 0; padding:0 0 5px 0; color:#333366; letter-spacing:-1px; border-bottom:dashed 1px #beb4c1;}
.TrackList ul { padding:0; margin:0;}
.TrackList li { padding:0 0 0 10px; margin:0; list-style-type:none; font-size:11px;}
.TrackList li a { color:#cc3366;}
/* Navigation - PlugIn +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.Nav { font-size:11px; padding:10px 0; color:#848484; font-family:'Verdana';}
.Nav a { padding:1px 6px 1px 4px; border-right:solid 1px #666; font-size:11px;}
.Nav a:visited { padding:1px 6px 1px 4px; border-right:solid 1px #666;}
.Nav a:hover { padding:1px 6px 1px 4px; border-right:solid 1px #666; text-decoration:none;}
.Nav span { padding:1px 6px 1px 4px; color:#666; border-right:solid 1px #666;}
.Nav .on { padding:1px 6px 1px 4px; border-right:solid 1px #666; font-size:11px; color:#003366;}
/* Comments ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.Comments { margin:20px 0 0 0; position:relative;}
.Comments h3 { font-size:16px; letter-spacing:-1px; margin:0 0 5px 0; padding:10px 0; color:#848484; border-bottom:solid 2px #660000;}
/* Comments List ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.List ol { padding:0; margin:0;}
.List li { position:relative; padding:5px 0; margin:10px 0; list-style-type:none;}
/**/ * html .List .LGrav { right:30px;} /* */
.List .LGrav { position:absolute; right:0; top:10px;}
.List .LGrav img { border:solid 1px #ccc; padding:2px; background:#fff;}
.List .LUsr { margin:0; padding:0; font-size:11px; line-height:12px; color:#999;}
.List .LUsr a { color:#999; text-decoration:none;}
.List .LUsr strong { font:bold 16px "Trebuchet MS", sans-serif; letter-spacing:-1px; color:#666;}
.List .LUsr strong a { color:#cc0000; text-decoration:none;}
.List .LCon { margin:10px 0 0 0 ; padding:0; font-size:12px; line-height:16px; border-top:solid 1px #ccc;}
.List .LCon p { margin:0; padding:5px 0 ; font-size:12px; line-height:16px;}
.List .Author { background:#fff;}
/* Comments Form ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.Form .Email {}
.Form { padding:0 0 10px 0 ; position:relative; margin:0; font-family:'Verdana';}
.Form form { margin:0; padding:0;}
.Form a { text-decoration:underline;}
.Form p { padding:0 0 2px 0 ; margin:0; color:#666;}
.Form p small strong { font-weight:bold; color:#FF3300;}
.Form p small { font-size:11px; display:block; padding:6px 0 ; color:#000;}
.Form .TextField { color:#003366; background:#e9f8ff; border:solid 1px #d5e7f0; padding:6px 6px 6px 30px; font-size:12px; display:block;}
.Form .TextArea { color:#003366; background:#e9f8ff; border:solid 1px #d5e7f0; padding:6px; font-size:12px;}
/* Side Right +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SR { width:394px; padding:20px 20px 20px 0; margin:0; float:right;}
/* Banners ADs ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.banner {padding:10px; margin:0; border:1px solid #ededed; background:#f6f6f6;}
.banner h2 { text-transform:uppercase; text-decoration:underline; border-bottom: 1px solid #ccc; color:#6b6b6b; font:bold 12px Arial, Helvetica, sans-serif; margin:10px; padding:5px 20px;}
.banner ul { margin:0; padding:0 0 0 10px; list-style:none;}
.banner li { margin:0; padding:5px 10px; float:left;}
.banner li img { }
/* Side Right Right +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SRR {padding:0; margin:10px 0;}
.SRR div.categories, .SRR div.archives, .SRR div.meta { width:50%; float:left; margin:0; padding:0;}
.SRR h2 { text-transform:uppercase; text-decoration:underline; border-bottom: 1px solid #ccc; color:#6b6b6b; font:bold 12px Arial, Helvetica, sans-serif; margin:10px; padding:5px 20px;}
.SRR ul { padding:5px 15px; margin:0; list-style:none;}
.SRR li {padding: 5px 0 5px 20px; font:normal 12px Georgia, "Times New Roman", Times, serif; color: #b4b4b4; border-bottom:1px solid #ededed; background:url(images/categories_li.gif) left no-repeat;}
.SRR a { font:normal 12px Georgia, "Times New Roman", Times, serif; color: #b4b4b4; text-transform:uppercase;}
.SRR a:hover { text-decoration:underline; color:#10547e;}
/* Flickrrss ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.widget { padding:10px; margin:10px 0; border:1px solid #ededed; background:#f6f6f6;}
.widget h2 { text-transform:uppercase; text-decoration:underline; border-bottom:1px solid #ccc; color:#6b6b6b; font:bold 12px Arial, Helvetica, sans-serif; margin:10px; padding:5px 10px;}
.widget ul { padding:10px; margin:0;}
.widget li { margin:0; padding:5px 10px 4px 20px; list-style-type:none; border-bottom:1px solid #ededed; color:#999999; background:url(images/categories_li.gif) left no-repeat;}
.widget li a { margin:0; padding:0; border:0; background:none; color:#10547e; text-decoration:underline;}
.widget li a:hover { text-decoration:none;}
/* Flickrrss ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.widget_flickr { border:0; background:none;}
.widget_flickr h2 { }
.widget_flickr ul { margin:0; padding:0 0 10px 5px; text-align:center;}
.widget_flickr li { margin:0; padding:0 5px 0 0; list-style-type:none; display:inline; background:none;}
.widget_flickr li a img { background:#000; padding:0; margin:0 5px 5px 0; width:65px;}
.widget_flickr li a:hover img { padding:0;}
/* Footer ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.FBG { margin:0; padding:0; }
.Footer { padding:10px 0; margin:0; text-align:center; background:none;}
.Footer p { color:#56b1d5; padding:0; margin:0; font:normal 11px Arial, Helvetica, sans-serif;}
.Footer a { color:#56b1d5; text-decoration:underline;}
Hi, I have made a page using <div> tags. <div id="page"> <div id="leftmenu"> </div> <div id="mainarea"> </div> </div> My problem is that sometimes, the leftmenu is longer than the main area(1) and sometimes its the opposite- the main area is longer than the leftmenu(2). I want them both to be of the same height. (3) How can I do this? Plz Help! I have pasted the style codes for the 3 tags below. (1) (2) (3) #mainarea { background-color:#FFFFFF; float:left; position:relative; right:0pt; width:630px; } #leftmenu { background-color:#EEEEEE; float:left; left:0pt; position:relative; width:140px; } #page { background-color:#FFFFFF; position:relative; width:770px; } Hi, I am trying to apply a background color to an item other than the body but I cannot make it display in IE 6 or 5.5. I have tried applying it to both <div>'s and <p>'s. Does IE not support the background-color property outside of the page background? i wanted usersto choose their own style sheet by giving them different links like red, green, blue which will take them to different layouts or background color page. the problem was that worked only for that particular page but if they click on any link or menu from that page it will take them back to the default color. is there any way that i can set so that their choice will stay throught their surfing ? any thoughts ? hanks Having an issue with the background color in a div. The color shows up in I.E. but not in Firefox. I have a div with a width of 100%. Inside the div is an unordered list with two list items. Here is the css: div#nav { width: 100%; margin: 0; background-color: #EAE9E4; } #nav ul {margin: 0; padding: 0; } #nav li { list-style: none; float: left; margin: 0; padding: 0; width: 15%; font-size: 11px; line-height: 20px; white-space: nowrap; } Essentially this will be a navigation aid below the banner of the webpage. The list items will contain anchors which will appear as "buttons". The containing div extends to the end and I want it to have a background color. Any help appreciated. Hi there people, I have a question about CSS but before I start off asking this question I'll introduce myself. I'm a new user of this great forum, my name is Dwight and I'm a student on the "Graphical Lyceum Amsterdam" where I follow the education for "Multimedia Designer". Ok so now you know me a little, I'll start off asking my question. Question: I have to change the layout for a html page that askes for information from different asp pages, but that's not my problem . The problem is that I have to make some td's a different color -the background that is- but the problem is that I can't change the html page itself (it is automaticly generated and I don't have permission to change it). So my question is can someone tell me how I can change the color of some (not all!) td's with CSS without making classes? Tnx, Dwight Hey Guys! I'm going absolutely bonkers trying to find out how to change the color of the background of a certain element on my site. I installed Vanilla forums on my site and am trying to customize the css script. If you look at the page, you will see an annoying white in the body. I am trying to make the background of that #F6F6F2. Could you guys possibly put me in the right direction? Thanks! Here is a link to my page: shipswatchdotcom/forum/vanilla/aaa.html Here is the css script: Code: #Body {
margin: 0;
width: 99.9%;
position: relative;
background: #F6F6F2;
}
#Head {
background: #B8D4B8;
padding:0;
margin: 20px 20px 0;
text-align: left;
position: relative;
}
div.Popup h1,
div.Popup h2,
div.Connect h1,
div.Connect h2 {
background: #F6F6F2;
border-bottom: 1px solid #3b5998;
}
.Banner {
padding: 10px;
text-align: left;
position: relative;
background: #F6F6F2;
}
.Banner ul {
background: #B8D4B8;
padding: 0;
margin: 0;
}
.Banner ul li {
display: inline;
padding: 0;
margin: 0;
}
.Banner ul li a {
font-weight: bold;
padding: 3px 6px;
font-size: 11px;
color: #336633;
display: inline-block;
}
.Banner ul li a:hover {
background: #E5F0E5;
}
.Banner ul li a.SignOut {
font-weight: normal;
position: absolute;
top: 10px;
right: 10px;
}
.Banner ul li a span {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 1px 2px 0 1px;
background: #F6F6F2;
border-right: 1px solid #F6F6F2;
border-bottom: 1px solid #F6F6F2;
color: #F6F6F2;
font-size: 9px;
position: relative;
top: -3px;
}
#Content {
float: none;
width: auto;
margin: 0 280px 0 10px;
background: #F6F6F2;
}
#Panel {
float: right;
margin-right: 10px;
background: #F6F6F2;
}
#Panel div.SearchBox input.InputBox {
width: 200px;
margin-right: 4px;
background: #F6F6F2;
}
div.SearchBox {
margin-bottom: 6px;
}
body.Profile div.SearchBox {
display: none;
}
body.Profile #Content {
float:none;
width: auto;
margin: 0 10px 0 280px;
background: #F6F6F2;
}
body.Profile #Panel {
margin: 0 0 0 10px;
background: #F6F6F2;
}
form.Activity textarea {
width:99%;
background: #F6F6F2;
}
#Foot div {
width: auto;
background: #F6F6F2;
}
body.Post #Content {
width: auto;
margin:0 20px;
background: #F6F6F2;
}
#ConversationForm textarea.MultiComplete,
#ConversationForm .TextBox,
#MessageForm textarea,
div.Comment div.CommentForm,
div.Comment div.CommentForm textarea,
div.CommentForm textarea,
#DiscussionForm input.InputBox,
#DiscussionForm textarea {
width:99%;
background: #F6F6F2;
}
#ConversationForm form {
border: none;
}
div.Preview div.Message,
ul.MessageList div.Message {
clear: none;
}
#DiscussionForm form {
background: #F6F6F2;
border: 1px solid #ccc;
}
div.MessageForm,
div.Tabs {
background: #F6F6F2;
border-bottom:1px solid #ccc;
}
/* Tabs */
div.Tabs {
background: #F6F6F2;
padding: 0;
border-bottom: 1px solid #aaa;
}
div.Tabs ul {
padding: 0 8px;
white-space: nowrap;
}
div.MessageForm {
padding: 8px 8px 5px;
}
div.MessageForm div.Tabs {
padding: 0 8px;
}
div.Tabs li a,
div.Tabs li a:link,
div.Tabs li a:hover,
div.Tabs li a:active,
div.Tabs li a:visited {
font-size: 11px;
margin: 0;
border: none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
background: #F6F6F2;
color: #336633;
text-decoration: none;
padding: 8px 10px;
line-height: 11px;
}
div.Tabs li a:hover {
text-decoration: underline;
}
a.Active,
div.Tabs li.Active a {
background: #F6F6F2;
color: #336633;
margin: 0;
border: 1px solid #aaa;
border-bottom: none;
border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
display: inline-block;
font-size: 12px;
line-height: 12px;
font-weight: bold;
text-decoration: none;
padding: 6px 10px;
position: relative;
top: 1px;
}
div.Tabs li a span {
line-height: 1;
font-size: 80%;
padding: 0 3px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
font-weight: normal;
background: #F6F6F2;
color: #4A7023;
margin: 0 0 0 4px;
}
div.DiscussionsTabs div.SubTab {
font-size: 11px;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-top: 1px solid #aaa;
background: #F6F6F2;
margin:0;
padding:4px 8px;
}
div.HeadingTabs ul {
margin: 8px 0 0;
}
body.Discussion a.Bookmark {
margin: 6px 2px;
}
div.Preview {
border: 1px solid #aaa;
background: #F6F6F2;
margin:0 0 8px;
padding: 8px;
}
.Foot {
background: #F6F6F2;
border: none;
}
div.MorePager a,
div.MorePager a:link,
div.MorePager a:visited,
div.MorePager a:active,
div.MorePager a:hover {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
background: #F6F6F2;
border: none;
color: #4A7023;
line-height: 1;
padding: 0;
text-decoration: none;
}
div.MorePager a:hover {
color: #4A7023;
text-decoration: underline;
}
body.add #Content {
margin: 0 10px;
background: #F6F6F2;
}
/* Panel Boxes */
#Panel div.Box {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
background: #F6F6F2;
padding: 0;
}
div.Box h4 {
color: #4A7023;
}
ul.PanelActivity,
ul.PanelInfo {
border-top:1px solid #ccc;
}
ul.PanelActivity li,
ul.PanelInfo li,
ul.PanelInfo li.Active {
background: #F6F6F2;
border-bottom: 1px solid #ccc;
}
ul.PanelInfo li.Active {
background: #F6F6F2;
}
#Status {
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #eee;
color: #000;
line-height: 1.6;
padding: 3px 6px;
margin: 0 0 8px;
}
body.Profile ul.PanelInfo {
border: #F6F6F2;
}
body.Profile ul.PanelInfo li {
margin: 0;
padding: 0;
}
body.Profile ul.PanelInfo li a {
font-size: 12px;
display: block;
padding: 0 6px;
background: #F6F6F2;
}
body.Profile ul.PanelInfo li a:hover {
background: #F6F6F2;
}
/* Sign In Page */
body.Entry #Content {
text-align: center;
margin: 0 auto !important;
}
body.Entry #Content div.Box {
background: #F6F6F2;
border: 0;
}
div.Methods {
border-left: 1px solid #ccc;
}
/* Messages */
div.DismissMessage {
background: #F6F6F2;
border: 1px solid #ccc;
padding:6px 8px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
div.DismissMessage a.Dismiss:hover {
color: #000;
}
div.Warning {
background: #d00;
border: 1px solid #b00;
color: #F6F6F2;
text-shadow: 1px 1px 1px #444;
}
div.Warning a.Dismiss {
color: #F6F6F2;
}
#Content div.Box {
color: #000;
background: #F6F6F2;
border: 1px solid #F6F6F2;
}
body#dashboard_entrycontroller_signin div.Box {
border: none;
}
/* Autocomplete */
.ac_results {
border: 1px solid #d7d8da;
color: #000;
border-top: 0;
background-color: #F6F6F2;
}
.ac_results li {
border-bottom: 1px solid #d7d8da;
}
.ac_lastitem {
border-bottom: 0 !important;
}
.ac_results strong {
background: #F6F6F2;
}
.ac_over strong {
background: #F6F6F2;
}
.ac_over {
background: #3b5998;
color: #fff;
}
Hello, I can't seem to figure out how to get the body of this page to be white... you can see the page at: www.brandontutmarc.com/vlr and the attached CSS is at: www.brandontutmarc.com/vlr/viva.css Here is what I'd like it to look like: http://www.brandontutmarc.com/vlr/vlr1.jpg Any help is GREATLY appreciated... Can someone look at my site at http://www.personalhurricanecenter.....com/index.php? using Internet Explorer? The problem is that on the initial load, the background of the main section (white in the middle) is fine, even though I had to drop the padding to 3em. You'll notice if you minimize and then maximize the window, resize it, or click on the "submit" button on the upper-right (which will redirect you back to this page) that the background turns blue. If you scroll down, then the lower portion is white. If you scroll back up, the background miraculously turns white again. But the section that remains visible during scrolling stays blue. Also, you can select the text in the blue and then deselect it and it'll be white! This does not occur in Netscape or Firefox. Can someone tell me what in the world is the deal? I've spent a week getting this layout set so I can move on and it's holding me up. Thanks. Tim P.S. I have my background color set to blue in the body section of my css, and the main background color set to white. Those are the only bg color configurations (except for link options). Take a look at the main menu on this site: http://www.infund.net Why doesn't the grey stretch across the entire table? Here's the code I have: Code:
a.mainlevel:link, a.mainlevel:visited {
width: 100%;
background: url(../images/bluebug.png) no-repeat;
font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;
font-size: 11px;
text-align: left;
padding-left: 30px;
background-color: #c2c2c2;
margin-bottom: 1px;
white-space: nowrap;
text-align:left;
}
a.mainlevel:hover, a.mainlevel:hover {
text-decoration: underline;
background: url(../images/redbug.png) no-repeat;
font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #8B1414;
text-align: left;
padding-left: 30px;
background-color: #c2c2c2;
width: 100%;
white-space: nowrap;
margin-bottom: 1px;
text-align:left;
}
I've been trying various fixes with my template, so that the grey background color in the sidebar, extends beyond the content to the bottom of the page. Alas... nothing is working. Here's my code: Code: #l_sidebar { color: #cccccc; background-color: #3a3a3a; width: 160px; float: left; float: left; margin-top: 0; margin-bottom: 20px; padding: 0 15px 15px 15px; }
#l_sidebar p{
margin: 0px;
line-height: 16px;
padding: 0px 0px 5px 0px;
}
#l_sidebar h2 {
color: #ffbfea;
font-size: 18px;
font-family: Verdana, Helvetica, Arial, Sans-Serif;
font-weight: bold;
list-style: none;
padding: 10px 0px 10px 0px;
margin: 0px;
}
#l_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}
#l_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}
#l_sidebar ul li {
list-style: none;
margin: 0px;
padding: 6px 0px 5px 0px;
}
#l_sidebar ul li a {
color: #c04080;
text-decoration: none;
}
#l_sidebar ul li a:hover {
color: #c04080;
text-decoration: underline;
}
#r_sidebar { color: #c04080; background-color: #3a3a3a; width: 160px; float: right; position:relative; margin-top: 0; margin-bottom: 20px; padding: 0 15px 15px 15px; }
#r_sidebar p{
margin: 0px;
line-height: 16px;
padding: 5px 0px 10px 0px;
}
#r_sidebar h2 {
color: #ffbfea;
font-size: 18px;
font-family: Verdana, Helvetica, Arial, Sans-Serif;
font-weight: bold;
list-style: none;
padding: 10px 0px 10px 0px;
margin: 0px;
}
#r_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}
#r_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}
#r_sidebar ul li {
list-style: none;
margin: 0px;
padding: 6px 0px 5px 0px;
}
#r_sidebar ul li a {
color: #c04080;
text-decoration: none;
}
#r_sidebar ul li a:hover {
color: #c04080;
text-decoration: underline;
}
With IE, the background of SELECT elements is not respecting the CSS file setting. But IE does respect the CSS for the INPUT element. Netscape 7.1 and Mozilla Firefox work correctly for SELECT and INPUT. Here is a snippet from my stylesheet file: SELECT { FONT-WEIGHT: normal; BACKGROUND: beige; COLOR: darkgreen } INPUT { FONT-WEIGHT: normal; BACKGROUND: beige; COLOR: darkgreen } I have tried #FFFFD8 and #F5F5DC as alternatives to the name "beige" for the SELECT entry. Result is always white. Yet my text boxes show properly as beige so I am confused about why that name is ignored for SELECT elements. Note that I can change the entry to something basic like BACKGROUND: yellow and that displays correctly (but I don't want yellow - I want beige - like the INPUT element). These SELECT and INPUT elements are always in some table such as: <td class=genericinputleft>Starting Date<select name=dd1 etc. Could there be a cascading problem in IE ? Here is the CSS: .genericinputLeft { FONT-WEIGHT: bold; FONT-SIZE: x-small; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: black; FONT-FAMILY: Arial; text-align: left; vertical-align: top } I have tried commenting out the BACKGROUND entry from the class above but that does not seem to help. Thanks. OK - I know all about the media="print" attribute. But I don't know how to force a background color (styled in a div tag; ie "background-color: black;") to print when the webpage is printed. I would think this would be a fairly common requirement but have not stumbled upon it. Also, it probably doesn't matter but I have been using Javascript to add the divs to the page dynamically, so I don't know if that would have any effect. Probably not. Any help would be appreciated. Hi, I have a simple table <table id="sometable"> <tr> <td> <a href="link1">link1</a> <td> <a href="link2">link2</a> </table> with a style sheet table#sometable {width: 100%;} table#sometable a:hover{background-color: #A9A9A9;} What I want is on a hover the whole cell changes color, not just the link. How can I do this? Also should I be using a table in the first place? Thanks Colin My page works great in firefox, but in IE the top navigation div (top_navigation) SHOULD have a background color of red for testing perposes, but the color doesn't change! It looks like its inheriting the background color #e4dfd7 from the css body tag. I've tried using an inline style, or using !important, nothing works, and I have to make this available in at least IE6 and up. Thanks in advance for any help! html code -> cosmosristorante dot com / ox / index.asp I've been trying to figure out how I can use css to make one side of the body one color and the other side another color. For example: if I want the entire left 70% of the page to be white and the right 30% to be black. no margins. it needs to stretch the entire length of the page regardless if there's any content in a div or not. And it need to be fluid. I've been trying everything I know and apparently that's not very much because I can't figure it out. The link below is what I've tried using a bg image. Hopefull this will illustrate the idea. But I don't want to use a bg image if I don't have to plus the division where the color changes needs to be fluid with the text and I haven't figured out how to do it with the offset percentages. Basically the left side needs to be white as wide or wider as the left column and the right side color can go from that point all th eway right regardless of how wide the browser is. Does that make sense? I think I could do it if it were 50/50 but that's not what I'm after. http://sonicparke.com Has anybody done this or know how it should be done? i have a problem dynamically setting the html background color when i initially set it with css. if i have a javascript function: function changeColor() { document.bgColor = '#FFFF00'; } and call it when i click a button the background color changes like you'd expect. but if i initialize the background color like this: body{background-color: #FF0000;} and then later call my javascript function to change the background color like before, it doesn't do anything. what's going on here? and how can i initialize the background color and still be able to dynamically change it? thanks Can this be done? My table is 4 columns with about 400 rows. I want to style the background color across each row but in fixed blocks/rows. i.e rows 1-55 red rows 55-60 green rows 61-100 red rows 121-158 green etc just using two colors. Any pointer in how it could be done? What is wrong with this? I can't seem to see any of the background colors in Firefox or Camino? I have tried setting the background color in the body, and by enlosing the rest of the elements within a containing "main" div... but neither seem to work. Any ideas? What is wrong with this? I can't seem to see any of the background colors in Firefox or Camino? I have tried setting the background color in the body, and by enlosing the rest of the elements within a containing "main" div... but neither seem to work. Any ideas? http://buffalonationsmuseum.ca Right now the property is just "background" but I have tried... background-color: My problem is that I need to get the Body Background color that is in a css file using php to then introduce this color to an applet. My CSS file has: BODY { FONT-SIZE: 12px; COLOR: #6699ff; BACKGROUND-COLOR: #ffffff; SCROLLBAR-FACE-COLOR: #FFFFFF; SCROLLBAR-HIGHLIGHT-COLOR: #CC6699; SCROLLBAR-SHADOW-COLOR: #CC6699; SCROLLBAR-3DLIGHT-COLOR: #CC6699; SCROLLBAR-ARROW-COLOR: #CC6699; SCROLLBAR-TRACK-COLOR: #FFFFFFF; SCROLLBAR-DARKSHADOW-COLOR: #CC6699; FONT-FAMILY: "Times", serif; } But I use different CSS so very time I change the file I need to know in the php page what BACKGROUND-COLOR it has. |
|||||||