I changed the navbar-background Css Role in common.scss file
but background of navbarpage not changed.
.navbar-background { background: linear-gradient(to top, #5adb43, #51b93f,#748930); }
I add this code to common.scss but it is not worked!
Your approach is correct according to the Zebble documentation: http://zebble.net/docs/navigationbar-class
To change NavBar background color you can change this rule to change the colors. But you have made a mistake in linar-gradiant method parameters.
You add one extra parameter to the method and because of this your code has not worked. I wrote correct one for you.
You can add the following in common.scss
.navbar-background { background: linear-gradient(to bottom, #5adb43, #51b93f); }
Related
I need to change the color of the highlighting of possible drop targets in a Vaadin 14 Grid. To illustrate, I am using the drop mode "between", which results in a purple line:
How do I change the color of that purple line?
Vaadin Tutorials are not easy to understand and suggest using a CSS selector ending with -drag-center (Vaadin 8) or using .v-drag-over-target.card selector. But this does not seem to work, maybe I need to replace "v" in the second suggestion with something else?
Due to the purple color I'm assuming that you are using the Material theme. I'll also assume that you have a custom theme set up, as is described here. If not, that page explains how to set up a custom theme.
To customize the color of the grid row drag indicator:
In your project folder, create a file frontend/themes/<your-custom-theme-name>/components/vaadin-grid.css
Add the following contents to the CSS file:
[part~='row'][dragover] [part~='cell']::after {
background: green; /* replace with the color you want */
}
I'm to add an angular material spinner, but can't even have the basic one works on Stackblitz. I've added everything the way the documentation suggest, but I'm still getting nowhere.
Thanks for helping
You were missing to define a theme in styles.css. https://stackblitz.com/edit/angular-pbet9b?file=src/styles.css
Or you can also define the stroke color in styles.css:
.mat-progress-spinner circle, .mat-spinner circle {
stroke: red;
}
I would suggest to pre-define a theme and then override in styles.css so in case you forget to define maybe a color at least the default color appears.
Trying to change the checkbox color (due to changing the accent-color) results in a black checkbox.
So I've installed node-sass and was successfully able to change various other stylings, for example, the hover color of a row with $hover-color: cornsilk;
But somehow using:
$accent-color: #fffff1; or $ag-mat-accent: #fffff1;
does only change it from the default of pink to black.
$ag-icons-path: "~ag-grid-community/src/styles/ag-theme-material/icons/";
$accent-color: #fffff1;
$icon-color: #03a9f4;
$hover-color: cornsilk;
#import "~ag-grid-community/src/styles/ag-grid.scss";
#import "~ag-grid-community/src/styles/ag-theme-material/sass/ag-theme-material.scss";
My expected result would be a whitish checkbox when selected. Instead, I'm getting a black one no matter what color I choose.
Add the following CSS to your style.scss file:
.ag-theme-material .ag-checkbox-input-wrapper.ag-checked::after {
color: #fffff1 !important;
}
You could try set the following variables in scss. I hope this will help you!
#import '~ag-grid-community/src/styles/ag-grid';
// set the colors to the ones from the material theme
$ag-mat-accent: #fffff1;
// Import the ag-Grid material-next theme
#import '~ag-grid-community/src/styles/ag-theme-material/sass/ag-theme-material';
source of my example can be found here: https://github.com/ag-grid/ag-grid-material/blob/master/angular-material/src/styles.scss#L22-L23
It's very simple, just go to the node_module --->ag-grid-community --->dist --->styles --->
ag-theme-material.css ---> find the style which is like below and change the color whatever you want.
.ag-theme-material .ag-icon-checkbox-checked {
color: #0076c6; }
I am toggling the header visibility and when I hide it, I need it to be transparent and show the scrolling content.
I tried several ways but the header is not transparent. Please note it's hidden correctly but it left a white background instead. So I wanted to make it transparent:
$('.ui-header').hide().animate({opacity: 0.0});// Hide the header but its opacity doesn't get to 0
$(".ui-header").css("backgroundColor", "transparent");// No effect
How to make the header transparent so it will show the content underneath?
$(".ui-header").hide();
Should be sufficient. Hiding the element means not showing it, which is equivalent to setting the opacity of the element to zero.
When reading the documentation for the jQuery function .hide(), it clearly states that .hide() without any parameters is the equivalent to display: none; in CSS.
If you can't find the error with JS, I suggest giving display: none; to the ui-header class in CSS. If neither works we need more code to track down the error and give you a proper answer.
Edit: A JSFiddle demo available here.
I know about css sprites.. Now i want some examples of css sprites....
How did you manage to get css sprites work?
I usaully use the CSS background property. This property allows you to set a scroll argument of top and left as you can see in the example below. So the idea is to create one image with all states and simply position it based on the event like hover or other custom event in which you alter the elements CSS. I hope this helps.
.mySprite a
{
background: transparent url(/images/spriteButton.gif) no-repeat scroll 0 0
}
.mySprite a:hover
{
background: transparent url(/images/spriteButton.gif) no-repeat scroll 30 0
}
http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/
http://www.w3schools.com/css/css_positioning.asp
http://template.joomlart.com/ja_iris/index.php?option=com_content&view=section&layout=blog&id=4&Itemid=29
If you are using Firefox here is a simple way to get an idea of what a sprite is. Go to yahoo.com, right-click and View Page Info, click Media. Look for a file name having "sprite" in it.
This is one of the links:
http://d.yimg.com/a/i/ww/met/gsprite_071309.gif
You will see many background gradient images. You can use this file to play with. Now you have to adjust background position in your CSS depending on which background you want to use, like this:
background-image: url('http://d.yimg.com/a/i/ww/met/gsprite_071309.gif') left -30px repeat-x;
This should give you an idea of how to manage sprites.
If you are looking to create a CSS sprite - you can check out the site spriteme.org, which is very cool and shows you how to easily create a CSS sprite.
For a nice example you can check out this page:
http://www.programmerinterview.com/index.php/general-miscellaneous/css-sprite-example-and-tutorial/
Gives a good explanation and shows how the website owner uses a sprite.
I use them for button images. I use the top half of an image for the normal button state and the bottom half for the mouse-over state. That way the mouse over image is loaded when the page loads and there's no delay which just looks bad and slow. CSS code is here.
Check out this page:
http://www.tutorialrepublic.com/css-tutorial/css-sprites.php
It has a great interactive example and everything you need to know about CSS Sprite.