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
Related
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.
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; }
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.
In one of my recent projects, I noticed that certain styles occur in the same combination repeatedly. According to the DRY principle, I should combine these styles. Regarding a good CSS style, what option is better/the best?
Option 1
Creating a class that contains these styles and simply add it in the HTML to the according elements.
Example
In the HTML:
Link
or
<ul class="myClass">
<li>Item</li>
<ul>
In the CSS:
.myClass {
font-weight: bold;
font-size: 14px;
color: grey;
}
Option 2
Simply combining all elements that need that style in my CSS, like in the following example.
a,
ul {
font-weight: bold;
font-size: 14px;
color: grey;
}
.myClass {
font-weight: bold;
font-size: 14px;
color: grey;
}
is best ...
.myclass {
font-weight: bold;
font-size: 14px;
color: grey;
}
is even better (lower-case)
This way, the DOM engine will get to the element without having to stack across all a and all ul tags in your document.
I often encounter the same problem and have learned to go for Option 2.
First, you need to ask yourself why both styles are connected: are the two elements you're styling meant to always be styled the same way or is is just a coincidence that they're styled the same?
For example, if you decide that your links shouldn't be grey anymore, but blue, will you be ok to have your ul list be blue as well? What I mean is: are the links and the list related? Do they have to look always the same? Or it just happens, in this particular situation, that they're the same?
Also, you need to beware of the name of your class.
If you call it something like .boldGrey, you're doing it wrong because your class name is desribing the style, not the content.
If you call it something like .secondary, you're doing it well, because you're describing the content, not the style. In that case, using Option 1 can be ok.
But in the end, I always go for Option 2. Although you connect the same style to multiple elements, it's still easy to modify it afterwards, if you change your mind. I usually put at the top of my CSS (just below the reset) a list of elements that share the same properties. Then, I add specific styles for each element.
Example from my website:
time, code, figcaption {
background:#f5f5f5;
border:1px solid #e9e9e9;
border-radius:2px;
color:#93a1a1;
font-size:11px;
padding:0 4px 1px;
white-space:nowrap;
}
Then, below, I have for example some additional styling for code:
code {
font-size:12px;
position:relative;
top:-2px;
}
While I was styling these 3 elements, I noticed that I wanted them to look the same. But not exactly the same. So I regrouped everything they had in common, and then specified what they had in particular.
Could I have used a single class for that? Maybe. But how would I have called it? .greySmallBordered? .littleBlocks? .tagLooking? It's really hard to come up with a name that only describes the content and not the styling.
So I usually list multiple elements in my selector because:
it's the best way to keep the content in the HTML seperated from the styling in the CSS
it helps specifying additional styling for each element
I'm using a template and the titles are inside a div. I want to apply h1 to the title but it goes bad (the div is styled with css, and there is no styling for h1)
Normally this is what it is:
<div class="content-pagetitle">Title</div>
I'm changing to:
<div class="content-pagetitle"><h1>Title</h1></div>
But it goes bad.
I tryed to use the same styling content-pagetitle for h1. It didn't worked
<h1>Title</h1>
(It does not become same as content-pagetitle)
Is there a css code that says "do not apply any styling to h1"?
Might try removing margins and padding on the H1
h1 { margin:0; padding:0 }
I would encourage you to explore you dom (via firebug or any equivalent) and see which styles are being applied to the H1. You may need a more specified selector to apply the aforementioned rules to a particular h1 element only.
Browsers have default styles that attempt to reasonably display a valid HTML document, even when it has no accompanying css. This generally means that h1 elements will get extra padding, a large font size, bold font-weight, etc.
One way to deal with these is to use a reset stylesheet. That may be overkill here, so you might just want to use firebug or something to identify the specific styles you want to kill, and override them.
If you're having trouble getting your styles to override, stack more selectors to add more specificity.
Is there a css code to say "do not apply any styling to h1"?
Not as such, no. But...
What you could do is specify 'inherit' as the value of the h1's attributes. This is unlikely to work in all situations, though. Assuming:
div#content-pagetitle {
background-color: #fff;
color: #000;
font-size: 2em;
font-weight: bold;
}
h1 {
background-color: inherit; /* background-color would be #fff */
color: inherit; /* color would be #000 */
font-size: inherit; /* font-size would be 2*2em (so 4* the page's base font-size) */
font-weight: inherit; /* font-weight would be bold */
}
It might be possible to increase the specificity of the selector, by using:
div#content-pagetitle > h1
or
div#content-pagetitle > h1#element_id_name
I know this is an old post, but here is what I would do...
define all your h tags as usual, then for the specific style, do something like
<h1 class="specialH1"> ... </h1>
and in your css
h1.specialH1 (
/* style attributes */
)
I think thats a clean solution, and gives you full control, whilst not having to alter or reset your default h tags.
It also avoids using any selector increasing type black magic witchcraft xD
Anyways... Just my opinion... Hope this helps anybody