Artisteer Home Menu Image

A question was asked on creating a home image instead of a text link in the menu, using Artisteer Version 3 RC, this should not be hard to do so lets have a look at how we can achieve this.

We will use two new images the height of our menu and 60px wide, this will be different on different themes, we may want an home image a couple of chevrons [>>] or a clickable small logo image, but when we design our menu we must consider this.

Home Images

For our example we are going to use our Investica theme there is a download in the last part of the series you could follow along if you do not have a theme already.

In any WordPress exported Artisteer theme we will find the style.css, before we can create our menu images we will look to see the height of the menu items, we can see that ours is 43px;

/* begin MenuItem */
.art-hmenu a
{
position: relative;
display: block;
overflow: hidden;
height: 43px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
}

 

Opening the images folder we will find a png image called menuitem.png, looking at this we can see the three states of our menu items, the top bar is normal, the second is hover and the last is active, we are creating just two states, normal and active.

menuitem

 

How we create these images will depend on our theme, we created two images for our theme, menu-home.png and home-active.png and we made the width at 60px.

home home-active

style.css

For our images to appear in the menu we will need a new class for these so we can style them, we open style.css and add at the end of the file, notice the background url and the other attributes.

/* begin Home MenuItem */
.menu-home {
position: relative;
display: block;
overflow: hidden;
height: 43px;
width: 60px;
cursor: pointer;
background: url('images/home.png');
}
.home-active {
position: relative;
display: block;
overflow: hidden;
height: 43px;
width: 60px;
cursor: pointer;
background: url('images/home-active.png');
}

navigation.php

Artisteer have made it easy for us to apply these classes we only need to adjust two lines of code in the file /library/navigation.php

The position of these lines may be different in other Artisteer themes so we will show the line and the change, first we do not want any text on our home menu images.

We find the line that populates the home caption or title and sets the menu class.

$title = theme_get_option('theme_menu_homeCaption');
$active = is_home();
$items[] = new theme_MenuItem(array(
'id' => 'home',
'active' => $active,
'attr' => array('class' => ($active ? 'active' : ' '), 'href' => get_home_url(), 'title' => $title),
'title' => $title,
));

 

We want to remove the last part of this line ‘title’ and return an empty string, and also the menu class in the array ‘attr’, where we change the class from ‘ ‘ to menu-home and the active class from ‘active’ to  ‘home-active’

$title = theme_get_option('theme_menu_homeCaption');
$active = is_home();
$items[] = new theme_MenuItem(array(
'id' => 'home',
'active' => $active,
'attr' => array('class' => ($active ? 'home-active' : 'menu-home'), 'href' => get_home_url(), 'title' => $title),
'title' => '',
));

 

That is it all we need to do is test our changes, where we can see our active home image.

NOTE: this only works if we are not using a custom menu as the Artisteer home menu item is not included in the custom menu.

 

home-menu

 

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

4 thoughts on “Artisteer Home Menu Image

  1. Great!this website is just what I am looking for giving a goog feature to my creation!I will keep informed you about the progress of your suggestion!Thanks

  2. Please help – This is exactly what I’m trying to achieve, but my navigation.php is different & can’t see the line of code you need to change?

    I’m using Artisteer V3.0 standard edition if that makes any difference?
    Hope you can help as your tutorial is the very nearly perfect!

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Artisteer

googlefonts11.png

As Artisteer users one of the first things many of us do is add code to hide the titles, we often do this for the simple reason that the default fonts are safe and boring, so in this post we … Continue reading

Read More