Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I've a small anomaly ('problem' is not a permitted word ;-)) with setting the background colour in nested divs which is driving me potty. I manage the site at www.teachtoo.org which is Wordpress-driven. I'm trying to set (using the very handy Jetpack CSS editor) the background colour of the 'bar' with the page title, and I've only been partly successful as can be seen.
The page title appears in the following HTML:
<div class="page-title-wide">
<div class="page-title-wrap">
<h2 class="left-title entry-title">Home</h2>
</div>
</div>
I've tried the following (ungainly, I know) CSS to overwrite the theme styles and set the background colour:
/* Set background colour of 'bar' with page title to purple } */
.page-title-wide {
background-color: #645274;
}
.page-title-wrap {
background-color: #645274;
}
The second selector's obviously changing the colour, but not the first. The first selector works in that, if I put something like " font-size: 300%;", something happens.
This is one of these 'issues' which you can stare at for ages and not see the cause, hence my posting here. Can anyone suggest why the background-color isn't being set in the .page-title-wide div?
As with any CMS site, there are scads of stylesheets loaded so it's not easy to dissect then all as it would be were there just the one sheet.
I've read the thread at Nested divs Background-color but the solution there doesn't work with my 'issue'.
In your case there is an additional rule somewhere else which is overriding your statement.
Line 91 of your CSS file
/* ======================================================= *
* Page Styles *
* ======================================================== */
.page-title-wide {
/* background-color: #5370B2; */
background-image: linear-gradient(to right, #093CB5, #5370B2 50%, #093CB5);
color: #F9F9F9;
}
Ok, sorry, I missed something crucial: the theme was loading a background image with a blue gradient. I set background-image:none and that fixed it. Sorry :(
Those styles you are applying need to be declared "after" the default theme styles. The browser will use the last declared CSS style it reads.
In some cases where your styles are being written before the default stylesheet, you can use the following, but it is not recommended
background-color: #645274 !important;
You should inspect the element and see where the current style is being applied from and declare your style after that
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 2 years ago.
Improve this question
I am linking a CSS file to a django app page. The HTML is from ajax, some of the css is getting applied, but most is not. For example, at the top of the CSS file I have the following:
$green: #86BB71;
$blue: #94C2ED;
$orange: #E38968;
$gray: #92959E;
div.nothingdiv{}
div#fav_studyspot_chat{
margin: 0 auto;
width: 750px;
background: #444753;
border-radius: 5px;
}
The second div only works after I put in the nothingdiv. Can anybody explain what that would happen?
The use of $-prefixed variables isn’t supported natively in CSS: it’s a feature of CSS compilers such as Sass and Less. In CSS, the only top-level declarations you can write are:
selectors, which describe elements (e.g. via class names, IDs, or element names)
media queries, which describe different styles under different conditions
keyframes, which describe animations
and imports, which allow you to import other style sheets
When a browser encounters code that isn’t one of these kinds in CSS, it ignores it until it encounters code it understands, which usually means waiting until it encounters curly braces that denote the end of a declaration }.
If you remove all the variables with the dollar signs in front of them, your code should work even without the fake styles.
If you want to use variables in CSS, and not have to have them compiled by Sass or Less, you should use custom properties, which look like this:
:root {
--green: #86BB71;
}
.element {
color: var(--green);
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I need to remove the navbar in my Hestia Theme.
I tried .navbar {display:none;} and when I use it the top bar gets white and I need to remove it.
Could you help me with this problem, please?
Kind regards
As it showed in the piture
In Wordpress sites the main tag has a margin at the top. This is causing the white bar above the page after you removed the navigation. You can "deactivate" this with:
.main, main {
margin-top: 0 !important;
}
Edit: I have checked out your site and have found the reason. There is some top padding defined by inline CSS at the article tag, that's get added by some JavaScript, but I cannot tell you why.
But you can still turn it of with:
.elementor-page .pagebuilder-section {
padding: 0 !important;
}
This CSS rule is an extended rule already applied by Elementor, buts get overwritten by this inline CSS. I just added the !important to fix it:
If that was helpful and you used this answer to solve your problem, it would be nice if you mark this answer as accepted. If this answer doesn't work or you have other questions, please response with a comment.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I have a <div> element inside a <li> element (as shown in code snippet). The <li> element has cursor: pointer style property set and I can't remove the cursor pointer in that nested <div> element.
The <li> is not in our control to remove css, since it comes from a third party.
.container {
cursor: pointer
}
.local {
cursor: default !important
}
<ul>
<li class="container">
<div class="local"> Hello World </div>
</li>
</ul>
The .container class is actually irrelevant here. It just so happens that it has a cursor: pointer property which shows on, but the problem is in fact - What is overriding the .local classed <div> element from rendering the cursor: default property.
The best way to answer that would be to take a look at the elements and styles panels on your browsers developer tools and see what's doing that. It will let you know what's overriding it.
Then you can use adjustments, either by increasing specificity, or by changing the code that's overriding it. But the specificity needs to be relevant in comparison with the .local class and whatever is actually overriding it.
Edit: In the provided example, you don't need to worry about specificity because they're different classes. However, I frequently see !important being added to rules as a lazy way to override specificity issues that aren't replicated in the example. I assume that to be the case here as well since the OP notes that, "the container comes from a third party". So understanding specificity rules will help resolve the issue.
You could use !important but that should really be a last resort. However, you're much better served long term by increasing CSS Specificity.
Currently .container & .local have equal weight. You can increase specificity by: Using an ID, referencing more hierarchy, using combinators etc. Then the NEW attributes will override the previous attributes based on CSS order.
Eg:
.element {
background: blue;
}
.element {
background: red;
}
// produces a red element
So in this case you want to increase specificity. You can do that easily like this:
.container {
cursor: pointer;
}
.container > .local {
cursor: default;
}
// where local is a DIRECT child of .container
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have no doubt that this will end up being some rookie css error on my part, but I can't figure out why Chrome and Safari render this page the way I would like and expect, while Firefox and IE9 will not:
http://turtlemountainbrewing.com/wordpress/beers-on-tap/
For the text "Guest tap:" and "TMBC DRAFT LIST" I have a div at width 100% with the css set to align the text-center, with a bottom margin and border, but Firefox seems to ignore these rules entirely, which don't even show up in the css when I inspect the element. It also won't render some colored circle divs I have floating next to the beer titles.
This is also affecting the links I have in the right footer area in a similar fashion.
It seems something is canceling these style rules out but I can't figure exactly what.
In this stylesheet you have a syntax error.
You have:
.beerheader {
text-align: center;
width: 100%;
margin: 0 0 40px 0;
border-bottom:solid 1px #b3b59b;
!important
}
This it what it should be:
.beerheader {
text-align: center;
width: 100%;
margin: 0 0 40px 0;
border-bottom:solid 1px #b3b59b !important;
}
I am not positive this is the problem. But it would be my first guess. Also on a side note I would suggest using header tags for headers instead of paragraph tags. And like others have mentioned, validating your code is also a good idea.
Page checked: http://turtlemountainbrewing.com/wordpress/beers-on-tap/
Total errors found: 76 (Parsing: 13, HTML: 63)
Total warnings found: 1 (Parsing: 1)
(X)HTML used for this page: HTML 5.1
When it 'bugs' in a browser or 2, and not in another browser or 2, i validate the html and MOST OF THE TIME, it fixes what some say beeing 'bugs' but what i say is broken markups.
About validating : http://jigsaw.w3.org/css-validator/ and http://validator.w3.org/
line 370 in css/other/custom.css remove double quote mark
line 442 in the same file !important should be before the ; mark
You can use a css validator in order to check these kind of errors ;)
for example http://jigsaw.w3.org/css-validator/validator
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am relatively new to CSS and yet I seem to have got the language reasonably well for a newbie. However, whilst many of the tutorials I have read often warn about "organising and structuring your stylesheet properly" (and I can certainly see why now I have created some rather long stylesheets myself) I cant for the life of me find any info about a standardised format for a styleheet or a logical pattern for layout that makes later human reading easy.
For example, do I create a comment-bracketed section for each "geographical" section of my page (header, row1, row2, article1 etc) and keep all styles for that section within those comment borders? The problem seems when I have styles that get re-used in other sections - and putting them under a section for page-wide styles then negates the purpose of grouping them by section at all. Likewise, structuring my stylesheet by grouping based on text styles, layout styles etc seems even more confusing.
Is there a "good practice"? I know this sounds dumb but it seems no matter what you do with HTML and CSS somebody is ready to tell you its wrong, bad practice or unsemantic and I'm left confused. I want my code to be a good example of my work in case an employer wants to check it in future.
I've never been actually taught, however I can let you know how I organise my CSS documents. As you say, I like to divide it up into "geographical" areas... i.e. the rules that apply to the header, the side bars, the main content, the footer, etc. And then, below these I add very specific rules, say if I need to style a form or a table on a particular page. Finally I add a "General Gubbins" section at the bottom when I add generic rules that may apply across the board.
Oh yes, I also like to add the designer's palette to the top for quick reference.
For example...
/*
PALETTE:
dark grey : #555555;
pink : #d93575;
*/
/* HEADER */
#header {...}
#header ul {...}
/* SIDE BAR */
#side {...}
#side ul {....}
/* CONTENT */
#content{...}
#content p {....}
/* FOOTER */
#footer{...}
#footer div {....}
/* FORMS */
form {...}
input {...}
/* GENERAL GUBBINS */
.center {...}
strong {...}
floatleft {...}
These guys advise you to "Organize the Stylesheet with a Top-down Structure" ( http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/ ). I often use multiple style sheets. In MVC for instance - you can regiser styles on a per-view basis. That way you can put view-specific styles in a specific style sheet while not messing with your 'shared' or 'layout' one.