+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / stylesheets in "CSS" folder not being loaded

stylesheets in "CSS" folder not being loaded

7 posts, 0 answered
  1. Scott
    Scott avatar
    6 posts
    Registered:
    22 Sep 2010
    25 Feb 2013
    Link to this post
    Hello,

    I apologize if this has been covered, but I wasn't able to find it mentioned anywhere.

    Whenever I link to a stylesheets within the CSS folder of my theme, the file is not found.

    I have a theme installed/added and recognized under "Frontend themes" in the "Administration" menu.  The CSSLoadOrder is correctly displaying all of the stylesheets within the Global folder.  Also, all images under the Images directory display correctly when referenced.  My problem is just referencing the files within the CSS folder.

    I'm using the CSS widget (under the "Scripts and Styles" category) to reference the CSS folder stylesheets.  I've tried adding the file through the CSS widget on a template and on a page and neither work.

    Also, in case it's related, I've run into the same problem trying to add javascript files from the JS folder under "WebsiteTemplates > [Template]" using the Java Script widget.  They don't load.

    Thanks,
    Scott
  2. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    28 Feb 2013
    Link to this post
    Hello Scott,

    Actually, as long as you have your styles in the Global folder of the theme, as in the attached image, you don't need to reference them again with a css widget. they will be loaded authomatically. If you need to load external css files (which will not be part of the theme) you can use the widget, but I will recommend you to place those styles in a folder with a different name and outside the theme, because you may experience some permissions problems. 

    Kind regards,
    Jen Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Scott
    Scott avatar
    6 posts
    Registered:
    22 Sep 2010
    28 Feb 2013 in reply to Jen Peleva
    Link to this post

    Thank you Jen.  The stylesheets I'm trying to load are not meant to be part of a theme, so I'll try to add a different "Styles" folder on the same level as "Global".

    I was confused because the folder structure that Sitefinity suggests puts a folder called "CSS" on the same level as "Global" and that's what I'm trying to use.  I'll see if renaming it helps at all.

    Thanks again.

    - Scott

  4. Scott
    Scott avatar
    6 posts
    Registered:
    22 Sep 2010
    28 Feb 2013 in reply to Scott
    Link to this post

    I solved my problem.  The issue was that the Sitefinity widget was not entering the right path.  This could be just our installation and configuration.

    When I selected a CSS file, the path would be something like "http://dev.domain.com/App_Data/Sitefinity/WebsiteTemplates/<Template>/App_Themes/<Theme>/global/styles.css".

    Sitefinity wouldn't find that file.  So I removed everything from the beginning of the URL through App_Data, leaving "/Sitefinity/...".  This works.

    I'm not sure why Sitefinity is applying incorrect URLs.  Again, it may be our installation, but we setup our structure to match Sitefinity's suggestion: http://www.sitefinity.com/documentation/documentationarticles/designer-s-guide/website-templates-file-structure.

    I'll look into configuration settings on this on my own, but can anyone point me to a spot where this path adjustment could be made globally?

    Thanks,
    Scott

  5. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    28 Feb 2013 in reply to Scott
    Link to this post

    Hey Scott,

    The structure you refer to is correct, and for themes it is the correct folder path to input (http://www.sitefinity.com/documentation/documentationarticles/designer-s-guide/themes/registering-a-theme).

    A CSS Widget however is just like a regular link tag, as in it has no access to the /App_Data folder.
    To accomodate for that, Sitefinity basically 'rewrites' the path and removes the /App_Data part of the url.

    So both http://dev.domain.com/Sitefinity/.... and /Sitefinity/... would work, it's just a .NET restriction that you can't reference the App_Data folder.

  6. Scott
    Scott avatar
    6 posts
    Registered:
    22 Sep 2010
    28 Feb 2013 in reply to Jochem Bökkers
    Link to this post

    Jochem, thank you for the explanation.  It makes total sense.  The puzzling thing about the CSS Widget is that it didn't remove the "App_Data" part of the URL.  I had to do it manually.  That's my concern.  Is there some tweak that I have to make to my installation of Sitefinity to get the CSS (and possible Javascript) widgets to work correctly and remove the "App_Data" part of URLs?  Is there a setting I can check to make sure it's not on our end?  Is it somehow a bug?

    Thanks for the feedback.  This is very helpful.

  7. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    28 Feb 2013 in reply to Scott
    Link to this post
    Hey Scott,

    No as far as I know its not something on your end.

    When you select a page by the browse button, it simply translates that folder/file into a url by pasting the domain in front of it and not checking if it is a valid url. To be honest you should try and avoid using those full urls and change them to partials if you can.

    By default you end up with something like this:
    http://localhost/App_Data/Sitefinity/WebsiteTemplates/bpd2column/App_Themes/bpd2column/Styles/galleria.classic.css


    But usually that localhost is a development server or later on you might move the project from a root to an application, then all of a sudden all those hardcoded links break because http://localhost/Sitefinity/.... is no longer working but it should be http://productionserver.com/Sitefinity/ or http://development/testserver/Sitefinity

    Best practice is to remove everything from the url-part left of /Sitefinity, so you end up with 
    ~/Sitefinity/WebsiteTemplates/bpd2column/App_Themes/bpd2column/Styles/galleria.classic.css


    That squiggly will then automatically be resolved by .NET to wherever your site is installed, on whatever domain and whatever subfolder you've installed as 'root'.

    Jochem

7 posts, 0 answered