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; }
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.
Have a menu as an SSI. I wish to change color of displayed SSI links on page. My reading shows I can use CSS to change displayed link color, so created div around the menu and unique div id as well as CSS for the div. The div ID is “menu”.
CSS
#menu {
font-family: Verdana, Geneva, sans-serif;
margin-left: 25px;
a { color: #FFFF00; }
}
Only the unvisited links need to change, hence the single line. This code makes no changes to my links: they show default #0000EE. This code does provide the needed margin, so the server is reading the CSS.
I can change the link colors by adding html change to the body of the page, but I’d prefer not to:
<style>
a {color: yellow;}
</style>
This changes all links, not what I wish to do.
Unless you're using some kind of CSS preprocessor that supports nesting, then your CSS is invalid. Once the browser sees the a tag inside the #menu, it stops working because it expects a CSS property to be there and not another element selector.
To get the correct styling, do this:
#menu a {
color: #FFFF00;
}
If you want to style only links that have not been visited, do something like this:
#menu a:not:visited {
color: #FFFF00;
}
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
Problem
I have a site built with my own styles and it looks just the way I like it. However, I want to add extra functionality by adding a custom dialog box downloaded from BootBox.
However the extensive style sheet that comes with it and is needed absolutely murders my site, butchering it in every way.
Is there anyway i can stop this by making the BootBox.css only apply to its little part of my code and not all of my site?
You can use LESS wich is what bootstrap uses.
Example:
#ContainerWithBootboox {
#import (less) "bootstrap.css"; //import bootstrap
}
Doc: http://lesscss.org/
If you only want the bootbox css to target a specific div, you'd need to prepend each bootbox css rule with the class of the target div.
So if you had
<div class="bootbox">
<!-- bootbox html here -->
</div>
and the bootbox styles were
h1 {
color: red;
padding: 0;
}
h2 {
color: blue;
margin: 10px 0;
}
Then you'd need to change it to
.bootbox h1 {
color: red;
padding: 0;
}
.bootbox h2 {
color: blue;
margin: 10px 0;
}
That said, if the bootbox css is thousands of lines of code then this may be labour intensive. It might be a matter of finding which rules specifically are borking your code and adding a specifier class to only those rules.
Not labour intensive, with the help of LESS or [SASS] (http://sass-lang.com),
If you use LESS, just wrap all bootbox css rules inside a parent root. For e.g.:
.bootbox {
/*move all bootbox CSS rules here*/
h1 { color: inherit;}
.someclass { color: red;}
}
It will be compiled into:
.bootbox .h1 { color: inherit }
.bootbox .someclass {color:red;}
You could put the BootBox code within an iframe. The css loaded by the iframe would only apply to the content within the iframe. I have used this strategy to only apply bootstrap to certain areas of my page such as tables, while leaving the rest of the page untouched.
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