By default nativescript Tab TabStrip has a blue border-bottom at the active item. How do i go about changing to color of this blue bottom border ?
I have already tried styling Tabs as per documentation link below in the styling section:
https://docs.nativescript.org/angular/ui/ng-components/tabs
figured this out. I had to change the accent color App_Resources.
You can use a special nativescript CSS property highlight-color for this.
Here is an example:
Tabs TabStrip {
background-color: #fff;
highlight-color: #f00; // Here you can write your color code
color: #fff;
font-size: 14;
font-weight: bold;
}
Here is an example from the Playground app: https://play.nativescript.org/?template=play-tsc&id=hhPr9s&_ga=2.8323127.464253737.1575620904-1702602123.1572291235
Here is an official blog post from the Nativescript team about introducing the Tabs component, i hope it will help: https://www.nativescript.org/blog/tabs-and-bottomnavigation-nativescripts-two-new-components
Related
I am trying to create a button with text inside. I want it so that when you hover over the box, the color of the box changes to white, and the colour of the text changes to blue.
How can I add css to make my text and box change colors on hover?
Edited: I got the html snippet for that from another part of the website template I am editing. It is basically a box that does exactly what I have outline above. I then placed it inside the list tag of the menu html, hoping that it will just transfer the functionality but it didn't work. So I tried to add the [hover:] but it still isn't working.
I know I am doing something wrong but I don't know enough to know what it is.
Code snippet is for html:
Upload resources
Use the :hover pseudo selector
e.g.
button {
color: white;
background: blue;
}
button:hover {
color: blue;
background: white;
}
Of course, replace with the actual hex codes you need rather than the colour names above, and any valid property can be used, e.g. border, text-decoration etc.
Use :hover pseudo selector
element{
color: white;
background: blue;
}
element:hover{
color: blue;
background: white;
}
You can check these at Click Here
In chrome the below button will retain it's outline after it has been clicked. If I looked at the buttons css settings after selecting the :active checkbox in chrome's developer tools I still can't see what the CSS values are for the outline. It appears to be about 1px in width and grey visually, but I don't see these values. Is there a way to see them?
<body>
<button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>
In other words google chrome does add this style (As indicated by one of the answer below):
:focus {
outline: -webkit-focus-ring-color auto 5px;
}
However when I click the focus checkbox in order to be able to see all the CSS that is triggered by focus, I don't see that style in the developer tooling pane ... Is it a google developer tooling bug or do other people see it?
There are actually two different styles that are automatically applied through through the user agent stylesheet to buttons; the pseudo-classes :focus and :active:
:focus {
outline: -webkit-focus-ring-color auto 5px;
}
button:active {
border-style: inset;
}
The :focus only applies to Chrome, and is responsible for the blue border you are seeing. Overriding this fixes the problem:
button:focus {
outline: none; /* Remove the outline */
}
button.active: {
border-style: none; /* Remove the border */
}
<body>
<button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>
You can see that the :focus is getting added in the Developer Console through the user agent stylesheet (just below the inline elements in this screenshot):
Hope this helps! :)
The styles console in the chrome developer tools only shows what is currently selected in it's current state. If you want to see the rules for the other states a simple way is to go to the css file it self. To do that next to the element class there is a link as shown in the image below. Clicking this will open the actual css file in the specific row of the selected class. Assuming the other states are declared close to that you'll be able to locate the class you want.
Can you post a link to the website?
In the meantime, I would suggest looking the "Computed" styles tab
Side note about why this might be happening--I've noticed sometimes I haven't been able to see the :active styles when it's JavaScript controlling the button's state
Edit: Hi Ole, I can see your demo, thanks.
Based on Obsidian Age's helpful reply, I ran this code snippet and it got rid of the borders on click. That's the behavior you want, right?
<body>
<style>
button:focus {
outline: none; // Remove the outline
border-top: none;
border-width: 0;
}
button.active: {
border-style: none; //Remove the border
}
</style>
<button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>
By looking in the "Computed" tab (next to "Styles" when you're inspecting an element in Chrome), I saw that there was a gray, 2px-wide border-top, -right, -bottom, -left for the button. For some reason it was enough just to set the border-top property to none and the border-width to 0. I don't know why but I tried a bunch of other combinations that didn't work--this did it with the least amount of CSS.
I used a free theme from someone : Olsen Light. And I want to add an archive to my sidebar. When the archive is displayed as just text, it is in black. When I change the widget option to dropdown, it's white...
I've been looking in the style CSS, nothing has color:white of #fff in it, only background-colors are white.
Is there a way I can use an overwriting style class that I put in the 'additional CSS' so that it appears black? I've tried widget-9 { color: black !important; but it doesn't work. Maybe anyone can click inspect element to see the css and html and tell me how I can fix this please?
Here is the example on my blog : www.oihanevalbuenaredondo.be
I've put both archive styles at the bottom of my sidebar
For some reason, the elements inside the aside for your archives are being wrapped in <b> elements set to color: white;.
Add this code, and you should be good:
.widget_archive * {
color: #111 !important;
}
I put #111 but you can use whatever color.
By inspecting, I've found out it has 3 <b style="color: white"> inside each other inlined, but none of them has !important, so you may override it in a custom style. I see you have a style.css. Try adding this:
aside.widget-9 h3 b {
color: black !important; /* your color */
}
Have a menu as an SSI. I wish to change color of displayed SSI links on page. My reading shows I can use CSS to change displayed link color, so created div around the menu and unique div id as well as CSS for the div. The div ID is “menu”.
CSS
#menu {
font-family: Verdana, Geneva, sans-serif;
margin-left: 25px;
a { color: #FFFF00; }
}
Only the unvisited links need to change, hence the single line. This code makes no changes to my links: they show default #0000EE. This code does provide the needed margin, so the server is reading the CSS.
I can change the link colors by adding html change to the body of the page, but I’d prefer not to:
<style>
a {color: yellow;}
</style>
This changes all links, not what I wish to do.
Unless you're using some kind of CSS preprocessor that supports nesting, then your CSS is invalid. Once the browser sees the a tag inside the #menu, it stops working because it expects a CSS property to be there and not another element selector.
To get the correct styling, do this:
#menu a {
color: #FFFF00;
}
If you want to style only links that have not been visited, do something like this:
#menu a:not:visited {
color: #FFFF00;
}
A not-super-advanced coder here.I'm seeking to "simply" adjust the styling of an active link in a sub-navigation on a site.
Example page:
http://printergatherer.com/shop
Referencing the minty green sub-nav that has "ALL ... PRINTS" in it.
Right now, I have styling that effects the active link in ALL navigations on the site. Ideally I have one set of styles for the main nav, and one for this sub nav.
I've managed to add a mint green underline to the active link, which is great, but for whatever reason I just CANNOT get the link color itself to change to the same mint green.
This code gets the bottom-border, but not the correct link color:
#categoryNav ul li.active-link {
color: #C6D4D0;
border-bottom: 1px solid #C6D4D0;
}
Sorry if I'm being a noob, I am about to tear my hair out about something that seems so simple!
You just need to move the color off of the li and on to the anchor tag like so:
.active-link a {
color: #c6d4d0;
border-bottom: 1px solid #c6d4d0;
}
you can see a jsfiddle of it working here:https://jsfiddle.net/24k1zep4/3/
your CSS is really specific, if you can't change that you may have to actually use a more specific selector.
#categoryNav .category-nav-links .active-link a {
color: #c6d4d0;
}
should work if you can't change the specificity and need to override what is already there.