Profile: Peter.Zhekov
User posts
Hi,
You need to do just few small changes in the file "980.css" which you can find here:
"~/Themes/"your theme name here"/Content/CSS/980.css".
So lets starts with the changes.
Open file 980.css and find this line:
.header-selectors-wrapper > div
Then inside the brackets change the property "float:left;" to "float:right;" and "margin:0 10px 0 0" to "margin:0 0 0 10px".
Then find the line:
.search-box and change "clear:right;" to 'clear:left;'.
Then do not forget to save the changes. That must work for you.
Hello there,
To achieve the effect you want you need to make some style changes. I`ll help you with this so don`t worry about it.
First you need to limited the cells width to desirеd value (the tab navigation buttons).
You can set this here:
~Themes/Nitro/Content/CSS/480.css
In the file 480.css find this code:
.ui-tabs .ui-tabs-nav li{
float: left;
margin: 0 2px 0 0;
}
In here you must add max-width style - something like this but maybe with other value bigger than 150px, it depends of you:
.ui-tabs .ui-tabs-nav li{
float: left;
margin: 0 2px 0 0;
max-width:150px;
}By adding only this style the tab navigation will looks not very good. Maybe you need to try adding the following styles and see what`s happen than.
Again in the same line of code like the upper one, add the bold styles:
.ui-tabs .ui-tabs-nav li{
float: none;
display:inline-block;
margin: 0 2px 0 0;
max-width:150px;
}The result here must be tabs standing one line. But here the issue is that some of the tabs are higher than the others and if they drop to second line it might not looks great.
That`s the reason why the design is those tabs not to drop to second line.
There is one more think you can do, that it might works.
In the file 480.css find :
.ui-tabs .ui-tabs-nav li a{
}And add this styles:
.ui-tabs .ui-tabs-nav li a{
display: table-cell;
height: 50px;
max-width: 130px;
vertical-align:middle;
text-align:center;
padding:0 5px;
}I hope that will help.
Well it`s a difficult issue. Maybe if I had some access to the page, I should say for sure.
I think you must change your markup and embed the video by using <object> and <param> elements, or <video> and <source> (for this option you might use Flash-free support - https://github.com/etianen/html5media/wiki ).
Set the z-index of the div holding the flash to 1 and the z-index of the div holding the nav to 2 (for example).
In the flash element:
Look for the flash <object> tag and add the following code:
<param name="wmode" value="transparent">You’ll want to insert this code right below the <param name=”quality” value=”high”> tag and include the code wmode=”transparent” in the flash <embed> tag.
Hello there!
Thank you for reporting this. It is fixed now.
I already answered your ticket and what files to update to get the fix.
Please do not duplicate forum posts and tickets!
Hello!
So if you want to disable the quick view popup you need go to administration, and turn the plugin off.
To kept the magnify button you need to find the
Themes/ArtFactory/Views/Shared/_ProductBox.cshtml file.
Find the code below
<div class="description-wrapper">
<a class="description" href="@Url.RouteUrl("Product", new { SeName = Model.SeName })">
@Html.Raw(Model.ShortDescription)
</a>
</div>
and add this code
<div class="quick-view-button">
<a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })"></a>
</div>
Finally it should looks like this:
<div class="description-wrapper">
<a class="description" href="@Url.RouteUrl("Product", new { SeName = Model.SeName })">
@Html.Raw(Model.ShortDescription)
</a>
<div class="quick-view-button">
<a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })"></a>
</div>
</div>
Actually the bold font is the new code you must add.
Finally you need to add some styles for the button and copy the icon from:
Plugins\SevenSpikes.Nop.Plugins.QuickView\Themes\ArtFactory\Content\images\icon-quick-view.png
Than paste it here:
Themes/ArtFactory/Content/img
Finally go to:
ArtFactory/Content/css/styles.css file, and in the end of the document just copy this code:
.item-box:hover .quick-view-button {
opacity: 1;
}
.product-grid .quick-view-button {
bottom: 16px;
left: 50%;
margin: 0 0 0 -15px;
position:absolute;
}
.quick-view-button a {
background: url("../img/icon-quick-view.png") no-repeat scroll center center rgba(0, 0, 0, 0);
height: 31px;
opacity: 0.7;
padding: 0;
text-indent: -9999px;
transition: all 0.15s ease-in-out 0s;
width: 31px;
display:block;
}
And that`s all.
Again: 1. stop the plugin (quick view); 2. find and replace the code in _ProductBox.cshtml; 3. copy the image; 4. copy the styles in styles.css.
I`m sending you full code that you have to change.
Find this lines:
.item-box .product-rating-box {
display: none;
} and replace with:
;
.item-box .product-rating-box {
display: inline-block;
}
And on lines:
.product-review-box {
display: inline-block;
margin: 0 0 5px;
}
.product-review-box .rating {
width: 85px;
height: 16px;
background: url(../img/icon-rating-empty.png) repeat-x;
}
.product-review-box .rating div {
height: 16px;
background: url(../img/icon-rating-full.png) repeat-x;
}
change it like that:
;
.product-rating-box {
display: inline-block;
margin: 0 0 5px;
}
.product-rating-box .rating {
width: 85px;
height: 16px;
background: url(../img/icon-rating-empty.png) repeat-x;
}
.product-rating-box .rating div {
height: 16px;
background: url(../img/icon-rating-full.png) repeat-x;
}
That is all!
Have a nice day!
Hello there!
By design there are no rating stars in the item boxes.
But if you want to customize your theme you need to change some styles in document "styles.css".
What you need to do is to find following styles into "styles.css" document
.product-review-box
and change it with:
.product-rating-box;
This might be on line 2541 to 2550.
And finally go to line 1970 or find
.item-box .product-rating-boxand change the property from: display:none; to display:inline-block;;
This is all you need to do to customize your website item box.
Wish you best!
Hi Rob!
I have made test but it does not act like that to me.
This must be browser cache.
Hello there UserThomas!
There is no way to reduce all the spaces and sizes in the theme, at least there is no easier way.
The only way is by extraordinary effort // rewriting all the styles .
