I cannot get the onsen fab element to change background color or border. I'm using angular 2 and onsen v2. If I uncheck the fabs default css in the browser inspector I see my css applied. I already tried !important.
Here is my css
.main-counter-remove{
text-align: center;
font-weight:bold !important;
color: #d9534f !important;
}
.main-counter-add{
text-align: center;
font-weight:bold !important;
color: #5cb85c !important;
}
.main-counter-remove.fab{
border: 2px !important;
border-color: #d9534f !important;
background-color: white;
}
.main-counter-add.fab{
border: 2px !important;
border-color: #5cb85c !important;
background-color: white;
}
This is my html
<div class="main-counter-remove">
<ons-fab modifier="mini" (click)="decrementMainCounter()">
<span>-</span>
</ons-fab>
</div>
<div class="main-counter">
<p style="padding:5px">10</p>
</div>
<div class="main-counter-add">
<ons-fab modifier="mini" (click)="incrementMainCounter()">
<span>+</span>
</ons-fab>
</div>
The fab class is applied to a child element of main-content-remove
Try that
.main-counter-remove .fab/* note the space */
{
/* rules here */
}
Related
I have a site in Wordpress where I am inserting a block with html.
This is the inserted html code:
<div class=“options-bar”>
<a href="https://total-speed-customs.myshopify.com/?" class=“options-bar-btn”>FUEL INJECTORS</a>
<a href="https://total-speed-customs.myshopify.com/collections/ignition" class=“options-bar-btn”>IGNITIONS</a>
<a href="https://total-speed-customs.myshopify.com/?" class=“options-bar-btn”>BOLTS</a>
<a href="https://total-speed-customs.myshopify.com/collections/e85-fuel" class=“options-bar-btn”>ELECTRONICS</a>
<a href="https://total-speed-customs.myshopify.com/collections/trailer-parts" class=“options-bar-btn”>WINCHES</a>
HITCHES
</div>
This is in the theme.css stylesheet at the very bottom:
.options-bar {
text-align: center;
}
.options-bar-btn, a { display: inline-block;
color: white !important;
text-decoration: none;
background: black !important;
padding: 10px 20px;
margin: 0px 5px;
border-radius: 6px;
text-align: center;
font-size: 22px;
}
#media screen and (max-width: 500px) {
.options-bar-btn, a { display: inline-block;
color: white !important;
text-decoration: none;
background: black !important;
padding: 3px 3px;
margin: 0px 1px;
border-radius: 3px;
text-align: center;
font-size: 10px;
}
}
It works for the inserted block html, but it also changes the styling of links sitewide. I've enclosed a link to the site in progress to show the row of buttons working correctly, but the top nav has the same styling, which needs to just be transparent for the logo and the main nav.
What I'm missing?
https://total-speed-customs.myshopify.com/
Your expression .options-bar-btn, a {...} means the following: set the following styles to all elements that have class options-bar-btn and to all tags a as well.
The comma in your code is a separator between two rules.
When you need to set a rule for an element that is a child of an element with class options-bar:
.options-bar a {
color: white !important;
}
This will select all a tags inside the elements with class options-bar.
If you want to change a style of all the links with class options-bar-btn:
a[class*="options-bar-btn"] {
color: white !important;
}
This will select all tags a then filter elements that has options-bar-btn class set.
I'm using dropdown from react.semantic.ui and also custom some css attribute inside the dropdown,
<Dropdown
scrolling
className={styles.filterDropdown}
placeholder="Select Area, Branch or Region"
fluid
search
selection
closeOnChange
onChange={handleChange}
searchInput={<Input transparent className={styles.inputSearch}></Input>}
options={[ALL_OPTION].concat(areaList({ areas, headOffice }))}
value={codeValueRating}
/>
but there is a div element inside the dropdown with class name 'text' that i could not change. It look like this from element inspect
https://i.stack.imgur.com/f2sQv.png
i have try to change it directly using solution from this link here but it still not make any changes, this is one of my solution i have try inside my css code
.ui.selection.visible.dropdown>.text:not(.default) { color: #475fe8 !important; }
and also this one :
.filterDropdown {
flex: 1.8;
cursor: pointer;
word-wrap: break-word;
line-height: 1em;
white-space: normal;
min-height: 2.71428571em;
background: #2C3245 !important;
padding: .78571429em 1em .78571429em 1em;
border: 1px solid #FFFFFF !important;
color: #FFFFFF !important;
border-radius: .28571429rem;
min-width: 15rem !important;
div.text {
color: #475fe8;
}
}
I have a font awesome icon like this on my page
<fa-icon class="file-excel-icon" title="Export to Excel" [icon]="['sil', 'file-excel']"></fa-icon>
which translates to this html
So the class file-excel-icon does get added to the element.
I am now trying to modify some css of SVG element but it is never getting applied. I have tried this
.file-excel-icon
{
border:1px solid red;
svg
{
vertical-align: -0.170em !important;
border:1px solid blue !important;
}
}
and this
.file-excel-icon
{
border:1px solid red;
.svg-inline--fa
{
vertical-align: -0.170em !important;
border:1px solid blue !important;
}
}
and this
.file-excel-icon .svg-inline--fa
{
vertical-align: -0.170em !important;
border:1px solid blue !important;
}
But nothing seems to work for svg, no style is applying to it, while the style does apply to fa-icon element
I'm creating clickable CSS buttons for my website and want a green button with a white text. But my default link color (blue) is overriding everything and making the buttons with a green background but underlined blue link. What do I need to change?
.td-post-content a {
color: #2200CC;
text-decoration: underline;
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 24px;
margin: 4px 2px;
cursor: pointer;
}
.button a:link {
color: white;
}
<p style="text-align: center;"><a class="td-post-content button" href="https://www.expatkings.com/join">Join Now</a></p>
I except the td-post-content links to be blue and underlined while the button links should be green with white text.
I guess you can just add all css pseudo classes that work with "a" tag:
https://css-tricks.com/snippets/css/link-pseudo-classes-in-order/
https://www.w3schools.com/css/css_pseudo_classes.asp
.button,
.button:link,
.button:visited,
.button:hover,
.button:active{
color: white;
background: green;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
}
<a class="button" >Name</a>
Try using !important. This will override the standard link color.
.button{
color: white !important;
}
:link works for elements with a href attribute that has not yet been visited.
If you wish to style all states of the link, use the following:
.button a {
color: white;
}
I use one of Bootstrap examples: http://twitter.github.com/bootstrap/examples/fluid.html
The following code is inserted into the navbar-inner div:
<div class="logo">
<div class="quadratLogo"> </div>
</div>
Styled as:
.logo {
font-size: 24px;
font-family: 'Arial';
min-width: 500px;
}
.quadratLogo {
width:24px;
height:20px;
border-radius:0px 4px 0px 4px;
background-color: ff0000;
float:left;
}
Can you tell why quadratLogo div is invisible and the background-color property of quadratLogo is seen as unvalid by Chrome?
That's a valid color - but you forgot to include a # symbol before the hex value.
.quadratLogo {
width:24px;
height:20px;
border-radius:0px 4px 0px 4px;
background-color: #ff0000;
/* --------^ */
}
Your background-color property is incorrect.
it should be background-color: #ff0000; or set the proper color name
Read more about background-color