I want to have different text color for items in menu and sub-menu. Can I do that with css only, without having to modify the html, by adding a different class to items in sub-menu?
Just use the following CSS definitions:
.sf-menu a, .sf-menu a:visited{
color: #ffffff;
}
.sf-menu li li a, .sf-menu li li a:visited{
color: #ff0000;
}
So the Menu has a white font color and the sub menu red.
Related
Update: here is the full code: codepen
I have below HTML: here is the full code
<input id="id1" value="planner" type="checkbox" />
<label for="id1">Name</label>
Before the label I want to insert an icon so I have the below the CSS file.
input[type=checkbox] + label:before {
#include custom_square;
content:'';
display: inline-block;
}
my custom icon mixin is as below:
#mixin custom_square {
width: 10px;
height: 10px;
border-radius:20%;
border:1px solid #0069aa;
margin-right:0.3rem;
&:focus::after {
border:1px solid #ffffff;
}
}
now when user focus the lable it does color change the css for it as below:
input[type=checkbox]:focus + label,
input[type=radio]:focus + label {color: #fff;}
Also, I want to change the border color of the square to white on the focus of it, I have added &:focus::after pseudo element in the mixin custom_square but it seems it is not working, any clue?
P.S: I don't want to use font-awesome icons, instead I will be creating my own icons and would be inserting that as shown above:
I am using vue carousel and I want to change tge color of the pagination dots' borders. I don't know how and if it's even possible. I looked up the style of this buttons in dev tools and tried to rewrite the style. But nothing works
vue-carousel has two properties that control the color of the dots:
paginationColor - (default: #000000) The fill color of the active pagination dot. Any valid CSS color is accepted.
paginationActiveColor - (default: #efefef) The fill color of pagination dots. Any valid CSS color is accepted.
For example:
<carousel paginationColor="gray" paginationActiveColor="red">
demo
Try this in your global CSS
.v-carousel__controls__item{
color: #FFC400 !important;
}
There is a work-around that can give you full control over the dots and their appearance with pure CSS, using pseudo-elements. Make the existing dots transparent, and use ::after to create new dots that you can style as you like.
.VueCarousel-dot {
position: relative;
background-color: transparent !important;
&::after {
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
border: 2px solid black;
background-color: gray;
position: absolute;
top: 10px;
left: 10px;
}
&--active::after {
background-color: red;
}
}
This is not an ideal solution, however the provided options for styling dots in Vue Carousel are quite limited, and if you have a strict style guide to follow, this solution can give you the control you need.
I have tried to change the placeholder color of the input element when you hover it.
add :hover then ::placeholder pseudoelement to change its color:
input:hover::placeholder {
color: red;
}
Which property of THEMES/CLARO.CSS inside DOJO TOOLKIT shows the text box inside the buttons DIJIT/FORM/BUTTON ??
I would like to remove the black box from the text and icon.
Change the "baseClass" button but it still persists.
Configure the following:
.button0 {
margin: 2px;
padding: 3px;
background-color: #ffec64;
border-radius: 9px;
border: 3px solid #ffaa22;
}
.button0:hover {
background-color: #ffaa22;
}
And add "button0" to "baseClass" of widget.
I found the class that had the box and was able to get it out:
.dijitButtonNode {
border: 0px;
}
I am trying to achieve few customisations in ag-grid such as:
Change icons of Grid Header - Sort Icon, Filter Menu Icon, Icons of different menu items in Filter Menu, etc.
Change position of the Icons.
Can anyone point me to a possible solution?
According to the docs, you can try this CSS after the loading of the ag-grid.css (or scss) file and the ag-theme-<themename>.css file. In my example, that theme file is for Balham theme ag-theme-balham.css. This CSS will change the icons from default black (using the SVG) to white.
/*
* The override should be placed after the import of the theme.
* Alternatively, you can aso increase the selector's specificity.
*/
.ag-theme-balham .ag-icon-desc,
.ag-theme-balham .ag-icon-asc,
.ag-theme-balham .ag-icon-menu
{
font-family: "Font Awesome 5 Free";
/* FontAwesome uses font-weight bold */
font-weight: bold;
}
.ag-theme-balham .ag-icon-desc::before
{
content: '\f063';
color: white;
}
.ag-theme-balham .ag-icon-asc::before
{
content: '\f062';
color: white;
}
.ag-theme-balham .ag-icon-menu::before
{
content: '\f0c9';
color: white;
}
This Worked for me. Just overide the color
.ag-theme-balham .ag-icon-menu:before,
.ag-theme-balham .ag-icon-asc:before,
.ag-theme-balham .ag-icon-desc:before,
.ag-theme-balham .ag-icon-filter:before{
color: #FFFFFF;
}