When you inspect the markup of a Wordpress site that has a child theme, the display for the Elements tab when you inspect the markup shows CSS rules from both the main style.css and the child's style.css as simply style.css. In the image below, for example, the a:hover color of #345678 is made on line 16 of the child theme while the a:hover text-decoration of underline is made on line 1116 of the original 2014 theme. But there's no indication in the Chrome display which file is supplying which rule. Is there way to make this show up?
You could know this by hovering over the text that displays the line info. On hovering, the absolute path of the file from which the CSS rule is being set will be displayed.
Related
I'm trying to get this style to work for the body of the HTML page, it works when the style is applied within the tags but not when used with an external style sheet.
CSS Doesn't work with this code.
body {
background-image:url(img/geometric.jpg);
}
HTML Works here.
<body style="background-image:url('img/geometric.jpg');">
</body>
I want to use external styling for the whole page. I'm curious on how to fix this odd issue.
The path to the image must be relative to the CSS file that references it, not the HTML file that it will appear in.
I am trying to set the background of a HTML Page. It works with the style tag in my HTML's head but not in my CSS file.
This works
This does not work
Note: "on css file that can display my background on firebug"
In the style change the img url to : ../img/02.jpg. It's because the image folder isn't in the css folder, you need to go up the directory using ..
I'm having trouble getting a span (or i) that I'm having represent a particular icon using FontAwesome styles to be the color I want it to be.
The weird thing is that the Chrome inspector shows it to "be" the color the CSS says it should be, and it shows that the rule is correctly implemented, but in the browser it appears as the color of the surrounding div, which, again, Chrome inspector shows to be correctly overridden.
Fontawesome works fine, using CSS styling to set color, in other parts of my app.
Has anyone run into any quirks with fontawesome and CSS styles? Under what circumstances would Chrome inspector show the font as one color but it would display as another?
If you can help, would appreciate. If not, that's fine, but don't down-vote me, if you would.
Assuming I understand your problem, you don't have any text in the <span>.
But even if you add some, you're hiding the parent element by calling:
#la-tarifa-es{
display: none
}
So all of the children will be hidden as well regardless of how you target them.
The answer was that FontAwesome works by adding a ::before to the SPAN (or I). So, apparently, the CSS rule for the containing DIV was operating on that, not the CSS rule for the SPAN. When I made a very specific rule for SPAN::BEFORE it worked.
I'm a server-end python programmer, and have very few knowledge about css.
Recently I was using gitbook to write our doc-sites.
Everything was OK, except when I'm using anchors in the md files.
The content wrapped in the anchor tag will be show in blue. Which isn't good.
I wanna disable this blue color rendering, then I did some search and find the page was influenced by a file named style.css.
There is only 1 extremely long line in this file. I searched blue in it, nothing.
And then I searched anchor in it. I got:
fa-anchor:before{content:"\f13d"}.
.anchor{position:absolute;top:0;bottom:0;left:0;display:block;padding-right:6px;padding-left:30px;margin-left:-30px}
.anchor:focus{outline:0}
Is this fa-anchor:before{content:"\f13d"}. thing which influenced the anchored content rendering? How to disable its effect?
If it isn't, what key-word should I searching in the css file for anchored contnet rendering?
PS: In this question the anchor means syntaxs in html like <a href='#stash_save'> save </a>
#Zen fa-anchor:before{content:"\f13d"} this code means the generated icon using unicode character won't be part of DOM.
By default when <a>element apply by default color turns into blue color you have to find the class if any applied on <a> tag. otherwise you can change the color using <a href="#" style="color:#535353">. using inline CSS here just for reference.
You can make a specific class for <a> tag.
Hope it solve your problem. check the DEMO also.
add color: red;
to the end of
.anchor{position:absolute;top:0;bottom:0;left:0;display:block;padding-right:6px;padding-left:30px;margin-left:-30px}
and see if it modifies the color.
I'm having a problem finding out which css is actually applied to an element when using Firebug 1.11.2. I'm setting the paragraph font from my own css file (d.css), which is meant to over-ride 3 system css files (a.css, b.css, c.css).
I click on the html tab, and click on the <p> element that I'm
trying to debug.
The style window on the right now shows the applied styles from a.css, b.css, and c.css, but not d.css. No paragraph font is shown, but I can change the paragraph line-height, for example, from a.css.
If I click on the css tab, and find d.css, I can manually change the font and font size and see the changes applied to the <p> element in the main window. However, the style window on the right still shows no font.
Is there some magic to showing all the applied styles?
Try using another add-on for viewing your CSS code, for instance:
https://addons.mozilla.org/en-US/firefox/addon/web-developer
You can try other add-ons.
A bit dumb, but probably worth answering rather than withdrawing the question...
turns out that you have to be rather more careful when selecting the html element than I'd realised. My text was actually in a span:
<p>
<span class="foo">bar</span>
</p>
The problem was simply that selecting the <p> element or the bar text doesn't show the styles applied to bar - you actually have to select the entire span element by clicking on the span word.
Thanks.