Jump to content

[SOLVED]Top menu - Replace text with images

sw1ft25

By sw1ft25
in OUT - 1.6.0.7 [17 Jun 2014]

 Share

Recommended Posts

sw1ft25 Newbie

sw1ft25

Posted
Posted (edited)

Hi Prestashop Forum!

 

I'm working on development on the new Prestashop 1.6.0.6. We have already an on-line shop @ http://gradina-viitorului.ro  with the 1.5.6 version and wanted to keep same layout but in the same time we wanted also the new fresh feel of the 1.6x because we loved the new look, design and simplicity.

 

So what blocked me here was that we were unable to see through the new superfish-modified.css. I simply cannot comprehend it because I barely managed to see though the old css file. 

 

First of all, let me show you how i have managed to work around the old css file to make it look like it does, here I go:

.sf-menu a.sf-with-ul {
	
	padding-top:130px;
	display: inline-block; 
	vertical-align: text-bottom;
	width:140px;
	height:50px;
	text-align:center;
	left: 0px;
}

li li a.sf-with-ul {background:none;}

li:first-child a.sf-with-ul {

background: url('../img/tractor.png') transparent;
	background-repeat:no-repeat;
	background-position: center bottom;
	width:130px;
	font-size:10px;
	font-weight: 900;
	height:20px;
	text-align:center;
	text-indent:-9999px;
}

li:first-child a.sf-with-ul:hover {

background: url('../img/tractora.png') transparent;
	background-repeat:no-repeat;
	background-position: bottom;
	width:130px;
	font-size:10px;
	font-weight: 900;
	height:20px;
	text-align:center;
	text-indent:-9999px;
}

*////////////////////////////////////////////////accesorii tractoare

li:nth-child(2) a.sf-with-ul {

background: url('../img/moto.png') transparent;
	background-repeat:no-repeat;
	background-position:center bottom;
	width:130px;
	font-size:10px;
	font-weight: 900;
	height:20px;
	text-align:center;
	text-indent:-9999px;
}
li:first-child + li a.sf-with-ul {

background: url('../img/moto.png') transparent;
	background-repeat:no-repeat;
	background-position:bottom;
	width:130px;
	font-size:10px;
	font-weight: 900;
	height:20px;
	text-align:center;
	text-indent:-9999px;
}


li:nth-child(2) a.sf-with-ul:hover {

background: url('../img/motoa.png') transparent;
	background-repeat:no-repeat;
	background-position:bottom;
	width:130px;
	font-size:10px;
	font-weight: 900;
	height:20px;
	text-align:center;
	text-indent:-9999px;
}
li:first-child + li a.sf-with-ul:hover {

background: url('../img/motoa.png') transparent;
	background-repeat:no-repeat;
	background-position:bottom;
	width:130px;
	font-size:10px;
	font-weight: 900;
	height:20px;
	text-align:center;
	text-indent:-9999px;
}

*//////////////////////////////////////////////////accesorii motocultoare


li:nth-child(3) a.sf-with-ul {

background: url('../img/motos.png') transparent;
	background-repeat:no-repeat;
	background-position:center bottom;
	width:130px;
	font-size:10px;
	font-weight: 900;
	height:20px;
	text-align:center;
	text-indent:-9999px;
}
li:first-child + li + li a.sf-with-ul {

background: url('../img/motos.png') transparent;
	background-repeat:no-repeat;
	background-position:bottom;
	width:130px;
	font-size:10px;
	font-weight: 900;
	height:20px;
	text-align:center;
	text-indent:-9999px;
}


li:nth-child(3) a.sf-with-ul:hover {

background: url('../img/motosa.png') transparent;
	background-repeat:no-repeat;
	background-position:bottom;
	width:130px;
	font-size:10px;
	font-weight: 900;
	height:20px;
	text-align:center;
	text-indent:-9999px;
}
li:first-child + li + li a.sf-with-ul:hover {

background: url('../img/motosa.png') transparent;
	background-repeat:no-repeat;
	background-position:bottom;
	width:130px;
	font-size:10px;
	font-weight: 900;
	height:20px;
	text-align:center;
	text-indent:-9999px;
}

*/////////////////////////////////////////////////////////accesorii motosape



.......................... and so on till li:nth-child(7)

It was the most simple way that i could think of to do that but as a result it worked!

 

I tried to do the same aproach on the 1.6 version in..\themes\bootstrap\css\modules\blocktopmenu\css but that superfish-modified.css is above my reach.

 

So in short, would be a great thing that we could implement that same top menu within the 1.6x version. That's all I'm asking of you. If there's someone out there to give us a hand here we'd be very happy and pleased.

 

Best regards, 

Gradina Viitorului Team

 

Ps: Working on XAMPP for 1.6x but we could put it online for testing.

Edited by sw1ft25 (see edit history)
Link to comment
Share on other sites
sw1ft25 Newbie

sw1ft25

Posted
  • Author
Posted (edited)

Ok, soo..

 

I did it with the same first-child css syntax but I guess the coding was still new to me and took some time to figure it out. So if is anyone out there who wants to replace text with images in the top menu this is what you can do:

 

in /YOUR_THEME/css/modules/blocktopmenu/css is the stylesheet superfish-modified.css

 

Find:

.sf-menu > li > a {bla bla;}

Copy paste just ".sf-menu > li > a" and after each li element add (for the first one is :first-child ) :nth-child(number of list element order), like this:

.sf-menu > li:first-child > a {
   
background: #ac4743;
display: block;
height:150px;
width:165px;
text-indent:-9999px; }
	
.sf-menu > li:nth-child(2) > a {
   
background: #43ac7c;
display: block;
height:150px;
width:165px;
text-indent:-9999px; }
	
.sf-menu > li:nth-child(3) > a {
   
background: #7c43ac;
display: block;
height:150px;
width:165px;
text-indent:-9999px; }
.
.
.
and so on..

VERY IMPORTANT!

 

Add text-indent:-9999px; for the text to go off screen. 

 

Instead of color like #333333 you can put images like "background-image:url('../img/YOUR_IMAGE_MANE.extension')"

Add height and width to each element for more consistency.

 

For the hover effect, find:

.sf-menu > li .sfHover > a,
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {bla bla;}

For this one you can start fresh just with this modification (you can remove the original) like this:

.sf-menu > li:first-child.sfHover > a,
  .sf-menu > li:first-child > a:hover, .sf-menu > li:first-child.sfHoverForce > a {
    background: #75302e;
    border-bottom-color: #666666;
    color: white; }

.sf-menu > li:nth-child(2).sfHover > a,
  .sf-menu > li:nth-child(2) > a:hover, .sf-menu > li:nth-child(2).sfHoverForce > a {
    background: #183e2d;
    border-bottom-color: #666666;
    color: white; }
.
.
.
and so on

You can act the same way with the background image. Same rules apply with the hover too aswell as with the "un-hovered" ones.

 

Idea: you can have grayscaled images without hover and colored images when you hover. So if you cllicked one link/category on that page the link becomes active and will remain colored and the other images will be in grayscale.

 

If you have any questions pls reply to this topic.

 

I will mark this as solved. Cheers!

 

UPDATE: Wait! I have now a big problem with the responsive feature of this. When its under 767 px . I'll be back soon with modifications, if i find them.. If not anyone is welcome to jump in with some sugestions!

Edited by sw1ft25 (see edit history)
  • Like 2
Link to comment
Share on other sites
  • 3 months later...
sw1ft25 Newbie

sw1ft25

Posted
  • Author
Posted

For the responsive feature (until it changes @media (max-width:767px) when the category dropdown appears) I added the line:

 

.sf-menu > li {
width:12.5%;
margin:0 auto;
 }
 
12.5% is just my case (100%/8 items=12.5%) but may differ.
 
For the category drop-down I added each image this way:
 
@media (max-width: 767px) {
 
.sf-menu > li {width:100%;}
.sf-menu > li:first-child > a {
background:url('../../../../img/tractomic.png');
background-size:contain;
display: block;
height:50px;
width:100%;
}
and so on..
 
Hope it helps. For more questions or problems don't hesitate to reply.
 
Cheers
  • Like 2
Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...