16 replies [Last post]
crestana
crestana's picture
Offline
Regular
Last seen: 6 years 21 weeks ago
Timezone: GMT-3
Joined: 2014-05-09
Posts: 11
Points: 13

Hi there !

I'm working on styling one pre made theme of an on line shop , but I got stuck on changing the color of the font on the horizontal navigation bar , without changing the color on the rest of the page.
please help me understand and change !

here is the css file and the image

/*
* =======================
*   STAMP THEME v.1.0.0
* =======================
*/
 
/*
* STORE
* -----------------------------
* Configura a estrutura da loja
*/
.store {
    background: url(<a href="http://resources.rakuten.com.br/Assets/flaviocrestana.loja.rakuten.com.br/images/layout/woodtheme/bg_main-08-05-214.gif" rel="nofollow">http://resources.rakuten.com.br/Assets/flaviocrestana.loja.rakuten.com.br/images/layout/woodtheme/bg_main-08-05-214.gif</a>) repeat top center #f3f3f3;
    overflow: hidden;
}
 
    .store .container {
        width: 990px;
	    margin: 0 auto;
	    font: 12px Arial, Helvetica, sans-serif;
 
	}
 
/*
* HEADER
* ---------------------------------
* configura o conteúdo do cabeçalho
*/
.store #header .container {
    overflow: visible;
	z-index: 2;
	position: relative;
	padding-top: 35px;
 
}
 
	/* navegação horizontal no cabeçalho */
	.store #header .container .nav-horizontal {
	    background: url(<a href="http://resources.rakuten.com.br/Assets/flaviocrestana.loja.rakuten.com.br/images/layout/stamptheme/nav_hor.gif" rel="nofollow">http://resources.rakuten.com.br/Assets/flaviocrestana.loja.rakuten.com.br/images/layout/stamptheme/nav_hor.gif</a>) no-repeat 0 0;
	    display: table;
	    width: 990px;
	    height: 74px;
	    padding: 0;
	    margin: 0 auto 0 auto;
 
	}
 
		.store #header .container .nav-horizontal ul {
		    width: 990px;
		    margin: 0 auto;
		    text-align: center;
		}
 
			.store #header .container .nav-horizontal ul li {
			    text-align: center;
			    border-right: 1px solid #000000;
			}
 
			.store #header .container .nav-horizontal ul li:last-child {
			    border: 0px;
			}
 
				.store #header .container .nav-horizontal ul li a {
				    color: 000000;
				    font-size: 15px;
				    line-height: 60px;
				    padding: 0 19px;
				    text-decoration: none;
				    text-transform: capitalize;
				}
 
					.store #header .container .nav-horizontal ul li a:hover {
					    color: #8b8b8b;
					    text-decoration: underline;
					}
 
				.store #header .container .nav-horizontal ul li ul {
				    position: absolute;
				    background: #8b8b8b;
				    width: 180px;
				}
 
					.store #header .container .nav-horizontal ul li ul li a {
					    text-align: left;
					    line-height: 32px;
					    color: #FFFFFF;
					    padding: 0 0 0 15px;
					}
 
						.store #header .container .nav-horizontal ul li ul li a:hover {
						    color: #FFFFFF;
						    text-decoration: underline;
						}
 
					.store #header .container .nav-horizontal ul li ul li ul { /* Terceiro Nível */
						top: 0!important;
					}
 
						.store #header .container .nav-horizontal ul li ul li ul li a {
						    text-align: left;
						    line-height: 32px;
						    color: #FFFFFF;
						    padding: 0 0 0 25px;
						}
 
							.store #header .container .nav-horizontal ul li ul li ul li a:hover {
							    color: #FFFFFF;
							    text-decoration: underline;
							}
 
 
/* LOGOTIPO */
.store #header .container .logo {
	float: left;
	margin-bottom: 20px;
}
 
	.store #header .container .logo a {
	    text-indent: -9999px;
	}
 
		.store #header .container .logo a:hover {
		    opacity: 0.7;
		}
 
/* LOGOTIPO com HASHTAG #LOGO# */
.store #header .container .logostore {
	margin-bottom: 10px;
}
	/* @override para versoes anteriores */
	.store #header .container .logostore span.logo {
		position: static;
	}
 
	.store #header .container .logostore a {
		background-image: none;
		width: auto;
		height: auto;
		text-indent: 0;
	}
 
/* BUSCA */
.store #header .container .search {
    background: url(<a href="http://resources.rakuten.com.br/Assets/rakutentemplates.loja.rakuten.com.br/images/layout/stamptheme/bg_search.png" rel="nofollow">http://resources.rakuten.com.br/Assets/rakutentemplates.loja.rakuten.com.br/images/layout/stamptheme/bg_search.png</a>) no-repeat 0 0;
    height: 42px;
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -55px;
}
 
	.store #header .container .search label {
	    display: none;
	}
 
		.store #header .container .search .searchbox {
		    margin: 5px;
		    width: 265px;
		    height: 32px;
		    border: 0px;
		    background: transparent;
		}
 
	.store #header .container .search input {
	    padding: 0 0 0 5px;
	    font-size: 14px;
	    color: #993e50;
	}
 
.store #header .container .do-search {
    width: 105px;
    height: 38px;
    margin: -40px 0 0 290px;
    background: transparent;
}
 
/*
* MAIN - MIOLO
* -------------------------
* configura o miolo da loja
*/
 
.store .main .container {
    margin: 5px auto 0;
    width: 990px;
 
}
 
	.store .main .content {
	    margin: 0 auto 10px;
 
	}
 
		.store .main .container .conteudo {
		    margin: 10px auto 0;
		    width: 990px;
		    clear: both;
            background:#020202;
		}
 
		.store .main .container .banner {
		    margin: 0 auto;
		}
 
			.store .main .container .banner .nivo-controlNav {
			    z-index: 99999;
			}
 
				.store .main .container .banner .nivo-controlNav a {
				    border: 1px solid #AD5667;
				    margin-left: 5px;
				    padding: 0;
				    border-radius: 15px;
				    height: 12px;
				    width: 12px;
				    text-indent: -9999px;
				    background: #FFFFFF;
				}
 
					.store .main .container .banner .nivo-controlNav a.active {
					    background: #AD5667;
					}
 
					.store .main .container .banner .nivo-controlNav a:hover {
					    background: #AD5667;
					}
 
.store .main .container .banner-menor {
    margin: 10px auto;
    width: 990px;
}
 
	.store .main .container .banner-menor .banner {
	    margin: 0px auto;
	}
 
	.store .main .container .banner-menor .banner a {
	    margin-top: 0px;
	}
 
/* Vitrine */
.store .container-product {
    width: auto;
    margin: 10px auto 0;
}
 
	.store .container-product ul {
	    width: auto;
	    margin: 8px auto 0;
	    background: 020202;
	    padding-top: 15px;
	}
 
	.store .container-product .title {
	    background: url(<a href="http://resources.rakuten.com.br/Assets/rakutentemplates.loja.rakuten.com.br/images/layout/stamptheme/bg_titulo.jpg" rel="nofollow">http://resources.rakuten.com.br/Assets/rakutentemplates.loja.rakuten.com.br/images/layout/stamptheme/bg_titulo.jpg</a>) no-repeat 0 0;
	    line-height: 47px;
	    color: #FFFFFF;
	    padding: 0 0 0 10px;
	    font-size: 16px;
	    margin: 0px auto 0px;
	    text-transform: uppercase;
	    letter-spacing: 1px;
	    text-align: center;
	}
 
	.store .container-product .offers .price {
	    color: #22a3c3;
	    font-size: 14px;
	    font-weight: bold;
	}
 
		.store .container-product .price strong {
		    color: #22a3c3;
		}
 
		.store .container-product .parcel strong {
		    color: #22a3c3;
		}
 
/*
* INSTITUCIONAL
* ---------------------------
* para paginas institucionais
*/
 
.store.institutional .main .container {
    background: #FFF;
}
 
/*
* FOOTER
* ----------------
* configura rodapé
*/
.store #footer .container {
    background: url(<a href="http://resources.rakuten.com.br/Assets/flaviocrestana.loja.rakuten.com.br/images/layout/footer_bg.gif" rel="nofollow">http://resources.rakuten.com.br/Assets/flaviocrestana.loja.rakuten.com.br/images/layout/footer_bg.gif</a>) repeat-y 0 0;
	width: 930px;
	margin: 0 auto 20px;
	height: 70px;
	display: table;
	position: relative;
	padding: 30px;
}
 
	.store #footer .container span.logo a {
	    display: block;
	    width: 158px;
	    height: 51px;
	    background: url(<a href="http://resources.rakuten.com.br/Assets/rakutentemplates.loja.rakuten.com.br/images/layout/stamptheme/logo_footer.png" rel="nofollow">http://resources.rakuten.com.br/Assets/rakutentemplates.loja.rakuten.com.br/images/layout/stamptheme/logo_footer.png</a>) 0 0 no-repeat;
	    text-indent: -9999px;
	}
 
		.store #footer .container span.logo a:hover {
		    opacity: 0.7;
		}
 
	.store #footer .container .inner {
	    margin: 15px auto 0;
		color: #FFFFFF;
		line-height: 14px;
		font-size: 11px;
		text-align: center;
		position: absolute;
		bottom: 10px;
		width: 100%;
	}
 
/*
* IE7
* ---------------------------
* regras específicas para ie7
*/
 
.store .ie7 #header .container .nav-horizontal ul li ul li {
    background: #AD5667;
    width: 170px;
}
 
.store .ie7 .conteudo .container-product ul li {
    display: inline;
}
 
.store .ie7 .pagination li {
    display: inline;
}
 
/* IMAGE 400X400 */
.store .container-product .product-image400 .hproduct,
.store .container-product .product-image400 .figure{
    width: 212px;
    height: 212px;
}
 
.store .product-image400 .photo{
    width: 210px;
    height:210px;
}
 
.store .product-image400 .figure a div{
    padding: 0px;
    width:212px;
    background-color: #bc0001;
    background-position: 42px 0px;
}
 
.store .container-product li .hproduct .details{    
    float: left;
}
 
/* ADJUST ON SEARCH */
.store .searchResult .banner-category{    
    margin-left: 15px;
    width: 715px;
}
 
.store .searchResult .banner-category a,
.store .searchResult .banner-category img{    
    width: 715px;
}
 
.store .searchResult #list-products > li:last-child{
    width: auto;
}
 
/* MAIN DIV */
.store .main .container {
    background-color:: #020202;
}
 
.store .main {
    width: 998px;
}

and the image is attached

thanks a lot

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 4 years 12 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

I suppose the website is

I suppose the website is called: http://www.rakuten.com.br/
In your file "minify.ashx" you will find everything you need to edit your menu.
for example search for: .store .nav a {color: #fff;display: block;padding: 13px 14px 10px;text-align: center;z-index: 9;}

As you can see you can edit the font color by editing the color: command.
For the yellow button with the text "alimentos a bebidos" you need to edit the following css code in the same file:

.store .nav .foodanddrink a {
    color: #F8C932;
}

For the red "Vertodas as categorias" edit the following code:

.store .nav .foodanddrink a {
    color: #F8C932;
}

Lojas will be automatically edited by the first command I told you.
And lastly we need to edit the button "Abra sua loja na Rakuten" by editing the following command:

.store .nav .openShop a {
    color: #C5EF69;
}

Now you should be able to change the font color of every button in this theme.
Cheers, Henk

P.S.: You never added a screenshot, so I am not sure if this is the correct website.
Let me know, and I am able to adjust the codes I supplied here, cause I am afraid I just adjusted the codes for a completely different website.
If not, then the file "minify.ashx" is the culprit and there you should edit the colors as supplied above.

Check Maximum Webdesign for your online solutions

crestana
crestana's picture
Offline
Regular
Last seen: 6 years 21 weeks ago
Timezone: GMT-3
Joined: 2014-05-09
Posts: 11
Points: 13

To Helldog

Hi there Henk ,

The web site is right , but I am working on a store inside this shop ( Rakuten is a shopping center and I have one shop inside).

I have attached the screen shot on my previous post but I will do it again.

thanks again

AttachmentSize
stamptheme.jpg 598.33 KB
helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 4 years 12 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Okay in your css file you

Okay in your css file you have the following piece of code:

.store #header .container .nav-horizontal ul li a {
				    color: 000000;
				    font-size: 15px;
				    line-height: 60px;
				    padding: 0 19px;
				    text-decoration: none;
				    text-transform: capitalize;
				}

As you can see behind color: you forgot the "#" icon.
It should look like this:
color: #000000;

This is also the piece of code to change the font coloring in your menu.
And this is the piece of code to change the font color whenever a mouse is hovering the button:

.store #header .container .nav-horizontal ul li a:hover {
					    color: #8b8b8b;
					    text-decoration: underline;
					}

Hope this fixed your problem.
Cheers, Henk

Check Maximum Webdesign for your online solutions

crestana
crestana's picture
Offline
Regular
Last seen: 6 years 21 weeks ago
Timezone: GMT-3
Joined: 2014-05-09
Posts: 11
Points: 13

goddammn

Hi !!!!

God Damn !

it was so easy !!!

and I could not find !!

Thanks a lot Henk!!!!!

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 4 years 12 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Sometimes the most easiest

Sometimes the most easiest edits are the hardest to find Smile

Check Maximum Webdesign for your online solutions

crestana
crestana's picture
Offline
Regular
Last seen: 6 years 21 weeks ago
Timezone: GMT-3
Joined: 2014-05-09
Posts: 11
Points: 13

two more doubts

Hullo Henk ,
I have one more (I mean two) doubts that perhaps you can help me !

on the same css file on the sub menu(ex. ANEIS) is there o right border with 1px that when I try to eliminate it takes out the border on the main menu as well)wich I don't wanna take.

I also want to put a bottom border on the sub menu, and a dot on the list.

I'll attach two images for you so you can see what I mean

thanks

AttachmentSize
file with 1 px border.jpg 26.52 KB
image that I want to copy.jpg 19.31 KB
helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 4 years 12 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Is there a possibility I can

Is there a possibility I can see the website live?
That would be easier for me to find out what classes and ID's should be used.

Thanks in advance, Henk!

Check Maximum Webdesign for your online solutions

crestana
crestana's picture
Offline
Regular
Last seen: 6 years 21 weeks ago
Timezone: GMT-3
Joined: 2014-05-09
Posts: 11
Points: 13

of course

Sorry Henk !

Of Course , here is the link

crestana
crestana's picture
Offline
Regular
Last seen: 6 years 21 weeks ago
Timezone: GMT-3
Joined: 2014-05-09
Posts: 11
Points: 13

no link....

I don't know why but it was missing the link here it goes again

<a href="http://flaviocrestana.loja.rakuten.com.br/" rel="nofollow">http://flaviocrestana.loja.rakuten.com.br/</a>

http://flaviocrestana.loja.rakuten.com.br/

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 4 years 12 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Well it seems your sub-menu

Well it seems your sub-menu doesn't have a border on the right side.
As a matter of fact, only the main menu has a right border.
I found this code inside your minify.ashx on line 1 (it seems everything is on one line):

.store #header .container .nav-horizontal ul li {
    text-align: center;
    border-right: 1px solid #000;
}

This is your main menu.

This is the code for your sub-menu, notice the right border has 0xp.
I found this code in minify.ashx also on line 1 Tired

.store #header .container .nav-horizontal ul li ul li a {
    text-align: left;
    line-height: 32px;
    color: #000;
    padding: 0px 0px 0px 15px;
    text-transform: capitalize;
    border-bottom: 1px none;
    border-right: 0px none;
}

But if you want to only delete the right border on this piece of main menu button then you have to add this piece of code inside your minify.ashx.
#ctl00_rptHorizontalNavigation_ctl02_liNavigation {border-right: 0px!important;}
This will make sure only this certain main menu button won't have it's right border.

Hope this helped with your border issue.

Check Maximum Webdesign for your online solutions

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 4 years 12 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

If you want to add a sub-menu

If you want to add a sub-menu border bottom line then this is the piece of code you need to search for in your minify.ashx on line 1 (ofcourse)

.store #header .container .nav-horizontal ul li ul li a {
    text-align: left;
    line-height: 32px;
    color: #000;
    padding: 0px 0px 0px 15px;
    text-transform: capitalize;
    border-bottom: 1px none; /*Only delete the none behind 1px*/
    border-right: 0px none;
}

read behind 1px none for more information.

And to add a dot in front of the sub-menu buttons.
first find this piece of code:

.store .nav a {
    color: #333;
    display: block;
    font-size: 12px;
}

and change the display: block; to display: list-item;

Now you are able to use list-items inside your menu.
Now find the following piece of code:

.store #header .container .nav-horizontal ul li ul li a {
    text-align: left;
    line-height: 32px;
    color: #000;
    padding: 0px 0px 0px 15px;
    text-transform: capitalize;
    border-right: 0px none;
    border-bottom: 1px none;
}

And add the following two lines:

list-style-type: disc;
list-style-position: inside;

Ofcourse, everything can be found inside minify.ashx on line 1 Smile

Check Maximum Webdesign for your online solutions

crestana
crestana's picture
Offline
Regular
Last seen: 6 years 21 weeks ago
Timezone: GMT-3
Joined: 2014-05-09
Posts: 11
Points: 13

trying and minify.ashx

Mr.Henk ,

thanks once again for being patient.

I don't know what you mean with minify.ashx , where can I find it?

I'll try to do the changes.

:+)

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 4 years 12 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

the minify file is being

the minify file is being supplied by your website hosing.
http://resources.rakuten.com.br/Minify.ashx

I suppose the best thing to do is to use the codes I supplied above, or ask them how you are able to change this minify.ashx as this do is affecting your whole website.

Cheers, henk

Check Maximum Webdesign for your online solutions

crestana
crestana's picture
Offline
Regular
Last seen: 6 years 21 weeks ago
Timezone: GMT-3
Joined: 2014-05-09
Posts: 11
Points: 13

did not work out

Hi there Henk ,

Sorry it didn't work out ....may be the code only works for the minify file?

txs

sorry for the delayed reply

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 4 years 12 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Well then add the following

Well then add the following commands in a seperate css file you are using but you will need to add !important behind them.
This is what you need to add in your css file:

#ctl00_rptHorizontalNavigation_ctl02_liNavigation {border-right: 0px!important;}
.store #header .container .nav-horizontal ul li ul li a {border-bottom: 1px!important;}
.store .nav a {display: list-item!important;}
.store #header .container .nav-horizontal ul li ul li a {list-style-type: disc!important;
list-style-position: inside!important;}

This will overrule the edits inside your other file which you couldn't edit and bring you the desired results
Cheers, henk!

P.S.: You can also do this inline in your HTML or PHP files.

Check Maximum Webdesign for your online solutions

crestana
crestana's picture
Offline
Regular
Last seen: 6 years 21 weeks ago
Timezone: GMT-3
Joined: 2014-05-09
Posts: 11
Points: 13

almost there

Dear Henk ,

here we are again ... we are almost there !

As you can see on the images attached, with your code we loose the right border but on the main meno not on the sub menu.And still no bottom border

but if i take the first line of your code , we get the border on the main menu, but still no bottom border.

can you see on the sub menu on the first item box Com Pedra that we have still one pixel border ?

thanks

AttachmentSize
with righ border and no bottom.jpg 27.02 KB
with your code no right border.jpg 14.73 KB