I have a custom directive which has mutliple html elements with classes applied on them, and I have a CSS file specific to this directive, where all these classes were defined.
What is the better way of loading this CSS file on demand, whenever I use the custom directive(in any of my views?
One possibility would be to dynamically generate link tags and add them to the document head. You'd probably want to wrap this behind a service that can keep track of which style sheets have already been loaded.
You'd also want to make sure you wait until the style sheet has been loaded and applied before showing your directive so that you don't get flashes of unstyled content.
Related
Is there any way to change a class used in html file without editing the file?!
My case: I can't edit the template files (I don't have access), but I can define a css file to be loaded as the last one. I need to replace some classes name with something else somehow. Is there any tricky way?
Well... that depends on what you mean by "without touching the file".
You have to find some way to change the class to the one you want. You can do this by putting a more specific CSS rule as j08691 point out in the comment or you can change it using javascript.
Either way you'll have to put that css or js in the html. You can put them directly on page using style or script tags respectively or you can use a .css or .js external file. Either way you will have to change the original HTML file.
Other thing you can do is to put this html in a frame or iframe element and include the css or js you need.
The way it works now, Meteor automatically finds CSS files in the client directory and renders it without having to call it in the HTML's header tag.
However, how would I be able (if it's even remotely possible) to associate one particular CSS file or files to just one HTML page?
I recently purchased a theme for one section of my website that I didn't want to bother creating myself, since I hate doing UI for my main page myself. But when I place the CSS files of this template with the ones I have for the other template I use, one template's CSS files overwrite the other, so everything ends up looking like a huge jumbled mess.
I hope I'm being clear with my question. Is there a way to get around this?
So, if there's not a way to keep the file from being included in meteor, you could add a class to the body tag of the page you want the styles to appear in, then prepend that class to the beginning of the styles in your new stylesheet, ex: .yourBodyClass#stylehseetID, .yourBodyClass.stylesheetClass
if you put your stylesheet in the public folder, it will be treated as a static file, but then it should go in the header which is rendered by Meteor, and since Meteor is a single page app (SPA), it only has one header for the whole application.
If you need specific styles for a page, you can use some prefix for your css classes. That's probably the easiest.
In an mvc 3 razor project I have a helper which creates a component. I can use this helper to create as many components as I need in the same page.
I have different folders containing css files and their images.
Can I specify the css style of each component from the helper?
i.e #html.MyComponent(100, 200, "pink") will uses the style.css in pink folder.
Ps: I am not using html5 neither css3
If you would use classes instead of files it would be much easier. I would just use different styles for themes. You should look at this question: ASP.NET MVC 3, how to do themes right
ASP.NET MVC 3 Razor: Include JavaScript file in the head tag
I think the same thing can be applied but I don't know if you can do it from a helper.
If you are set on doing it this way - then
You need to select the css file at the top for pink
You need to include all style sheets in loading.
You need to dynamically include style sheets when requested by MyComponent. This is tough as you may end up double including them. You can accomplish this via an ActionFilter to write out the css tags at the end, but this is a hack and I wouldn't recommend it.
Stick with convention and your styles should be requested at the top, so you need to know which styles you are using on the page. Your components shouldn't care about loading a style sheet, it should already be loaded which means you have to make this decision at the top of your page. Since you should already 'know' the names at this point (pink, etc) you can easily write the code at the top to request these files via a simply
<LINK href="#string.Format("/{0}/style.css",YourStyleSheetnameIePinkInThisExample)" rel="stylesheet" type="text/css">
Apart from the global.css i'm including in my header.php, i would also like to load certain page-content specific styles.
But since my <head></head> is already covered by my header file, and i don't wish to resort to inlines, what is the best way to place the styles on the specific page?
Thanks ! :D
I would try one of the following:
Break the header.php in 2 distinct files to allow any pages including it to add their own link tags
At the top of the file, before including header.php, set an array like $included_css containing styles (style1.css, style2.css). Then in header.php you can do a simple foreach and include them after global.css (to allow them to take precedence)
in our CMS we have a header folder inside the template directory. If you name a file form.tpl its gonna insert it self only in when form.tpl is called (we handle that with the smarty template engine). What is good practice i think.
An other solution would be to uses classes or id's on your body. <body id="suscribeForm"> and to use them as reference in your css. (the problem is the CSS is loaded even if you don't use it, but on the other side its already cashed if the user changes to an other page).
You can link different CSS files in your main CSS also, but this is not a good practice, because your browser is gonna wait until mains.css is loaded and then load the linked files.
I'm using the Google CDN to load my JQuery file. However, I'd like to have my master page use a separate theme to my content page. Is this possible when using the CDN? I'm using ASP.NET.
Thanks for any help
The master/content page actually forms a single HTML page when delivered to the client. To make it work, you'd need to duplicate all of the selectors for the jQuery UI CSS file and extend them to make them specific to your content page -- so that they are more specific than the standard jQuery UI selectors and thus are applied instead of the standard jQuery UI selectors for just the contents. Then you'd load both CSS files -- the standard jQuery UI CSS and your more-specific-selector-based UI CSS. You may still run into some conflicts, especially with elements that are placed relative to the page rather than a specific element -- drag/drop elements using cloning, dialogs, etc.