close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 or 2018 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Main Menu Level - Different Backgrounds?

Thread began 7/18/2010 10:54 am by elevy388997 | Last modified 7/29/2010 1:52 pm by Jason Byrnes | 1638 views | 21 replies |

elevy388997Beta Tester

Main Menu Level - Different Backgrounds?

I am trying to make a custom menu in CSS Menu Writer for my dwt but wish to have different background images for each button. I will then take this menu and use it as a preset in site sculptor.

To show you in context, here is the website I am moving over to site sculptor CMS so the client can change information themselves:

AboutUs.html

The navigation is vertical and requires different colors for each one. How can I accomplish this since the CSS menu writer only does it by level and not each item?

Here is the CSSMenuWriter/cssmw_content/menu.CSS:

"ul#cssmw_content {
cursor: default;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 0;
}
ul#cssmw_content ul {
cursor: default;
font-size: 0;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#cssmw_content ul li {
background-image: none;
}
ul#cssmw_content li {
background-image: none;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
z-index: 100;
}
ul#cssmw_content li ul {
display: none;
top: 0;
}
ul#cssmw_content li:hover > ul {
display: block;
position: absolute;
}

ul#cssmw_content li.hover > ul {
display: block;
position: absolute;
}

ul#cssmw_content li.current > ul {
position: absolute;
}
ul#cssmw_content > li {
background-image: none;
}
ul#cssmw_content > li > a, ul#cssmw_content > li > a:link {
background-image: url("../cssmw_content_images/AboutUs.png");
border-bottom-color: #fff;
border-bottom-width: 1px;
border-right-color: #fff;
border-right-width: 1px;
color: #173232;
display: block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
height: 125px;
margin: 0 0 0 0;
padding: 0px 0px 0px 0px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
outline-style: none;
}
ul#cssmw_content > li > a:active, ul#cssmw_content > li > a:focus {
background-color: #EBEBEB;
color: #173232;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw_content > li:hover > a, ul#cssmw_content > li:hover > a:link {
color: #173232;
font-weight: bold;
text-decoration: none;
outline-style: none;
}

ul#cssmw_content > li.hover > a, ul#cssmw_content > li.hover > a:link {
color: #173232;
font-weight: bold;
text-decoration: none;
outline-style: none;
}

ul#cssmw_content > li.current > a.current, ul#cssmw_content > li.current > a.current:link {
color: #173232;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
"

Thanks

Sign in to reply to this post

Jason ByrnesWebAssist

This cannot be accomplished in the menu.css file, you need add an inline style to the top level menu elements. For example, the top level menu item may be:

<li><a href="home.html">Home</a></li>



to give that item a unique background color, add an inline style to the anchor:

<li><a href="home.html" style="background-color:red;">Home</a></li>
Sign in to reply to this post

elevy388997Beta Tester

Ok, so in the menu.php such as:

<li><a href="<?php echo($assumedRoot); ?>about.php" style="background-image:url(../cssmw_content_images/AboutUs.png)"></a></li>



I changed all my navigation links to this and they are all missing. Also, I don't want text that is why there is no label.

Sign in to reply to this post

Jason ByrnesWebAssist

there has to be something for the a tag, try this instead:

<li><a href="<?php echo($assumedRoot); ?>about.php" style="background-image:url(../cssmw_content_images/AboutUs.png)">&nbsp;</a></li>



if you are still having a problem send a link where i can investigate the cause.

Sign in to reply to this post

elevy388997Beta Tester

hmm, still not working. The thing is there was an image before, it just made ALL links that same image. Which is where I got the idea to try and add code to the menu.css.

The website is live but currently doesn't have CMS, so I am trying to do everything locally which may be causing a problem.

I am contacting the client now to let them know I am taking the site down to put up this CMS one. Make things a bit easier for me since I never have luck working locally.

Sign in to reply to this post

Jason ByrnesWebAssist

it is possible the path to the image needs to be adjusted. if you post a link, I can look into the issue further.

Sign in to reply to this post

elevy388997Beta Tester

Another thing, all my other sites with CMS have worked fine but on uploading of this one, it says i need php5 or higher and the permissions need looked at. I haven't changed anything. I deleted all files from remote server and it still is saying i need things.

I contacted my hosting provider and they say, confirming what i though, that it has the most recent php package and there are no restrictions on my file permissions. So something in the code is preventing me from proceeding.

This is what I get:

PHP 4.4.7
PHP 5 or greater is required. Contact your hosting provider to upgrade your PHP server.

GD Image Library
GD Image Library [bundled (2.0.28 compatible)] is installed.

File Permissions
Files and directories cannot be created. Verify the Site Sculptor directory has write permissions on your server.

Sign in to reply to this post

Jason ByrnesWebAssist

create a new php file, name it phpinfo.php and add the following code:

php:
<?php phpinfo(); ?>




Then upload this to your server and post back the link.

Sign in to reply to this post

elevy388997Beta Tester

So my dumb self forgot to change my dreamweaver settings for my new server...so I am uploading everything to the new site and I will let you know when it is up. Locally testing, the css menu writer still is blank when I put in the code for style background images.

Sign in to reply to this post

Jason ByrnesWebAssist

please let me know when you can provide a link.

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...