Jump to content

[SOLVED] Product.tpl ---> Additional Images POSITION!


robkwal
 Share

Recommended Posts

Hi all,

I am looking to achieve what can be seen HERE, the additional images are to left hand of the side of the main image as a posed to the original below the main image!? I also don't want the scroll bar to be active!

Thanks in advance,

Rob

Share this post


Link to post
Share on other sites

It is not to difficult.
There are more properties but I will write just what you need to add.

#primary_block #pb-right-column {
position:relative;
}


then

#views_block {
left:10px;
position:absolute;
top:10px;
}



Then you need to change / delete some code in product.tpl in thumbnail section.
Delete/comment out lines with

{if count($images) > 3}

that holds arrows .
And change

></pre>
<ul>


to

></pre>
<ul style="width:80px;">


or
just

></pre>
<ul>


and add style to global.css

ul#thumbs_list_frame{width: 80px}



I think that is it, maybe you need to adjust some widths but generally these are steps.

Share this post


Link to post
Share on other sites

Hi razaro,

I have just came across a little problem nothing major! What I now wanted to do is add a border to the right hand side of the #view container, but for some reason even though the width is set to 40px it seems to put the border about 205px in so in effect over the top of the main image! Instead of acting as a divider. If you could help again would be great!

Kind Regards,

Rob

Share this post


Link to post
Share on other sites

I am not sure if I understood you correctly but try this

#thumbs_list {
border-right:5px solid white;
float:left;
overflow:hidden;
width:80px;
}


global.css (line 871)

If this is not it add some screen-shots .

Share this post


Link to post
Share on other sites

Hi,

Thought this was solved, then just checked it out on all the browsers to make sure it was rendering similar on all to find that internet explorer doesn't show the additional images at all. Just what looks to be very small bullet points!

I have attached the explorer screen shot and it rendering correctly on chrome!

Here is also the code for my product template if it helps:


/* product.tpl */
#primary_block #pb-right-column {
position:relative;
width: 550px;/*460 310*/
float: left;
}
#primary_block #image-block {
padding-left:50px;
height: 450px;
width: 450px
}

#primary_block #image-block img#bigpic {
cursor: pointer;
height: 450px;
width: 450px
}
#primary_block ul#usefull_link_block {
list-style-type: none;
margin-top: 1em
}
#primary_block ul#usefull_link_block li { margin: 0.5em 1em 0.5em 0; display: block }
#primary_block ul#usefull_link_block li a,
#primary_block ul#usefull_link_block span.span_link,
#primary_block ul#usefull_link_block span.span_link:hover {
text-decoration: none;
color: #76839b;
font-size: 0.9em;
background: white url('../img/bullet_alt.jpg') no-repeat top left;
padding-left: 15px;
height: 15px
}
#primary_block #pb-left-column {
float: left;
width: 390px /*530*/
}
#pb-left-column h2 {

}
#primary_block #short_description_block {
border-bottom:1px dotted #D8D8D8;
margin-bottom: 1.5em
}
#primary_block #color_picker p {
margin-bottom: 0.4em;
padding: 0
}
#color_picker h3 {
font-size:12px;
font-weight:bold;
color:#000000;
text-transform:uppercase;
}
#primary_block #color_picker {


}
#primary_block #color_to_pick_list li {
display: inline;
float: left;
margin: 0 0.4em 0.4em 0
}
#primary_block a.color_pick {
display: block;
width: 20px;
height: 15px;
border-bottom-left-radius: 3px 3px;
border-bottom-right-radius: 3px 3px;
border-top-left-radius: 3px 3px;
border-top-right-radius: 3px 3px;
cursor: pointer
}
#primary_block a.color_pick:hover { }
#primary_block a#color_all { cursor: pointer }
#primary_block #image-block img#bigpic.jqzoom {
cursor: crosshair;
position: relative
}
#primary_block p.buttons_bottom_block { margin: 0 }
#primary_block p.buttons_bottom_block a,
#primary_block p.buttons_bottom_block input { margin: 0.9em auto 0 auto }
#primary_block #short_description_content { margin-bottom: 0.5em }
#primary_block form#buy_block {
color: #000000;
border-bottom:1px dotted #D8D8D8;
padding-bottom:1em;
}
#primary_block form#buy_block p {
padding: 0;
margin-top: 0
}
#buy_block h3 {
font-size:12px;
font-weight:bold;
color:#000000;
text-transform:uppercase;
}
#primary_block form#buy_block img.on_sale_img { float: left }
#primary_block form#buy_block span.on_sale {
color: #da0f00;
text-transform: uppercase;
font-weight: bold;
float: right
}
#primary_block form#buy_block span.discount {
color: #da0f00;
text-transform: uppercase;
font-weight: bold;
float: right
}
#primary_block form#buy_block span.our_price_display { float: left }
#primary_block form#buy_block span#availability_label {
float: left;
margin-right: 1em
}
#primary_block form#buy_block label { font-weight:bold; text-transform:uppercase; font-size:12px; padding-top:3px;text-align: left;margin-right:10px; }
#primary_block form#buy_block label,#primary_block form#buy_block select {
display: block;

float: left
}
#primary_block div#attributes p, #quantity_wanted_p {
clear: left;
height: 2em
}


/* views block */
#views_block {
/*margin: 0 auto;
width: 40px;*/
left:0px;
position:absolute;
top:0px;
}
#thumbs_list {
/*overflow: hidden;*/
border-right:1px dotted #D8D8D8;
float: left;
width: 49px; /*240*/
}
ul#thumbs_list_frame{width: 40px; border-right:1px dotted #D8D8D8;}
#thumbs_list ul {
padding-left: 0;
list-style-type: none;
margin-top: 5px
}
#thumbs_list li {

cursor: pointer;
width: 40px;
height: 50px
}
#view_scroll_left, #view_scroll_right {
background: url('../img/thumbs_left.gif') no-repeat center;
text-indent: -3000px;
width: 9px;
height: 18px;
float: left;
margin-top: 30px;
padding-right: 4px;
padding-left: 4px
}
#view_scroll_right { background-image: url('../img/thumbs_right.gif') }
span.view_scroll_spacer {
float: left;
width: 17px;
height: 80px
}

31553_OHx9rLiF6VKyx8mRRUwp_t

31554_9SuvDhh3J5mLxOfcSJjc_t

Share this post


Link to post
Share on other sites

Just a quick note, it would seem that what I believed to be bullet points to begin with are actually the images just very very small for some reason. Do you no what might be causing this and how to rectify it?

Share this post


Link to post
Share on other sites

I have now managed to solve this, when I made the suggested changes earlier I also changed the height="{$mediumSize.height}" width="{$mediumSize.width}" to height="{$smallSize.height}" width="{$smallSize.width}" so decided to change back to the original height="{$mediumSize.height}" width="{$mediumSize.width}" and this seems to have corrected the problem with internet explorer!!!

Share this post


Link to post
Share on other sites

I saw similar problem in this topic it is also reported in bug tracker, so check that out also.

Only difference in your case is that $smallSize variable is not defined in product.tpl so it had same effect.

And I'll sent you PM about some other issues with your website :-)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More