I have installed bbPress in my website and my theme override some bbPress css which I do not want.
The forum breadcrumb is hidden with the following code:
div.bbp-breadcrumb, div.bbp-topic-tags {
font-size: 12px;
}
bbpress.css?ver….5.14-6684:404
div.bbp-breadcrumb {
float: left;
}
vlog-bbpress.css?ver=1.8.1:335
.bbp-breadcrumb {
display: none !important;
As you can see in the picture the CSS comes from two different files:
bbpress.css
vlog-bbpress.css
Somehow the rendering seems to override bbpress.css.
What code should I use to make the breadcrumb visible?
Having installed a plugin (Simple Custom CSS) to write custom css, what should I write there in order to have the forum breadcrumb visible?
Please look at the real website here http://italiancrypto.it/forums/
The breadcrumb is hidden by:
.bbp-breadcrumb {
display: none !important;
}
What you see is that it is addressed by one class, and an !important. One class isn't a problem, but !important is (and is generally viewed as bad practice).
The easiest way to overcome this, is by addressing the same bbp-breadcrumb with an extra class, that's above it. For example:
.entry-content .bbp-breadcrumb {
display: block !important;
}
You could also use the above ID of bbpress-forum, but that is generally viewed as bad practice as well. Then again, desperate times call for desperate measures ;-)
Try add an id to the class .bbp-breadcrumb with JS
document.querySelector('div.bbp-breadcrumb').id = 'breadcrumb';
this will add the id to the element, then in your css use
#breadcrumb {display:block !important;}
since the id takes precedence over class I think this should work.
Related
I'm currently trying to override a piece of styling made earlier in my code to my section-header with the padding, but having difficulty in doing so. I'm trying to center the section header on desktop sizess only.
My original section-header is like this:
.section-header {
padding-left: 10%;
}
And my media query is like this:
#media #{$desktop} {
.section-header {
padding-left: 0;
text-align: center;
}
}
I've already used !important but my mentor tells me to avoid it. How can I override this and make this change?
CSS works in multiple ways and can become a mess which is why your mentor mentioned not using "!important" where possible.
One thing to note is if your section rule is after your media query rule, it will override the media query rule.
Also, consider specificity. The more specific you are with your targeting the more important that rule is.
Quick question. Have you opened it up in Inspect to see whether it's even showing? So possible cache clear issue etc?
If it shows in inspect element, it might worth checking whether there is something with higher specificity overriding it.
It's hard to give a fix above the above without seeing but that won't be accepted on here...
I'm using Bootstrap and trying to develop this website. Particularly using their bg-primary category, which sets the default color to a royal blue. However, I need the color to match a teal on the "subscribe" button. However, as you can see in the inspection, the color of the card background has a default setting of the blue with an important tag.
My CSS to change the bg-primary color can't override the natural color Bootstrap set because they placed the important tag on it (even my important won't override theirs).
.bg-primary {
background-color: #3292a6 !important;
}
How do I go in and irrevocably remove Bootstraps default !important tag to the .bg-primary class?
You will have to override a lot of things ( `:hover' and 'disabled' among others) I'll suggest creating a new css class:
buttonColor {
border: none;
background-color: black;
color: white;
padding: 10px 20px;
}
buttonColor:hover {
cursor: pointer;
background-color: white;
color: black;
}
Try:
.card.bg-primary {
background-color: #3292a6 !important;
}
Here's why:
With CSS (Cascading Style Sheets) there is a concept called "specificity." My above rule will work because it uses two classes (.card & .bg-primary) instead of just 1 class (.bg-primary).
In general, to override bootstrap classes, I make my css rules more specific by adding a class in front (Note: this won't magically work, especially with Bootstrap nav! You have to inspect the styles, see which bootstrap rules are applied and create an even more specific rule. This can be tedius, and there are probably better, but more complicated ways.)
There are two common approaches.
If you want to only override it in a few places, then Jesse Phillips's primacy solution is best, but if you want to globally over-ride it and you have direct access to how the header is parsed, then you simply need to make sure that your CSS rule is included later in the document than the Bootstrap
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/customStyle.css">
then all you have to do is add an !important tag to your rule that matches the class you want to override.
EDIT: A third option I sometimes see people recommend is to save the bootstrap.css locally to your server and remove the !important tag there, but this in not a good idea because you will loose this change if you ever try to update your bootstrap to a newer version.
You would simply have to over ride the class with your own bg-primary class adding the !important tag there as well.
See this SO - How to override !important?
This Mozilla post - -https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_to_override_!important
Two solutions that I don't see here yet:
Don't use Bootstrap. Learn how to write your own CSS.
Remove the class that is adding !important from the HTML element and re-write it in your own CSS files.
Fixing !important with more !important tags is not a way to write good CSS. Kill the source.
I am trying to override the following found in the bootstrap class of "modal-footer"
margin-top: 15px;
I have the following HTML code that does this:
<div class="modal-footer my-modal-footer-override"></div>
and the following custom css :
.my-modal-footer-override {
margin-top: 0px
}
But this does not work.
Any suggestions ?
You could try a more specific selector. This could do the trick
.modal-footer.my-modal-footer-override {
margin-top: 0px;
}
Multiple class selectors should work in everything newer than IE6. Please note the absence of whitespace between the classes: this means that both classes are applied on the same element.
If this still does not cut it, you could put .modal before this selector, so: .modal .modal-footer.my-modal-footer-override.
The important! declaration could be used as a dirty hack, but I would advise against it.
Check your CSS import order. Make sure your custom css is loaded after Bootstrap. Use firebug or chrome dev tools to see if your styling is being overriden because of something imported laterin the html.
Have you tried this?
.my-modal-footer-override {
margin-top: 0px !important;
}
Using !important before the ";" will give this rule more weight than the bootstrap css.
You can add that inside yout HTML using ..css.. in the head, or in a new css document.
I am currently trying to use Joomla to create a simple website. I uploaded Joomla Extension Survey called Form Maker Lite for the purpose of creating a survey/questionnaire.
I published this extension to my Joomla based website, unfortunately I am unable to resize the table. I tried using width: px to resize the table, however it did not working.
Here is the current auto-generated CSS of the table:
#form10 .wdform-matrix-table {
display: table;
border-spacing: 0px
}
I am having trouble copying the HTML here so I tried using this (results did not come out as expected, it was meant to appear in the form of a table) - My JSFiddle
I also tried using table-layout: fixed; overflow: hidden; but unfortunately that did not help re-size the table. I want to make the width of the table shorter.
Unfortunately I am unable to provide access to the website because I do not have full control/permission over the publicity of the link :(. My apologies.
Any help/advice/solutions would be appreciated.
Having had a quick look at the component, the following styles seem to set a width of 100% pixels to the form by overriding the default settings.
<style>
.wdform_section {
width:100% !important;
}
.wdform_column {
width:100% !important;
}
.wdform-field,.wdform_row {
width:100% !important;
display:block !important;
}
.wdform-element-section {
width:80% !important;
}
.wdform-label-section {
width:20% !important;
}
</style>
As far as I can tell Form Maker Lite adds inline styles to the form elements, which you don't seem to be able to edit, which is why you need !important to override them.
The above styles are over-writing the default "contact" form it has in the Joomla 2.5 version. It may churn out different code for different forms.
If you don't already have it, I'd recommend installing firebug to look at what css it is generating. That can make overriding css far easier.
I'm trying to catch all the elements of my website in one css declaration. It's a Drupal websites with a billion p's, a's, li's, ul's, strong's, all kinds of div's,...
So, pretty easy I thought and I added this in my css:
body.i18n-zh-hans {
color: red;
}
But for some freakishly reason, the site doesn't move a muscle.
What's the proper declaration to catch ALL the text in just 1 CSS declaration?
Worst case scenario, I would have to declare everything on its own no? Like:
body.i18n-zh-hans, #main p strong a li ul {
color: red;
}
UPDATE
So, Basically, I just want to override all, in this example, the colors of the font in the whole website!
Thanks in advance
You'd want to make that declaration !important, so it'd override any more "specific" styles specified elsewhere in your CSS. Remember that CSS has precedence rules, and "more specific" matches will have higher priority than "less specific" ones.
body.i18n-zh-hans {
color: red !important;
}
* {
your style..
}
and you got to be the last rule in the list..
and there might be some inline styles, those will override..
tested it a bit out and figured out that everything you define in it needs !important..
Here you go:
If body is the biggest box in the box model. Get it? You want to target the big container. Try firebug. It's a great tool. You can even edit the css on the browser to instantly change the website (not permanent though).
body {
color: red !important;
}
This was the one and only solution!
.i18n-zh-hans * {
font-size: 99% !important;
}
Thanks to everyone who participated this discussion.