Change from horizontal to vertical

[ruchit.devil]

i want to change the review tab from horizontal view to vertical view.

i had attached the image of the website.

[vekia]

it's a non-default theme so it's hard to say what you have to change, moreover, the question is:

you want to change product view only for home featured module? or for other pages like category view too?

[ruchit.devil]

i just need to change the review tab on the left column to vertical view.

[PascalVG]

Do you mean with 'view', that you want the button to be rotated 90 degrees??

 

If so, try this:

 

Add to themes/<your theme="" folder="">/css/global.css (just add at the end)

 

div.yotpo-testimonials yotpo-testimonials-btn {

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

-o-transform: rotate(-90deg);

/* IE */

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

top: 140px;

}

 

Hope I understood the question...

 

My 2 cents,

pascal</your>

Edited August 11, 2013 by PascalVG
forgot - sign in front of 90 :[ (see edit history)

[PascalVG]

Sorry, forgot minus sign. Please change into -90 (fixed it already in example above)

[Jiten rash (away)]

this css are located on remote yatpo site

add this to global.css file !important tag will surely effect

.yotpo-testimonials yotpo-testimonials-btn {

transform: rotate(90deg) !important;");

-webkit-transform: rotate(90deg);

-moz-transform: rotate(90deg);

-o-transform: rotate(90deg);

margin-left:47px;

/* HACK IE */

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

top: 140px IE;

}

[Jiten rash (away)]

this is wat u want isnt it

Edited August 11, 2013 by Jiten rash (see edit history)

[PascalVG]

Jiten,

Before you post some code, please test if it works (or at least contains no syntax errors!)

 

And before you copy part of other people's posts, make sure you know how it really works. BS isn't helping anyone...

 

pascal

Edited August 11, 2013 by PascalVG (see edit history)

[Jiten rash (away)]

i tested and attached screen also,,

[PascalVG]

Then.. what does this do.... top: 140px IE;

enlighten us...

Also, when turning text DOWNwards, top should not be at 140px down, just at 0...

[ruchit.devil]

i tried both the code. but none of it working for me.

[Jiten rash (away)]

u have to do it inline css then

[ruchit.devil]

u have to do it inline css then

 

jiten can you explain me in detail. i am not a programmer. so doesn't know what exactly it means. thanks

[vekia]

i suppose that Jiten wanted to say, that you have to use display:inline-block; css style in the class that you created / use

[Jiten rash (away)]

no no see the css of that module are located on remote yatpo server..tag (!important ) after css must work in this case..

add the css which i gave u on global .css use Mozilla developer tool to find out the css we added are working or not..

untick the css from yatpo..wen u do that.make sure the css on global gets active..now we have to add !important to all like example

 

.yotpo-testimonials yotpo-testimonials-btn {

transform: rotate(90deg) ! important ;

-webkit-transform: rotate(90deg) ! important;

-moz-transform: rotate(90deg) ! important;

-o-transform: rotate(90deg) ! important ;

even if this is not working either we have to change Div 's or add inline css

[Jiten rash (away)]

add this on tpl file yatpo testimonials

 

inline css 100% tested

 

<div class="yotpo-testimonials yotpo-testimonials-btn" style="top: 226px; left: -8px; transform: rotate(270deg); -webkit-transform: rotate(270deg) ;

-moz-transform: rotate(270deg) ;

-o-transform: rotate(270deg) ;z-index: 10000;">

[ruchit.devil]

add this on tpl file yatpo testimonials

 

inline css 100% tested

 

<div class="yotpo-testimonials yotpo-testimonials-btn" style="top: 226px; left: -8px; transform: rotate(270deg); -webkit-transform: rotate(270deg) ;

-moz-transform: rotate(270deg) ;

-o-transform: rotate(270deg) ;z-index: 10000;">

 

 

jiten can you tell me the exact file name because there are 5 .tpl files in yotpo folder.

bottomLineDiv.tpl

conversionImage.tpl

registrationForm.tpl

settingsForm.tpl

widgetDiv.tpl