Can't locate CSS?
Permalink
Hi there,
This is driving me crazy, so any assistance would be greatly appreciated. Basically, I'm trying to get borders to be shown to the left of my nav items instead of the right - Using Chrome's 'inspect element' tool, I've located and edited the relevant CSS in the plugin I'm using (view.css.63) - but it's getting overwritten by (index):156 & (index):282. Now my issue is, CSS files I can locate, but when it just says 'index' in the inspector, how to I go about editing these values? Here's the site in question:http://crimsonnight.com/
Thanks
This is driving me crazy, so any assistance would be greatly appreciated. Basically, I'm trying to get borders to be shown to the left of my nav items instead of the right - Using Chrome's 'inspect element' tool, I've located and edited the relevant CSS in the plugin I'm using (view.css.63) - but it's getting overwritten by (index):156 & (index):282. Now my issue is, CSS files I can locate, but when it just says 'index' in the inspector, how to I go about editing these values? Here's the site in question:http://crimsonnight.com/
Thanks
Hey akodde, cheers for the response
I already had that in my view.css, well something very similar:
.footer-nav.border-right, .preview-pane ul > li {
height: auto;
min-height: 170px;
border-left: 2px solid rgb(245, 245, 245);
and it's working fine, but the two index classes are also rendering the right boarders, it doesn't seem to be cancelling them out at all. I tried your code just to make sure there wasn't something I missed but I'm still having the same results...
*EDIT* using '!important' for now, if there's a better solution though please let me know :)
I already had that in my view.css, well something very similar:
.footer-nav.border-right, .preview-pane ul > li {
height: auto;
min-height: 170px;
border-left: 2px solid rgb(245, 245, 245);
and it's working fine, but the two index classes are also rendering the right boarders, it doesn't seem to be cancelling them out at all. I tried your code just to make sure there wasn't something I missed but I'm still having the same results...
*EDIT* using '!important' for now, if there's a better solution though please let me know :)
I see. The rgba is probably less strong than #FFF.
What you can do is using a 'stronger' selector. For example, an "ID" selector is stronger than a "CLASSS" selector.
E.g.
#container .footer-nav.border-right, .preview-pane ul > li {
border-right: 1px solid rgba(245, 245, 245, 0);
}
What you can do is using a 'stronger' selector. For example, an "ID" selector is stronger than a "CLASSS" selector.
E.g.
#container .footer-nav.border-right, .preview-pane ul > li {
border-right: 1px solid rgba(245, 245, 245, 0);
}
Hm, that didn't seem to work either
Woh right, inline styles have more 'specificity'. Sorry about that... Check this URL:https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity...
So I guess you have two options:
- Remove the inline CSS
- Use !important
So I guess you have two options:
- Remove the inline CSS
- Use !important
Cheers, I'll stick with !important for now :) I'm also trying to remove the border from the first item ('Home') on the list, any ideas on how to combat that?
I'm also trying to remove the border from the first item ('Home') on the list if you're able to assist with that?
Yeah, try this:
.footer-nav.border-right, .preview-pane ul > li:first-child {
border-left: 0px;
border-right: 0px;
}
.footer-nav.border-right, .preview-pane ul > li:first-child {
border-left: 0px;
border-right: 0px;
}
That site is using some inline CSS. If you check the source of the page, you'll see some CSS at line 245 - 285.
You can override if you selector is 'stronger' or at least the same but then later in order. Another option is to use !important, but that's not recommended.
So you can use this in your view.css:
.footer-nav.border-right, .preview-pane ul > li {
border-left: 2px solid #f5f5f5;
border-right: 0px;
}
Cheers, Adri