Menu and drop downs -bkg and distance

DeeRich · March 7, 2015

I give up...been looking and looking and trying various applicable codes but haven't found yet what I want.

I would love to have all the backgrounds on the menu and drop down menus to be transparent. I have set my themes so that the links change color when hovered over, so I don't need colored backgrounds on the drop down menus.

Thanks in advance for help.

DeeRich
www.oursite.smugmug.com

Allen · March 7, 2015

Be nice if we could see the menu on your site. Go a long way on helping.

ChancyRat · March 8, 2015

DeeRich wrote: »

I give up...been looking and looking and trying various applicable codes but haven't found yet what I want.

I would love to have all the backgrounds on the menu and drop down menus to be transparent. I have set my themes so that the links change color when hovered over, so I don't need colored backgrounds on the drop down menus.

I'm not a code person, this was given to me by the super helpers on dgrin (probably Allen, who wants to see your page in question). This is code for an individual gallery, so the page node number fixes that. It also includes code that (I think) helps with IE 8. The main piece that you may be looking for:
use the rgba code, and add the degree of transparency, e.g., .98. An example page: http://www.joinrats.com/RatHealth/BANDAGINGRATS/AnchorTapeBandage/

/* Add color and transparency to header */
.sm-page-node-XXXXXX .sm-page-layout-region-top {
background-color: rgba(255, 255, 178, .98);
background-color: rgb(255, 255, 178);
box-shadow: 0px 0px 6px 0px #000000;
opacity: 0.98;                
filter: Alpha(opacity='98'); 
position: relative; z-index:1;
}

Allen · March 8, 2015

ChancyRat wrote: »

...

I tried everything I could find including what I use but nothing worked. I could change to a transparent
background but there is another background layer under it that I could not control.

DeeRich · March 9, 2015

Allen wrote: »

I tried everything I could find including what I use but nothing worked. I could change to a transparent
background but there is another background layer under it that I could not control.

Thanks so much Allen and Chancy. Guess I will just forget it. Since I added the code to change the "hover over and click color", I thought it would look nice and "clean" if the background on the sub-menus was transparent. However, I can live with it as is. I have already had great help on making the drop-down link background "box" smaller.

Thanks again!

DeeRich

ChancyRat · March 14, 2015

Sorry for the delay. I'm confused now:
Allen, you always solve these things

so - what do you mean?

I could change to a transparent
background but there is another background layer under it that I could not control.

DeeRich, could you say again what you want? I keep thinking you should be able to get this easily. Isn't what you are looking for, like this page? A more dramatic example to see the transparency: http://www.joinrats.com/Enrichment/Coconuts/

DeeRich · March 14, 2015

ChancyRat wrote: »

Sorry for the delay. I'm confused now:
Allen, you always solve these things so - what do you mean?

DeeRich, could you say again what you want? I keep thinking you should be able to get this easily. Isn't what you are looking for, like this page? A more dramatic example to see the transparency: http://www.joinrats.com/Enrichment/Coconuts/

Chancy, I love the easy to set up menu with "nested" links (sub-menus) on the new SmugMug, in fact, I like everything about the new Smugmug, but still, once in awhile I find something I would like to change, or add. I probably didn't do a good job in the first post explaining what I wanted...so I'll try again.

When you set up a menu with nested links, the top/visible/main menu link has a transparent background with no borders, or shading when hovered over...it's completely plain. The nested links have a faint color when hovered over, and, a border with shadowed edges. I just wanted all the nested links to have the same transparent background as the main menu link (with no hover over color or borders of any kind). A totally clean look.

However, since then, I realized that if there is NOT a background on the nested links, and they happen to pop-up/extend over a photo or text, it would be hard to read the nested links, as well as not look good. So, there is a reason why the background color is there.

STILL, in a situation where the nested links absolutely would not encroach on a photo or text, I would like transparency in the nested links just like the main link. Since I have set up every link to change color when hovered over, there is no mistaking what link one is about to open, so there would be no need for hover over shading or borders.

Chancy, you didn't ask for this, but here is the code to create a hover-over link color...this is done on the Theme, then click Advanced, scroll down and click the "Custom CSS" option. You can make the hover over color any color you want):

.sm-user-ui .sm-page-widget-nav-toplink a:hover {
color: #99668A !important;
}

By the way, I like your site. I have a friend who freaks at the very thought of a rat. I told her that was absolutely silly and unfounded, and that people actually had them as pets. I am going to send her your site link.

DeeRich
www.oursite.smugmug.com

ChancyRat · March 15, 2015

Chancy, you didn't ask for this, but here is the code to create a hover-over link color...this is done on the Theme, then click Advanced, scroll down and click the "Custom CSS" option. You can make the hover over color any color you want):

.sm-user-ui .sm-page-widget-nav-toplink a:hover {
color: #99668A !important;
}

Thank you! Added!

ChancyRat · March 15, 2015

in a situation where the nested links absolutely would not encroach on a photo or text, I would like transparency in the nested links just like the main link. Since I have set up every link to change color when hovered over, there is no mistaking what link one is about to open, so there would be no need for hover over shading or borders.

Your descriptions still seem to be saying to me what I thought they were saying ... but, to flush out if this is true or not, could you look at this page and tell me if it has the behavior you want for the transparency of the top header and the dropdown links, both of which have transparency?

http://www.joinrats.com/Enrichment/Coconuts/

Thanks for your kind comment on my site. Your friend might enjoy this video:
http://www.joinrats.com/Snuggling/i-zCzg4Cg/A
It's hard to see rats as negative after watching this one.

DeeRich · March 18, 2015

ChancyRat wrote: »

Your descriptions still seem to be saying to me what I thought they were saying ... but, to flush out if this is true or not, could you look at this page and tell me if it has the behavior you want for the transparency of the top header and the dropdown links, both of which have transparency?

http://www.joinrats.com/Enrichment/Coconuts/

Thanks for your kind comment on my site. Your friend might enjoy this video:
http://www.joinrats.com/Snuggling/i-zCzg4Cg/A
It's hard to see rats as negative after watching this one.

Hi,

What I mean is that when you hover the mouse over the top link/main one, you see absolutely nothing in the background...it's totally clear and you can see through to the background theme, just like the word "Home" on your joinrats.com site. This is how I would like to have my "sub", "nested" links. But, I can live without this feature.

The video of the rat in arm really is cute! My friend, however, is terrified of them, and I am trying to get her over her phobia, and show her they are not evil, and that all creatures respond to love.

I, personally, would not have a rodent pet, but I really did enjoy your site, and like that you are showing this side of the little creatures. It's very educational, and I can understand why some make pets out of them. Thanks for the educational site; I will be popping in again to look at more of it.

Menu and drop downs -bkg and distance

Comments