I have multiple sites residing inside one umbraco CMS for one client. The sites has many design items in common but the designer had to make one shared css file with a few different ones specific to each site.
Now, I ran into a problem with selecting the relevant css file for a site page. If a user is viewing page1 on site X then I must use css X, but if the user is viewing page1 on site Y I must use css Y.
Any idea how to do it? I thought about using Razor inside the template and check the domain name or the homepage doctype for that domain, any better ideas?
You may want to check this answer to microsite in umbraco. It gives a pretty good explanation on how to style different sites within the same Umbraco instance. It's mostly geared towards master pages, but it should apply razor views as well.
I recommend using razor to find what site you are on. You most probably have several "site" nodes at your root with managed hostnames (I'm guessing here). Create a macro to include your stylesheets and using naming conventions, include both specific and generic stylesheets.
<umbraco:Macro ID="Macro1" Alias="Stylesheets" runat="server" />
Then the macro:
var site = CurrentModel.AncestorOrSelf("Site");
<link rel="stylesheet" type="text/css" href="/css/generic.css" media="all" />
<link rel="stylesheet" type="text/css" href="/site/#site.Name.css" media="all" />
You can do the same thing with javascript files if you need.
Related
Web developers have to use <link> tag in embedding a CSS style sheet into a web page. Sometimes when managing styles, developers break down their style code into several style sheets to gain maximum code re-usability and efficiency.
However a html file or even a css file should reduce its size as possible as smaller files load quickly into user devices. When linking several style sheets, many tutorials show this way.
<link rel="stylesheet" href="stylesheet1.css">
<link rel="stylesheet" href="stylesheet2.css">
<link rel="stylesheet" href="stylesheet3.css">
But the size of the html file can be reduced if all 3 style sheets can be embed using one link tag like this.
<link rel="stylesheet" href="stylesheet1.css stylesheet2.css stylesheet3.css">
Is this possible? Does browsers support embedding several style sheets in one link tag?
No it's not possible to include multiple files in one <link> tag.
In your CSS-file, you can daisy-chain them into another file however using #import.
Lets say you have these files:
style.css
table.css
button.css
You can then in style.css do:
<!-- Including one css file into other -->
#import "table.css";
#import "button.css";
And in HTML import them all like this:
<link rel="stylesheet" href="style.css" />
However you can use popular and powerful bundling tools such as Webpack that will bundle both your Javascript and CSS files.
The short answer is: No. because href attribute of link tag must be a URL string so you can't reference multiple URL.
But this kind of optimization can take place into your build system. In these build pipelines you can have multiple css or js file in your development environment but in production you may have only one optimized (chunked or minified) file for each.
Check out Parcel as a beginner-friendly web application bundler
Also for more advance options you can use
https://gulpjs.com
or
https://webpack.js.org
I think it is not possible to define more than one file in a single "href" attribute.
Also for each "href" there is its own relation define in the "rel" attribute.
you can read more about the link attributes on the following link:
https://www.w3schools.com/jsref/dom_obj_link.asp
No, it is not possible to add two or more stylesheets with one link tag.
no it's not possible,
If you do, you will receive a link error you can see it in network tab in chrome
chrome screenshot
I tried doing it by creating a css file style.css in the same folder, copied the source code of the bulma link provided and then linked it to my html doc. But then, it shows no css features at all.
Unfortunately you cannot edit resources that are hosted on our CDN. Many, many sites rely on these resources remaining intact and the same forever!
You can however modify the styling on your site whilst using this resource by first including it in your website's HTML (within in the head tag):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" integrity="sha256-vK3UTo/8wHbaUn+dTQD0X6dzidqc5l7gczvH+Bnowwk=" crossorigin="anonymous" />
You can then modify this styling by creating a secondary CSS file locally alongside your site's HTML file, calling it my-styles.css for example. You can then also include that on your webpage by using another link tag within your head tag, after the link for bulma:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" integrity="sha256-vK3UTo/8wHbaUn+dTQD0X6dzidqc5l7gczvH+Bnowwk=" crossorigin="anonymous" />
<link rel="stylesheet" href="my-styles.css" />
Hope that helps with what you are trying to achieve!
- Matt.
Community Manager # cdnjs.com
Although I didn't achieve what I was trying to do, I guess the only solution is either copying the exact design provided via Bulma link or ending up writing the whole css code all by own which I don't really prefer until essentially needed. So, I'd rather stick to the pre-defined design provided by Bulma.
I'm currently developing a dynamics CRM 2011 customization using the 5.0.18 SDK project type. This project type splits webresources into folders for each type of web resource. So I have a folder WebResources, with in there a folder labeled Cascading Stylesheet (CSS) with in there a stylesheet with filename membership.css and Unique Name acm_membership_css. I also have in the WebResources folder a folder Web Page (HTML) with in there a html file with filename acm_membership_generator_html.htm and Unique Name acm_membership_generator_html.
The problem I have is that when I'm developing this in Visual Studio and need to see the effect of my stylesheet on my page, I need to write this reference (refering to the filename):
<link type="text/css" rel="stylesheet" href="../Cascading Stylesheet (CSS)/membership.css"/>
However, this reference does not work in CRM. In CRM, all webresources are located in the same folder and require me to refer to them using only the unique name. In this case, I need to use:
<link type="text/css" rel="stylesheet" href="acm_membership_css" />
Because of this difference in reference method, I need to use both methods to refer to them, which I think is a bit sloppy. I want to tell VS 2012: This link to acm_membership_css actually refers to ../Cascading Stylesheet (CSS)/membership.css, treat it as such when rendering the CSS in the WYSIWYG editor.
Is there a way to do this?
After checking the Resharper suggestions, I noticed that Resharper allows you to set a Path mapping that substitutes paths for resources that are deployed to a different location.
I have created a very small personal website with three different pages and one CSS file. I know to embed a CSS file into an html page is the following:
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
but form some reason the CSS file only work in one page. Any advice please
Did you checked your folders structure? You may have other html file in different folders.
I suggest to use an absolute path for your stylesheet. something like:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css"/>
first / in href parameter is what I mean.
Edit: You may use a windows machine and upload your files into a Linux machine. Windows do not care about lowercase or uppercase, but it is important on Linux. rename all your filenames to lowercase every where and use it exactly the same in your code (check your link tags again). this may fix your problem
Sharing the link of the site would be helpful. Make sure that the line of CSS aboves goes on each page. For example, if you have 3 pages with 3 different files: index.htm, bio.htm and contact.htm (I'm having to guess since I have not gotten this info from you). Then make sure the link to the CSS above appears on each of those pages.
Im trying to convert an html template to ASP.Net MVC 4 project. Bbut i have run in an problem. Then opening the localHost:11062/ site everything looks prefect. But if i try same address just calling the controller and action direct localHost:11062/StartMenu/Index, which should be the same, but it's not. For me it looks like the css file isent loaded correct. But if it wasent the start site should not look different?
I suspect that you have hardcoded the url to some of your CSS files, just like this:
<link href="Content/Site.css" rel="stylesheet" type="text/css" />
instead of using an url helper:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
Of course the same is true for all static resources such as javascript, images, ...
You should never hardcode urls in an ASP.NET MVC application. Always use url helpers when dealing with urls.
Also if you are referencing some static resources (such as images) in your CSS file, don't forget that they should be relative to the location of the CSS file.
You might easily see this in the Net tab of a javascript debugging tool such as FireBug where you would get 404 errors for the corresponding resource.