General Discussion

@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!

Hi LFTALERO,

When you use Html.AppendCSSFileParts this will insert the css file in the beginning of all css files already added. So that is why when you use Html.AppendCssFilePart after the the line for the Alfresco styles, it gets added in the beginning before the styles.css. So you should either place your line of code in the before all other files in the Head view or use Html.AddCssParts which will add it at the end.

The best way to add your css file and be sure that is rendered always at the end you can follow the approach from below:

In your _Root.Head.cshtml view:

@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")  

Thus your css will be added after all nop css files and before the styles entered in the Custom Head Styles textbox.

Can you please try the following approach and let us know if the css order is correct.

Hope that helps!

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.

Hi lftalero,

I am curious to see why the approach I mentioned in my last post did not work, because when placing your css file right after the NopCssFile files, your css will be placed after these files. The same as if you place your css before the closing <head> tag as you did. So if you can send us a link to see this scenario will be great.

As both approaches are very similar it is absolutely fine and correct to place your css in the head section after all nop css files, so that you can override any css rules and styles in your file.

Hope that helps!

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.

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!