Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Dale Lanz 8 posts 78 karma points
    Nov 14, 2018 @ 23:53
    Dale Lanz
    0

    Article Items not styling

    I'm new to Umbraco and Umbraco Cloud, but I really like how they operate. However, I am having trouble and I don't know where the problem is.

    I have followed the "Creating A Basic Site" documentation and have website up and working. The problem I'm having is in creating Articles and Article Items:

    https://our.umbraco.com/documentation/Tutorials/Creating-Basic-Site/Articles-Parent-and-Article-Items

    I went through the instructions twice to be sure but the Article Item pages will not style. The Main Articles page is OK, but when I open the Article Items pages in a browser, all I get is the text. All the other pages seem fine, just the Item pages are the problem.

    When I run them in the Umbraco Canvas Designer (preview) they look OK. When I run them from a link, in the Designer or my own browser it's no good, text only.

    Any hints or help for this problem would be appreciated.

  • Dan Diplo 1490 posts 5791 karma points MVP 4x c-trib
    Nov 15, 2018 @ 13:30
    Dan Diplo
    0

    Just a guess, but are the articles styled by a CSS file? If so, have you used an absolute path for it in your header.

    So you need to do this:

    <link rel="stylesheet" type="text/css" href="/css/style.css" />
    

    and not:

    <link rel="stylesheet" type="text/css" href="css/style.css" />
    

    (Note use of the / at start of path).

    The latter won't work when you are more than one level deep in your pages.

    If that's not the issue then can you provide a link to your page, please?

  • Dale Lanz 8 posts 78 karma points
    Nov 16, 2018 @ 00:09
    Dale Lanz
    0

    These are the links to my scripts in my header:

        <script src="scripts/jquery-1.11.0.js"></script>
        <script src="scripts/skel.min.js"></script>
        <script src="scripts/skel-panels.min.js"></script>
        <script src="scripts/init.js"></script>
        <noscript>
            <link rel="stylesheet" href="/stylesheets/skel-noscript.css" />
            <link rel="stylesheet" href="/stylesheets/style-1000px.css" />
            <link rel="stylesheet" href="/stylesheets/style-desktop.css" />
            <link rel="stylesheet" href="/stylesheets/style-gwzc.css" />
            <link rel="stylesheet" href="/stylesheets/style-mobile.css" />
            <link rel="stylesheet" href="/stylesheets/style.css" />
        </noscript>
    

    The forward slash is there for the style sheets.

    The link to my homepage is:

    https://dales-passionate-duckling.s1.umbraco.io/

    the link to the Main Article page is:

    https://dales-passionate-duckling.s1.umbraco.io/articles-main

    link to one of the Article Items: https://dales-passionate-duckling.s1.umbraco.io/articles-main/clear-mind/

    Thanks for any insight.

  • Dennis Adolfi 1071 posts 6356 karma points MVP 2x c-trib
    Nov 16, 2018 @ 07:35
    Dennis Adolfi
    0

    It seems to be a mixed content issue with your css. Your site is running over https:// but your style sheets are referencing some external style sheets over http://. Run the site with the console open and you will see the issue. Make sure all your css/script are running over https. Best of luck to you!

  • Dan Diplo 1490 posts 5791 karma points MVP 4x c-trib
    Nov 16, 2018 @ 09:15
    Dan Diplo
    0

    Yep, as Dennis says, you need to ensure all scripts, fonts and stylesheets are served on HTTPS, otherwise they will be blocked.

    For instance, change references to:

    http://fonts.googleapis.com/css?family=Lato:300,400,700,900'

    to

    https://fonts.googleapis.com/css?family=Lato:300,400,700,900'

    See https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content

  • Dale Lanz 8 posts 78 karma points
    Nov 18, 2018 @ 21:47
    Dale Lanz
    0

    I went through my code and changed all the HTTP links to HTTPS links. I followed the instructions for fixing mixed content and when running the console on the Article Item page I get error messages that say the js scripts where not found. This is the link where the js scripts were not found:

    https://dales-passionate-duckling.s1.umbraco.io/articles-main/clear-mind/scripts/init.js

    This link is generated by a partial View Macro:

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    @{ 
        var selection = CurrentPage.Children.Where("Visible").OrderBy("CreateDate desc"); 
        @* OrderBy() takes the property to sort by and optionally order desc/asc *@
    }
    
    @foreach (var item in selection)
    {
    <div class="article">
            <div class="articletitle"><a href="@item.Url">@item.Name</a></div>
            <div class="articlepreview">@Umbraco.Truncate(@item.ArticleContents,100) <a href="@item.Url">Read More..</a></div>
        </div>
        <hr/>
    }
    

    Is this code generating the proper links?

  • Dan Diplo 1490 posts 5791 karma points MVP 4x c-trib
    Nov 19, 2018 @ 09:15
    Dan Diplo
    0

    Your links are fine. Really, your issues are nothing to do with Umbraco - it's how you are including your static resources.

    You need to add a slash before your script includes (for the same reason you need to do it with your CSS includes).

    So change:

    <script src="scripts/jquery-1.11.0.js"></script>
    <script src="scripts/skel.min.js"></script>
    <script src="scripts/skel-panels.min.js"></script>
    <script src="scripts/init.js"></script>
    

    to

    <script src="/scripts/jquery-1.11.0.js"></script>
    <script src="/scripts/skel.min.js"></script>
    <script src="/scripts/skel-panels.min.js"></script>
    <script src="/scripts/init.js"></script>
    
  • Dale Lanz 8 posts 78 karma points
    Nov 19, 2018 @ 18:02
    Dale Lanz
    0

    I made those changes:

            <script src="/scripts/jquery-1.11.0.js"></script>
        <script src="/scripts/skel.min.js"></script>
        <script src="/scripts/skel-panels.min.js"></script>
        <script src="/scripts/init.js"></script>
        <noscript>
            <link rel="stylesheet" href="/stylesheets/skel-noscript.css" />
            <link rel="stylesheet" href="/stylesheets/style-1000px.css" />
            <link rel="stylesheet" href="/stylesheets/style-desktop.css" />
            <link rel="stylesheet" href="/stylesheets/style-gwzc.css" />
            <link rel="stylesheet" href="/stylesheets/style-mobile.css" />
            <link rel="stylesheet" href="/stylesheets/style.css" />
        </noscript>
    

    Now when I run the console it says the style sheets are not found.

  • Dan Diplo 1490 posts 5791 karma points MVP 4x c-trib
    Nov 19, 2018 @ 19:40
    Dan Diplo
    0

    Probably because you have wrapped your stylesheets in a <noscript> tag? Why have you done that? That will only load the stylesheet on browsers that don't understand JavaScript, which isn't what you want, I imagine. Remove the tag.

  • Dale Lanz 8 posts 78 karma points
    Nov 19, 2018 @ 23:39
    Dale Lanz
    0

    I'm adapting this website from a template; I don't know why that tag was there. In any event I removed the <noscript> tag, but no change.

  • Dan Diplo 1490 posts 5791 karma points MVP 4x c-trib
    Nov 20, 2018 @ 09:02
    Dan Diplo
    0

    Well, if you check in the console you can see they are throwing a 404 which means they can't be found. Have you got a folder called /stylesheets/ in the root of your installation with the CSS files in them? Double check the filenames are correct.

  • Dale Lanz 8 posts 78 karma points
    Nov 21, 2018 @ 00:59
    Dale Lanz
    0

    I checked the spelling and found the links in my Umbraco console says the link to those files are like this:

    /css/style.css
    

    which is not where my links in the Master page are pointing:

        <link rel="stylesheet" href="/stylesheets/style.css" />   
    

    I changed it and now it's partially working.

            <link rel="stylesheet" href="/css/style.css" />   
    

    The Article Item pages are styling, but I'm still getting file not found errors just on those pages. I didn't realize it, but other pages were also getting those file not found, even though they were styling properly. And now my menu has disappeared, which is styled in the desktop style sheet.

  • Dale Lanz 8 posts 78 karma points
    Dec 14, 2018 @ 22:22
    Dale Lanz
    0

    The Chrome Dev tools tell me that this function in the skel.min.js script is failing:

        registerLocation: function(e, t) {
        var n = "_skel_attach",
            r = "appendChild";
        e == "head" ? t[n] = function(e) {
            this === _.me.parentNode ? this.insertBefore(e, _.me) : this[r](e)
        } : t[n] = function(e) {
            this[r](e)
        }, _.locations[e] = t
    },
    

    I assume this is returning a link that does not exist.

Please Sign in or register to post replies

Write your reply to:

Draft