I am using Umbraco 5 and have created a Document Type [ Homepage ] and a Template called [ HomepageLayout.cshtml ].
My template needs some styles and scripts to be loaded. So I went and created (.css) files in the folder [ Stylesheets ] and (.js) files in the [ Scripts ] folder.
I have a couple of questions, and would greatly appreciate some answers.
1) How can I reference my (.css) and (.js) files in my template ? I have tried [ <link rel="stylesheet" href="../Stylesheets/Style.css" /> ] but that is not working, the CSS nor the JavaScript is being pulled in.
2) When I run the website, I get the following error:
To be clear, I did watch the video on Stylesheets available on Umbraco.tv, but when I do the same, my stylesheets are still not being pulled onto the page.
To answer your first question, you can just reference the styles and scripts like so:
<link href="/content/styles/mystyle.css" ... />
<script src="/scripts/umbraco/myscript.js" ... />
To your second question, and the obvious real problem, could you please post your Template structure - it would seem you're trying to render a section that perhaps isn't properly nested; you might wish to give this article a read on Razor, that goes some way in explaining how this might happen.
Regarding including scripts, you can do either as Grant says, and use an absolute url to the files, or you can use the Url.Content helper method to resolve urls to files like so:
Regarding the YSOD, you get this becuase you are calling @RenderSection, which can only be used in a master layouts. So you'd either need to remove it, or create a child layout which uses the current layout file as it's master, and implements the "head" section.
Apologies for the late reply, and thanks for the solutions.
Thanks to you two, I am now able to load my CSS and JavaScript files. There is a slight issue about images though. My CSS stylesheet makes use of different images .. and I am not sure where the images will go for the CSS. Do I just create a folder named [ images ] under the [ Settings ] node and upload all my images into there ? Or is there a better standard of practice among Umbraco developers for dealing with CSS images?
Also, I can not get my head around how to make everything content managed. What I have right now is an awesome looking website built in static HTML5, CSS3 and JavaScript.
Here is one of my many dilemmas, but I feel if I can solve this, I'll be able to solve the others.
These are the three social media links in my website's header. How can I allow the users of the site to add/remove a new social media icon for a new future social network ? I know that this would involve four pieces of input from the users, these are:
Social Network Name (for anchor tag name)
Social Network Profile URL (for href attribute of anchor tag)
Social Network icon (image)
Alternate Text for Social Network Icon (alt attribute on image)
What I currently have in my Document Types folder is two elements, one called [ Root ] and the other called [ Homepage ]. I figured the Root should contain all the Header and Footer stuff.
Knowing the above, I would greatly appreciate it if someone could tell me what the best way to proceed would be.
Pleased you managed to get over that hill. (: I'd think this new issue is worthy of a dedicated question/new thread - that would keep this thread relevant to the original problem, and the new one re the new topic, and the question titles and body will then be more easily findable for future users with the same issue - otherwise the internets become a spaghetti-like mess. And of course this might help give you more coverage as well. (;
Ciwan, thanks for taking the time to do so - I've given my input over there.
For your issue as to where to put your images used purely by the site CSS (or, in fact, that just shouldn't be content-manageable), you can put them under the 'content' folder too. Umbraco will use the 'Media' folder for user-saved media content, it will use the 'Scripts' and 'Styles' folders for dev/designer-saved content, of the obvious types (so it's 'safer' to just drop the relevant things in here sometimes (as opposed to never relying on anything under a user-managed folder), and older versions of Umbraco would even pick up on scripts and styles you did that with - not sure about v5 yet) - but I don't think it touches 'Images' so you should be fine placing them in there.
The only thing in there with an Umbraco install that I've been fiddling around with for a good few days now is an Umbraco logo image; however, you may wish to just create your own folder next to this lot if you're cautious and usre that (someone from HQ or otherwise might confirm the absolute safety my "images folder is fine" suggestion.)
Thank You Grant. I was surprised that you're instructing the folder creation under the [ Content ] folder in the Content Section, and not under the [ Settings ] folder under the Settings Section, but after Right-Clicking on the Settings Folder/Node .. I see that no option is given for me to create a Folder.
Now the strange bit. The Content Node/Folder is not giving me the option to create a Folder either. So I am basically stuck on creating a new Folder under Content.
Hello Grant. I went into [ Root Directory > Content ] and there was already a folder named [ Images ] there, so all I did was copy/paste my images into that folder.
And even though the folder name was spelt with a capital [ Images ] and in my CSS, I was referencing [ images ] .. it still worked and the images load fine.
Thank you very much. I can now move onto the other things.
Templates and their Scripts and Styles
Hello Friends
I am using Umbraco 5 and have created a Document Type [ Homepage ] and a Template called [ HomepageLayout.cshtml ].
My template needs some styles and scripts to be loaded. So I went and created (.css) files in the folder [ Stylesheets ] and (.js) files in the [ Scripts ] folder.
I have a couple of questions, and would greatly appreciate some answers.
1) How can I reference my (.css) and (.js) files in my template ? I have tried [ <link rel="stylesheet" href="../Stylesheets/Style.css" /> ] but that is not working, the CSS nor the JavaScript is being pulled in.
2) When I run the website, I get the following error:
I would greatly appreciate any help.
Thank You
Ciwan
Anyone ?
To be clear, I did watch the video on Stylesheets available on Umbraco.tv, but when I do the same, my stylesheets are still not being pulled onto the page.
Ciwan,
To answer your first question, you can just reference the styles and scripts like so:
To your second question, and the obvious real problem, could you please post your Template structure - it would seem you're trying to render a section that perhaps isn't properly nested; you might wish to give this article a read on Razor, that goes some way in explaining how this might happen.
Ciwan,
Regarding including scripts, you can do either as Grant says, and use an absolute url to the files, or you can use the Url.Content helper method to resolve urls to files like so:
<link rel="stylesheet" href="@Url.Content("~/Content/Styles/main.css")" type="text/css" />Regarding the YSOD, you get this becuase you are calling @RenderSection, which can only be used in a master layouts. So you'd either need to remove it, or create a child layout which uses the current layout file as it's master, and implements the "head" section.
Matt
Hello
Apologies for the late reply, and thanks for the solutions.
Thanks to you two, I am now able to load my CSS and JavaScript files. There is a slight issue about images though. My CSS stylesheet makes use of different images .. and I am not sure where the images will go for the CSS. Do I just create a folder named [ images ] under the [ Settings ] node and upload all my images into there ? Or is there a better standard of practice among Umbraco developers for dealing with CSS images?
Also, I can not get my head around how to make everything content managed. What I have right now is an awesome looking website built in static HTML5, CSS3 and JavaScript.
Here is one of my many dilemmas, but I feel if I can solve this, I'll be able to solve the others.
These are the three social media links in my website's header. How can I allow the users of the site to add/remove a new social media icon for a new future social network ? I know that this would involve four pieces of input from the users, these are:
What I currently have in my Document Types folder is two elements, one called [ Root ] and the other called [ Homepage ]. I figured the Root should contain all the Header and Footer stuff.
Knowing the above, I would greatly appreciate it if someone could tell me what the best way to proceed would be.
Thank You
Ciwan
Pleased you managed to get over that hill. (: I'd think this new issue is worthy of a dedicated question/new thread - that would keep this thread relevant to the original problem, and the new one re the new topic, and the question titles and body will then be more easily findable for future users with the same issue - otherwise the internets become a spaghetti-like mess. And of course this might help give you more coverage as well. (;
You are right Grant. I have gone ahead and created the new topic / thread.
I feel the sub-question about the CSS images is still more relevant here, hence why I did not mention it at the new thread.
Thank You.
Ciwan, thanks for taking the time to do so - I've given my input over there.
For your issue as to where to put your images used purely by the site CSS (or, in fact, that just shouldn't be content-manageable), you can put them under the 'content' folder too. Umbraco will use the 'Media' folder for user-saved media content, it will use the 'Scripts' and 'Styles' folders for dev/designer-saved content, of the obvious types (so it's 'safer' to just drop the relevant things in here sometimes (as opposed to never relying on anything under a user-managed folder), and older versions of Umbraco would even pick up on scripts and styles you did that with - not sure about v5 yet) - but I don't think it touches 'Images' so you should be fine placing them in there.
The only thing in there with an Umbraco install that I've been fiddling around with for a good few days now is an Umbraco logo image; however, you may wish to just create your own folder next to this lot if you're cautious and usre that (someone from HQ or otherwise might confirm the absolute safety my "images folder is fine" suggestion.)
Thank You Grant. I was surprised that you're instructing the folder creation under the [ Content ] folder in the Content Section, and not under the [ Settings ] folder under the Settings Section, but after Right-Clicking on the Settings Folder/Node .. I see that no option is given for me to create a Folder.
Now the strange bit. The Content Node/Folder is not giving me the option to create a Folder either. So I am basically stuck on creating a new Folder under Content.
No, no - create the folder manually in the directory structure. We don't want Umbraco to even care about it. (:
Hello Grant. I went into [ Root Directory > Content ] and there was already a folder named [ Images ] there, so all I did was copy/paste my images into that folder.
And even though the folder name was spelt with a capital [ Images ] and in my CSS, I was referencing [ images ] .. it still worked and the images load fine.
Thank you very much. I can now move onto the other things.
is working on a reply...