On my site, I have one CSS file that dictates all the styles for the site, "styles.css".
However, I've recently installed a forum module.
This forum module has its own CSS file, "chatter.css", and it's placed on one of the pages of my site.
Problem is, there's a LOT of conflicting styles going on.
The entire forum is contained within a div with the id of "chatter".
Is there any way I could tell the dom "hey, only apply chatter.css in this div"?
You may put entire css file into #chatter between brackets, but that requires usage of precompiler(SASS,Less).
Like that...
#chatter {
<css file content>
}
Related
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.
I am working on service which allows third parties to upload HTML snippets. In some of these snippets there may be links to CSS files or inline CSS. The service has it's own CSS files.
Is there any way, besides iFrames, which would allow me to indicate that specific CSS files are only to be applied to the specific HTML elements and not the whole page?
I guess you could download the CSS-files, prepend some #unique-container-identifier to all rules within it and just embed the markup into your page, inside a container with the ID previously assigned.
That'll leave you with a problem of your own, "real rules", ruining things inside those boxes though...
Unfortunately no solution I've found on the interwebs seems to work for me, so I just had to scrap the idea of using scoped CSS.
I'am currently working on a website that is using the wordPress content managment system and i was trying to get rid of some inline style definitions for some inputs that i wanted to put into the css file.
I copied the exact inline style definition into the stylesheet in a class that targets input (i.e input.className, ClassName having the same elements as the inline style definition) and then added said class to the input.
What happened is the button was rendered with the browser's default appearance settings instead of the ones i defined in a class.
I did some testing and ctrl+f in the css file to see if there we're any more specific css definitions for inputs but there we're none.
Then i copied the whole css into a file and i created a quick html pointing to that local stylesheet, putting just an input with my newly create class on the page to see if it had anything to do with wordpress.
On my local machine the class is applied to the button, but on wordpress it does nothing.
Does anybody know where does the problem comes from or can anybody suggest some possible hints into where i should look.
Thank you in advance.
If the code works outside of Wordpress but doesn't work inside of Wordpress, what led you to the conclusion that the problem lies with the browser overriding something? Isn't it infinitely more likely that something Wordpress is doing is causing the issue?
Inline styles have high specificity. By moving the CSS rules to an external stylesheet, you lowered its specificity. It's likely that Wordpress' CSS includes rules that conflict with yours, and have a lower specificity than your inline styles, but a higher specificity than the same rules moved to an external stylesheet.
To fix this you need to raise your rules' specificities. The quick hack fix for this is to use !important, but you should really figure out what you are conflicting with and address it by tailoring your CSS to match.
To answer your question title, yes browsers can override CSS but only if you wittingly installed a plugin/extension to do so (eg facebook themes), but by default the browser does not do so.
You could check if your Wordpress install or browsers has cached the page (you can delete/remove the cache to do so), I know this is an issue while editing PHPBB themes while live, but I suggest go all out, create a separate CSS file and new unique class name in it (avoid any confliction) and double check to be absolutely sure
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 making a website that will have to render correctly on FF/IE6/IE7/Opera/Safari. IE6 came as a late requirement (when I had done all the other browsers) and it just has to be useable, not necessarily the same as on the other browsers. Now I'm tweaking it so that it's useable on IE6 as well.
To this end I've created another stylesheet in my theme called IE6_override.css. As you might have guessed, I want it to be applied only when the browser is IE6. Conditional comments would perfect for this.
The only problem is - ASP.NET renders a <link> tag for every CSS file that is in the theme's folder, thus including this file unconditionally on all browsers.
I would like to stick to themes because it's completely feasible that we might create more skins for our application later (if the customers desire that).
Is there any way how I can make ASP.NET exclude this specific .CSS file from its auto-including?
Added: Thank you for your answers! In the end I found a workaround. Due to some other styling problems I've asked about earlier, I'm forced to have a IE6-workaround Javascript as well. Thus I prefixed all my IE6-specific rules with a .ie6_dummy class selector and then removed it in JS upon page loading. :)
Yes you can... You can just remove the specific page header control in code behind. The css files are added automatically through theming, but u can remove them again after. Like for example u can put in the page load of your master file:
Page.Header.Controls.Remove(YourCssFile);
Or if you wanna have all the css files removed at the same time:
var themePath = string.Format("~/App_Themes/{0}", Page.Theme);
var removeCandidate = Page.Header.Controls.OfType<HtmlLink>().Where(link => link.Href.StartsWith(themePath)).ToList();
removeCandidate.ForEach(Page.Header.Controls.Remove);
I don't think you can. We stopped using the App_Themes folder for exactly that reason. This also saved us having to prefix every css file with a number so they load in the right order.
Indeed it's not possible to exclude a specific CSS file. However, there seem to be several workarounds located here. I'd suggest reading through those and choosing an appropriate solution (if any).
There are a couple of posts out on the web which seem to address your problem - looking for "Conditional comments in asp.net themes" I came across these which look like they may help:
How to take control of style sheets in ASP.NET Themes with the StylePlaceholder and Style control
Conditional stylesheets in Themes
The first one will also address the media issue with theme stylesheets as well.