PDA

View Full Version : Brands slider



Apostolos Fotsis
August 21, 2013, 04:41 PM
Hi
How to import brands slider from auto brands template to auto modern template?
Thanks

Viktor
August 22, 2013, 05:57 AM
Hello

Please try to apply my instruction.

Open ftp://templates>>auto_modern>>tpl>>blocks>>categories_block.tpl

and in last line add new:


{include file='blocks'|cat:$smarty.const.RL_DS|cat:'brands. tpl'}

Then copy logos for brands from auto_brand>>img>>brands to auto_modern>>img>>brands add folder.

And insert new css styles in ftp://auto_modern>>css>>common.css in end of file:



/* brands slider */
#brands-slider
{
height: 75px;
width: 100%;
table-layout: fixed;
margin-top: 10px;
-moz-user-select: none;
-khtml-user-select: none;
}
#brands-slider td.left,
#brands-slider td.right
{
height: 60px;
width: 32px;
cursor: pointer;
background: url('../img/gallery.png') 0 -2594px no-repeat;
}
#brands-slider td.right
{
background-position: 0 -3000px;
}
#brands-slider td.center
{
height: 60px;
padding: 0 10px;
vertical-align: top;
background: url('../img/gallery.png') 0 -3073px repeat-x;
}
#brands-slider td.left div,
#brands-slider td.right div
{
position: relative;
}
#brands-slider td.left div img,
#brands-slider td.right div img
{
width: 9px;
height: 13px;
background: url('../img/gallery.png') 0 -3161px no-repeat;
position: absolute;
top: 26px;
right: 3px;
}
#brands-slider td.right div img
{
right: auto;
left: 3px;
background-position: -9px -3161px;
}
#brands-slider td.left:hover div img
{
background-position: -22px -3161px;
}
#brands-slider td.right:hover div img
{
background-position: -31px -3161px;
}
#brands-slider div
{
overflow: hidden;
position: relative;
height: 68px;
}
#brands-slider ul
{
width: 3000px;
height: 68px;
position: absolute;
}
#brands-slider ul li
{
height: 68px;
width: 68px;
float: left;
padding: 0 2px;
background: url('../img/brands/brands_hover.png') center top no-repeat;
}
#brands-slider ul li:hover
{
background-position: center -68px;
}
#brands-slider ul li a
{
text-decoration: none;
display: block;
}
#brands-slider ul li a span
{
display: inline-block;
*display: inline;
*zoom: 1;
background-position: 0 8px;
background-repeat: no-repeat;
height: 68px;
width: 68px;
}
#brands-slider ul li a:hover span
{
background-position: 0 -50px;
}
/* brands slider end */

Apostolos Fotsis
August 22, 2013, 01:27 PM
Thanks Victor

standauto.net
August 22, 2013, 07:30 PM
Thanks you very much

Viktor
August 23, 2013, 08:27 AM
Hello All,

Let me know if it works good or may be some problems with it?