Superfish - Menu Border
Permalink 2 users found helpful
I just purchased Superfish Menu - it's awesome and working as intended, however, when I assign a solid background color it leaves an annoying 1px white border on top and left.
I'm trying to place it inside a solid colored bar that stretches across the full width of my page so I'd like to learn how to remove that white border. See image attached for example.
Is there a CSS Superfish uses that I can edit? Any suggestions?
Thanks,
Suzy
** EDIT **
Sorry guys, my mind is not functioning today - so, I found the CSS and I see a left and top border - I set it to 0 px but it's still showing.
I'm trying to place it inside a solid colored bar that stretches across the full width of my page so I'd like to learn how to remove that white border. See image attached for example.
Is there a CSS Superfish uses that I can edit? Any suggestions?
Thanks,
Suzy
** EDIT **
Sorry guys, my mind is not functioning today - so, I found the CSS and I see a left and top border - I set it to 0 px but it's still showing.
Hi Tony,
I've removed every border in the CSS file and still cannot resolve the problem. I also tried using the Web Developer Add On for Firefox to look at the style values for each individual box in the menu and none of them show a border.
Am I going insane??
Suzy
I've removed every border in the CSS file and still cannot resolve the problem. I also tried using the Web Developer Add On for Firefox to look at the style values for each individual box in the menu and none of them show a border.
Am I going insane??
Suzy
do you have a url i could take a look at? hard to say what's going on otherwise.
Site is far from finished but peek at the nav
http://www.studiosuzette.com/site/...
http://www.studiosuzette.com/site/...
try this:
#sf-menu37 .sf-menu li { border:0px none !important; }
the important may not be entirely necessary. only use it if you need it.
#sf-menu37 .sf-menu li { border:0px none !important; }
the important may not be entirely necessary. only use it if you need it.
I've received emails and PMs from people asking how I removed the white border in SuperFish Menu so I thought I'd post the solution here as well.
"You will need to edit the view.php file in superfish/blocks/superfish. The lines you need are starting on line 31 "/*IE6 needs a border..." you can edit the color here.
Don't Delete the border! Just make it match the Button color or background color."
Hope this helps someone :)
Thanks goes to mikebhobbs for the solution. Cheers, Mike!
"You will need to edit the view.php file in superfish/blocks/superfish. The lines you need are starting on line 31 "/*IE6 needs a border..." you can edit the color here.
Don't Delete the border! Just make it match the Button color or background color."
Hope this helps someone :)
Thanks goes to mikebhobbs for the solution. Cheers, Mike!
hey Suzie, thanks for this answer!
If anyone, like me, is not using a solid color background and using an image instead, set the color in Suzie's answer to transparent.
I hope this helps somebody!
If anyone, like me, is not using a solid color background and using an image instead, set the color in Suzie's answer to transparent.
I hope this helps somebody!
This is the only think that worked for me. IT WORKED!
Customizing Superfish
Posted byMattWaters in Designers on Jan 25, 2011.
14 people like this. I like it too!
The Superfish add-on creates a JavaScript drop-down navigation menu for your site. Often, the first thing site owners want to do is customize its appearance and function beyond the options provided in edit mode. Here are a few commonly requested customizations that require only minor adjustments to the code.
Superfish is installed to your packages directory. To get started, copy each file you need to edit out of its default location (/packages/superfish/blocks/superfish) and into a new directory in your site's blocks folder (/blocks/superfish/). concrete5 will override the default Superfish files with the edited ones, while leaving the original files intact for future upgrades.
Set transparency
To set the menu's overall transparency, we'll need to add an opacity property to the superfish css. In a text editor, open packages/superfish/blocks/superfish/css/superfish.css and add an opacity declaration in the following class:
I chose 0.8, which gives an opacity of 80%. Setting the value to 1 would, of course, make a completely opaque menu.
To adjust the opacity of only sub-menu items, try adding an opacity setting to sub classes like .sf-menu ul li.
Disable drop shadow effect
The drop shadow is actually a background image. Look for this line:
And comment it out like so:
Disable arrows
Superfish adds a small arrow image (or an arrow text character in older browsers) when your nav includes sub-pages. If you don't want this,we'll need to edit the Superfish JavaScript, located in blocks/superfish/js/superfish.js.
Find:
And set it to false:
Alter or remove border styles
Wondering how to get rid of (or alter) the default 1px white border on SF's list items? You may have noticed that they're not set by superfish.css-- they're actually in view.php. This file contains some additional style declarations, most of which have been wrapped in php to make them editable through the block edit interface (background color etc).
The border styles, however, are static (at least as of version 1.1.3) and need to be altered manually. Fire up your text editor and check out around line 32 in view.php:
See those declarations at the very end? They're making your white borders. You can swap the hex color values out to whatever you like, or if you want to get rid of the borders-- comment out the styles all together:
(Be forewarned, though: omitting these borders styles could cause layout trouble in IE6, as noted by the comment in view.php. This is probably why they were left in place and not added to the GUI block edit dialogue).
I found this at this URL.
http://www.concrete5.org/documentation/how-tos/designers/customizin...
How come it is so hard to get a straight answer around here.
This could be so easy to use if when you answer a question you give a full answer. and not just a snippet of a answer.
If you cant help 100% Don't try to help!
Thank You
Customizing Superfish
Posted byMattWaters in Designers on Jan 25, 2011.
14 people like this. I like it too!
The Superfish add-on creates a JavaScript drop-down navigation menu for your site. Often, the first thing site owners want to do is customize its appearance and function beyond the options provided in edit mode. Here are a few commonly requested customizations that require only minor adjustments to the code.
Superfish is installed to your packages directory. To get started, copy each file you need to edit out of its default location (/packages/superfish/blocks/superfish) and into a new directory in your site's blocks folder (/blocks/superfish/). concrete5 will override the default Superfish files with the edited ones, while leaving the original files intact for future upgrades.
Set transparency
To set the menu's overall transparency, we'll need to add an opacity property to the superfish css. In a text editor, open packages/superfish/blocks/superfish/css/superfish.css and add an opacity declaration in the following class:
.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; opacity: 0.8; }
I chose 0.8, which gives an opacity of 80%. Setting the value to 1 would, of course, make a completely opaque menu.
To adjust the opacity of only sub-menu items, try adding an opacity setting to sub classes like .sf-menu ul li.
Disable drop shadow effect
The drop shadow is actually a background image. Look for this line:
.sf-shadow ul { background: url('../images/shadow.png') no-repeat bottom right; ... }
And comment it out like so:
.sf-shadow ul { /* background: url('../images/shadow.png') no-repeat bottom right; */ ... }
Disable arrows
Superfish adds a small arrow image (or an arrow text character in older browsers) when your nav includes sub-pages. If you don't want this,we'll need to edit the Superfish JavaScript, located in blocks/superfish/js/superfish.js.
Find:
autoArrows : true,
And set it to false:
autoArrows : false,
Alter or remove border styles
Wondering how to get rid of (or alter) the default 1px white border on SF's list items? You may have noticed that they're not set by superfish.css-- they're actually in view.php. This file contains some additional style declarations, most of which have been wrapped in php to make them editable through the block edit interface (background color etc).
The border styles, however, are static (at least as of version 1.1.3) and need to be altered manually. Fire up your text editor and check out around line 32 in view.php:
See those declarations at the very end? They're making your white borders. You can swap the hex color values out to whatever you like, or if you want to get rid of the borders-- comment out the styles all together:
/* border-top:1px solid #fff; border-left:1px solid #fff; */(Be forewarned, though: omitting these borders styles could cause layout trouble in IE6, as noted by the comment in view.php. This is probably why they were left in place and not added to the GUI block edit dialogue).
I found this at this URL.
http://www.concrete5.org/documentation/how-tos/designers/customizin...
How come it is so hard to get a straight answer around here.
This could be so easy to use if when you answer a question you give a full answer. and not just a snippet of a answer.
If you cant help 100% Don't try to help!
Thank You
i would recommend overriding the css in your site's main css file though (you might have to use !important in the css defination), cause otherwise you'll loose your changes if you do an update on that block later.