Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

God, the stylesheet.css file really really drives me nuts.


bignose

Recommended Posts

>_< >_< >_< >_< >_<

 

I am a poor newbie. When I try to change the color code in the stylesheet.css of a template, I am totally lost. Any kind pal here can help me out?

 

All I want is to change the background color and font color of the infobox content; the font colr of the menu. That is it. I just couldn't find the exact lines from the strange .css file.

 

Here is the stylesheet.css file. Please help me.............

 

 

 

 

/* CSS Document */

 

 

 

 

.clr {

clear: both;

}

 

 

#main_outline {

width: 802px !important;

width: 808px;

border: 1px solid #cccccc;

padding: 2px;

background: #ffffff;

}

 

 

#pathway_outline {

width: 633px !important;

width: 635px;

float: left;

border: 1px solid #cccccc;

margin-bottom: 2px !important;

margin-bottom: -2px;

}

 

 

#pathway {

float: left;

padding: 4px 3px 3px 5px;

}

 

 

#buttons {

float: right;

margin: 0px;

padding: 0px;

width: 50%;

}

 

 

ul#mainlevel-nav {

list-style: none;

padding: 0;

margin: 0;

font-size: 0.8em;

}

 

 

ul#mainlevel-nav li {

display: block;

background-image: none;

padding-left: 0px;

padding-right: 0px;

float: right;

margin: 0;

width: auto !important;

width: 15%;

font-size: 11px;

line-height: 21px;

white-space: nowrap;

border-left: 1px solid #cccccc;

}

 

 

ul#mainlevel-nav li a {

display: block;

padding-left: 15px;

padding-right: 15px;

text-decoration: none;

color: #333333;

background: transparent;

}

 

 

#buttons>ul#mainlevel-nav li a {

width: auto;

}

 

 

ul#mainlevel-nav li a:hover {

color: #ff6600;

background: #FFFFFF;

}

 

 

#search {

float: right;

border: 1px solid #cccccc;

padding: 0px;

width: 163px !important;

width: 165px;

height: 21px !important;

height: 23px;

overflow: hidden;

}

 

 

#search .inputbox {

border: 0px;

padding: 4px 3px 3px 5px !important;

padding: 3px 3px 3px 5px;

font-family: arial, helvetica, sans serif;

font-size: 11px;

height: 15px !important;

height: 19px;

width: 153px !important;

width: 159px;

color: #ff6600;

}

 

 

#header_area {

width: 802px !important;

text-align: left;

border: 0px;

margin: 0px;

}

 

 

#header {

float: left;

padding: 0px;

margin: 0px;

width: 635px;

height: 150px;

background: url(../adzak/images/header_short.jpg) no-repeat;

}

 

 

#top_outline {

float: left;

border: 1px solid #cccccc;

padding: 2px;

margin-left: 2px;

float: left;

overflow: hidden;

height: 144px !important;

height: 150px;

width: 159px !important;

width: 165px;

}

 

 

#left_outline {

margin-top: 2px;

border: 1px solid #cccccc;

padding: 2px;

float: left;

width: 159px !important;

width: 165px;

}

 

 

#content_area {

padding: 0px;

margin-top: 0px;

margin-left: 2px;

/** border: 1px solid #cccccc;

**/float: left;

width:450px;

}

 

 

#banner_area {

width: 635px;

margin-top: 2px;

margin-bottom: 0px !important;

margin-bottom: -3px;

}

 

 

#banner {

float: left;

padding: 0px;

width: 468px;

}

 

 

#poweredby {

float: left;

margin-left: 2px;

}

 

 

#sandbox_area_2 .sandbox_area {

float: left;

margin-top: 2px;

width: 468px;

}

 

 

#sandbox_area_1 .sandbox_area {

float: left;

margin-top: 2px;

width: 635px;

}

 

 

#right_outline {

border: 1px solid #cccccc;

margin-top: 2px;

float: right;

padding: 2px;

width: 159px !important;

width: 165px;

}

 

/** with both user1 and user2 visible **/

 

 

#user1_2 .user1_outline {

width: 227px !important;

width: 233px;

border: 1px solid #cccccc;

float: left;

margin: 0px;

padding: 2px;

margin-bottom: 2px;

}

 

 

#user2_2 .user2_outline {

width: 227px !important;

width: 233px;

border: 1px solid #cccccc;

float: right;

margin-left: 2px;

margin-bottom: 2px;

padding: 2px;

}

 

/** with either user1 or user2 visible **/

 

 

#user1_1 .user1_outline {

width: 462px !important;

width: 468px;

border: 1px solid #cccccc;

float: left;

margin: 0px;

padding: 2px;

margin-bottom: 2px;

}

 

 

#user2_1 .user2_outline {

width: 462px !important;

width: 468px;

border: 1px solid #cccccc;

float: right;

margin-bottom: 2px;

padding: 2px;

}

 

/** based on 100% content width **/

 

 

#user1_4 .user1_outline {

width: 311px !important;

width: 317px;

border: 1px solid #cccccc;

float: left;

margin: 0px;

padding: 2px;

margin-bottom: 2px;

}

 

 

#user2_4 .user2_outline {

width: 310px !important;

width: 316px;

border: 1px solid #cccccc;

float: right;

margin-left: 2px;

margin-bottom: 2px;

padding: 2px;

}

 

/** with either user1 or user2 visible **/

 

 

#user1_3 .user1_outline {

width: 629px !important;

width: 635px;

border: 1px solid #cccccc;

float: left;

margin: 0px;

padding: 2px;

margin-bottom: 2px;

}

 

 

#user2_3 .user2_outline {

width: 629px !important;

width: 635px;

border: 1px solid #cccccc;

float: right;

margin-bottom: 2px;

padding: 2px;

}

 

/** adjust content area based on right nav **/

 

 

#sandbox_area_2 .content_outline {

width: 462px !important;

width: 468px;

border: 1px solid #cccccc;

padding: 2px;

}

 

 

#sandbox_area_1 .content_outline {

width: 629px !important;

width: 635px;

border: 1px solid #cccccc;

padding: 2px;

}

 

 

#active_menu {

color:#FFCC00;

font-weight: bold;

}

 

 

a#active_menu:hover {

color: #ff6600;

}

 

 

.title {

color: #ffffff;

font-size: 40px;

padding-left: 15px;

padding-top: 20px;

}

 

 

.error {

font-style: italic;

text-transform: uppercase;

padding: 5px;

color: #cccccc;

font-size: 14px;

font-weight: bold;

}

 

/** old stuff **/

 

 

 

.back_button {

float: left;

font-size: 11px;

font-weight: bold;

margin-top: 15px;

margin-bottom: 10px;

border: 1px solid Red;

width: 40px;

padding: 4px;

}

 

 

.pagenav {

align: center;

font-size: 11px;

font-weight: bold;

border: 1px solid #cccccc;

width: auto;

padding: 4px;

margin: 1px;

}

 

 

.pagenavbar {

padding-right: 5px;

float: right;

}

 

 

#footer {

text-align: center;

padding: 3px;

}

 

 

ul {

margin: 0;

padding: 0;

list-style: none;

}

 

 

li {

line-height: 15px;

padding-left: 15px;

padding-top: 0px;

background-image: url(../adzak/images/arrow.gif) ;

background-repeat: no-repeat;

background-position: 0px 3px;

}

 

 

td {

font-size: 11px;

}

 

 

body {

background-color : #ffffff;

color : #333333;

font-family : Arial, Helvetica, Sans Serif;

font-size : 11px;

height : 100%;

margin-bottom : 15px;

margin-left : 15px;

margin-right : 15px;

margin-top : 15px;

padding-bottom : 0px;

padding-left : 0px;

padding-right : 0px;

padding-top : 0px;

}

 

/* mambo core stuff */

 

 

a:link, a:visited {

color: #ff6600;

text-decoration: none;

font-weight: bold;

}

 

 

a:hover {

color: Red;

text-decoration: none;

font-weight: bold;

}

 

 

table.contentpaneopen {

width: 100%;

padding: 0px;

border-collapse: collapse;

border-spacing: 0px;

}

 

 

table.contentpane td {

margin: 0px;

padding: 0px;

}

 

 

table.contentpane td.componentheading {

padding-left: 4px;

}

 

 

table.contentpane td.contentheading {

padding-left: 15px;

padding-top: 9px;

}

 

 

.button {

padding: 2px 5px 2px 5px;

border:solid 1px #cccccc;

background-color: #ffffff;

color: #ff6600;

font-family: Arial, Helvetica, Sans Serif;

text-align: center;

font-size: 11px;

font-weight: bold;

margin-top: 5px;

}

 

 

.inputbox {

padding: 2px;

border:solid 1px #cccccc;

background-color: #ffffff;

}

 

 

#sandbox_area_2 .componentheading {

background: url(../adzak/images/subhead_bg.png) repeat-x;

color: #666666;

text-align: left;

padding-top: 4px;

padding-left: 4px;

height: 21px;

font-weight: bold;

font-size: 10px;

text-transform: uppercase;

width: 458px !important;

width: 462px;

}

 

 

#sandbox_area_1 .componentheading {

background: url(../adzak/images/subhead_bg.png) repeat-x;

color: #666666;

text-align: left;

padding-top: 4px;

padding-left: 4px;

height: 21px;

font-weight: bold;

font-size: 10px;

text-transform: uppercase;

width: 100% !important;

width: 100%;

}

 

 

TD.infoBoxHeading {

background: url(../adzak/images/subhead_bg.png) repeat-x;

height: 21px;

font-color: black;

}

 

 

.contentcolumn {

padding-right: 5px;

}

 

 

.contentheading {

height: 30px;

background: url(../adzak/images/contenthead.png) repeat-x;

color: #666666;

text-align: left;

padding-top: 9px;

padding-left: 0px;

font-weight: bold;

font-size: 11px;

white-space: nowrap;

}

 

 

.contentpagetitle {

font-size: 13px;

font-weight: bold;

color: #cccccc;

text-align:left;

}

 

 

table.moduletable {

width: 100%;

margin-bottom: 5px;

padding: 0px;

border-spacing: 0px;

border-collapse: collapse;

}

 

 

table.moduletable th {

background: url(../adzak/images/subhead_bg.png) repeat-x;

color: #666666;

text-align: left;

padding-top: 4px;

padding-left: 4px;

height: 21px;

font-weight: bold;

font-size: 10px;

text-transform: uppercase;

}

 

 

table.moduletable td {

font-size: 10px;

padding: 0px;

margin: 0px;

font-weight: normal;

}

 

 

table.pollstableborder td {

padding: 2px;

}

 

 

.sectiontableheader {

font-weight: bold;

background: #f0f0f0;

padding: 4px;

}

 

 

.sectiontablefooter {

}

 

 

.sectiontableentry1 {

background-color : #ffffff;

}

 

 

.sectiontableentry2 {

background-color : #f9f9f9;

}

 

 

.small {

color: #999999;

font-size: 11px;

font-weight: bold;

}

 

 

.createdate {

height: 15px;

padding-bottom: 10px;

color: #999999;

font-size: 11px;

font-weight: bold;

}

 

 

.modifydate {

height: 15px;

padding-top: 10px;

color: #999999;

font-size: 11px;

font-weight: bold;

}

 

 

table.contenttoc {

border: 1px solid #cccccc;

padding: 2px;

margin-left: 2px;

margin-bottom: 2px;

}

 

 

table.contenttoc th {

background: url(../adzak/images/subhead_bg.png) repeat-x;

color: #666666;

text-align: left;

padding-top: 2px;

padding-left: 4px;

height: 21px;

font-weight: bold;

font-size: 10px;

text-transform: uppercase;

}

 

 

a.mainlevel:link, a.mainlevel:visited {

display: block;

background: url(../images/menu_bg.png) no-repeat;

vertical-align: middle;

font-size: 11px;

font-weight: bold;

color: #ffffff;

text-align: left;

padding-top: 5px;

padding-left: 18px;

height: 19px !important;

height: 24px;

width: 100%;

text-decoration: none;

}

 

 

a.mainlevel:hover {

background-position: 0px -25px;

text-decoration: none;

color: Red;

}

 

 

a.mainlevelx:hover {

background-position: 0px -25px;

text-decoration: none;

color: Black;

}

 

 

a.sublevel:link, a.sublevel:visited {

padding-left: 1px;

vertical-align: middle;

font-size: 11px;

font-weight: bold;

color: #ff6600;

text-align: left;

}

 

 

a.sublevel:hover {

color: #ffcc00;

text-decoration: none;

}

 

 

.highlight {

background-color: Black;

color: Blue;

padding: 0px 2px 0px 2px;

}

 

 

.code {

background-color: #ddd;

border: 1px solid #bbb;

}

Link to comment
Share on other sites

Okay, I see a couple different things in the .css file.

 

First is this:

 

You may notice that you see #word .infobox - this is telling the browser to render ONLY the element with class of "infobox" that is contained inside the element with the ID of "word" (or whatever the case may be). This could be what you want, or not.

 

If not, then hit ctrl+F in whatever text program you have, and search for all instances of .infobox and change what you need there (remember, in CSS, to change the font color, only specify color: white; font-color will not work).

 

Although, I looked over your stylesheet file and it appears as though there is no .infobox class at all.

Link to comment
Share on other sites

Okay, I see a couple different things in the .css file.

 

First is this:

 

You may notice that you see #word .infobox - this is telling the browser to render ONLY the element with class of "infobox" that is contained inside the element with the ID of "word" (or whatever the case may be). This could be what you want, or not.

 

If not, then hit ctrl+F in whatever text program you have, and search for all instances of .infobox and change what you need there (remember, in CSS, to change the font color, only specify color: white; font-color will not work).

 

Although, I looked over your stylesheet file and it appears as though there is no .infobox class at all.

 

 

 

Thanks for your reply. I couln't find the infobox related information either. That's why I am asking for help......

Link to comment
Share on other sites

Oddly, you appear to be missing some of the stylesheet entries. More info on page 52 of the osCommerce 2.2 Milestone 2 Update 051112 Documentation and you'll see what appears to be missing. Specifically from the default stylesheet.css:

 

 

.infoBoxContents {
 background: #f8f8f9;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

.infoBoxNotice {
 background: #FF8E90;
} 

.infoBoxNoticeContents {
 background: #FFE6E6;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

 

It belongs directly before:

 

TD.infoBoxHeading {
background: url(../adzak/images/subhead_bg.png) repeat-x;
height: 21px;
font-color: black;
}

 

 

In general, your stylesheet looks severely modified. I even noticed references to Mambo in it. So much has been changed that those classes I listed above may not even be in use in your store's code anymore.

Rule #1: Without exception, backup your database and files before making any changes to your files or database.

Rule #2: Make sure there are no exceptions to Rule #1.

Link to comment
Share on other sites

Thanks for your reply. I couln't find the infobox related information either. That's why I am asking for help......

 

I have solved it. :P

 

Just add several lines like:

.infoBox {

background: #XXXXXX;

}

 

.infoBoxContents {

background: #XXXXXX;

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

}

 

Then I can manipulate it.

 

Thanks. :D

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...