Custom Hover Link Buttons

[snyhof]

Custom Hover Link Button and Template Setup

I thought I would share some code to add a little life to your custom templates. This is not just a simple mouse over effect, but a true link by touching the button cell image, not just the text.

No javascript, just css that you can add to your style.css file.

In the menu1 (menu2 or menu3) folder you will use any of the menu.skin files, but for this example I will use the TopMenu.skin.

TopMenu.skin:

<SiteBuilder:SiteMenu>
<ItemTemplate>
<tr class="topmenuhover" style="background-image:url($Theme$/images/topmenubutton_bg.gif); background-repeat: no-repeat" >
<td align="left"><a href='$Url$' class="atopmenu" runat="server" >$Title$</a></td>
</tr>
</ItemTemplate>
<SelectedItemTemplate>
<tr style="background-image:url($Theme$/images/topmenubuttonactive_bg.gif); background-repeat: no-repeat;">
<td align="left"><a href='$Url$' class="atopmenu" runat="server" >$Title$</a></td>
</tr>
</SelectedItemTemplate>
</SiteBuilder:SiteMenu>

The top <tr> tag has the class="topmenuhover". The second part of the code is the image file button called from the image folder.

When you move your mouse over any part of the tr cell your cursor chages to the hand and can be selected. I like the tr tag because it allows you to add any number of td's inside. Although I was not having much luck with it.

The CSS File:

/*top menu*/
tr.topmenuhover a {
/*display: block;*/
width: 180px; /*set the width of the hover field*/
height: 32px; /*set the height of the hover field - also sets the space between buttons - SEE .atopmenu*/
}
tr.topmenuhover a:hover {
color: #FFF; /*font color when mouse over*/
background-image:url(images/topmenubuttonactive_bg.gif);
background-repeat:no-repeat;
}

.atopmenu {
padding-left:10px; /*controls the menu text left margin*/
padding-top: 8px; /*controls the menu text top margin*/
font-size: 10pt;
font-weight: bold;
font-family: Tahoma, sans-serif;
color: #FFFFFF; /*font color*/
text-decoration: none;
height:32px; /*set the height of the button cell field - also sets the space between buttons - SEE tr.topmenuhover a*/
}

The height of both fields should be the same. My buttons were created at 30 px high, so setting the height to 32 px give me a 2 px gap between buttons.

You can of course get a lot more complex with images, spaces and other ways to design buttons, but this is a simple example of how to make a hover button.

You can use the <td> tag also for horizontel menus, but I haven't done that yet.

I do not have an example at this time because I am still setting things up and learning this system, but I will add an example in a week or two.

LATER:
Actually, I have decided to just include a zip file of the complete template, images and all. This is a simple template that you will figure out quit quickly by looking through all the files. Swsoft does not have an html template unless you download and combine several folders into a workable structure. You can see an example of this file tree by going here

Template

New Template with rotating images. This template works with IE and FF.
Template2


---------------

Dream Weaver:
When setting up a template in Dream Weaver you can change the Master.page file to Master.page.html.

Drag in your styles.css file into your source code or enter
<link rel="stylesheet" type="text/css" href="Themes/site/styles.css"> into the header.
(Where /site/ is, this is the theme color)

Temporary setup to work on your images:
Find/Replace in the Master.page.html source code:
$Theme$/images/...

Replace with Themes/color/images/
(Where color is the color of your theme.

When completed:
Find/Replace in the Master.page.html source code:
Themes/color/images/

Replace with $Theme$/images/
Save your file as Master.page

 

[snyhof]

Not Firefox Compatible

At the moment these hover buttons do not work in FireFox.
I will need to setup a spacer or .gif to create the correct spacing in FF.

Also, in FF you must hover over the text link to activate the button effect.

Everyone who is a developer of some sort likes FF, and I do to for it's developer tools, but I sure get tired of designing for FF when I know 99% + of my customers are IE users.

FF either needs to get with the program and support many functions/scripts/codes or get out of the way.

 

[Alex Klimov]

Thanks for ideas, I've redirected them to "design templates" people

 

[snyhof]

FF and IE Compatible

I found an idea while searching and this works now in FF and IE.

Horizontal Menu

td.topmenuhover a {
display: block;
padding-top: 5px;
padding-left: 10px; /*Padding between text and left td */
padding-right: 10px; /*Padding between text and right td */
height: 29px!important; /*Used for FF */
height: 34px; /*set the height of the hover field - also sets the space between buttons - SEE .amenu*/
}

I have added the second "height" with !important for FF
Note that the padding is set to 5px. The difference between the two heights.

Vertical Menu

/*sub menu*/
tr.submenuhover a {
display: block;
width: 167!important;
width: 200px;
height: 25px; /*set the height of the hover field - also sets the space between buttons - SEE .amenu*/
}
tr.submenuhover a:hover {
color: #FFFFFF; /*font color when mouse over*/
text-decoration:none;
font-weight: normal;
/*background-color:#0000CC;*/
background-image:url(images/submenubuttonhover_bg.gif);
background-repeat:no-repeat;
}

.asubmenu {
padding-left:33px; /*controls the menu text left margin*/
padding-top: 4px; /*controls the menu text top margin*/
font-size: 10pt;
font-weight: normal;
font-family: arial;
color: #000000; /*font color of non active button*/
text-decoration: none;
height: 21px!important;
height:25px; /*set the height of the button cell field - also sets the space between buttons - SEE tr.submenuhover a*/
}

.submenu {
padding-left:33px; /*controls the menu text left margin*/
padding-top: 4px; /*controls the menu text top margin*/
font-size: 10pt;
font-weight: normal;
font-family: arial;
color: #1D53AD; /*font color of active button*/
text-decoration: underline;;
height: 21px!important;
height:25px; /*set the height of the button cell field - also sets the space between buttons - SEE tr.submenuhover a*/
}

I have added the second "height" with !important for FF
Note that the padding is set to 4px. The difference between the two heights.

I also added the display: block; back in - you need it for FF.

 

[m.r.davies]

problem installing your template

Hi snyhof

I've downloaded your template and tried to install it but installer gets to 1 second remaining, then errors with
"an error occurred while updating site builder database. Installation is not complete."

i've tried running it directly from the download, and i've also tried to "compile template pack" ... it compliles, generates the MSI, but when i copy to the server and try and run i get the above error

dont suppose you have any ideas?

 

[snyhof]

Post removed

 

[m.r.davies]

Thanks
I've figured it out

We renamed the server, but that broke a lot of sql connections, so we renamed it back

....however, site builder got a bit confused so i had to edit the connection string following an article on the FAQ section of this site
(make sure you edit all the files in the article)

Cheers

 

[snyhof]

I'll upload one with a horizontal and vertical navigation to this post.

Please explain yourself further on connection strings to help others - what did you do to fix it?
Are you also saying that the zip file was ok?

 

[m.r.davies]

I've edited my previous post

....and yes your 2 templates work great!

Thanks