Hoping someone can help please. I have a bunch pages with similar slugs that I want to apply css rules to, i.e.
camera-crews-uk
camera-crews-mexico
camera-crews-ukraine
etc etc.
How do I apply a css rule to all pages with 'camera-crews' in the slug please?
Many thanks,
Spencer
CSS has no mechanism for applying rules based on the URL of the page.
You'll need to use a programming language to change the DOM of the page so that it either:
Dynamically includes the CSS
Dynamically includes something (e.g. a class) which a CSS selector can match
You could use an external stylesheet and connect the HTML pages that you want to apply the styles on connected to that stylesheet.
Related
It's quite simple. I'm working on my first WordPress plugin. Testing on multiple WordPress websites, it seems that it's quite hard to make sure my plugin looks the same on all websites.
I obviously don't want to list every single possible css setting and write none !important.
So what's the right approach here?
While creating any plugin, you can make a common prefix according to your plugin name and add it everywhere. Like if i am creating a plugin i.e. "custom post type" then i will use "cpt" as a class or id on everywhere.
Just use unique prefix according to your plugin name so it will not conflict with theme styling.
Hope this will help!
Use could use custom HTML tags. So instead of this:
<div class="hello">Content</div>
Do this:
<my_element class="hello">Content</my_element>
That's the only way to be 100% sure, without using lots of over-qualifying things like !important etc.
Both are 'incorrect' ways that invalidate 'guidelines'.
But it will work, and it'll be fine forever as long as your tags are uniquely named and never become part of a spec and get treated in a predefined way by browsers.
For input fields etc, unfortunately you'll have to go with standard CSS selectors and qualify them more than any other CSS which may be present.
asdf{
display:block;width:100px;height:100px;background:black;color:white;
}
<asdf>Hello!</asdf>
I have a wordpress theme, and it looks good now, however, I want to add a custom html form to it. But when I put the code in it whith path to its own css and js. The form looks terrible because of the css from the theme.
Is there any plugin or option to fix this or do I need to do it by an other way?
I looked everywhere on the internet but couldt find any solution.
Any help is welcome.
Thanks alot.
CSS means cascading stylesheets, and that's because the CSS from the page cascades downwards onto all the elements on the page. You either have to manually reset the CSS before it hits your form, or you need to embed your form as an iframe to avoid the cascade.
Theme and bootstrap css will override input fields with ton's of styles. You don't have much options but to find and "ran over" problematic styles with your own.
Use !important only if needed.
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 have used a template for my website. that template contains 2 stylesheets. one is for text and the other is for layout. now i have a master page and a contactUs form uses that masterpage. the master page uses both the above mentioned stylesheets. I have used an accordion in a control. The problem is that the accordion is perfect in the design view of the control control that i have used it in. but as soon as i put it in the contactUs form which uses the above masterpage with the stylesheets, the styles mentioned for a link in the above 2 stylesheets are shown instead of the styles mentioned for accordion header link. what must be the problem? how can I separate all the styles so that the browser doesn't get confused?
Just use Firebug to see what style is overriding the other style and why (more specific, declared further down below, etc).
Without seeing the contents of the stylesheet it's not possible to say exactly what the conflict between them is. Generally speaking, what's happening is that the two stylesheets have different rules for <a> tags (<a> is the HTML tag for a link).
You should look at the stylesheets, and find the rules that apply to a tags. They'll look like a { color: red } or some such. It's possible that the selector will be more complicated, so that instead of a it could be li a or a.someClass or any of a number of more elaborate things. Then, you can do something like change your template so that the links on one of the parts of the template have a CSS class, and update the relevant CSS selectors to only apply to that class, like a.accordionHeader.
1- First of all take a look at the order of your stylesheets.
2- The last one will override the first ones.
3- Change the order of the stylesheets, just guessing, I can say that you should usa the style for the contact us FIRST, so the general styles will overwrite it.
4- If that's not the case, and the results are not as desired, then you should be more specific about the code of the css with selectors more specific than the ones you are using. (Just like aem told you in his answer).
5- Like aem, with so few information, we can't tell what could happen and what could be done.
If you could be more clear in this topic we could help you in better way.
Bye.
I am using the django framework and am using templates, inheriting a lot of admin base templates. What am wondering is: can I have more than one CSS file in one HTML file? i.e. maintain the django admin CSS file but then have another CSS file of my own with different styles!
Yes you can. Just place the tags to the CSS files or embed the style in style tags.
Just to add that whilst multiple css files are of course possible, it is actually best practice for you to merge the css (programatically if possible) into as few files as possible.
Fewer files = fewer http requests = better responsiveness for the end user.
Yes, you can. But if you try to override any of the CSS in the django admin CSS, you'll have to use !important in your style definitions.
Of course, that's why they are called Cascading Style Sheets, because you can have a dozen of them applied in succession.