I have a site running joomla 3.0, and I'm trying to customize the menu bar.
The template is protostar and Im using the nav-pills style to make the menu bar run horizontal on the top.
The problem that I have is that I cannot find where I need to change or include css to CHANGE the rollover BLUE color on the submenu.
Also I would like to know how to change the color on that white little arrow on the submenu.
Image of the menu I want to edit
The overall tip worked for me as well. Joomla 3.x must use the .navigation .nav-child:hover section as above.
I also had to change the gradient lines section as one of them was being invoked.
Just changing the background lines did not show up.
I though about deleting them but instead made the start/stop the same.
Guessing that what gets used is a browser based choice if an option fits.
Just went on the Bootstrap site and inspected the element and it appears to be on lines 2927 to 2934 of bootstrap.css:
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
color: #ffffff;
text-decoration: none;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
background-color: #0081c2; is for non CSS3 compatible browsers and everything below is for CSS3 compatible.
Do bare in mind that Joomla may have changed things around in the bootstrap.css file so it may be on a different line, however you can simply search for the following:
.dropdown-submenu:hover > a
Hope this helps
Thankx for the Help Lodder! Saddly it did not worked. I found that I had to change not the .dropdown-submenu:hover > a { but instead .navigation .nav-child:hover > a {
Still thankx for taking to time on trying to help me!
Had the same problem. You can use this selector:
.navigation .nav-child li a:hover{
The KEY THING though is to set
background-image:none;
as the default style uses a gradient, not just a background colour!
Related
I've been struggling with this one.
I'm creating a personal website, and I'm using an animated canvas element for the background (animated via jquery). The issue seems to be that the text and box shadows for my anchor tags on hover are causing my canvas element to show a vertical scroll bar, and it is only happening in Chrome.
If I remove the text & box shadows, or if I remove the canvas elements then the issue goes away. I've tried adding overflow:hidden to pretty much everything, but to no avail.
See my website here: http://www.trunker.me
#mainMenu a:hover , #mainMenu a:active {
color: rgba(255,0,0,1);
box-shadow: 0px 0px 5px 2px rgba(255,0,0,1);
border-radius: 20px;
text-shadow: 0px 0px 5px rgba(255,0,0,1);
}
Thanks in advance!
EDIT:
Using windows 7 ultimate with Chrome Version 36.0.1985.125 m. It creates a second vertical scroll bar next to the browser scroll bar. Screenshot here:screenshot http://www.trunker.me/images/Capture.PNG
Remove all those overflow:scroll from several elements in your code.
Try overriding them directly in the console.
I am using this animated banner in my website.
Now I've copied the exact code from the tutorial but for some reason in my version the images seemed to be placed at the bottom of the table and cut off instead of as in the example. I've tried a number of possible solutions but either I've done them in the wrong place or they just don't work.
Normally I would add in the code but in this case (as you'll see from view page source) it's too long to post.
Any help will be appreciated
Well, I just opened Chrome Inspector changed few css properties and it worked. Here they are...
.photobanner
{
height: 232px;
width: 984px;
}
#container2
{
width: 748px;
overflow: hidden;
margin: 50px auto;
background: white;
}
I guess this would work.Tested in chrome..try your self with other browser and you should reduce margin of <h1> tag
I have multiple backgrounds with a gradient, and its working for Firefox, Chrome and Safari, with certain media querys for mobile devices.
As usual the problem is Internet Explorer. I used to have a conditional stylesheet for IE where I just loaded a single background image, but as far as I know, IE10 wont support < !--If IE--> in my CSS.
Ideally I would like to get the css3 gradient and separate background images working on all browsers, I'v been happy to use a single background image for all IE browsers, but so far the single background image wont work for IE.
CSS in main style.css
body{
font:14px 'questrialregular', Arial, Helvetica, sans-serif;
margin:0;
width:100%;
color:#797979;
background-image:
url(../img/bknd_img1.png),
url(../img/bknd_img2.png),
url(../img/bknd_img3.png),
url(../img/bknd_img4.png),
url(../img/bknd_img5), -webkit-gradient(radial, 50% 20%, 0, center center, 500, from(#c0deff), to(#509deb));
background-image:
url(../img/bknd_img1.png),
url(../img/bknd_img2.png),
url(../img/bknd_img3.png),
url(../img/bknd_img4.png),
url(../img/bknd_img5.png), -moz-radial-gradient(center center, circle contain, #c0deff, #509deb);
background-attachment:fixed;
background-position:top right, top left, center bottom, bottom right, left bottom;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-color:#509deb;
display:block;}
CSS for Internet Explorer: style-ie.css
font:14px 'questrialregular', Arial, Helvetica, sans-serif;
margin:0;
width:100%;
color:#797979;
background-image: url('img/bknd_full_img.jpg');
background-attachment:fixed;
background-position:center top;
background-repeat: no-repeat;
background-color:#fff;
display:block;
}
The problem is that you only give the gradient and multiple background to WebKit (using the old syntax) and Firefox (using the slightly newer syntax). There is no way that either IE or Opera can display the gradients or multiple backgrounds as you don't supply their prefixes or the none prefixed version.
IE10 implements gradients using the latest and final syntax, without prefixes. The latest Opera does too, and so does recent Firefox. IE10 doesn't need your conditional comment code, as it will work the same way as the other browsers.
The radial gradient should become something like:
background-image:
url(../img/bknd_img1.png),
url(../img/bknd_img2.png),
url(../img/bknd_img3.png),
url(../img/bknd_img4.png),
url(../img/bknd_img5.png),
radial-gradient(circle closest-side at center, #c0deff, #509deb);
More details on the syntax changes can be found on the IE blog [0] and the spec [1]
[0] http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx ,
[1] http://dev.w3.org/csswg/css3-images/#radial-gradients
I need use a modal plugin and colorbox looks great.
How do I load it w/o the rounded borders?
Given my page size, the thick border taking too much space.
Anyway to hide it or make it thinner and hide the border if needed on some calls?
You can hide the borders in easy way:
$("#cboxTopLeft").hide();
$("#cboxTopRight").hide();
$("#cboxBottomLeft").hide();
$("#cboxBottomRight").hide();
$("#cboxMiddleLeft").hide();
$("#cboxMiddleRight").hide();
$("#cboxTopCenter").hide();
$("#cboxBottomCenter").hide();
and add class with border style if you want with this way :
.thin_border {
border: 10px solid blue;
border-radius: 10px;
margin: 10px;
box-shadow: 0 0 25px blue;
}
and then add it with jquery
$("#cboxContent").addClass("thin_border");
I think colorbox isn't actually using the property "border" to get that huge black border going around. It seems like its being incased in a 3 x 3 div which uses images to create that border. Im sure you could remove it but its going to require messing with the actual colorbox javascript. You could try messing with the CSS as well.
You consider looking into a diffrent plugin like lightbox2 or shadowbox? I personally use slimbox (nice little clone of lightbox). If you want to mess with the code go for it. Otherwise I would just pick a diffrent plugin.
i have some images (in front of my bachground-image) with low opacity(png format)
and every thing was good in ie8 & firefox until i add pie.htc(or border-radious.htc from google code) for rounded corners & Shadow Box in ie8...
after adding pie.htc by :
behaviour : url(pie.htc);
and adding below codes :
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow: 5px 5px 20px red;
-moz-box-shadow: 5px 5px 20px red;
-webkit-box-shadow: 5px 5px 20px red;
the opacity of my images has gone...
i test it with a simple html project and figured out when we use shadow box in ie 8(just ie8 & ff is ok) the shadow fills our entire element , so the opacity is wanished.
how can i fix this shadow + opacity problem?
=====================================================
MY QUESTION IN ONOTHER WAY :
HOW CAN WE COMBINE THE BELOW CODES FOR IE8 (with keeping opacity):
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";//opacity
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);//opacity
-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc)";//shadow
thanks in advance
icant is correct but has a small typo. It should be progid instead of profid. I tried editing but it wouldn't let me edit just one letter.
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25) progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc);
Thanks icant!
it seems it's not possible to use shadow with opacity In IE 8...
When You add shadow after opacity to an element (in firefox every thing is ok) in IE8 you can not feel Opacity exists , because of that shadow fills the entire element and do n't let the opacity show itself.
however i checked this issue by the simple html project and searched for solving this issue with no results / if you find a solution about this plz share it with us.
Just put the shadow after the opacity and add a space in-between. It's as simple as it could be.
filter: profid:DXImageTransform.Microsoft.Alpha(Opacity=25) progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc);