I am using the UI Bootstrap tabs, and I want to change the CSS for some of the components, but am not sure of how exactly to access the different elements.
The elements I would like to change are the text for the active tab, the text for the unactive tab, and the borders for both.
What is the correct syntax need to access these tabs in CSS?
Here is the uib-tab HTML I am using:
<uib-tabset>
<uib-tab heading="Episodes"></uib-tab>
<uib-tab heading="Categories"></uib-tab>
</uib-tabset>
I'm pretty new to CSS - apologies in advance...
You can simply edit bootstrap's css for .nav-tabs
.nav-tabs > li > a {
border: 1px solid #000;
}
For active tab
.nav-tabs > li.active > a {
/*CSS HERE*/
}
Optionally you can style the uib-tab class added by Angular:
.uib-tab a {
border: 1px solid #000;
}
For active uib-tab
.uib-tab.active a {
/*CSS HERE*/
}
Related
Each product has multiple variants, which are linked to different thumbnails.
I can click to each thumbnails to preview it on a bigger size
I would like the border of the active thumbnail to be more visible.
I have tried these codes with :active and ::selection but it doesn't work .
.productThumbs li img::selection {
border-color: #ee0a3a !important;
}
.productThumbs li img:active {
border-color: #ee0a3a !important;
}
I have little experience with :active or ::selection attribute
Link of a product page: https://www.tresor-ethnique.com/collections/africain/products/boucles-oreilles-fleur-etoilee?variant=6090700914718
You're looking at the wrong CSS selector. Also, :active has an entirely different meaning in this context. It means a link that's currently being activated by the user (think of a link currently being moused down on): Read more here.
The selector you want is this either:
.productThumbs li .active
or
.productThumbs li .active img
This would make your statement look like this:
.productThumbs li .active img {
border: 1px solid #ee0a3a;
}
Or instead of using border: 1px solid #ee0a3a; you can use box-shadow: 0 0 0 5px #ee0a3a; if you want an easy way to have a larger border without the photo size shrinking.
I have read through many questions about styling of jQuery UI autocomplete however I still have a problem that I can not solve. I am creating custom rendering like this:
$('.license-input').autocomplete({
source: "{{url(LaravelLocalization::getCurrentLocale().'/ajax/license')}}",
minLength: 2,
delay: 250
}).autocomplete('instance')._renderItem = function( ul, item ) {
return $('<li>')
.append('' + item.name + '')
.appendTo(ul);
};
So my <li> items contain links.
Now I want to style the dropdown and I use the following CSS (I have exaggerated the colors for visibility):
ul.ui-autocomplete li
{
border:none;
background-color:#f505f5;
padding:10px 16px;
font-size:12px;
outline:0;
}
ul.ui-autocomplete li:hover
{
background-color:#05e5e5;
}
ul.ui-autocomplete li a
{
border:none;
background-color: #f505f5;
}
ul.ui-autocomplete li:hover a
{
border:none;
background-color: #05e5e5;
}
However, the links does not get styled. What puzzles me the most is what I see when inspecting the result in Chrome's debugger:
You can see that the computed style for the active <a> element is the blue color, however the item itself has white background. What is this white thing that I should style?
I have already tried various selectors like .ui-state-active, .ui-state-hover, ui-state-focus, ul.ui-autocomplete li a:hover and others.
Note: the border: none; rule from the ul.ui-autocomplete li:hover a actually gets applied - without it the style looks different (has 1px black border around the link). So the only problem is the background.
Looks like the link in the list item has a background-image set. This will override any background colors you use.
You can set the background-image: none for that particular link
Something like:
ul.ui-autocomplete li:hover a
{
border:none;
background-color: #05e5e5;
background-image: none;
}
Example of link with background image and one without:
https://jsfiddle.net/yuwhuwkz/1/
I want to give separation between the list of menus in the site.
How to display horizontal lines between each menu items in this site
I want something like this :
We used the below code in menu.css
.em-catalog-navigation li { border-bottom: 1px solid #cecece; }
Strange thing is that it didn't work for me.
Let me know if you need any clarifications.
There was already a style for the parent li [BOY TOYS] so have used that to target the items you wanted
.em_nav .menu-item-hbox .menu-container .menu-item-text.menu-item-depth-3 > ul > li {
border-bottom: 1px solid #cecece;
}
I'm building a wordpress theme. my menus are getting classes from wordpress, like: .current-menu-item, .current_page_item & I'm using them to customize my active menu background color:
.current-menu-item a, .current_page_item a {
background-color: #ffef38;
}
but the problem is I've a secondary menu in footer, which is getting this style from css too. css for my footer is quite simple:
#footnav {
float: right;
}
#footnav li {
display: inline-block;
border-right: 1px solid #fff;
padding: 0 0.5em;
}
#footnav li:last-child {
border-right: none;;
}
so my question is, how can I remove the active menu styles from my footer menu only?
Either configure the styles to whatever you want on the footer:
#footnav .current-menu-item a, #footnave .current_page_item a { background-color:transparent; }
or make your initial selector more specific:
nav.myclass .current-menu-item a, nav.myclass .current_page_item a {
background-color: #ffef38;
}
Since you sound like you're just concerned about the styling, I wouldn't think about touching the PHP that actually generates those classes in the first place, since they may be relied upon for other things (e.g. javascript.)
I want to remove the outline on an active jQuery UI tab (or at least change the color).
Working from this example, I tried this unsuccessfully:
<style>
#tabs .ui-state-focus
{
outline: none;
}
</style>
(based on a tip from this question and answer).
What's the trick to removing the outline from an active tab?
I don't believe it's the class focus that you need to target, it's the CSS psuedo-class :focus
.ui-state-focus:focus { outline:1px dotted red !important }
if that works, go with {outline:none} to remove it. You are sort of jacking up your accessibility by worrying about it though, FYI.
There are lots of ways to do this. Here are two examples (I suggest option 2):
Option 1
Remove the outline from all elements that use the .ui-widget class:
.ui-widget * { outline: none; }
Here's a working fiddle.
Option 2
Make the outline color transparent:
#tabs li a
{
outline-color: none;
}
Here's a working fiddle.
I managed to remove it with
.ui-tabs-anchor:active, .ui-tabs-anchor:focus{
outline:none;
}
if you want to remove the outline only on a specific tabs then I suggest you use the following:
$("#tabs ul li").css({'outline': 'none'}); // where #tabs can be any specific tab group
inside the script tag of your html.
You can disable the outline by specifying outline-width: 0;
#tabs li a
{
outline-width: 0;
}
A more generic solution without using IDs would be:
.ui-tabs ul li a
{
outline-width: 0;
}
Demo: http://jsfiddle.net/ebCpQ/
I had to do this to prevent possible initial tab order focus too:
.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a, .ui-state-focus:focus {
outline:none;
}
you can try this
a:focus { outline: none; }
To make it more clear, the outline appears on the element inside of the ul.ui-tabs li.ui-tabs-nav.
Most of above examples forgot to mention this: so here is a working answer for the original question:
.ui-tabs-nav .ui-state-focus a {
outline: none;
}
http://jsfiddle.net/xJ9Zr/5/
Oddly enough, none of this worked for me. I had to add a border to get the outline (or maybe it was a blue border) to go away:
.ui-state-hover, .ui-state-focus, .ui-state-active
{
border: 1px solid #ccc !important; /*Or any other color*/
border-bottom: 0 !important;
}