I am using the CMS called WebsiteBaker, now I wrote a module for it, a droplet, that uses it's own CSS.
It seems to be that the CSS of the droplet cannot be overriden by the main CSS.
I assume that's because the droplet (and along with it, the css) is loaded after everything else.
And I cannot just modify the CMS files as workaround, as it's a module.
Any ideas for a workaround or something similar?
--
Main CSS (override attempt, included in the header)
#programma_tab {
width: 300px;
}
Droplet CSS Example (included in the body, there is no other way)
#programma_tab {
padding: 5px;
font-size: 12px;
margin-top: -15px;
width: 200px;
}
I have a couple of ideas.
1 - Try making the selectors more specific. Something like body should override the original
body #programma_tab {
padding: 5px;
font-size: 12px;
margin-top: -15px;
width: 200px;
}
2 - try adding !important after any CSS property.
#programma_tab {
padding: 5px !important;
font-size: 12px !important;
margin-top: -15px !important;
width: 200px !important;
}
If you are using the DropletsExtension for WebsiteBaker the CSS for your Droplet can be automatically loaded in the head section of the template and you don't need to put your CSS hardcoded into the body.
Just add a !important statement to the CSS commands like:
#programma_tab {
padding: 5px !important;
font-size: 12px !important;
margin-top: -15px !important;
width: 200px !important;
}
I know its certainly not the most elegant way, but it works.
Related
I have a really basic question about CSS. If there are two CSS files.
base.css contains:
.awesome-style {
height: 10px;
weight: 20px;
border: 5px;
}
child.css contains:
#import "base.css";
.awesome-style {
height: 15px;
weight: 20px;
padding: 10px;
}
When I will use the awesome-style class, what will be the applied style? My guess is that
.awesome-style {
height: 15px;
weight: 20px;
border: 5px;
padding: 10px
}
Am I right? Could somebody give me a description or good examples about how these "overrides" work? Thank you.
You are correct in what you believe will be the final* style applied to the element:
.awesome-style {
height: 15px;
weight: 20px;
border: 5px;
padding: 10px
}
When you do an #import, think of it as adding the CSS before what is in the CSS file you are adding it to. (Note: #import must be before any other styles in your CSS)
This is where it gets opinionated. If you have .awesome-style in both CSS files base.css and child.css, you might want to consider only adding the properties that are different than what is defined in base.css - since your browser will read them both and will apply whatever properties don't change or come last.
For instance, in your example, you could do:
base.css
.awesome-style {
height: 10px;
weight: 20px;
border: 5px;
}
child.css
#import base.css
.awesome-style {
height: 15px;
padding: 10px
}
This is because only the height and padding are changing. This is easier to see when you consider how the CSS file will look to the browser:
.awesome-style {
/* browser reads this, but it will get changed */
height: 10px;
/* this stays the same, but will still get 'overwritten' since it's defined again in the next rule */
weight: 20px;
/* this doesn't get defined again, so the browser will use this */
border: 5px;
}
.awesome-style {
/* height changed */
height: 15px;
/* weight stayed the same, but is still read from this rule because it comes after the previous rule */
weight: 20px;
/* padding wasn't defined prior, so it will use this rule */
padding: 10px;
}
And then this really becomes a question about CSS specificity
*final as in your current question - another rule may override what you have
I am trying to edit the style of a popover. In this case I want to edit the width of the display. However, I have a global popover style sheet that applies to all popovers in the application.
/* ========================================================================
Component: popovers
========================================================================== */
.popover {
border-radius: 0;
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
.arrow {
margin-left: -7px !important;
}
.popover-header {
padding: 1rem 0.75rem 0.5rem;
display: block;
background-color: $secondary;
border-bottom: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.popover-body {
padding: 0.5rem 1rem;
color: $body-color;
}
.popover-close {
position: absolute;
top: -2px;
right: 0;
padding: 0 0.5rem;
color: $gray-lighter;
font-size: 2rem;
font-weight: 400;
line-height: 1;
text-shadow: 0 1px 0 #fff;
&:hover {
cursor: pointer;
color: $body-color;
}
}
I would like to know how in my local css file I can overwrite/add to these inherited styles.
Local Style Sheet:
.team-activity-container {
.icon {
background-image:
background-repeat: no-repeat;
display: inline-block
}
.icon .icon-team {
background-position: -5px -5px;
width: 25px;
height: 25px
}
}
.popover {
background-color: aqua !important;
width: 500px;
}
Edit: The local stylesheet is in the container that displays the popover, and the classes in the html are all related to the contents that fill the popover. While the popover and it's stylesheets are at the global level. how can I edit the popover at the local level without having to touch the global style sheet.
Also, The popover is from ng-bootstrap and I believe the problem is I can't overwrite the default width that bootstrap sets
I don't know all the context you are in, but there are 3 main ways to overwrite existing CSS rules:
add a new stylesheet with the new rules after the existing ones;
if you have control over the new popover HTML, adding a class (for instance version2 so you can edit your variant in a meaningful way as .popover.version2 inheriting what is already sets and changing just what you need);
add "!important" to the rules you add and are intended to overwrite the others, but notice that if the existing rules have already that, it's not going to work.
Depends on the context there could be other solutions like leverage on HTML tags or HTML tags properties if your new popover has some difference with the previous for examples.
I hope this helps.
EDIT: I saw you have edited your question adding stuff.
Looking at the global CSS, if your popover is in a particular container just bind the new rules to the container like this:
.team-activity-container .popover {...rules};
I'm making a blog and I am using a free template to manage my fron-end part, but now I want to add one class called code_block. Every time I write an article and I want to add a
<p class="code_block"> some code</p>
and the code piece to be displayed in a similiar to how this last code is displayed here in stackoverflow.
I went to the END CSS file entered:
.code_block{
color: #933 !important;
border: 5px solid red;
}
didn't work, tried adding the css directly in the html, didn't work, tried adding manualy the css while in chromium web tool, didn't work what is happening ?!
source: https://github.com/martin-varbanov96/summer-2016/tree/master/Pitonia/Django/mysql_blog/blog
EDIT:
made it more specific:
.ar
ticle ul li p .code_block{
color: #933 !important;
border: 5px solid red;
}
Still not working I think priority is not the problem here.
ID has got more priority. Remove the color from here. Or you can override.
#body.home .body div p {
color: #ffffff;
display: block;
font-family: Arial;
font-size: 18px;
font-weight: normal;
line-height: 24px;
margin: 0 auto;
padding: 0;
text-align: center;
width: 780px;
}
You can override it like this...
#body.home .body div p.code_block{
color: #933;
border: 5px solid red;
}
I can't for the life of me figure out why this nested sass is not working. Here's my html:
%h1 Office Listing
#office-holder
.listing-stats··
#address·
=#office_listing.address
.listing-stats-2
#rent
%span.special2 Rent:·
$#{#office_listing.rent}/month
#size
%span.special2 Space:·
#{#office_listing.size} sq. feet
This is all within a div that namespaces the html page, which has two ids -- #office_listing and #show. I'm using rails, so I'm using the namespaces to neatly separate the views for my css. Here's the CSS that isn't working:
#office_listing#show {
#address {
width: 100%;
font-size: 50px;
background-color: #A0183C;
height: 100px;
text-align: center;
margin: auto;
font-size: 30px;
padding-top: 35px;
color: white;
}
}
Yet the CSS for that isn't displaying. The CSS seems to be compiling fine, however. When I inspect the compiled stylesheets, they look like this:
#office_listings#show #address {
width: 100%;
font-size: 50px;
background-color: #A0183C;
height: 100px;
text-align: center;
margin: auto;
font-size: 30px;
padding-top: 35px;
color: white; }
Which seems like it should target the appropriate HTML element. What am I missing?
Can you have double ids? #office_listings#show implies that you have two ids on the same element. That's against convention and my guess is that it just won't match. Make show a class instead and have #office_listings.show #address instead
I have a page here: http://dev.textcube.ch/oneandonly/index.php/galerie/shima/ where the subnav is ok using the style #vertmenu however on another page where the styling and page layout is identical the subnav is pushed to the left http://dev.textcube.ch/oneandonly/index.php/galerie/yuma/
(username: textcube / password: textcube3600 as a login will popup to access the pages)
#vertmenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin-top: 20px;
float: left;
clear: both;
background: url(../images/subnav_bg.png) no-repeat;
height: 180px;
width: 195px !important;
padding: 40px 60px 60px 20px !important;
}
I've no idea of why this is, I've checked the CSS and inspected the elements in Chrome on both pages to see if there is any conflicts and I can't see anything.
Please can anyone help me out?
Thanks
In the second page, you include view.css, which has the following rule:
* {
margin: 0;
padding: 0;
}
This removes the default padding on the ul. You just need to add the following declaration to your #vertmenu .nav rule:
padding-left: 40px;
By checking both the pages the extra thing in the second page is the presence of margin:0; padding:0 via view.css. It causes the layout breaking.