I'm doing some tests on a new theme and it has a dark mode, but some texts have a white background (my shit when making posts). Is there any code that makes the background of all texts transparent? Because it's a lot post.
code
background color
I would suggest using CSS to do this. Probably all your text is in some type of element with some class, like for example:
<div class="text-container">
If this is the case, then use CSS to target those elements, something like:
.text-container p{
background: none;
}
Maybe a good idea is to add a class to your main "container" element when dark mode is active (use JS toggle() for example) and then using CSS you can change all the styles of your text only when this class is in the HTML (so basically when dark mode is on).
Take a look at this page to know more about CSS selectors. Play around with your CSS code and I'm sure you will manage to solve this!
As the commenter said, a code example would be a great help. However, as a general solution, this should work fine:
<style>
p, h1, h2, h3, h4, h5, h6 {
background-color: transparent;
}
</style>
If it doesn't work fine, either:
There is an inline style overriding it
It is something other than the tags listed above
We'll need more context (ie, a code example) to assist further
Please, can you add some lines of your code in your question? Just to see if there's something inside your css code that's messing around your text.
Be careful making <span> tags inside p, h1, h2... and then adding an css style onto it. For instance:
h1 {
width:250px;
color:purple;
}
h1>span {
background-color:white;
}
body {
background-color:black;
}
<body>
<h1><span>White background text here</span></h1>
<h1>Normal "transparent" text here</h1>
</body>
Related
I'm pretty new to CSS/HTML and I need a little help with styling. So I have a CSS style sheet where I did something like this
p{
color:black;
}
Then in my HTML, inside of my footer tag, I have a paragraph.
The problem I am having is that I want the color of the paragraph inside of my footer to be blue.
I tried doing something like this:
footer{
color: blue !important;
}
but it didn't work so I was wondering how I can get just the paragraph in my footer to be blue because I want the rest of my paragraphs to be black.
If the !important method is the wrong approach I was wondering why? From my research, I thought it was supposed to override any previous styling.
Answer:
Why is !important not working on my stylesheet?
It is working perfectly as it is designed.
How I can get just the paragraph in my footer to be blue
For this, please use the appropriate selector.
footer p{
color: blue;
}
That is a bad practice
Try doing something like this
For your Footer
HTML
<div class="footer">
<p>This is a paragraph.</p>
</div>
CSS
.footer p {
color: blue ;
}
Don't use important tags.
I am using meteor and mongo there is a template I am using the h2 tag to display the header. But I want to change the font size of this h2 tag. I tried in CSS but it is not taking. if I refresh the page it will take the previous values. So can anyone suggest me how to solve this issue?
There are multiple ways to do this
1. Using inline css
just do
<h2 style="font-size:40px !important;"></h2>
2. Using Internal css
<style>
h2{
font-size:40px !important;
}
</style>
Using External css
just assign a class to your h2 element and add size to that class on external css
<h2 class="headding"></h2>
and then
.headding{
font-size:40px !important;
}
you can use size like **40px,40%,40vw,**etc.
First define your CSS of with h2 tag at end of header's file and add code like that
!important; is override all previous values
you must have to write !important at end of line to override previous value
<style>
h2 {
font-size: 20px !important;
}
</style>
Using large is a bad practice that should be avoided as much as possible. Instead, work on the accuracy of the selector used, like this little example :
<div class="my_container">
<div class="other_class">
<h2>
</div>
</div>
And...
.my_container {
.other_class {
h2 {
// your override
}
}
}
So you have to be more precise than the old selector to get your hands on it.
Imagine that I've been creating a website for 2-3 weeks now and suddenly I decide that I don't like the default black color of all text elements which don't have any CSS applied to them and that I want to change their color to something like #333333 which is a less black black.
Is adding color: #333333; to the body tag the correct way to do it? Could that have any negative effects on other elements that I have custom styling?
CSS prioritises the code lower down, for example, this:
<style>
p {
color: blue;
}
p {
color: green;
}
</style>
<p>Hello</p>
Would result in the color of the paragraph element becoming green.
So to answer your question, anything above your CSS properties for body would be overridden.
Also, id and class attributes take priority over position, so if you wanted to give the elements that you don't want to get changed a class and keep it as black that would work also.
Hope it helped.
I don't think it'll have any negative affects on any elements, however i would just reference the tags specifically to be sure like
p, h1, h2, h3, h4, h5, h6 {
color: #333333
}
But like the comment, give it a try and see how it turns out.
This is enough, as it allows for the color to be 'passed down' through the cascade. Place this at the start of your stylesheet:
body {
color: #333;
}
Avoid using inline styles:
<body style="color: #333"> <!-- Don't to this -->
Inline styles have a different specificity than CSS selectors, and it's a whole chapter in itself. Plus, it's easier to separate concerns and have you layout separate from your stylesheets. And have everything grouped together within your styles.
The most simple way to do so is by CSS the following way:
* {
color: #333333;
}
Changing color in HTML with the style attribute is actually never the best practice.
I am trying to improve the styling of my Confluence page, but when I insert a {css} widget the styling does not take effect for many different elements and formatting styles.
For example:
{css}
body {
font-size: 24px;
}
p {
color: red;
}
div.atest {
color: blue;
}
{css}
In this case, all my font is 72px. But no simple paragraph blocks are red, nor are any div's (given the atest class) showing as blue.
Is there some special formatting in Confluence that must be done for CSS to be handled properly, or does it only support a small subset?
If you are sure that your CSS is correct but it is not considered, add !important to the styling to prevent it being overwritten by inner elements like so:
p {
color: red !important;
}
I think you must tag a {HTML} {HTML} first.
I'm still working with an older Version..
Else i have found this
https://confluence.atlassian.com/display/DOC/Styling+Confluence+with+CSS
Hope this helps
I'm diving into web development and CSS is getting the best of me very early on. I have the following html...
<div class="span-6" id="left-sidebar">
<h4>Left Sidebar</h4>
<ul>
<li>fruits</li>
<li>meats</li>
</ul>
<h4>This is a header</h4>
</div>
and my CSS code...
#left-sidebar, #right-sidebar {
background-color: black;
color: white;
}
but only the text "fruits" and "meats" are rendered in white text, the other text is rendered is a dark grey color. Why isn't all the text rendered in white?
Also, I find I can fix this when I'm more specific, using the CSS code...
#left-sidebar, #left-sidebar h4, {
background-color: black;
color: white;
}
Why do I have to be more specific? Doesn't #left-sidebar mean, "render all text in the left-sidebar using white, unless it's been overwritten with a more specific CSS statement"?
I should also note that I don't have any other CSS code that's related to the left-sidebar div. Also, I'm using Blueprint CSS (as you can see in the "span-6" class), but I don't know how that could be conflicting with anything.
Thanks so much!
Blueprint css has default colours for heading tags. (see screen.css)
You need to specify:
#left-sidebar h2, #left-sidebar h4,
#right-sidebar h2, #right-sidebar h4 { color: white; }
Basically, the h (header) definitions are sometimes pre-set by the browser. Are you using a CSS reset? Try this out http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ - it essentially gets rid of browser defaults and makes it much easier to develop websites across multiple browsers.
In the short term, try setting the definitions of the h2 and h4 individually, like this:
h2,h4 {
color: white;
}
Or add an important tag to your current CSS, like such:
#left-sidebar, #right-sidebar {
background-color: black;
color: white !important;
}
You can use Firebug in Firefox or the developer tools in Chrome to see what classes are being applied to each element. You just "Inspect" the element and view the applied CSS rules in the pane on the left.
the header tags need their own CSS Class.
h2, h4{
color:white;
}
should do the trick