Could use a little css help please
bstrange - February 9, 2009 - 02:04
I am progressing very well with my modified version of bboyjay's modified version of "The Green House" theme by Free CSS Templates. I found a problem once I installed Ubercart. If you look at (website edited)/catalog/5/glassware or any category under (website edited)/catalog , you will notice that all the product lists are against a pale grey background.
I have successfully managed to change everything to an all black background to give my site a more contemporary look; however, I cannot find anything in the css that is causing this particular background to be light grey.
I thought I'd go through and replace all instances of #eee with #000, but that made no difference so I switched it back.
I tried looking at it with firebug, but it only pulled up the following
Inherited from body:
body {style.css (line 6)
color:#97B7AA;
font-family:Arial,Helvetica,sans-serif;
font-size:small;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.8em;
} Can anyone take a quick look at the CSS and tell me where this is governed?
CSS is as follows:
/* $Id: style.css,v 1.3 2007/06/11 03:38:50 jswaby Exp $ */
/*
** HTML elements
*/
body {
margin: 0;
padding: 0;
background: #383838 url(images/img01.gif) repeat-x;
font: normal small Arial, Helvetica, sans-serif;
line-height: 1.8em;
color: #97B7AA;
}
tr.odd td, tr.even td {
padding: 0.3em;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #468259;
}
h1 {
font-size: 1.3em;
font-family: "Lucida Calligraphy";
}
h2 {
padding-left: 20px;
font-size: 22px;
}
h3, h4, h5, h6 {
margin-bottom: 1em;
text-transform: uppercase;
letter-spacing: 2px;
font-size: .9em;
font-weight: bold;
}
h2.blogTitle a
{
font-family:"Lucida Calligraphy";
font-size: x-large;
font-weight: bold;
color: #A7782C;
}
p, blockquote, ul, ol {
margin-top: 0;
}
blockquote {
padding: 0 0 0 40px;
background: url(images/img11.gif) no-repeat;
font: italic small Georgia, "Times New Roman", Times, serif;
line-height: 1.6em;
}
p {
margin-top: 0.5em;
margin-bottom: 0.9em;
}
a {
background: url(images/img03.gif) repeat-x left bottom;
text-decoration: none;
color: #97B7AA;
}
a:link {
color: #97B7AA;
}
a:hover {
background: none;
text-decoration: underline;
}
fieldset {
border: 1px solid #ccc;
}
pre {
background-color: #eee;
padding: 0.75em 1.5em;
font-size: 12px;
border: 1px solid #ddd;
}
table {
/* make <td> sizes relative to body size! */
font-size: 1em;
}
.form-item label {
font-size: 1em;
color: #fff;
}
.item-list .title {
font-size: 1em;
color: #222;
}
.links {
margin-bottom: 0;
}
.comment .links {
margin-bottom: 0;
}
/**
* Wrapper
*/
#wrapper {
background: #000000 url(images/img04.gif) repeat-x left bottom;
}
#content-pane {
width: 750px;
margin: 0 auto;
}
/* Menu */
#menu {
width: 750px;
height: 60px;
margin: 0 auto;
}
#menu ul {
list-style: none;
}
#menu li {
float: left;
padding: 0 0 0 2px;
background: url(images/img02.gif) no-repeat;
}
#menu a {
display: block;
padding: 20px 18px 10px;
background: none;
letter-spacing: -1px;
font: normal 1.6em Georgia, "Times New Roman", Times, serif;
color: #E1E9E2;
}
#menu a:hover {
border-bottom: 4px solid #97B7AA;
text-decoration: none;
color: #FFFFFF;
}
#menu li a.active {
background: #E1E9E2;
border-bottom: 4px solid #E1E9E2;
text-decoration: none;
color: #749865;
}
/* Header */
#header {
width: 754px;
height: 160px;
margin: 0 auto;
padding: 13px 0 0 0;
}
#header h1 {
float: left;
width: 104px;
height: 110px;
padding: 40px 35px 0 0px;
background: url(images/img05.jpg) no-repeat;
line-height: 50px;
font-size: 40px;
}
element.style {
padding-bottom:20px;
padding-top:170px;
}
#header h2 {
float: right;
width: 494px;
height: 14px;
padding: 165px 10px 10px 70pt;
background: url(images/img06.gif) no-repeat;
text-align: right;
letter-spacing: -1px;
font-size: 20px;
font-family: "Lucida Calligraphy";
color: #000000;
font-weight: bold;
padding-bottom: 10px;
}
/*
** Page layout blocks / IDs
*/
#search .form-text, #search .form-submit {
border: 1px solid #369;
font-size: 1.1em;
height: 1.5em;
vertical-align: middle;
}
#search .form-text {
width: 8em;
padding: 0 0.5em;
}
/* Mission */
#mission .mission-content {
border: solid 1px #468259;
background: #E1E9E2;
padding: 20px;
text-align: justify;
}
#mission h2 {
text-align: center;
background: none;
font-size: 1.8em;
margin-bottom: 5px;
}
#mission .mission-content p {
padding: 0;
margin: 0;
}
#mission {
margin-bottom: 20px;
}
/* Posts */
#pane {
float: right;
width: 530px;
}
#pane .post {
padding-bottom: 30px;
}
#pane .story {
padding: 15px 20px 0 20px;
background: url(images/img10.gif) repeat-x
}
#pane .meta {
padding: 5px 0 0 20px;
background: url(images/img03.gif) repeat-x;
}
#pane .meta p {
margin: 0;
line-height: normal;
font-size: smaller;
}
#pane ul {
list-style: url(images/img12.gif);
}
#pane ul li {
}
#main {
/* padding in px not ex because IE messes up 100% width tables otherwise */
padding: 0 10px;
}
#mission, .node .content, .comment .content {
line-height: 1.4em;
}
#help {
font-size: 0.9em;
margin-bottom: 1em;
}
.breadcrumb {
margin: 0;
padding: 0;
}
.messages {
background-color: #eee;
border: 1px solid #ccc;
padding: 0.3em;
margin-bottom: 1em;
}
.error {
border-color: red;
}
/* Sidebar */
/* Blocks */
#sidebar{
width: 200px;
}
#sidebar .block {
width: 198px;
margin: 0 0 10px 5px;
padding: 0;
background: #000000;
border: 1px solid #000000;
}
#sidebar .block .title {
margin: 4px;
padding: 8px 10px;
background: #000000 url(images/img3.gif) no-repeat center bottom;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
font: bold 1em Georgia, "Times New Roman", Times, serif;
color: #000000;
}
#sidebar .block .content {
margin: 0;
padding: 5px 14px 10px 14px;
}
#sidebar .block ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#sidebar .block ul li.expanded ul {
margin-left: 15px;
}
#sidebar .block li {
padding: 1px 0;
}
#sidebar .block li a {
display: block;
background: url(images/img4.gif) no-repeat left center;
}
#sidebar .block li a:hover {
background-color: #000000;
}
#sidebar .block a {
padding-left: 10px;
text-decoration: none;
}
#sidebar ul.menu li, .item-list ul li {
margin: 0;
}
#sidebar li.leaf, #sidebar li.collapsed, #sidebar li.expanded, .item-list ul li {
list-style-image: none;
list-style-type: none;
}
/*
** Common declarations for child classes of node, comment, block, box, etc.
** If you want any of them styled differently for a specific parent, add
** additional rules /with only the differing properties!/ to .parent .class.
** See .comment .title for an example.
*/
.title, .title a, #main .title {
font-family: "Lucida Calligraphy";
font-size: x-large;
font-style: italic;
text-align: left;
color: #97B7AA;
margin: 22px; /* decrease default margins for h<x>.title */
text-decoration: none;
}
.blogTitle, .blogTitle a, #main .blogTitle {
font-family: "Lucida Calligraphy";
font-size: large;
font-style: italic;
color: #749865;
margin: 22px; /* decrease default margins for h<x>.title */
text-decoration: none;
}
.title a:hover {
text-decoration: none;
}
.submitted {
color: #999;
font-size: 0.8em;
padding:15px 0 0 20px;
background:transparent url(images/img03.gif) repeat-x scroll 0%;
}
.links {
color: #999;
}
.links a {
font-size: 1.1em;
}
.links a:hover {
text-decoration: none;
}
.block, .box {
padding: 0 0 1.5em 0;
}
.block {
border-bottom: 1px solid #bbb;
padding-bottom: 0.75em;
margin-bottom: 1.5em;
}
.block .title {
margin-bottom: .25em;
}
.box .title {
font-size: 1.1em;
}
.node {
margin: 0 0 2em 0;
}
.sticky {
padding: .5em;
background-color: #eee;
border: solid 1px #ddd;
}
.node .content, .comment .content {
margin: .5em 0 .5em 0;
}
.node .content {
margin: 0 0 .5em 0;
padding: 15px 20px 0 20px;
background: url(images/img10.gif) repeat-x
}
.node .taxonomy {
color: #999;
font-size: 0.8em;
padding-left: 1.5em;
}
.node .picture {
border: 1px solid #ddd;
float: right;
margin: 0.5em;
}
.node .my-font-style-one {
font-family:Bradley Hand ITC;
font-size:x-large;
font-weight:bold;
color:#A7782C;
}
.node .my-font-style-two {
font-family:Century;
font-size:medium;
font-weight:normal;
line-height:1.5;
color:#c8dbd3;
}
.node .my-font-style {
font-family:Georgia,Times,serif;
font-size:small;
font-weight:normal;
color:#824659;
}
.floatleft
{
float: left;
z-index: 1;
position: relative;
padding: 4px;
}
.comment {
border: 1px solid #abc;
padding: .5em;
margin-bottom: 1em;
}
.comment .title a {
font-size: 1.1em;
font-weight: normal;
}
.comment .new {
text-align: right;
font-weight: bold;
font-size: 0.8em;
float: right;
color: red;
}
.comment .picture {
border: 1px solid #abc;
float: right;
margin: 0.5em;
}
.form-text, .form-submit, .form-textarea {
border: thin #999999 solid;
}
/* Footer */
#footer {
padding: 10px 0 5px 0;
background: url(images/img08.gif) repeat-x;
}
#footer p {
width: 750px;
font-family: "Lucida Calligraphy";
font-style: italic;
color: #97B7AA;
}
#footer a {
background: none;
color: #97B7AA;
}
#legal {
margin: 0 auto;
text-align: right;
font-size: 12px;
}
#brand {
margin: -35px auto 0 auto;
padding: 10px 0 0 35px;
letter-spacing: -1px;
font-size: 26px;
line-height: 26px;
}
#kickback {
margin: 0 auto;
text-align: right;
font-size: 10px;
color: #FBF9C9;
/*
** Module specific styles
*/
#aggregator .feed-source {
background-color: #eee;
border: 1px solid #ccc;
padding: 1em;
margin: 1em 0;
}
#aggregator .news-item .categories, #aggregator .source, #aggregator .age {
color: #999;
font-style: italic;
font-size: 0.9em;
}
#aggregator .title {
margin-bottom: 0.5em;
font-size: 1em;
}
#aggregator h3 {
margin-top: 1em;
}
#forum table {
width: 100%;
}
#forum td {
padding: 0.5em;
}
#forum td.forum, #forum td.posts {
background-color: #eee;
}
#forum td.topics, #forum td.last-reply {
background-color: #ddd;
}
#forum td.container {
background-color: #ccc;
}
#forum td.container a {
color: #555;
}
#forum td.statistics, #forum td.settings, #forum td.pager {
height: 1.5em;
border: 1px solid #bbb;
}
#forum td .name {
color: #96c;
}
#forum td .links {
padding-top: 0.7em;
font-size: 0.9em;
}
#profile .profile {
clear: both;
border: 1px solid #abc;
padding: .5em;
margin: 1em 0em;
}
#profile .profile .name {
padding-bottom: 0.5em;
}
.block-forum h3 {
margin-bottom: .5em;
}
div.admin-panel .description {
color: #999;
}
div.admin-panel .body {
background: #f4f4f4;
}
div.admin-panel h3 {
background:transparent url(images/img08.gif) repeat-x scroll 0%;
color: #fff;
padding: 5px 8px 5px;
margin: 0;
}
#sidebar #search-block-form #edit-submit {
padding: 0;
}BTW, I also tried replacing #E1E9E2 with #000000 but that did not effect the background in the area in question either. As far as I could tell, the #eee and the #E1E9E2 were the only two light grey colors in there...
Maybe I have been looking at this css too long, or maybe I am just too stupid to find it; but either way, any help you guys could provide would be greatly appreciated :)
Thanks in advance!
The grey background color
The grey background color there is coming from Drupal core's default table style colors in system.css.
To override it, this should work (in your own style.css .... never ever edit a core file, only override it):
tr.even, tr.odd {background-color: #000;
border-bottom: 1px solid #CCC;
padding :0.1em 0.6em;
}
Feel free to change the border-bottom instead to border: none if you don't want the border. Adjust the padding here as well if you want.
Make sure you have the Firebug extension for Firefox installed, as it will make finding these kind of things a piece of cake in the future.
Edit: I see you do have Firebug. What you need to do though is use the Inspect button to click on the relevant part of the layout to get at least "close" to where you need to be. Then proceed to click on every surrounding HTML tag and look at its CSS in the right panel until you find what you need. For instance, when I clicked the first thing it selected was the TD... I then clicked the HTML tags in the left panel and quickly found the parent element, TR, where the style was being applied.
-- David
davidnewkerk.com | absolutecross.com
View my Drupal lessons & guides
Thanks David!
Thanks David!
That's why I didn't see it while manually scanning the style.css, because it was loading out of the core! The tip for Firebug is great, I never realized I could click the tags across the top (makes it a bit more useful). The table looks GREAT now in Firefox, Opera, and Safari; however in IE7 there is no border or padding per se. Now while I use other browsers besides IE, many people do not, so I'd like to fix that if possible.
If there is no simple (or even moderately complicated) fix for IE, it'll do the way it stands, but it looks so nice in FF,Op, and Saf that it'd be nice to hook up the IE folks as well :)
Thanks again for your time and the fast response! I know I can always count on the folks here in this forum :)