I'm trying to remove the gradient background color of the caption on my Vaadin panel.
My custom theme extends Valo and I want a flat background (for the CAPTION) and a white font. I've tried the following but it doesn't work.
.v-panel-caption {
background-color: #157FCC;
color: #FFFFFF;
}
On my panel, the font is white like I want but the background is still the grey gradient background.
How do I remove that gradient? Thanks!
CSS background gradient works similarly to background image, to reset that you'll need to set background: none #color;.
Example:
.v-panel-caption {
background: none #157FCC;
color: #FFFFFF;
}
gradient is the same thing as an image
.v-panel-caption {
background-image: none;
}
Related
I am a intern working on a company's project, what I wanted to do is to remove the blur effect on the modal.
Original scss:
#mixin card {
background: $color-surface($background, 0.5);;
backdrop-filter: blur(28px) !important;
border-radius: $card-border-radius;
}
Original display
Changed scss:
#mixin card {
background: rgba($color-surface, 0.5);
border-radius: $card-border-radius;
}
Changed Display:
Which both the text and the background is disappeared, my guess is the "white" background is covering the text and the $color-surface light blue background, but I wonder why is that ?
How can I remove the blur effect properly ?
Thanks for any comments or answers.
I'm working on a text editor with a custom spell checker. It adds a css class around misspelled words to show a red zigzag under the word.
I also use a class to style selections in the editor with a custom background color.
.spell-error {
background-image: url("data:image/gif;base64,R0lGODlhBAADAIABAP8AAP///yH5BAEAAAEALAAAAAAEAAMAAAIFRB5mGQUAOw==");
background-position: bottom;
background-repeat: repeat-x;
}
::selection {
background-color: #99def7;
}
::-moz-selection {
background-color: #99def7;
}
<p>There is a <span class="spell-error">misstake</span> in this sentence</p>
The issue is when I highlight over a word with .spell-error the red zigzag disappears. I've tried creating a .spell-error::selection class but the issue persists. How can I make both classes appear at the same time?
The background-image will have a white background which overlays the background colour.You need to have a specific background-image for the .spell-error::selection, which has the correct background colour in the actual image.
I want to have a background image on my site. It comes from the top of the page and is only behind the header. The problem is, my theme forces me to have a background color for the header so you can't see my background image at all. Here is a photo of what I want the site to look like:
And you can see what it actually looks like here. I'm using the Brunch Pro theme on Wordpress.
Is there a way to make the header background transparent or is there a better way to do this?
Add this to the end of the custom.css or style.css of your theme:
.brunch-pro .site-header{
background: transparent;
}
If you can edit the CSS (which I presume you can in WP), look for where .site-header has it's CSS properties set. Remove the background and background-color properties.
You could also just add a new CSS property and apply it to the header. Something like:
header.site-header {
background: none !important;
}
The !important will override already set properties...
If background-color property is required, you could use rgba color and make it transparent. background: rgba(0,0,0,0); makes background-color black, but fully transparent, without opacity and other tricks. Like so:
.black-but-transaprent {
color: red;
height: 100px;
width: 100px;
background: rgba(0,0,0,0);
border: 1px solid black;
}
<div class="black-but-transaprent">Test</div>
How do I change the color of breadcrumb text and arrow in materialize css. I can do it by applying appropriate classes but I am unable to change the color of the arrow mark in the breadcrumb.
This Costom CSS changes the Arrow color.
.breadcrumb:before {
color: #00ff00;
}
This is for the Text
.breadcrumb, .breadcrumb:last-child {
color: #00ff00;
}
When changing the color of anything in Materialize, it is best to use !important after the color:
background-color: #ffffff !important;
This typically works.
I am trying to play with colors in the AccessPress Basic template for WordPress (http://accesspressthemes.com/theme-demos/?theme=accesspress-basic) and I am trying to change the color for the BX-Slider navigation "dots" from red to other color.
I've changed it for active "dot" with:
.bx-pager-link.active:before {
background-color: #fff !important;
}
However I cannot change it also for the hover, I tried with that:
.bx-pager-link.hover:before {
background-color: #fff !important;
}
But it does not work.
I'd appreciate any help
That's a specificity issue. Try this:
.ap-basic-slider-wrapper .bx-pager-item .bx-pager-link.active:before,
.ap-basic-slider-wrapper .bx-pager-item .bx-pager-link:hover:before {
background: #fff;
}
See that I have used two things:
Full path.
background instead of background-color.
Works perfectly for me, make sure you load it after the styles.css or at the end of styles.css: