I have a popup that will be added to websites via javascript. I have no clue on what sort of styles will be applied on these websites.
Example website has the current styles added:
h3 {
color: blue;
border: 5px solid red;
font-size: 24px;
}
My Popup which is added to the body of the website has:
PopupText = styled.h3`
font-size: 16px;
color: black;
`;
This means that font size and color are what i've declared but the border will be added regardless, is there any way to remove the added extra css properties, or to protect from additional styling added by the website?
To sum up, I want my popup to look the same, no matter where it is added. As of right now, when i add it to a website it changes depending on what styling is on the website
You can use all attribute like this :
.class {
all: unset;
}
Check it here
I think you need use iframe tag for wrap
You can use the :not() selector to achieve that: If your popup element has a class (which is probably the case) you can modify your regular css rule for h3 as follows:
*:not(.yourpopupclass) h3 {
color: blue;
border: 5px solid red;
font-size: 24px;
}
This will affect any h3 element that is a child element of anything (i.e. also of body), except if it's a child of an element that has class .yourpopupclass (i.e. is inside your popup).
The same woud be possible with an ID if the popup has no class, but an ID.
Related
So I have an app that uses jQuery for certain parts. Such as the Autocomplete and Calendar Date Picker. I'm introducing a new style called .more-compact that will implement a smaller version of the app. This class is currently sitting in the div encompassing the entire app. This class works in reducing the heights, widths, and font sizes of almost everything. But when I try to do it for any jQuery elements, it won't work. This is how a typical style on the css doc looks:
.more-compact ul li {
font-size: 12px;
}
But for the jQuery autocomplete element, it will only work if I remove the ".more-complete" part. I don't want this though because this is part of a single stylesheet, and I only want the font to be that size when the .more-compact version is being used.
Any ideas what is causing this nesting not to work? Is the jQuery stylesheet over righting my own? The for this stylesheet is the lowest on the doc, so it should take priority.
Try use !important
.more-compact ul li {
font-size: 12px !important;
}
But try using more specific rules. By indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority
HTML
<div id="test">
<span>Text</span>
</div>
CSS
div#test span { color: green; }
div span { color: blue; }
span { color: red; }
I can't figure out why this won't work. I happen to be using bootstrap as well.
<h1 class="montserrat_text" id="header_title">title</h1>
In the css file .montserrat_text works and the font of the h1 is the correct font.
But when I add #header_title to the css:
#header_title
{
color: red;
font-size: 60px;
}
Nothing happens and the text won't change size or color.
Thanks
The reasons the font color doesn't change was mentioned by #MohammadUsman already - there is no CSS property called font-color, what you want is named color.
The reasons the font-size doesn't change either (even though the property name is correct) could be that your browser ignores rules that follow illegal rules.
For change the color of text you must use color instead of font-color.
According to CSS priority if a selector contain the parents name , this selector has priority for effect than selector that does not contain it.
You must use parent name in selector like :
{# or .}parent #header_title
{
color: red;
font-size: 60px !important;
}
or you can use !important :
#header_title
{
color: red;
font-size: 60px !important;
}
As #Mohammed Usman said, it's color, not font-color.
Also, since you're using Bootstrap, it's possible something is overriding your CSS so you can add the !important tag to ensure that your CSS is used, as so:
#header_title {
color: red !important;
font-size: 60px !important;
}
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
How can I make multiple H3 tags using different text style & font size inside post body?
My H3 CSS is look like this
.post h3{
border-top:1px dotted #84ce31;
border-bottom:1px dotted #84ce31;
font-size: 10pt;padding:3px;
}
Any ideas?
Give each one of them a class:
.post h3.class1 { color: white; }
.post h3.class2 { color: black; }
.post h3.class3 { color: red; }
there can be done by either adding the id or the class like
.post h3.#hea1{ color: white; }
.post h3.#hea2{ color: black; }
.post h3.#hea3{ color: red; }
or as class explained above
not point is that what should be use ..to know that you must know
difference between id and class
ID's are unique
Each element can have only one ID
Each page can have only one element with that ID
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
note : There are no browser defaults for any ID or Class
Adding a class name or ID to an element does nothing to that element by default.
This is something that snagged me as a beginner. You are working on one site and figure out that applying a particular class name fixes a problem you are having. Then you jump over to another site with the same problem and try to fix it with that same class name thinking the class name itself has some magical property to it only to find out it didn't work.
I would give them all ID's. ID's are meant for special Identification of elements that only exists once and use classes for more common recurring styles with just the h3 style at a default that will be appearing most often. All that said the answer is not wrong either, I am just considering design styles.
I've tried this:
#ambrosia h3
{
font: 12px/18px Arial,Verdana,sans-serif;
font-color: red;
font-weight: bold;
}
and this:
#ambrosia h3
{
font: 12px/18px Arial,Verdana,sans-serif;
color: red;
font-weight: bold;
}
but I still end up with a gray font on my H3 text.
Why?
Either you have another color set for the id #ambrosia and that is taking precedence over the generic selector, or you have another tag inside the h3 which has a color assigned to it.
Or, in your html you have the #ambrosia applied to the h3 tag, but in your css, you have specified an h3 element which is inside an #ambrosia element. If you are wanting to use <h3 id="ambrosia">, your css should be
h3#ambrosia { color: red; }
You likely have other CSS that has a more specific selector that's giving your <h3> that font color, identifying that selector and/or posting your markup would help us provide a more specific selector that would override the font color.
You should use Chrome's "Inspect Element" option.
Right click on the line and choose Inspect Element and it will show you the path of the CSS evolution of your element.
the color: red; syntax is correct. however it is possible that you have some other styles in your css file that are conflicting.
you might try using the "firebug" firefox plugin. it will allow you to select the element and see exactly which style is applied to the element and if your class is being overridden