Close

Profile: lftalero

Avatar
PM

User posts

2 years ago

hristo wrote:
Hi,
yes you can change the position of the menu, but in order to get it done you will need to change also some properties of the slider and probably the logo.

First of all, position the menu where you want it, but you have to do that via ".main-slider-menu" class name to ensure your changes will apply only where the slider is present. You don't want your changes to apply to all pages because the layout is different on pages with no slider on it.

Set the position of the menu to "absolute", and set the "top" property to a value that works for you (depending on how tall is the content you have above the slider). Set the "left" property to 50% and set a negative left margin which have to be half of the width of the menu in order to place the menu in the center of the page (if your menu is 980px, the left margin should be -490px).

At this point you should have you menu positioned where you want it. Now you have to change the bottom margin of your slider from -45px (which works for the old placement of the menu) to say 20px; This way you will prevent content overlapping below your slider.

If you need to change the position of your logo (and most probably you will), do it via ".main-slider-header" class name - increase the top margin to a value that works for you. This is because you will want to change the logo offset only if the slider is present.

Remember that these guidelines are for desktop resolutions. But doing the same thing on mobile devices will be similar.

I hope this will be helpful.


Thanks a lot Hristo.
Sorry about the late reply.
This info was super useful!

2 years ago

Unfortunately I can't send you the link because all this is happening in our development environment. 
However I can tell you we are working with Nopcommerce 3.4, Visual Studio 2012 and debuggin with Firefox and Chrome.

I need to ask you something else, this time regarding with a CSS property.
What would be the best way to change the position of elements within the theme interface? For example, we are changing the position of the main menu (the one with the Categorys, Products, Blog, etc links ) so it doesn't show at the bottom of the main slider, but at the top. 
Would you use the top attribute? would you use another one? what would be your advice?

Thanks again, Stefan.

Luis Fernando.

2 years ago

Thanks for the answer, Stefan.

I had the _Root.Head.cshtml just as you pointed me to, but it didn't work.

I tried putting the extra line of code at the end of the head section in this _Root.Head.cshtml file, and it seems to work.
Here is how the file looks right now:


...
..
    @Html.Action("Favicon", "Common")
    <link type="text/css" rel="Stylesheet" href="@Url.Content("~/Themes/Alfresco/Content/css/custom-user-styles.css")" />
    @if (displayMiniProfiler)
    {
        @StackExchange.Profiling.MiniProfiler.RenderIncludes()
    }
    <!--Powered by nopCommerce - http://www.nopCommerce.com-->
    <!--Copyright (c) 2008-2014-->
</head>
..
..
..



Is it normal to work like this?

Thanks again.

2 years ago

@using Nop.Web.Framework;
@using Nop.Core.Infrastructure;
@using Nop.Web.Framework.UI;
@using Nop.Core;
@{
    var supportRtl = EngineContext.Current.Resolve<IWorkContext>().WorkingLanguage.Rtl;
   var browser = Request.Browser;
    var isIeEightOrLess = false;
    if (browser.Browser == "IE" && browser.MajorVersion <= 8){
        isIeEightOrLess = true;
    }
    if (isIeEightOrLess)
    {
        if (supportRtl)
        {
            Html.AppendCssFileParts("~/Themes/Alfresco/Content/css/ie8-fix.rtl.css");
        }
        Html.AppendCssFileParts("~/Themes/Alfresco/Content/css/ie8-fix.css");
    }




    if (supportRtl)
    {
        Html.AppendCssFileParts("~/Themes/Alfresco/Content/CSS/480.rtl.css");
        Html.AppendCssFileParts("~/Themes/Alfresco/Content/CSS/768.rtl.css");
        Html.AppendCssFileParts("~/Themes/Alfresco/Content/CSS/980.rtl.css");
    }
    Html.AppendCssFileParts("~/Themes/Alfresco/Content/css/tables.css");
    Html.AppendCssFileParts("~/Themes/Alfresco/Content/css/480.css");
    Html.AppendCssFileParts("~/Themes/Alfresco/Content/css/768.css");
    Html.AppendCssFileParts("~/Themes/Alfresco/Content/css/980.css");




    if (supportRtl)
    {
        Html.AppendCssFileParts("~/Themes/Alfresco/Content/css/styles.rtl.css");
    }




    Html.AppendCssFileParts("~/Themes/Alfresco/Content/css/styles.css");               
 Html.AppendCssFileParts("~/Themes/Alfresco/Content/css/custom-user-styles.css");
    Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/SevenSpikesExtensions.js");
    if (isIeEightOrLess)
    {
        Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/selectivizr.min.js");
        Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/respond.min.js");
    }
    Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/footable.js");
    Html.AddScriptParts("~/Themes/Alfresco/Content/scripts/Alfresco.js");
}





Any suggestion?
PS: I have already cleared the cache, tried including the custom css file in the Head.cshtml file, then changing it to the _Root.Head.cshtml and it doesn't work.




When I change anything via the Alfresco plugin settings directly in the nopcommerce Admin section, it works perfect, so the problem is definitely the order in which the css files are being loaded (I could send you a captured screen if needed)
Thanks!

2 years ago

I'm personalizing the style for some of the interface elements.
I'm doing as indicated here http://www.nop-templates.com/how-to-modify-a-nop-templates-nopcommerce-theme and here http://www.nop-templates.com/boards/topic/933/bugs/page/3, but the order the style sheets are loaded keeps the same: the last one is the Alfresco default Styles.css, overriding my custom file.

Here is the content of my current _Root.Head.cshtml file:

@using Nop.Core
@using Nop.Core.Domain.Common;
@using Nop.Core.Infrastructure;
@Html.NopCssFiles(this.Url, ResourceLocation.Head)
    <link type="text/css" rel="Stylesheet" href="@Url.Content("~/Themes/Alfresco/Content/css/custom-user-styles.css")" />
    @Html.Widget("head_html_tag_after_css_files_alfresco")
 
@{
    var displayMiniProfiler = EngineContext.Current.Resolve<Nop.Core.Domain.StoreInformationSettings>().DisplayMiniProfilerInPublicStore;
    
    //resources
    
    Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
    Html.AppendScriptParts("~/Scripts/public.common.js");
    Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
    Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
    Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
    Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
    Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
    //X-UA-Compatible tag
    var commonSettings = EngineContext.Current.Resolve<CommonSettings>();
    if (commonSettings.RenderXuaCompatible)
    {
        Html.AppendHeadCustomParts(string.Format("<meta http-equiv=\"X-UA-Compatible\" content=\"{0}\"/>", commonSettings.XuaCompatibleValue));
    }
    var browser = Request.Browser;
    if (browser.Browser == "IE" && browser.MajorVersion == 8)
    {
        Html.AppendHeadCustomParts("<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"/>");
    }
}
<!DOCTYPE html>
<html @Html.Partial("LanguageAttributes")>
<head>
    <title>@Html.NopTitle(true)</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <meta name="description" content="@(Html.NopMetaDescription())" />
    <meta name="keywords" content="@(Html.NopMetaKeywords())" />
    <meta name="generator" content="nopCommerce" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
     @Html.NopHeadCustom()
    @*This is used so that themes can inject content into the header*@
    @Html.Partial("Head")
    @Html.Widget("head_html_tag")
    @Html.NopCssFiles(this.Url, ResourceLocation.Head)
    @Html.Widget("head_html_tag_after_css_files_alfresco")
    @Html.NopScripts(this.Url, ResourceLocation.Head)    
    @Html.NopCanonicalUrls()
    @Html.Action("RssHeaderLink", "News")
    @Html.Action("RssHeaderLink", "Blog")
    @*Favicon - upload favicon.ico file to the root directory*@
    @Html.Action("Favicon", "Common")
    @if (displayMiniProfiler)
    {
        @StackExchange.Profiling.MiniProfiler.RenderIncludes()
    }
    <!--Powered by nopCommerce - http://www.nopCommerce.com-->
    <!--Copyright (c) 2008-2014-->
</head>
<body>
    @RenderBody()
    @Html.NopCssFiles(this.Url, ResourceLocation.Foot)
    @Html.NopScripts(this.Url, ResourceLocation.Foot)
</body>
</html>



And here is the content of my Head.cshtml file when I had the custom css file included in it (I removed the extra line when trying with the _Root.Head.cshtml file):
[code]@using Nop.Web.Framework;
@using Nop.Core.Infrastructure;
@using Nop.Web.Framework.UI;
@using Nop.Core;
@{
    var supportRtl = EngineContext.Current.Resolve<IWorkContext>().WorkingLanguage.Rtl;




    var browser = Request.Browser;
    var isIeEightOrLess = false;
    if (browser.Browser == "IE" && browser.MajorVersion <= 8){
        isIeEightOrLess = true;
    }
    if (isIeEightOrLess)
    {
        if (s

I'm having this issue with with our website when using any of the filters.

I searched trough the forum and it appears to be concerning to the ajax filters versions.

How can I download the latest version and update it on my website?

Thanks for your support?

4 years ago

By default a size for some product, for example a t-shirt, must be a product attribute so the customer can actually choose it when purchasing it.

However, all product attributes are shown as filters when using Alfresco theme.
This is good for most cases (color, genre, use, etc) but with sizes it won't work as well.

For example, we sell products which come in sizes XS to 2XL, but also other ones in which come in sizes 40 to 56 (in increments of two), and also shoes which came in sizes 35 to 47 and 6 to 13, so when I user sees the main category, there is this huge unpractical list of sizes shown at the left to be used as filters, but it just don't work.

So, in short, is there a way to specify which products attributes are to be used as filters?
Thanks!

4 years ago

I'd like to make the main background image (usually background1.jpg ) to be changed aleatory every time a different page is visited.

A script would choose between 1 and n, been n the number of images you have, and then just set the name of the new image before loading the page.

Any suggestion about how could this script work and where could it  be placed?

4 years ago

CSS Class for Filters

Hi

I'm changing colors and styles but can't find the CSS class for the following items:
AJAX FILTERS background (for example the price filter and the attributes filter)

I saw the ir a class called filter-block specificationFilterPanel7Spikes but it is not in the styles.css file.

Thanks.

4 years ago

Thanks again Boyko for your quick answer.

Please deal with me since this is the first time I use a template like this and, also, since this is the first time in four years I deal with nopcommerce again.

I changed the theme to the default theme and, as you knew, it didn't solve the problem so I'll check all permissions and ACLs.

I saw a post but now I can't find it about asking nop-templates with all the data and settings so that nopcommerce looks exactly the same as your demo. Could you please tell to whom should I ask for this info?
Thanks again.