Hello everyone,
I'm working on my first template for OC and I've duplicated the default folder, etc...
My template works just fine, but I cannot figure out for the life of me what CSS styles are controlling the #left_menu, #right_menu, and #content areas. Since I duplicated the default template and modified the copy, I'm assuming that there may have been some inline styles applied in the /template/common/*.tpl files, but I didn't see any when I skimmed through.
I went through all of the styles in the stylesheet.css and there is nothing specifically styling the background color for the aforementioned areas. It pretty much declares sizing for the three elements and that's about it.
I set the #html tag to background: #000; and that worked just fine, but when I declare it in the #aforementioned areas it is inheriting different values from somewhere else (or, so it seems).
Anyone have any ideas where these values are being inherited from?
The *.top elements are styled through stylesheet.css, including their background: url(); so, I cannot imagine why there would have been inline styles applied to these three regions...
So, yeah, any help and / or insight would truly be appreciated. Thank you all for your time and assistance.
Hi Qphoria,
That's what I meant by inheritance... The parent values are set to background: #000;
However, the background is still showing as white. Here's my .css just for the record... Maybe I overlooked something.
I'm gonna go toy around with it a bit and see what I can come up with. 
----
Edit:
------
I just noticed that in .box middle that it defines background: #FFFFFF;
I changed this to #000; saved and refreshed... However, it has not changed the background color. So, I just thought I'd throw that out there.
That's what I meant by inheritance... The parent values are set to background: #000;
However, the background is still showing as white. Here's my .css just for the record... Maybe I overlooked something.
Code: Select all
html {
overflow: -moz-scrollbars-vertical;
margin: 0;
padding: 0;
background: #000;
}
* { font-family: Arial, Helvetica, sans-serif; }
body {
margin: 0px;
padding: 0px;
text-align: center;
}
body, td, th, input, textarea, select, a { font-size: 12px; }
form {
padding: 0;
margin: 0;
display: inline;
}
input, textarea, select { margin: 3px 0px; }
a, a:visited {
color: #1B57A3;
text-decoration: underline;
cursor: pointer;
}
a:hover { text-decoration: none; }
a img { border: none; }
p { margin-top: 0px; }
/* layout */
#container {
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: left;
border: thin solid #333;
background: #000;
}
#header {
position: relative;
background: url('../image/headerBackground.png') repeat-x;
width: 100%;
}
#header .div1 { height: 97px; }
#header .div2 {
position: relative;
top: 0px;
left: 15px;
}
#header .div3 {
background: url('../image/search.png') no-repeat;
width: 250px;
height: 62px;
position: absolute;
top: 15px;
right: 0px;
padding-top: 5px;
padding-left: 17px;
}
#header .div4 {
padding-left: 10px;
padding-right: 10px;
height: 40px;
background: url('../image/header.png') repeat-x;
}
#header .div4 img {
float: left;
margin-right: 5px;
}
#header .div4 a {
padding: 12px 0px 12px 0px;
margin-left: 10px;
margin-right: 10px;
display: inline-block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
}
#header .div5 a { float: left; }
#header .div6 a { float: right; }
#breadcrumb {
padding-top: 8px;
padding-bottom: 10px;
padding-left: 10px;
color: #ccc;
}
#breadcrumb a {
padding-top: 8px;
padding-bottom: 10px;
padding-left: 10px;
color: #ccc;
}
#column_left {
float: left;
width: 180px;
margin-right: 10px;
}
#column_right {
float: right;
width: 180px;
margin-left: 10px;
}
#content {
float: left;
width: 580px;
margin-bottom: 10px;
}
#content .top {
padding: 8px 0px 6px 10px;
background: url('../image/content_top.png') no-repeat;
}
#content .top h1, .heading {
color: #000000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 0px;
}
.heading {
border-bottom: 1px solid #DDDDDD;
padding-bottom: 3px;
margin-bottom: 10px;
}
#content .middle {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
padding: 10px 10px 1px 10px;
min-height: 380px;
}
#content .middle p.aKitchen img { padding: 0px 5px 0px 0px; }
#content .bottom {
background: url('../image/content_bottom.png') no-repeat;
height: 5px;
}
.box {
margin-bottom: 10px;
background: url('../image/box_top.png') no-repeat;
}
.box .top {
padding: 8px 0px 6px 7px;
color: #000000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
.box .top img {
float: left;
margin-right: 5px;
}
.box .middle {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF;
padding: 10px;
}
.box .bottom {
height: 5px;
background: url('../image/box_bottom.png') no-repeat;
}
.success {
padding: 5px 0px;
margin-bottom: 10px;
background: #E4F1C9;
border: 1px solid #A5BD71;
font-size: 11px;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
}
.warning {
padding: 5px 0px;
margin-bottom: 10px;
background: #FFDFE0;
border: 1px solid #FF9999;
font-size: 11px;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
}
.wait {
padding: 5px 0px;
margin-bottom: 10px;
background: #FBFAEA;
border: 1px solid #EFEBAA;
font-size: 11px;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
}
.required {
color: #FF0000;
font-weight: bold;
}
.error {
color: #FF0000;
display: block;
}
.help {
cursor: pointer;
}
.tooltip {
border: 1px solid #FDDA5C;
background: #FBFF95;
padding: 5px;
font-size: 11px;
width: 250px;
}
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('../image/button_right.png') no-repeat scroll top right;
color: #FFFFFF;
display: inline-block;
font: normal 12px arial, sans-serif;
height: 25px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('../image/button_left.png') no-repeat;
display: inline-block;
padding: 5px 0 5px 18px;
}
.buttons {
background: #F8F8F8;
border: 1px solid #DDDDDD;
margin-bottom: 10px;
clear: both;
padding: 5px;
}
.buttons input {
padding: 0px;
margin: 0px;
}
.buttons table {
width: 100%;
border-collapse: collapse;
}
.buttons table td { vertical-align: middle; }
.list {
width: 100%;
margin-bottom: 10px;
}
.list td {
text-align: center;
vertical-align: top;
padding-bottom: 10px;
}
.sort {
margin-bottom: 10px;
background: #F8F8F8;
height: 30px;
width: 100%;
}
.sort .div1 {
float: right;
margin-left: 5px;
padding-top: 6px;
padding-right: 9px;
}
.sort .div2 {
text-align: right;
padding-top: 9px;
}
.sort select {
font-size: 11px;
margin: 0;
padding: 0;
}
.pagination {
display: inline-block;
width: 100%;
background: #F8F8F8;
margin-bottom: 10px;
}
.pagination .links, .pagination .results {
padding: 7px;
}
.pagination .links {
float: left;
}
.pagination .links a {
border: 1px solid #CCCCCC;
padding: 4px 7px;
text-decoration: none;
color: #000000;
}
.pagination .links b {
border: 1px solid #CCCCCC;
padding: 4px 7px;
text-decoration: none;
color: #000000;
background: #FFFFFF;
}
.pagination .results { float: right; }
.tabs {
display: block;
width: 100%;
margin-bottom: 0px;
}
.tabs a {
float: left;
display: block;
padding: 6px 15px 7px 15px;
margin-right: 2px;
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF url('../image/tab.png') repeat-x;
color: #000000;
font-weight: bold;
font-size: 13px;
text-decoration: none;
z-index: 1;
position: relative;
top: 1px;
}
.tabs a.selected {
background: #FFFFFF url('../image/tab.png') repeat-x;
border-bottom: 0px;
padding-bottom: 8px;
z-index: 3;
}
.page {
border: 1px solid #DDDDDD;
background: #FFFFFF;
display: inline-block;
padding: 10px;
display: block;
width: 536px;
clear: both;
z-index: 2;
margin-bottom: 10px;
}
#footer {
width: 100%;
clear: both;
padding-top: 5px;
border-top: 1px solid #DDDDDD;
color: #ccc;
}
#footer .div1 {
float: left;
text-align: left;
}
#footer .div2 {
float: right;
text-align: right;
}
#footer .div2 a {
color: #FFF;
text-decoration: none;
font-weight: bold;
}
#category ul {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 8px;
padding-left: 12px;
list-style: url('../image/bullet_1.png');
}
#information ul {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 8px;
padding-left: 12px;
list-style: url('../image/bullet_2.png');
}
.cart {
border-collapse: collapse;
margin-bottom: 10px;
width: 100%;
border: 1px solid #EEEEEE;
}
.cart th {
background: #EEEEEE;
padding: 5px;
font-weight: normal;
}
.cart td { padding: 5px; }
----
Edit:
------
I just noticed that in .box middle that it defines background: #FFFFFF;
I changed this to #000; saved and refreshed... However, it has not changed the background color. So, I just thought I'd throw that out there.
Last edited by DroBuddy on Sat Oct 24, 2009 4:27 am, edited 1 time in total.
Sincerely,
Joseph Johnson
Programmer & Aspiring Web Designer ;-)
I've hit a wall... I'm not sure why this isn't working or what else to do. I've put the values at the base level elements to override inheritance, but that was to no avail. I've applied it to parent elements so that it would be inherited by the child elements, and that did not work either.
I've cleared my browser's cache; I've tried using Web Dev Toolbar's CSS menu to style the elements from within the browser and didn't get anything to work... I'm quite perplexed.
And, from past experience, it seems like the best option would be to get up and go for a walk or something... lol. I'll come back to it in a few hours and see if something sticks out then. ::shrugs::
Other than that, I'm pretty much clueless right now. If you guys happen to notice something, feel free to point it out and I'll try it out a lil' later on this evening. Thanks in advance.
Peace.
-------Edit------
.box .middle { background: #000; } in stylesheet.css should in fact set the background to black, right? When you view source, that's the compound selector being targeted, right?
...I know I'm over looking something simple... Gotta love it.
I've cleared my browser's cache; I've tried using Web Dev Toolbar's CSS menu to style the elements from within the browser and didn't get anything to work... I'm quite perplexed.
And, from past experience, it seems like the best option would be to get up and go for a walk or something... lol. I'll come back to it in a few hours and see if something sticks out then. ::shrugs::
Other than that, I'm pretty much clueless right now. If you guys happen to notice something, feel free to point it out and I'll try it out a lil' later on this evening. Thanks in advance.
Peace.
-------Edit------
.box .middle { background: #000; } in stylesheet.css should in fact set the background to black, right? When you view source, that's the compound selector being targeted, right?
...I know I'm over looking something simple... Gotta love it.
Sincerely,
Joseph Johnson
Programmer & Aspiring Web Designer ;-)
I'm not sure what you are trying to style.
#container {
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: left;
border: thin solid #333;
background: #000;
}
is the main column background.
.box .middle {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF;
padding: 10px;
}
is each sidebox background
If i change both of those to #000 i get all black
#container {
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: left;
border: thin solid #333;
background: #000;
}
is the main column background.
.box .middle {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF;
padding: 10px;
}
is each sidebox background
If i change both of those to #000 i get all black
I made the same change and it still shows as white... Like I said, I even double checked for Id10t errors (lol)... I double check I saved the .css after changes, cleared cache, and then loaded a page. Still, shows up as white.
I even went as far as deleting "background: #000;" from the .box .middle, and repeated the steps from above. Still, friggin' white.
...I just threw in a random query for a page so it would load something that has not been loaded before (the 404 msg) and they are still styled white. So, yeah, I'm going for a walk for a bit. Thanks though, boss. I truly do appreciate your time and assistance.
I even went as far as deleting "background: #000;" from the .box .middle, and repeated the steps from above. Still, friggin' white.
...I just threw in a random query for a page so it would load something that has not been loaded before (the 404 msg) and they are still styled white. So, yeah, I'm going for a walk for a bit. Thanks though, boss. I truly do appreciate your time and assistance.
Sincerely,
Joseph Johnson
Programmer & Aspiring Web Designer ;-)
I was doing it on my localhost and just uploaded it to my test server so I could link... When I reloaded, the css changes had applied.
And, no I was not using ctrl+F5... Is that a "hard" refresh or something?
Edit: BTW, thank you very much for your time and assistance. It is truly appreciated, boss.
And, no I was not using ctrl+F5... Is that a "hard" refresh or something?
Edit: BTW, thank you very much for your time and assistance. It is truly appreciated, boss.
Sincerely,
Joseph Johnson
Programmer & Aspiring Web Designer ;-)
Who is online
Users browsing this forum: No registered users and 3 guests
