Bootstrap 3 submenu parent highlight - css

Submenus were removed in Bootstrap 3. I added them back using this example/code:
http://bootply.com/71520
The issue is the parent menu item does not stay highlighted as we hover over the submenu. How can this be accomplished? This used to work in bootstrap 2:
http://getbootstrap.com/2.3.2/components.html#dropdowns
I tried looking all over the CSS and couldn't find this.

You need to add a new style to .dropdown-submenu:hover > a. Note, I copied the CSS from the existing styles on the a:hover.
.dropdown-submenu:hover > a {
color: #fff;
text-decoration: none;
background-color: #357ebd;
background-image: -webkit-gradient(linear,left 0,left 100%,from(#428bca),to(#357ebd));
background-image: -webkit-linear-gradient(top,#428bca,0%,#357ebd,100%);
background-image: -moz-linear-gradient(top,#428bca 0,#357ebd 100%);
background-image: linear-gradient(to bottom,#428bca 0,#357ebd 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca',endColorstr='#ff357ebd',GradientType=0);
}
http://bootply.com/96695

Related

Cannot remove gradient

I'm trying to remove gradient overriding this:
-webkit-linear-gradient(right,#1a5cce, #00c7ce 85%);
background: -moz-linear-gradient(right,#1a5cce, #00c7ce 85%);
background: -o-linear-gradient(right,#1a5cce, #00c7ce 85%);
background: linear-gradient(right,#1a5cce, #00c7ce 85%);
I tried with:
background: -webkit-linear-gradient(none);
background: -moz-linear-gradient(none);
background: -o-linear-gradient(none);
background: linear-gradient(none);
I'm not a css expert, what I want to do is remove completely the gradient, is this possible?
Just set background: initial.
All CSS properties allow initial value to revert their value to initial state. Use this property what you don't want to bother about particular property defaults.
Also you can use background: none for background property.
Gradient background reset that you'll need to set background: none #color;
Example:
.your-class {
background: none #157FCC;
color: #FFFFFF;
}

Getting current Quill Editor's toolbar background color

I'm implementing a primeNg/quill editor, and as part of the UX design I need to display a container in the screen with the same color background as the editor's toolbar. I'm looking at the snow.css file but can't seem to find it, any quill experts know where I can find this on snow.css or any other dependent css of Quill? Thank you!
The toolbar background color in the PrimeNG Quill demo is part of the PrimeNG theme and not part of Quill's snow.css.
You can use the developer toolbar in Firefox and Chrome to see the CSS rules:
.ui-widget-header {
border: 1px solid #d9d9d9;
color: #1b1d1f;
background: #f6f7f9 0 0 repeat-x;
background: -moz-linear-gradient(top, #f6f7f9 0%, #ebedf0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f7f9), color-stop(100%,#ebedf0));
background: -webkit-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%);
background: -o-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%);
background: -ms-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%);
background: linear-gradient(top, #f6f7f9 0%,#ebedf0 100%);
}
Just put inside a div with background color, and for editing area color use
Style backround color property.
below code for bootstrap and angular
<div class="bg-light">
<quill-editor [styles]="{height: '500px', backgroundColor: 'white'}">
</quill-editor>
</div>

white rectangle appearing when links pressed

I am making a simple menu with border-radius:5px on the background when you hover or its clicked.
I notice that for an instant when I click on it a rectangle border, a filled in white appears, which then goes round (in ff and IE11)
www.lo.ee-web.co.uk
I am making a joomla template and pulling int he bootstrap code but NOT using it (leaving it in case I put any plugins in at a later date that might want it)
I figured it might need to overwrite some bootstrap css so I tried adding styling for a:active but that doesn't seem to help. I also notice that if I press a link a second time it doesn't do it so I am guessing that's because of the cache.
Is there a way to stop this annoying box?
thanks
try to set your background-color to transparent.
In your case the css was:
You do have the template.css connected to your html though, and in there i find this:
nav ul#mainMenu li a:hover, nav ul#mainMenu li.active a {
background-color:#3d4d42;
background-color:#597060;
border-radius:5px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#cdcdcd));
background: -webkit-linear-gradient(top, #efefef, #cdcdcd);
background: -moz-linear-gradient(top, #efefef, #cdcdcd);
background: -ms-linear-gradient(top, #efefef, #cdcdcd);
background: -o-linear-gradient(top, #efefef, #cdcdcd);
color:#597060;
}
This probably causes the white background.
If you change this you might be able to fix it.
Otherwise you can also try to give your css file a new property for the background, making it transparent (or any color you want) by giving it Background-color: transparent;
If that doesn't work, maybe you should try it with !important in it.
so : Background-color: transparent !important;
Add this line in css:
a, a:active, a:focus, a:visited{outline:none;}

Firefox li href CSS selector

I've styled some list items (li) using CSS. The style's applied to the a selector within the li. It works great in Chrome, IE and Safari but not Firefox:
<ul class="organisations">
<li class="community-care"><a href="http://adviceglos.org.uk/organisation-type/community-care/" title="View all posts in Community Care" >Community Care</a></li>
</ul>
Here's the CSS:
ul.organisations li.community-care a {
background-image: -webkit-gradient(linear,center top,center bottom,color-stop(0%,#5CBCC4),color-stop(100%,#38939B));
background-image: -webkit-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: -moz-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: -o-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: -ms-linear-gradient(#5CBCC4 0,#38939B 100%);
background-image: linear-gradient(#5CBCC4 0,#38939B 100%);
background-color: #5CBCC4;
border: 1px solid #318188;
border-bottom-color: #245E63;
}
You have a syntax error in your stylesheet. In particular, line 529 is:
background-image: -o-linear-gradient((#eeeeee 0,#ccc 100%) !important;
Note that you have one more open paren than close paren. In a spec-compliant CSS parser (which excludes WebKit), this causes the UA to treat everything up to the matching close paren as part of the background-image value. In this case, that's all the rest of the stylesheet, so all the rules after this point are ignored.
Further note that Firefox did report this problem in its error console, which is how I found it...
Apply -moz for firefox like this:
background: -moz-linear-gradient(#BF698C 0px, #93506D 100%) repeat scroll 0 0 transparent;

Styling a Separator Nav with round edges stricly in CSS

My navbar looks like:
<div id="navbar">
<ul class="tabnavcenter">
<li class="active">Test</li>
<li class="aaron">Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
And my CSS for the NavBar looks like:
ul.tabnavcenter {
background: #fff;
padding:0px 0px;
font-size:14px;
font-weight:bold;
color:#000;
overflow:hidden;
width:957px;
background-image: -moz-linear-gradient(top, #cacaca, #848484);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
}
ul.tabnavcenter li {
float:left;
border-right: #DDDDDD 1px solid;
list-style-type:none;
}
ul.tabnavcenter li.active {
background-image: -moz-linear-gradient(top, #cacaca, #4B4B4B);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#4B4B4B));
}
ul.tabnavcenter li:hover {
background: #7D7D7D;
cursor:pointer;
}
Is there a possible way I could add rounded edges to the first and last link just using CSS? :)
I put your code into a JS Fiddle but it's not apparent how you want to handle the last link (because of the gradient to the right, a rounded edge would look strange).
http://jsfiddle.net/Kk7vK/
Is there a possible way I could add rounded edges to the first and
last link just using CSS?
First/last can be selected using :first-child and :last-child. Browser support is good (IE7+) for first-child, not so good (IE9+) on last-child.
Example
ul.tabnavcenter > LI:first-child{ /* do something different */ }
CSS Selector Reference: http://www.w3.org/TR/selectors/
Rounded edges can be achieved using border-radius (with vendor-specific prefix(es) such as -moz-border-radius). Internet Explorer support for border-radius started with IE9 (though there are polyfills for < IE9).

Resources