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.
Related
I've added a widget element (my account widget) to a page using a shortcode (there is an annoying bug when I use the widget).
and of course the element is missing the theme's style.
I've found one post about this, and how to resolve it, but I can't seem to understand WHERE do I find the html and css relevant to that element, and where to place them.
I would love to understand how it is done.
link to my page (you need to create an account to see it): https://rotemy12.sg-host.com/%d7%94%d7%97%d7%a9%d7%91%d7%95%d7%9f-%d7%a9%d7%9c%d7%99/
link to the explanation I found
Many thanks!
You might find it useful to look into how to edit templates/themes.
It seems you will have to access files inside the wp-content/themes/[theme-name]/; there you should find a style.css, a function.php, (and a bunch of other files). You can edit style.css to customise styles to your liking: edit the style.css to insert styling information for your widget; you might need to look after specific selectors depending on your theme.
Also please note that depending on the browser you are using, you should have developper's tools that will be useful to find out about parents' selectors Chrome / Safari.
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.
So I've recently started making more use of EJS templates in my website and so I've done things like broken out the top nav bar and other things into their own template. Is there a standard practice for how to organize CSS (or more specifically SCSS) with that? Should I just make a matching SCSS for each template with just the styles for that template and add the <link/> in each page that uses the template? Or just I just add <style/> tags to the template itself with the CSS in there. Is there a standard pattern for this?
Good question. I think the answer is "no", there is no universally best or accepted standard.
The advice my "work-mentor" always gives me is good advice: he says "do what will be the easiest to maintain". This would depend on your project. I can think of a couple general strategies:
One stylesheet per template
That is, in a way, the simplest suggestion. Probably the easiest to develop, and each page will bring the minimum needed styles.
However, this makes reusing styles pretty impossible. You won't be able to plunk in a <button class="myclass"> into any template without reincluding the styles for .myclass in every sheet you need them in. Also, if you ever want to automate your style sheets (minifying or concatenating them for production, etc) as is common practice, it won't be very possible from here.
One more downside, you might get some unexpected ordering effects. Like if your "widget.css" ends up being added to the DOM after your "article.css" it may override styles in a different way than it would have if it had appeared earlier in the DOM.
All styles on every page
Again, this is nice and simple. Every page has all stylesheets (or maybe just one giant sheet) included. You can link to it once in your outer layout template. It will be easy to automate minification, etc, and there will never be any surprises related to the order stylesheets are added in.
The obvious downside is lots of unused styles brought to each page. But css is pretty "cheap" in terms of size, so this may not be such a bad downside.
Somewhere in between
Include some styles on every page, and make some either page-specific or template-specific. Realistically, this is probably what most apps end up doing.
You can universally include utility styles meant to be reused (ex button.bigred, form.orderform, etc), as well as dependencies like bootstrap or whatever. I'd also advise including any styles you will need on more than half of your pages (ex styles for your navbar).
Other styles intended for one specific page can be added to that page directly via links.
last note
I try to avoid <style> tags in the html for a couple of reasons:
Lots of js libraries dynamically add or remove <style> tags to your DOM, so leaving that space clear for them avoids possible mistakes or overlaps.
They are a good way to add dynamic or user-managed styles to pages from within your templates. Keep styles that don't change in the stylesheets, to avoid possible mistakes or overlaps with yourself :)
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 building an app on top of webkit, I need to modify a CSS file (edit a selector), which I can do once the page is loaded using Javascript. In my particular scenario I may load the page many times and I would like to mutate the CSS in the cache (using Javascript, as opposed to hacking webkit). Any ideas?
Without entirely understanding your use case I see at least three cheap and fast methods to override some styles:
use one of the many bookmarklets out there (e.g. this one by Paul Irish) to play around injecting styles or
use a short snippet of javascript ondomready to inject a stylesheet with selectors and styles into the head of the document (similar to the bookmarklet above) or
define a specific enough CSS selector and simply include an inline style element in your document (which I would not suggest)
All three methods are basically the same. Depending on what you have, are able to edit or want to achieve either method may be more suitable.
User stylesheets or extensions like Stylebot for Google Chrome may be another possibility to look into.
Weird stuff like loading referenced stylesheets via javascript's XHR, get the content of the file, modify or inject stuff and reapply the styles to the current document are possible as well but probably not what you're looking for.