Hello everybody,
is it possible to change one category text colour to red?
Sure, you just have to modify your category.tpl file.
Files to be modified:
catalog/view/theme/<your theme>/template/module/category.tpl
catalog/view/theme/<your theme>/template/product/category.tpl
I suggest making a backup of these files before continuing with the modifications.
In catalog/view/theme/<your theme>/template/module/category.tpl
Find:
Replace With:
Find:
Replace With:
Find:
Replace With:
Find:
Replace With:
in catalog/view/theme/<your theme>/template/product/category.tpl
Find:
Replace With:
Find:
Replace With:
If you run into any problems let me know.
Regards,
Joel.
Files to be modified:
catalog/view/theme/<your theme>/template/module/category.tpl
catalog/view/theme/<your theme>/template/product/category.tpl
I suggest making a backup of these files before continuing with the modifications.
In catalog/view/theme/<your theme>/template/module/category.tpl
Find:
Code: Select all
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>Code: Select all
<?php if ($category['name'] == "your_category_name") { ?>
<a href="<?php echo $category['href']; ?>" class="active"><font color="red"><?php echo $category['name']; ?></font></a>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } ?>Code: Select all
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>Code: Select all
<?php if ($category['name'] == "your_category_name") { ?>
<a href="<?php echo $category['href']; ?>"><font color="red"><?php echo $category['name']; ?></font></a>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>Code: Select all
<a href="<?php echo $child['href']; ?>" class="active"> - <?php echo $child['name']; ?></a>Code: Select all
<?php if ($child['name'] == "your_category_name") { ?>
<a href="<?php echo $child['href']; ?>" class="active"> - <font color="red"><?php echo $child['name']; ?></font></a>
<?php } else { ?>
<a href="<?php echo $child['href']; ?>" class="active"> - <?php echo $child['name']; ?></a>
<?php } ?>Code: Select all
<a href="<?php echo $child['href']; ?>"> - <?php echo $child['name']; ?></a>Code: Select all
<?php if ($child['name'] == "your_category_name") { ?>
<a href="<?php echo $child['href']; ?>"> - <font color="red"><?php echo $child['name']; ?></font></a>
<?php } else { ?>
<a href="<?php echo $child['href']; ?>"> - <?php echo $child['name']; ?></a>
<?php } ?>in catalog/view/theme/<your theme>/template/product/category.tpl
Find:
Code: Select all
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>Code: Select all
<?php if ($category['name'] == "your_category_name") { ?>
<li><a href="<?php echo $category['href']; ?>"><font color="red"><?php echo $category['name']; ?></font></a></li>
<?php } else { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
<?php } ?>Code: Select all
<li><a href="<?php echo $categories[$i]['href']; ?>"><?php echo $categories[$i]['name']; ?></a></li>Code: Select all
<?php if ($categories[$i]['name'] == "your_category_name") { ?>
<li><a href="<?php echo $categories[$i]['href']; ?>"><font color="red"><?php echo $categories[$i]['name']; ?></font></a></li>
<?php } else { ?>
<li><a href="<?php echo $categories[$i]['href']; ?>"><?php echo $categories[$i]['name']; ?></a></li>
<?php } ?>If you run into any problems let me know.
Regards,
Joel.
Canada's Leading Expert In OpenCart Development & Certified OpenCart Development Partner 
Thanks Joel, but I have done what you said and text is still white. I don't know if I explained clearly what I want to do. So: I want to make one word in top menu bar red colored. Here is picture:
I want to make word "SALE" red. Can you help me?
bc klausimas.jpg (19.69 KiB) Viewed 6871 times
Hey ChilliWilly,
You'll need to modify the file:
catalog/view/theme/default/template/common/header.tpl
Find:
Replace With:
Regards,
Joel.
You'll need to modify the file:
catalog/view/theme/default/template/common/header.tpl
Find:
Code: Select all
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>Code: Select all
<?php if ($category['name'] == "SALE") { ?>
<li><a href="<?php echo $category['href']; ?>"><font color="red"><?php echo $category['name']; ?></font></a>
<?php } else { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>Regards,
Joel.
Canada's Leading Expert In OpenCart Development & Certified OpenCart Development Partner
How do you do it when u have two languages.
One is for sale english and i need the color red also in dutch.
The Aanbiedingen version works for dutch.
How do i add the english version Sale?
One is for sale english and i need the color red also in dutch.
Code: Select all
<?php if ($category['name'] == "Aanbiedingen") { ?>
<li><a href="<?php echo $category['href']; ?>"><font color="red"><?php echo $category['name']; ?></font></a>
<?php } else { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>
How do i add the english version Sale?
ruffsense wrote:How do you do it when u have two languages.
One is for sale english and i need the color red also in dutch.
The Aanbiedingen version works for dutch.Code: Select all
<?php if ($category['name'] == "Aanbiedingen") { ?> <li><a href="<?php echo $category['href']; ?>"><font color="red"><?php echo $category['name']; ?></font></a> <?php } else { ?> <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a> <?php } ?>
How do i add the english version Sale?
Code: Select all
<?php if (($category['name'] == "Sale") || ($category['name'] == "Aanbiedingen")) { ?>See all my extensions: https://www.opencart.com/index.php?rout ... 20OpenCart
Both cases:
In css there are settings for category, including for text (where "color" means text color). The effective class is already in .tpl.
Dutch case:
In css you can set up a [new] class for Dutch, give it a separate "color" for text, and use that [new] class in .tpl (and elsewhere, depending upon what you modify).
In css there are settings for category, including for text (where "color" means text color). The effective class is already in .tpl.
Dutch case:
In css you can set up a [new] class for Dutch, give it a separate "color" for text, and use that [new] class in .tpl (and elsewhere, depending upon what you modify).
Last edited by butte on Wed Apr 03, 2013 8:21 am, edited 1 time in total.
Look, again. You have a category.tpl and a header.tpl.
Where you were given suggestions to pinpoint "catalog/view/theme/[namedtheme]/template/product/category.tpl" and "catalog/view/theme/default/template/common/header.tpl" you answered that you had "done what you said" and "that helped!"
As for Sale in red, you can manipulate applicable class lines for "color" in css, or you can hard code "color" for that word, or you can use an overlying image showing red, or you can make it complicated.
Where you were given suggestions to pinpoint "catalog/view/theme/[namedtheme]/template/product/category.tpl" and "catalog/view/theme/default/template/common/header.tpl" you answered that you had "done what you said" and "that helped!"
As for Sale in red, you can manipulate applicable class lines for "color" in css, or you can hard code "color" for that word, or you can use an overlying image showing red, or you can make it complicated.
Mine category.tpl is different.
Code: Select all
<div class="box">
<div class="box-heading"><?php echo $heading_title; ?></div>
<div class="box-content">
<div class="box-category">
<ul>
<?php foreach ($categories as $category) { ?>
<li>
<a href="<?php echo $category['href']; ?>"<?php if ($category['category_id'] == $category_id) { ?> class="active"<?php } ?>><?php echo $category['name']; ?></a>
<?php if ($category['children']) { ?>
<ul>
<?php foreach ($category['children'] as $child) { ?>
<li>
<a href="<?php echo $child['href']; ?>"<?php if ($child['category_id'] == $child_id) { ?> class="active"><?php } ?>> - <?php echo $child['name']; ?></a>
<?php if($child['sister_id']){ ?>
<ul>
<?php foreach($child['sister_id'] as $sisters) { ?>
<li>
<a href="<?php echo $sisters['href']; ?>"<?php if ($sisters['category_id'] == $sisters_id) { ?> class="active"<?php } ?>>> - <?php echo $sisters['name']; ?></a>
</li>
<?php } ?>
</ul>
<?php } ?>
</li>
<?php } ?>
</ul>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>Hi.. i want to change the subcategories color in my store. My store template was made by a developer. link to store is http://www.mughalimpex.com
Actually main category like "surgical instruments" and its subcategories colors are same. so when someone open "surgical instruments" he is unable to distinguish which one is sub category and which one is main category. Same is for dental, beauty, veterinary and electro main categories.
My catelory.tpl code is different.
Following is the code for module/category.tpl
<!--<div class="box">
<div class="top"><img src="catalog/view/theme/default/image/category.png" alt="" /><?php echo $heading_title; ?></div>
<div id="category" class="middle"><?php echo $category; ?></div>
<div class="bottom"> </div>
</div>-->
<div class="left">
<div class="left_menu">
<?php echo $category; ?>
</div>
</div>
Following is the code for product/category.tpl
<?php echo $header; ?><?php echo $column_right; ?><?php echo $column_left; ?>
<div id="content">
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1><?php echo $heading_title; ?></h1>
</div>
</div>
<div class="middle">
<?php if ($description) { ?>
<div><?php echo $description; ?></div>
<?php } ?>
<?php if (!$categories && !$products) { ?>
<div class="content"><?php echo $text_error; ?></div>
<?php } ?>
<?php if ($categories) { ?>
<table class="list">
<?php for ($i = 0; $i < sizeof($categories); $i = $i + 4) { ?>
<tr>
<?php for ($j = $i; $j < ($i + 4); $j++) { ?>
<td width="25%"><?php if (isset($categories[$j])) { ?>
<a href="<?php echo $categories[$j]['href']; ?>"><img src="<?php echo $categories[$j]['thumb']; ?>" title="<?php echo $categories[$j]['name']; ?>" alt="<?php echo $categories[$j]['name']; ?>" style="margin-bottom: 3px;" /></a><br />
<a href="<?php echo $categories[$j]['href']; ?>"><?php echo $categories[$j]['name']; ?></a>
<?php } ?></td>
<?php } ?>
</tr>
<?php } ?>
</table>
<?php } ?>
<?php if ($products) { ?>
<div class="sort">
<div class="div1">
<select name="sort" onchange="location = this.value">
<?php foreach ($sorts as $sorts) { ?>
<?php if (($sort . '-' . $order) == $sorts['value']) { ?>
<option value="<?php echo $sorts['href']; ?>" selected="selected"><?php echo $sorts['text']; ?></option>
<?php } else { ?>
<option value="<?php echo $sorts['href']; ?>"><?php echo $sorts['text']; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
<div class="div2"><?php echo $text_sort; ?></div>
</div>
<table class="list">
<?php for ($i = 0; $i < sizeof($products); $i = $i + 4) { ?>
<tr>
<?php for ($j = $i; $j < ($i + 4); $j++) { ?>
<td width="25%"><?php if (isset($products[$j])) { ?>
<a href="<?php echo $products[$j]['href']; ?>"><img src="<?php echo $products[$j]['thumb']; ?>" title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" /></a><br />
<a href="<?php echo $products[$j]['href']; ?>"><?php echo $products[$j]['name']; ?></a><br />
<span style="color: #999; font-size: 11px;"><?php echo $products[$j]['model']; ?></span><br />
<?php if ($display_price) { ?>
<?php if (!$products[$j]['special']) { ?>
<span style="color: #900; font-weight: bold;"><?php echo $products[$j]['price']; ?></span>
<?php } else { ?>
<span style="color: #900; font-weight: bold; text-decoration: line-through;"><?php echo $products[$j]['price']; ?></span> <span style="color: #F00;"><?php echo $products[$j]['special']; ?></span>
<?php } ?>
<a class="button_add_small" href="<?php echo $products[$j]['add']; ?>" title="<?php echo $button_add_to_cart; ?>" > </a>
<?php } ?>
<br />
<?php if ($products[$j]['rating']) { ?>
<img src="catalog/view/theme/default/image/stars_<?php echo $products[$j]['rating'] . '.png'; ?>" alt="<?php echo $products[$j]['stars']; ?>" />
<?php } ?>
<?php } ?></td>
<?php } ?>
</tr>
<?php } ?>
</table>
<div class="pagination"><?php echo $pagination; ?></div>
<?php } ?>
</div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</div>
<?php echo $footer; ?>
Actually main category like "surgical instruments" and its subcategories colors are same. so when someone open "surgical instruments" he is unable to distinguish which one is sub category and which one is main category. Same is for dental, beauty, veterinary and electro main categories.
My catelory.tpl code is different.
Following is the code for module/category.tpl
<!--<div class="box">
<div class="top"><img src="catalog/view/theme/default/image/category.png" alt="" /><?php echo $heading_title; ?></div>
<div id="category" class="middle"><?php echo $category; ?></div>
<div class="bottom"> </div>
</div>-->
<div class="left">
<div class="left_menu">
<?php echo $category; ?>
</div>
</div>
Following is the code for product/category.tpl
<?php echo $header; ?><?php echo $column_right; ?><?php echo $column_left; ?>
<div id="content">
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1><?php echo $heading_title; ?></h1>
</div>
</div>
<div class="middle">
<?php if ($description) { ?>
<div><?php echo $description; ?></div>
<?php } ?>
<?php if (!$categories && !$products) { ?>
<div class="content"><?php echo $text_error; ?></div>
<?php } ?>
<?php if ($categories) { ?>
<table class="list">
<?php for ($i = 0; $i < sizeof($categories); $i = $i + 4) { ?>
<tr>
<?php for ($j = $i; $j < ($i + 4); $j++) { ?>
<td width="25%"><?php if (isset($categories[$j])) { ?>
<a href="<?php echo $categories[$j]['href']; ?>"><img src="<?php echo $categories[$j]['thumb']; ?>" title="<?php echo $categories[$j]['name']; ?>" alt="<?php echo $categories[$j]['name']; ?>" style="margin-bottom: 3px;" /></a><br />
<a href="<?php echo $categories[$j]['href']; ?>"><?php echo $categories[$j]['name']; ?></a>
<?php } ?></td>
<?php } ?>
</tr>
<?php } ?>
</table>
<?php } ?>
<?php if ($products) { ?>
<div class="sort">
<div class="div1">
<select name="sort" onchange="location = this.value">
<?php foreach ($sorts as $sorts) { ?>
<?php if (($sort . '-' . $order) == $sorts['value']) { ?>
<option value="<?php echo $sorts['href']; ?>" selected="selected"><?php echo $sorts['text']; ?></option>
<?php } else { ?>
<option value="<?php echo $sorts['href']; ?>"><?php echo $sorts['text']; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
<div class="div2"><?php echo $text_sort; ?></div>
</div>
<table class="list">
<?php for ($i = 0; $i < sizeof($products); $i = $i + 4) { ?>
<tr>
<?php for ($j = $i; $j < ($i + 4); $j++) { ?>
<td width="25%"><?php if (isset($products[$j])) { ?>
<a href="<?php echo $products[$j]['href']; ?>"><img src="<?php echo $products[$j]['thumb']; ?>" title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" /></a><br />
<a href="<?php echo $products[$j]['href']; ?>"><?php echo $products[$j]['name']; ?></a><br />
<span style="color: #999; font-size: 11px;"><?php echo $products[$j]['model']; ?></span><br />
<?php if ($display_price) { ?>
<?php if (!$products[$j]['special']) { ?>
<span style="color: #900; font-weight: bold;"><?php echo $products[$j]['price']; ?></span>
<?php } else { ?>
<span style="color: #900; font-weight: bold; text-decoration: line-through;"><?php echo $products[$j]['price']; ?></span> <span style="color: #F00;"><?php echo $products[$j]['special']; ?></span>
<?php } ?>
<a class="button_add_small" href="<?php echo $products[$j]['add']; ?>" title="<?php echo $button_add_to_cart; ?>" > </a>
<?php } ?>
<br />
<?php if ($products[$j]['rating']) { ?>
<img src="catalog/view/theme/default/image/stars_<?php echo $products[$j]['rating'] . '.png'; ?>" alt="<?php echo $products[$j]['stars']; ?>" />
<?php } ?>
<?php } ?></td>
<?php } ?>
</tr>
<?php } ?>
</table>
<div class="pagination"><?php echo $pagination; ?></div>
<?php } ?>
</div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</div>
<?php echo $footer; ?>
[Per ruffsense:]
As a quick test, try renaming yours for a few minutes, planting a copy of the default namesake (different file, same name) in that directory, and giving it a whirl. Then undo that, in reverse order, to get back to where you are now; before or after fixing the first-renamed file.
As a quick test, try renaming yours for a few minutes, planting a copy of the default namesake (different file, same name) in that directory, and giving it a whirl. Then undo that, in reverse order, to get back to where you are now; before or after fixing the first-renamed file.
per butte:
Please tell me what should i add in my css file. i have two files in this template one is style.css and other one is stylesheet.css please check the code below:
Code for style.css:
@charset "utf-8";
/* CSS Document */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp {border:0;margin:0;padding:0;font-size:100%}
html, body {height:100%}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}b, strong {font-weight:bold}img {color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic}li {display:list-item}table {border-collapse:collapse;border-spacing:0}th, td, caption {font-weight:normal;}q {quotes:none}q:before, q:after {content:'';content:none}sub, sup, small {font-size:75%}sub, sup {line-height:0;position:relative;vertical-align:baseline}sub {bottom:-0.25em}sup {top:-0.5em}svg {overflow:hidden}
body{background:#fff; font-size:12px; font-family:Arial, Helvetica, sans-serif;}
.container{width:990px; margin:auto;}
.logo_container{padding-top:3px; width:250px; float:left;height:74px;}
.top_links{width:735px; float:left; padding:3px 5px 0 0;}
a{color:#000000; text-decoration:none; font-size:12px;font-weight:bold;}
a:hover{text-decoration:underline;}
.links{margin-top:40px; text-align:right;color:#6b6b6b; }
.links a{color:#6b6b6b; font-size:16px;}
.logo_container h1{font-size:30px; margin:0; padding:0; color:#333;padding-top:30px; text-align:center;}
.logo_container a:hover{text-decoration:none;}
.links{margin-top:40px; text-align:right;color:#6b6b6b; }
.links a{color:#6b6b6b; font-size:16px;}
.nav{background:#FF0000; height:34px;border-radius:5px;
box-shadow: 0px -6px 19px -6px black;}
.clear{clear:both;}
.header{height:98px;}
.menu{width:700px; list-style:none; height:34px; float:left; border-redious:0px;}
.menu li{float:left; list-style-type:none; text-align:center; vertical-align:middle; height:28px; color:#fff; padding:9px 9px 0;}
.menu li a{color:#FFFFFF; font-size:12px;font-weight:bold;}
.middle_container{margin-top:10px;}
.left{width:184px; float:left; margin-bottom:9px;}
.right{width:986px; float:left;}
.left_menu ul{list-style:none;}
.left_menu{background:#aaabb0; min-height:240px;padding-top:10px;}
.left_menu ul li{list-style-type:none; padding-left:10px; font-size:15px; font-weight:bold;}.left_menu ul li:hover{background:#000; color: #FFFFFF;}
.left_menu ul li a{ width:100%; display:block;line-height: 27px;}.left_menu ul li a:hover{ color:#FFFFFF}
.active{background:#000;}.active a{color:#fff;}
.banner-container{height: 250px;width: 600px;background:#ccc; height:251px; float:left;}
.search{width:200px; background:#333;float: left;height: 250px;margin-left: 9px;width: 182px;}
.search-text{margin:5px 3px 3px 5px; }
.search-button{margin-top:-3px;vertical-align: middle;}
.search-box{margin-bottom:-12px;}
.pdf{background:#fff; height:109px;}
.single{background:#fff; height:109px; margin-left:-4px;}
.slider{ height:250px; margin-top:19px;}
.company-news{ height:300px; margin-top:10px;}
.float{float:left;}
.block{display:block; text-align:center; margin-right:12px;}
.blockImg{height:45px;}
.footer{border-top:5px solid #ccc;}
.row{width:16%; float:left; padding-top:10px;}
.row h4{border-bottom:1px solid #8db745; width:70%; padding-bottom:6px;}
.row ul{list-style:none;}
.row ul li{list-style-type:none;}
.row ul li a{ line-height:20px;}
.footer-top{height:229px;}
.certificate{width:36%; float:left;}
AND CODE FOR STYLESHEET.CSS
html {
overflow: -moz-scrollbars-vertical;
margin: 0;
padding: 0;
}
* {
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0px;
padding: 0px;
}
body, td, th, input, textarea, select, a {
font-size: 12px;
}
form {
padding: 0;
margin: 0;
display: inline;
}
input, textarea, select {
margin: 3px 0px;
}
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;
}
#header .div2 {
float: left;
padding-top: 15px;
padding-left: 15px;
}
#header .div3 {
float: right;
padding-top: 7px;
height: 38px;
}
#header .div3 a {
margin-left: 15px;
padding: 1px 0px 2px 20px;
background-repeat: no-repeat;
background-position: left center;
}
#header .div4 {
width: 510px;
clear: right;
float: right;
height: 32px;
padding-right: 14px;
}
#header .div4 a {
float: left;
margin-right: 2px;
width: 100px;
height: 18px;
padding-top: 9px;
padding-bottom: 9px;
background: url('../image/tab_1.png') no-repeat;
text-align: center;
color: #333333;
text-decoration: none;
font-size: 14px;
font-weight: bold;
position: relative;
z-index: 1;
}
#header .div4 a.selected {
background: url('../image/tab_2.png') no-repeat;
color: #FFF;
padding-bottom: 10px;
z-index: 3;
}
#header .div5 {
clear: both;
}
#header .div5 .left {
background: url('../image/header_1_left.png') no-repeat;
width: 5px;
height: 40px;
float: left;
}
#header .div5 .right {
background: url('../image/header_1_right.png') no-repeat;
width: 5px;
height: 40px;
float: right;
}
#header .div5 .center {
background: url('../image/header_1_center.png') repeat-x;
height: 40px;
margin-left: 5px;
margin-right: 5px;
}
#header .div6 {
clear: both;
margin-bottom: 10px;
}
#header .div6 .left {
background: url('../image/header_2_left.png') no-repeat;
width: 5px;
height: 32px;
float: left;
}
#header .div6 .right {
background: url('../image/header_2_right.png') no-repeat;
width: 5px;
height: 32px;
float: right;
}
#header .div6 .center {
background: url('../image/header_2_center.png') repeat-x;
height: 32px;
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
padding-right: 5px;
}
#header .div7 {
float: right;
padding-top: 2px;
}
#header .div8 {
float: left; margin-top: 6px;
}
#header .div9 {
float: left;
}
#header .div10 {
float: left;
margin-top: 2px;
}
#search {
padding-top: 7px;
padding-left: 5px;
color: #FFF;
font-weight: bold;
}
#search select {
border: 1px solid #0A5391;
padding: 1px;
}
#search a {
color: #FFF;
}
#search input {
border: 1px solid #0A5391;
padding: 2px;
}
#breadcrumb {
float: left;
padding-top: 7px;
padding-bottom: 11px;
height: 13px;
margin-bottom: 10px;
color: #000000;
}
.switcher {
float: right;
margin-top: 3px;
margin-left: 10px;
}
.switcher a {
text-decoration: none;
display: block;
}
.switcher .selected {
background: #FFFFFF url('../image/switcher.png') repeat-x;
}
.switcher .selected a {
border: 1px solid #CCCCCC;
background: url('../image/arrow_down.png') 116px center no-repeat;
color: #666666;
padding: 2px 5px 2px 5px;
width: 121px;
}
.switcher .selected a:hover {
background: #F0F0F0 url('../image/arrow_down.png') 116px center no-repeat;
}
.switcher .option {
position: absolute;
z-index: 3;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
background-color: #EEEEEE;
display: none;
width: 131px;
}
.switcher .option a {
color: #000;
padding: 3px 5px 3px 5px;
}
.switcher .option a:hover {
background: #FFC;
}
.switcher img {
position: relative;
top: 1px;
}
#column_left {
float: left;
width: 180px;
margin-right: 10px;
clear: left;
margin-top:28px;
}
#column_right {
float: right;
width: 180px;
margin-left: 10px;
clear: right;
margin-top:28px;
}
#content {
margin-left: 190px;
margin-right: 190px;
margin-top: 28px;
}
#content .top .left {
background: url('../image/content_top_left.png') no-repeat;
width: 5px;
height: 32px;
float: left;
}
#content .top .right {
background: url('../image/content_top_right.png') no-repeat;
width: 5px;
height: 32px;
float: right;
}
#content .top .center {
background: url('../image/content_top_center.png') repeat-x;
margin-left: 5px;
margin-right: 5px;
}
#content .top h1, .heading {
padding: 8px 0px 8px 7px;
}
#content h1, .heading {
color: #000000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 0px;
}
#content .middle {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF;
padding: 10px 10px 1px 10px;
min-height: 30px;
}
#content .bottom .left {
background: url('../image/content_bottom_left.png') no-repeat;
width: 5px;
height: 5px;
float: left;
}
#content .bottom .right {
background: url('../image/content_bottom_right.png') no-repeat;
width: 5px;
height: 5px;
float: right;
}
#content .bottom .center {
background: url('../image/content_bottom_center.png') repeat-x;
height: 5px;
margin: 0 5px 10px 5px;
}
.box {
margin-bottom: 10px;
background: url('../image/box_top.png') no-repeat;
}
.box .top {
padding: 8px 0px 8px 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%;
}
.button {
padding-left: 8px;
display: inline-block;
margin-right: 5px;
background: url('../image/button_left.png') top left no-repeat;
text-decoration: none;
color:#FFF;
}
.button span {
color: #FFF;
display: block;
padding: 4px 12px 5px 5px;
background: url('../image/button_right.png') top right no-repeat;
}
.buttons {
background: #F8F8F8;
border: 1px solid #DDDDDD;
padding: 5px;
margin-bottom: 10px;
}
.buttons input {
padding: 0px;
margin: 0px;
}
.buttons table {
width: 100%;
border-collapse: collapse;
}
.buttons table td {
vertical-align: middle;
}
.content {
background: #F7F7F7;
border: 1px solid #DDDDDD;
padding: 10px;
margin-top: 3px;
margin-bottom: 10px;
}
.list {
margin-bottom: 10px;
width: 100%;
}
.list td {
text-align: center;
background: #FFFFFF;
vertical-align: top;
padding-bottom: 10px;
padding-top:0px;
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
-moz-border-radius-bottom-left: 10px;
-moz-border-radius-bottom-right: 10px;
-moz-border-radius-top-left: 10px;
-moz-border-radius-top-right: 10px;
}
.list td:hover {
background: #F3F3F3;
}
.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 {
width: 100%;
height: 31px;
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_3.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_3.png') repeat-x;
border-bottom: 0px;
padding-bottom: 8px;
z-index: 3;
}
.tab_page {
border: 1px solid #DDDDDD;
background: #FFFFFF;
padding: 10px;
display: block;
z-index: 2;
margin-bottom: 10px;
}
#footer {
width: 100%;
clear: both;
padding-top: 5px;
border-top: 1px solid #DDDDDD;
}
#footer .div1 {
float: left;
text-align: left;
}
#footer .div2 {
float: right;
text-align: right;
}
#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;
width: 100%;
border: 1px solid #EEEEEE;
margin-bottom: 10px;
}
.cart th {
background: #EEEEEE;
padding: 5px;
font-weight: normal;
}
.cart td {
padding: 5px;
}
.tags, .tags a {
font-style: italic;
font-size: x-small;
}
#module_cart .middle {
padding: 5px;
}
.cart_module_total {
padding: 0 3px 0 3px;
font-size: 0.9em;
color: #222;
}
.cart_remove {
margin-top: 3px;
background: url('../image/list_remove_btn.gif') no-repeat left center transparent;
padding-right:10px;
cursor:pointer;
}
.cart_remove_loading {
margin-top: 3px;
background: url('../image/ajax_load.gif') no-repeat transparent;
padding-right:10px;
}
.button_add_small, a.button_add_small:visited {
margin-top: 3px;
background: url('../image/button_add_small.png') no-repeat left center transparent;
padding:5px;
text-decoration: none;
cursor:pointer;
}
#content .middle .box {
float: left;
margin: 0 6px 10px 6px;
min-height: 0px;
}
#content .middle .box .middle {
width: 158px;
min-height: 0px;
}
Please tell me what should i add in my css file. i have two files in this template one is style.css and other one is stylesheet.css please check the code below:
Code for style.css:
@charset "utf-8";
/* CSS Document */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp {border:0;margin:0;padding:0;font-size:100%}
html, body {height:100%}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}b, strong {font-weight:bold}img {color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic}li {display:list-item}table {border-collapse:collapse;border-spacing:0}th, td, caption {font-weight:normal;}q {quotes:none}q:before, q:after {content:'';content:none}sub, sup, small {font-size:75%}sub, sup {line-height:0;position:relative;vertical-align:baseline}sub {bottom:-0.25em}sup {top:-0.5em}svg {overflow:hidden}
body{background:#fff; font-size:12px; font-family:Arial, Helvetica, sans-serif;}
.container{width:990px; margin:auto;}
.logo_container{padding-top:3px; width:250px; float:left;height:74px;}
.top_links{width:735px; float:left; padding:3px 5px 0 0;}
a{color:#000000; text-decoration:none; font-size:12px;font-weight:bold;}
a:hover{text-decoration:underline;}
.links{margin-top:40px; text-align:right;color:#6b6b6b; }
.links a{color:#6b6b6b; font-size:16px;}
.logo_container h1{font-size:30px; margin:0; padding:0; color:#333;padding-top:30px; text-align:center;}
.logo_container a:hover{text-decoration:none;}
.links{margin-top:40px; text-align:right;color:#6b6b6b; }
.links a{color:#6b6b6b; font-size:16px;}
.nav{background:#FF0000; height:34px;border-radius:5px;
box-shadow: 0px -6px 19px -6px black;}
.clear{clear:both;}
.header{height:98px;}
.menu{width:700px; list-style:none; height:34px; float:left; border-redious:0px;}
.menu li{float:left; list-style-type:none; text-align:center; vertical-align:middle; height:28px; color:#fff; padding:9px 9px 0;}
.menu li a{color:#FFFFFF; font-size:12px;font-weight:bold;}
.middle_container{margin-top:10px;}
.left{width:184px; float:left; margin-bottom:9px;}
.right{width:986px; float:left;}
.left_menu ul{list-style:none;}
.left_menu{background:#aaabb0; min-height:240px;padding-top:10px;}
.left_menu ul li{list-style-type:none; padding-left:10px; font-size:15px; font-weight:bold;}.left_menu ul li:hover{background:#000; color: #FFFFFF;}
.left_menu ul li a{ width:100%; display:block;line-height: 27px;}.left_menu ul li a:hover{ color:#FFFFFF}
.active{background:#000;}.active a{color:#fff;}
.banner-container{height: 250px;width: 600px;background:#ccc; height:251px; float:left;}
.search{width:200px; background:#333;float: left;height: 250px;margin-left: 9px;width: 182px;}
.search-text{margin:5px 3px 3px 5px; }
.search-button{margin-top:-3px;vertical-align: middle;}
.search-box{margin-bottom:-12px;}
.pdf{background:#fff; height:109px;}
.single{background:#fff; height:109px; margin-left:-4px;}
.slider{ height:250px; margin-top:19px;}
.company-news{ height:300px; margin-top:10px;}
.float{float:left;}
.block{display:block; text-align:center; margin-right:12px;}
.blockImg{height:45px;}
.footer{border-top:5px solid #ccc;}
.row{width:16%; float:left; padding-top:10px;}
.row h4{border-bottom:1px solid #8db745; width:70%; padding-bottom:6px;}
.row ul{list-style:none;}
.row ul li{list-style-type:none;}
.row ul li a{ line-height:20px;}
.footer-top{height:229px;}
.certificate{width:36%; float:left;}
AND CODE FOR STYLESHEET.CSS
html {
overflow: -moz-scrollbars-vertical;
margin: 0;
padding: 0;
}
* {
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0px;
padding: 0px;
}
body, td, th, input, textarea, select, a {
font-size: 12px;
}
form {
padding: 0;
margin: 0;
display: inline;
}
input, textarea, select {
margin: 3px 0px;
}
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;
}
#header .div2 {
float: left;
padding-top: 15px;
padding-left: 15px;
}
#header .div3 {
float: right;
padding-top: 7px;
height: 38px;
}
#header .div3 a {
margin-left: 15px;
padding: 1px 0px 2px 20px;
background-repeat: no-repeat;
background-position: left center;
}
#header .div4 {
width: 510px;
clear: right;
float: right;
height: 32px;
padding-right: 14px;
}
#header .div4 a {
float: left;
margin-right: 2px;
width: 100px;
height: 18px;
padding-top: 9px;
padding-bottom: 9px;
background: url('../image/tab_1.png') no-repeat;
text-align: center;
color: #333333;
text-decoration: none;
font-size: 14px;
font-weight: bold;
position: relative;
z-index: 1;
}
#header .div4 a.selected {
background: url('../image/tab_2.png') no-repeat;
color: #FFF;
padding-bottom: 10px;
z-index: 3;
}
#header .div5 {
clear: both;
}
#header .div5 .left {
background: url('../image/header_1_left.png') no-repeat;
width: 5px;
height: 40px;
float: left;
}
#header .div5 .right {
background: url('../image/header_1_right.png') no-repeat;
width: 5px;
height: 40px;
float: right;
}
#header .div5 .center {
background: url('../image/header_1_center.png') repeat-x;
height: 40px;
margin-left: 5px;
margin-right: 5px;
}
#header .div6 {
clear: both;
margin-bottom: 10px;
}
#header .div6 .left {
background: url('../image/header_2_left.png') no-repeat;
width: 5px;
height: 32px;
float: left;
}
#header .div6 .right {
background: url('../image/header_2_right.png') no-repeat;
width: 5px;
height: 32px;
float: right;
}
#header .div6 .center {
background: url('../image/header_2_center.png') repeat-x;
height: 32px;
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
padding-right: 5px;
}
#header .div7 {
float: right;
padding-top: 2px;
}
#header .div8 {
float: left; margin-top: 6px;
}
#header .div9 {
float: left;
}
#header .div10 {
float: left;
margin-top: 2px;
}
#search {
padding-top: 7px;
padding-left: 5px;
color: #FFF;
font-weight: bold;
}
#search select {
border: 1px solid #0A5391;
padding: 1px;
}
#search a {
color: #FFF;
}
#search input {
border: 1px solid #0A5391;
padding: 2px;
}
#breadcrumb {
float: left;
padding-top: 7px;
padding-bottom: 11px;
height: 13px;
margin-bottom: 10px;
color: #000000;
}
.switcher {
float: right;
margin-top: 3px;
margin-left: 10px;
}
.switcher a {
text-decoration: none;
display: block;
}
.switcher .selected {
background: #FFFFFF url('../image/switcher.png') repeat-x;
}
.switcher .selected a {
border: 1px solid #CCCCCC;
background: url('../image/arrow_down.png') 116px center no-repeat;
color: #666666;
padding: 2px 5px 2px 5px;
width: 121px;
}
.switcher .selected a:hover {
background: #F0F0F0 url('../image/arrow_down.png') 116px center no-repeat;
}
.switcher .option {
position: absolute;
z-index: 3;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
background-color: #EEEEEE;
display: none;
width: 131px;
}
.switcher .option a {
color: #000;
padding: 3px 5px 3px 5px;
}
.switcher .option a:hover {
background: #FFC;
}
.switcher img {
position: relative;
top: 1px;
}
#column_left {
float: left;
width: 180px;
margin-right: 10px;
clear: left;
margin-top:28px;
}
#column_right {
float: right;
width: 180px;
margin-left: 10px;
clear: right;
margin-top:28px;
}
#content {
margin-left: 190px;
margin-right: 190px;
margin-top: 28px;
}
#content .top .left {
background: url('../image/content_top_left.png') no-repeat;
width: 5px;
height: 32px;
float: left;
}
#content .top .right {
background: url('../image/content_top_right.png') no-repeat;
width: 5px;
height: 32px;
float: right;
}
#content .top .center {
background: url('../image/content_top_center.png') repeat-x;
margin-left: 5px;
margin-right: 5px;
}
#content .top h1, .heading {
padding: 8px 0px 8px 7px;
}
#content h1, .heading {
color: #000000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 0px;
}
#content .middle {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF;
padding: 10px 10px 1px 10px;
min-height: 30px;
}
#content .bottom .left {
background: url('../image/content_bottom_left.png') no-repeat;
width: 5px;
height: 5px;
float: left;
}
#content .bottom .right {
background: url('../image/content_bottom_right.png') no-repeat;
width: 5px;
height: 5px;
float: right;
}
#content .bottom .center {
background: url('../image/content_bottom_center.png') repeat-x;
height: 5px;
margin: 0 5px 10px 5px;
}
.box {
margin-bottom: 10px;
background: url('../image/box_top.png') no-repeat;
}
.box .top {
padding: 8px 0px 8px 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%;
}
.button {
padding-left: 8px;
display: inline-block;
margin-right: 5px;
background: url('../image/button_left.png') top left no-repeat;
text-decoration: none;
color:#FFF;
}
.button span {
color: #FFF;
display: block;
padding: 4px 12px 5px 5px;
background: url('../image/button_right.png') top right no-repeat;
}
.buttons {
background: #F8F8F8;
border: 1px solid #DDDDDD;
padding: 5px;
margin-bottom: 10px;
}
.buttons input {
padding: 0px;
margin: 0px;
}
.buttons table {
width: 100%;
border-collapse: collapse;
}
.buttons table td {
vertical-align: middle;
}
.content {
background: #F7F7F7;
border: 1px solid #DDDDDD;
padding: 10px;
margin-top: 3px;
margin-bottom: 10px;
}
.list {
margin-bottom: 10px;
width: 100%;
}
.list td {
text-align: center;
background: #FFFFFF;
vertical-align: top;
padding-bottom: 10px;
padding-top:0px;
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
-moz-border-radius-bottom-left: 10px;
-moz-border-radius-bottom-right: 10px;
-moz-border-radius-top-left: 10px;
-moz-border-radius-top-right: 10px;
}
.list td:hover {
background: #F3F3F3;
}
.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 {
width: 100%;
height: 31px;
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_3.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_3.png') repeat-x;
border-bottom: 0px;
padding-bottom: 8px;
z-index: 3;
}
.tab_page {
border: 1px solid #DDDDDD;
background: #FFFFFF;
padding: 10px;
display: block;
z-index: 2;
margin-bottom: 10px;
}
#footer {
width: 100%;
clear: both;
padding-top: 5px;
border-top: 1px solid #DDDDDD;
}
#footer .div1 {
float: left;
text-align: left;
}
#footer .div2 {
float: right;
text-align: right;
}
#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;
width: 100%;
border: 1px solid #EEEEEE;
margin-bottom: 10px;
}
.cart th {
background: #EEEEEE;
padding: 5px;
font-weight: normal;
}
.cart td {
padding: 5px;
}
.tags, .tags a {
font-style: italic;
font-size: x-small;
}
#module_cart .middle {
padding: 5px;
}
.cart_module_total {
padding: 0 3px 0 3px;
font-size: 0.9em;
color: #222;
}
.cart_remove {
margin-top: 3px;
background: url('../image/list_remove_btn.gif') no-repeat left center transparent;
padding-right:10px;
cursor:pointer;
}
.cart_remove_loading {
margin-top: 3px;
background: url('../image/ajax_load.gif') no-repeat transparent;
padding-right:10px;
}
.button_add_small, a.button_add_small:visited {
margin-top: 3px;
background: url('../image/button_add_small.png') no-repeat left center transparent;
padding:5px;
text-decoration: none;
cursor:pointer;
}
#content .middle .box {
float: left;
margin: 0 6px 10px 6px;
min-height: 0px;
}
#content .middle .box .middle {
width: 158px;
min-height: 0px;
}
The point was to add a new class, which within a DIV can be restricted to the same class, wherein css details can be preset such as by changing these values:
color: #000000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 0px;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF;
padding: 10px 10px 1px 10px;
min-height: 30px;
If for newclass the text color ("color: value;") is intended to be green, then the css can be set to #00FF00 and the DIV can be set as class newclass. In order to get the hang of it you may need to spend a while looking (and tinkering) back and forth between css and div or other tags, as well as style attributes within tags ("style="attribute: value; attribute2: value2;"). Every ";" is important; one, and only one, ending a line or in-line attribute:setting.
color: #000000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 0px;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF;
padding: 10px 10px 1px 10px;
min-height: 30px;
If for newclass the text color ("color: value;") is intended to be green, then the css can be set to #00FF00 and the DIV can be set as class newclass. In order to get the hang of it you may need to spend a while looking (and tinkering) back and forth between css and div or other tags, as well as style attributes within tags ("style="attribute: value; attribute2: value2;"). Every ";" is important; one, and only one, ending a line or in-line attribute:setting.
Who is online
Users browsing this forum: No registered users and 9 guests
