I would like to use a different background color for the Foundation topbar menu in mobile view compared to the desktop view. In the settings file you have $topbar-dropdown-bg to set the color but this is the same for both views. I have tried the following code:
$topbar-dropdown-bg: white;
#media only screen and (max-width : 40em) {
$topbar-dropdown-bg: #dc2a87;
}
But the problem is that all views give the color background but this should be only in the mobile view?
Use scss media query for changing foundation top-bar.
#media #{$small-only} { }
Use it with the bg-background variable.
#media #{$small-only} {
$topbar-dropdown-bg :#fff;
}
Related
I'm currently trying to use the accordion component of Semantic UI React and can't figure out how to change the color and arrow to white.
https://semantic-ui.com/modules/accordion.html
In the css, you can see that the widget has styling that configures it to black.
Does the component have a way to change the text color?
Is it possible to put a parent div to override the color text? (tried
that but didn't work)
How would you override the color? Any workaround. (This can be done with an override as mentioned below in the comments with the !important tag)
The accordion react component takes in panels
const panels = [
{
title: "test1",
content: "test1"
},
{
title: "test2",
content: "test2"
},
{
title: "super",
content: "test"
}
]
<Accordion className="test" panels={panels}/>
.test{
color:white;
}
The accordion takes in a className, but passing in a style doesn't seem to work at all either. I've tried at each level as well Accordion.Title Tag.
You have to personalized the class of the composant you want to change and you have to "overriding" the css classes of semantic-ui using !important.
.ui.accordion.perso
.title:not(.ui) {
color : #ffffff !important;
}
If you want more info on !important (https://css-tricks.com/when-using-important-is-the-right-choice/)
Peace
Figured it out.
<Accordion>
<Accordion.Title className="test2">
<Icon name='dropdown' />
<label className="label-color"> super</label>
</Accordion.Title>
<Accordion.Content>
</Accordion.Content>
</Accordion>
Realized that I could just use the separate components of an accordion and add my own elements and style it.
I just started to work with ionic v2 today and I am trying to color my app to match my preferences. While playing with the color variables gave some colors, I cannot find how to color every navbar to my preference although I can color them individually. What are the variables I should access in order to give all navbars the same color?
Thanks in advance.
This is done as globally only sigle class can change your toolbar color gobally.
.toolbar-background{
background-color: "color you want to give" !important;
}
or you can do seperately for each platform like
.toolbar-wp-themecolor .toolbar-background-wp{
}
.toolbar-md-themecolor .toolbar-background-md{
}
.toolbar-ios-themecolor .toolbar-background-ios{
}
or if you want to control with global color variable then for each page you can use like
<ion-header>
<ion-navbar color="themecolor">
<ion-title>Notifications</ion-title>
</ion-navbar>
</ion-header>
where themecolor can be defined in variable.scss
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
white: #ffffff,
themecolor: #574D70
);
Say I have a button like this:
<button>Some Text</button>
And by default the stylesheet has the text as black.
I then have this css:
button {
transition: color 0.15s ease-out;
color: rgba(255,255,255,0.75);
}
button:hover {
transition: color 0.15s ease-out;
color: #fff;
}
The goal is to subtly fade from a grayish off-white, to white, on hover, and then back again to normal button appearance on hover off.
The problem is when i firstly load the page, the black initial color of button is overwritten by the transition that i applied on button, and one can briefly see black text fading to off-white.
How do I make it so that the initial state just loads without animation? Or more precisely, is there a way to achieve something like :hover-off to control the animation only when the hover state turns off?
Sorry i have less reputation to comment. Your animation does not work, please explain clearly what you want to do?
are you trying to achieve this.
button:hover {
transition: 0.5s ease-out;
color : white;
}
If you have to load some JavaScript, you can put it in the <head> after your CSS. Kind of a hack, but it works.
HTML parsing is blocked by <script> tags that initiate requests for external resources. I guess CSS animations won't start until the <body> has been fully parsed and that's the reason this works.
I have a Qt QMenu in my app, consisting of two levels (the top level of submenus, then each submenu containing actions), and we have a custom dark-grey style whereby the menu background is grey, the text color is white, and the right arrow is white. When a submenu item is highlighted (mouse-over), the item background is white, the text is black, and I want the right arrow to switch to a black image as well. I'm using a CSS stylesheet to do this. However, I can't seem to find the right syntax to set an alternate right-arrow image for the item selected state. My CSS looks like this:
QMenu
{
background-color: rgb( 24, 24, 24 );
color: white;
}
QMenu::item:selected
{
background-color: white;
color: black;
}
QMenu::right-arrow
{
image: url(Resources/MenuRight.png);
}
I've tried the following additions after the above code (where MenuRightSelected.png is an inverted-color image of MenuRight.png):
QMenu::right-arrow:selected
{
image: url(Resources/MenuRightSelected.png);
}
and
QMenu::item::right-arrow:selected
{
image: url(Resources/MenuRightSelected.png);
}
Neither of these affect the displayed QMenu. Does anyone know if it is possible to do what I'm after, and if so, how?
Possibly you only have to change the order of the items in your css file. I once heard that Qt parses the css files from upwards. Items further up overwrite the behaviour of items further down.
I am using Jquery UI datepicker and I am trying to change the background color for each day in a month.
For this I am using beforeShowDay function in Jquery UI date-picker.
As an example I am trying to change the background color for odd days in a month and my script changes only border color.
I am not sure where the mistake is, How do I over ride the entire back ground color in Jquery to achieve the desired result.
please help.
Script Used:
$(document).ready(function() {
//$("#datepicker").datepicker();
$("#datepicker").datepicker({ inline: true, beforeShowDay: highlightOdds});
});
function highlightOdds(date) {
return [true, date.getDate() % 2 == 1 ? 'odd' : ''];
}
Css Used:
.odd { background-color: green; }
hii All I found it myself,
I just modifed the css as given below and it works cool :)
.odd a.ui-state-default {color:white;
background-color: red;
background: red;}
thank u all :)