News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

How to change dropmenu background image?

Started by MileMijatovic, November 21, 2014, 02:51:52 PM

Previous topic - Next topic

MileMijatovic

I want to change dropmenu background image (first picture in attachment)

So I want this background image (second image)

But when I type a code in css - .dropmenu {box-shadow:0 2px 2px rgba(0,0,0, .5);display:block;width:977px;height:38px;padding:0;overflow:hidden;background-image:url(hxxp:localhost/Themes/mobile-desktop/images/mmm_bg.png; [nonactive]}

And when I refresh page I get this - (third picture)
Please help me how to do this?


This is my css code for dropmenu

.dropmenu {box-shadow:0 2px 2px rgba(0,0,0, .5);display:block;width:977px;height:38px;padding:0;overflow:hidden;background-image:url(hxxp:localhost/Themes/mobile-desktop/images/mmn_bg.png; [nonactive]}
.dropmenu li{float:left;position:relative;list-style:none;}
.dropmenu a{font-weight:bold;text-decoration:none;display:block;padding:6px 12px;text-shadow: 0px 1px 1px #FFF;border-radius:10px;}
.dropmenu .current a, .dropmenu li:hover > a{color:#000;box-shadow:0 2px 2px rgba(0,0,0, .7);-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);text-shadow:0 2px 2px rgba(255,255,255, 0.7);}
.dropmenu ul li:hover a, .dropmenu li:hover li a{background:none;border:none;color:#000;}
.dropmenu ul li a:hover{background:#1e5799;color:#fff;border-radius:10px;text-shadow:0 2px 2px rgba(0,0,0, 0.7);}
.dropmenu ul li:first-child > a{-moz-border-radius-topleft:10px;-moz-border-radius-topright:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;}
.dropmenu ul li:last-child > a{-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;}
.dropmenu li:hover > ul{opacity:1;visibility:visible;}
.dropmenu ul{opacity:0;visibility:hidden;padding:0;width:175px;position:absolute;z-index: 1;}
.dropmenu ul li{float:none;margin:0;}
.dropmenu ul a{font-weight:normal;text-shadow:0 2px 2px rgba(255,255,255, 0.7);}
.dropmenu ul ul{left:160px;top:0px;}
.buttonlist ul{z-index:100;padding:5px;margin:0 0.2em 5px 0;}
.buttonlist ul li{margin:0;padding:0;list-style:none;float:left;}
.buttonlist ul li a{display:block;font-size:0.8em;color:#000;background:#e8e8e8;padding:0 0 0 8px;margin-left:12px;text-transform:uppercase;cursor:pointer;}
.buttonlist ul li a:hover{background:#f9c667;color:#fff;text-decoration:none;}
.buttonlist ul li a span{background:#e8e8e8;display:block;height:19px;line-height:19px;padding:0 8px 0 0;}
.buttonlist ul li a:hover span{background:#f9c667;}
.buttonlist ul li a.active{background:#5a6c85;color:#fff;font-weight:bold;}
.buttonlist ul li a.active span{background:#5a6c85;}
.buttonlist ul li a.active{font-weight:bold;}
.buttonlist ul li a.active:hover{color:#ddf;}
.align_top ul li a, .align_bottom ul li a{margin:0 12px 0 0;}

Kindred

get rid of this

http:localhost


why would you have a url with localhost anyway?
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

MileMijatovic

I dont understand you Kindred, what do you mean? To delete just http:localhost but what's the path to the picture then?

Kindred

path to the picture would be
"/Themes/mobile-desktop/images/mmm_bg.png"

however... if you need to have a full url, then you need more than localhost

Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."


Kindred

Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Advertisement: