Jump to content

Changing link colour? Why can't i find the CSS?


melemel

Recommended Posts

I'm trying to change the category menu link colour (and also on the site docs) and despite searching i cant find the CSS! Its driving me nuts.

Wierdly, the link for homepage, gift certificates and sale items are ok.. Its the rest that are still that horrible standard blue. I also don't want them underlined, or to show the number of products.

Where can i find the CSS? Here's my store... http://www.melsbrush.../shop/index.php

Link to comment
Share on other sites

The site is http://www.melsbrushes.co.uk/shop/ I think Jason.

The reason these links are the 'default' colour is because there is no class on the links. One of your links looks like this...

<a href="index.php?_a=viewCat&amp;catId=14">Commercial License for Free Sets (1)</a>


but should look like this....


<a class="txtDefault" href="index.php?_a=viewCat&amp;catId=14">Commercial License for Free Sets (1)</a>

It looks like your categories.tpl has been altered, or the links for the categories have been manually entered.

As for removing the number of products, you will need to edit the categories.tpl for your skin and remove ({DATA.noProducts}). If the no. of products are still there after you remove it, try clearing your cache.

Lee

Link to comment
Share on other sites

The site is http://www.melsbrushes.co.uk/shop/ I think Jason.

The reason these links are the 'default' colour is because there is no class on the links. One of your links looks like this...

<a href="index.php?_a=viewCat&amp;catId=14">Commercial License for Free Sets (1)</a>


but should look like this....


<a class="textDefault" href="index.php?_a=viewCat&amp;catId=14">Commercial License for Free Sets (1)</a>

It looks like your categories.tpl has been altered, or the links for the categories have been manually entered.

As for removing the number of products, you will need to edit the categories.tpl for your skin and remove ({DATA.noProducts}). If it is still there after you remove it, try clearing your cache.

Lee

Thanks very much Lee. Which file and folder would that code be in?

Link to comment
Share on other sites

You will find it in skins/YOUR_SKIN/styleTemplates/boxes/categories.tpl

Lee

Thanks so much. Right i have changed that, though i still can't change the category colours. I feel a bit cheeky asking, but i don't suppose you could look at the stylesheet and tell me what i should chnage? Sorry i feel like i should know but ive been at it for ages!


.searchBtn {

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

	font-size: 75%;

	color: #FFFFFF;

	background-color: #666666;

	border: 1px solid #666666;

	height: 20px;

	width: 30px;

margin-bottom: 10px;

}

.searchBox {

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

	font-size: 75%;

	color: #666666;

	background-color: #F0F3ED;

	border: 1px solid #666666;

        margin-bottom: 10px;

}

.textbox {

	background-color: #F0F3ED;

	border: 1px solid #000000;

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

	font-size: 11px;

	color: #000000;

}

.textboxDisabled {

	background-color: #FFFFFF;

	border: none;

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

	font-size: 11px;

	color: #000000;

}

.submit {	

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

	color: #FFFFFF;

	background-color: #000000;

	border: none;

	height: 22px;

	font-weight: bold;

	border: 0px solid #070F72;

}

form, ol, ul {

	margin: 0px;

	padding: 0px;

}



li {

	list-style-position: inside;

    list-style-type: none;

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

	font-size: 75%;

font-weight:bold;

	margin: 0px;

    padding: 4px;

padding-left: 15px;

color: #8C9F69;

      

}

li.bullet {

	list-style-type: round;

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

	font-size: 75%;

	color: #505531;	

}

li.bulletLrg {

	list-style-type: round;

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

	font-size: 100%;

	color: #000000;	

}

li.num {

	font-family: Arial;

	font-size: 75%;

	color: #8C9F69;		

}

li.account {

	list-style-type: square;

	padding-top: 5px;

	padding-bottom: 5px;

}

.txtSession, .txtCopy, .txtSiteDocs {

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

	font-size: 75%;

	color: #333333;





}

a.txtSession, a.txtSiteDocs {

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

	font-size: 75%;

	color: #333333;

	text-decoration: none;







}

a.txtSession:hover, a.txtSiteDocs:hover {

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

	color: #DBF756;

	text-decoration: underline;



}

a.txtButton {

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

	font-weight: bold;

	color: #FFFFFF;

	background-color: #91B64C;

	padding: 2px;

	line-height: 20px;

	text-align: center;

	text-decoration: none;

}

a.txtButton:hover {

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

	font-weight: bold;

	color: #FFFFFF;

	background-color: #8E3565;

	padding: 2px;

	line-height: 20px;

	text-align: center;

	text-decoration: none;

}



.txtOldPrice {

	text-decoration: line-through;

}

.txtSale {

 	color: #FF0000;

}

.txtOutOfStock {

	color: #FF0000;

}

.txtSiteDocs, a.txtSiteDocs {

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

	font-size: 16px;

	color: #333333;



	text-decoration:none;

}

a.txtSiteDocs:hover {

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

	font-size: 16px;

	color: #64760F;

	text-decoration:none;

}

.txtDefault, a.txtDefault, a.txtLink, a.txtLocation {

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

	color: #333333;

	text-decoration:none;

}

a.txtDefault:hover, a.txtLink:hover, a.txtLocation:hover {

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

	color: #64760F;

	text-decoration:none;

}

.txtContentTitle {

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

	font-size: 120%;

	font-weight: bold;

	color: #64760F;

}

.txtBoxSave {

	color: #F90707;

	padding-left: 16px;

}

.tblList {

	border: 0px solid #070F72;

}

.tdListTitle {

	background-color: #91B64C;

padding-top:6px;

padding-bottom: 6px;

padding-left: 6px;

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

	font-weight: bold;

	color: #333333;

}

.tdEven {

	background-color: #FFFFFF;

}

.tdOdd {

	background-color: #E7ECE2;

}

.txtCartPrice {

	float: right;

	color: #FF0000;

	padding-right: 3px;

}

.txtCart {

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

	font-size: 75%;

	color: #000000;	

}

.cartTotal {

	border-top: 1px dashed #070F72;

	width: 190px;

	padding-top: 8px;

	margin-top: 3px;

}

a.txtCartProduct:active, a.txtCartProduct:link, a.txtCartProduct:visited {

	text-decoration: none;

	color: #000000;

}

a.txtCartProduct:hover {

	text-decoration: none;

	color: #FF6600;

}

a.txtviewCart:active, a.txtviewCart:link, a.txtviewCart:visited {

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

	font-size: 75%;

	font-weight: bold;

	color: #FFFFFF;

	background-color: #A8B27A;

	text-decoration: none;

	font-weight: bold;

	padding: 3px;







	border: 0px solid #000000;

}

a.txtviewCart:hover {

	background-color: #3D4A02;

	color: #FFFFFF;

}

.cartProgress {

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

	font-weight: normal;

	color: #666666;

	padding: 4px;

	border: 1px solid #CCCCCC;

	width: 350px;

	margin: auto;

}

.txtcartProgressCurrent {

	color: #FF9900;

	font-weight: bold;

}

.quickBuy {

	text-align: center;

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

	color: #666666;

}

.tdcartTitle {

	font-weight: bold;

	color: #FFFFFF;

	background-color: #999999;

	border-bottom: 1px solid #666666;

}

.tdcartEven {

	background-color: #EBEDFE;	

}

.tdcartOdd {

	background-color: #FFFFFF;

}

.tdCartSubTotal {

	padding-top: 10px;

	border-top: 1px solid #666666;

}

a.txtCheckout {

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

	font-weight: bold;

	color: #FFFFFF;

	background-color: #94B94D;

	text-decoration: none;

	font-weight: bold;

	padding: 2px;

	border: 1px solid #000000;

}

a.txtUpdate {

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

	font-weight: bold;

	color: #FFFFFF;

	background-color: #94B94D;

	text-decoration: none;

	font-weight: bold;

	padding: 2px;

margin-left: 10px;

	border: 0px solid #000000;

}

.txtStockWarn {

	font-size: 75%;

	color: #FF0000;

}

.txtError {

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

	font-weight: bold;

	color: #050F72;

	background-color: #FFCECE;

	border: 1px solid #FF0000;

	padding-top: 2px;

	padding-right: 2px;

	padding-bottom: 2px;

	padding-left: 2px;

}

.txtCopyright, a.txtCopyright {

	text-align: center;

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

	font-size: 12px;

	padding-top: 5px;

	color: #000000;

}

a.txtCopyright:hover {

	text-decoration: none;

}

.dropDown {

	width: 120px;

}

td



img {

border: none;

}

.cart_icon {

border: none;

margin: 12px 0px;

}



a.txtSelected:hover, a.txtSelected:active, a.txtSelected:link, a.txtSelected:visited {

color: #FF6600;

text-decoration:none;

}



a.flashBasket:active, a.flashBasket:link, a.flashBasket:visited, a.flashBasket:hover {

font-weight: bold;

color: #FFFFFF;

background-color: #66CC33;

text-decoration: none;

font-weight: bold;

padding: 2px;

border: 1px solid #000000;

}



.addCoupon:hover, .addCoupon:active, .addCoupon:visited, .addCoupon:link {

font-weight: bold;

color: #000000;

text-decoration: none;

font-weight: bold;

}

.RatingTop {

border-top: 1px solid #070F72;

border-right: 1px solid #070F72;

border-left: 1px solid #070F72;

background-color: #EBEDFE;

padding: 3px;

}

.RatingMain {

border-right: 1px solid #070F72;

border-left: 1px solid #070F72;

background-color: #EBEDFE;

padding: 3px;

font-style:italic;

}

.ReviewBot {

border-right: 1px solid #070F72;

border-left: 1px solid #070F72;

background-color: #EBEDFE;

padding: 3px;

border-bottom: 1px solid #070F72;

}

.RatingBottom {

background-color: #070F72;

padding: 3px;

border-right: 1px solid #070F72;

border-left: 1px solid #070F72;

color: #FFFFFF;

/*font-size: 11px;*/

}

a.sortLink {

color: #FFFFFF;

font-weight: bold;

text-decoration: none;

}

a.sortLink:hover {

text-decoration: underline;

}

#shipping-select {

width: 220px;

}

/* CSS Document */









Its probably all really messed up as i tend to muck about with it as i go with no real idea what i'm doing!

Oh and here is the categories.tpl code if that is useful..




<!-- BEGIN: categories -->

<div class="boxTitleLeft">{LANG_CATEGORY_TITLE}</div>

<div class="boxContentLeft" style="padding: 0px;">

	<ul id="mainmenu-nav">

		

		<li class="li-nav"> <a href="index.php" class="txtDefault">{LANG_HOME}</a></li>



			<!-- BEGIN: a -->

			<!-- BEGIN: ul_start -->

			<ul class="ul-nav">

				<!-- END: ul_start -->

				<!-- BEGIN: li_start -->

				<li class="li-nav">

				<!-- END: li_start -->

					<a class="textDefault" href="index.php?_a=viewCat&amp;catId={DATA.cat_id}">{DATA.cat_name} </a>

				<!-- BEGIN: li_end -->

				</li>

				<!-- END: li_end -->

				<!-- BEGIN: ul_end -->

			</ul>

		</li>

		<!-- END: ul_end -->

		<!-- END: a -->

		

		<!-- BEGIN: gift_certificates -->

		<li class="li-nav"> <a href="index.php?_a=giftCert" class="txtDefault">{LANG_GIFT_CERTS}</a></li>

		<!-- END: gift_certificates -->

		

		<!-- BEGIN: sale -->

		<li class="li-nav"> <a href="index.php?_a=viewCat&amp;catId=saleItems" class="txtDefault">{LANG_SALE_ITEMS}</a></li>

		<!-- END: sale -->

	</ul>

	<br clear="all" />

</div>

<!-- END: categories -->

Link to comment
Share on other sites

Hi

Sorry, I made a typo in an earlier post :whistle: The style is txtDefault NOT textDefault. If you change that, it should pick up the style (Below), from your stylesheet.

.txtDefault, a.txtDefault, a.txtLink, a.txtLocation {

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

        color: #333333;

        text-decoration:none;

}


I have looked a little deeper into why the links are not as they should be. First, you shouldn't really have had to put the txtDefault styling in, on the categories.tpl file like so...




 <!-- END: li_start -->

 <a class="txtDefault" href="index.php?_a=viewCat&amp;catId={DATA.cat_id}">{DATA.cat_name} </a>

 <!-- BEGIN: li_end -->

It looks like a style is missing from your stylesheet (li-nav), which controls the styling of list items ie your categories. Also, I think the mainmenu-nav style, along with a few others, are also missing.

Lee.

Link to comment
Share on other sites

  • 3 weeks later...
Guest dr john

The easy way to track down which bit of css needs changing is to start by using firefox, then install in firefox the legendary Web Developer Toolbar

Then under the CSS options it offer , select view style information.

This tells you what the css code details are for any part of any page.

Then you write that down, switch off the style info option and use the edit css option to actually experiment with your ideas on different colours etc. It dispalys a temporary copy of the stylesheets and lets you edit them.

Link to comment
Share on other sites

  • 1 month later...

The easy way to track down which bit of css needs changing is to start by using firefox, then install in firefox the legendary Web Developer Toolbar

Then under the CSS options it offer , select view style information.

This tells you what the css code details are for any part of any page.

Then you write that down, switch off the style info option and use the edit css option to actually experiment with your ideas on different colours etc. It dispalys a temporary copy of the stylesheets and lets you edit them.

This is invaluable for me as I am overhauling the skin myself over the hols as my experienced friend is doing other (high paid) things:)

I am aiming for a monochrome style for now lol

Thank you dr john!

P.S. Thanks again to Lee who is a master at troubleshooting:)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...