Okay what we are going to do now is change a few things in the top bar at the top of the page.

First if you want to remove the top bar, and you should only do this if you have a replacement method for navigating around your ELGG site ( see a Replacing the Top Bar with a Widget/Plugin).

Go to your theme directory/folder > views > default > pageshells and open pageshell.php in your text editor.

Find the following line and delete it...

<?php echo elgg_view('page_elements/elgg_topbar', $vars); ?>

Now save the file, click on Administration > Tool Administration and adjust the position of one of the plugins (remember to make sure your theme is the bottom of the list) Then click on Dashboard and refresh your screen and the changes should be apparent.

Next up is changing the colour of the top bar to suit.

First go to _graphics and copy toptoolbar_background.gif elgg_toolbar_logout.gif toolbar_messages_icon.gif and elgg_toolbar_logo.gif to your theme directory/folder > graphics.

Next use your text editor to open your theme directory/folder > views > default > css.php.

Find the following...

#elgg_topbar {
    background:#333333 url(<?php echo $vars['url']; ?>_graphics/toptoolbar_background.gif) repeat-x top left;
    color:#eeeeee;
    border-bottom:1px solid #000000;
    min-width:998px;
    position:relative;
    width:100%;
    height:24px;
    z-index: 9000; /* if you have multiple position:relative elements, then IE sets up separate Z layer contexts for each one, which ignore each other */
}

Change _graphics/toptoolbar_background.gif to mod/(your theme folder or directory name)/graphics/toptoolbar_background.gif

Find the following

#elgg_topbar_container_right a {
    color:#eeeeee;
    margin:0 5px 0 0;
    background:transparent url(<?php echo $vars['url']; ?>_graphics/elgg_toolbar_logout.gif) no-repeat top right;
    padding:0 21px 0 0;
    display:block;
    height:20px;
}

Change _graphics/elgg_toolbar_logout.gif to mod/(your theme folder or directory name)/graphics/elgg_toolbar_logout.gif

Find the following

}
#elgg_topbar_container_left a.privatemessages {
    background:transparent url(<?php echo $vars['url']; ?>_graphics/toolbar_messages_icon.gif) no-repeat left 2px;
    padding:0 0 4px 16px;
    margin:0 15px 0 5px;
    cursor:pointer;
}
#elgg_topbar_container_left a.privatemessages:hover {
    text-decoration: none;
    background:transparent url(<?php echo $vars['url']; ?>_graphics/toolbar_messages_icon.gif) no-repeat left -36px;
}
#elgg_topbar_container_left a.privatemessages_new {
    background:transparent url(<?php echo $vars['url']; ?>_graphics/toolbar_messages_icon.gif) no-repeat left -17px;
    padding:0 0 0 18px;
    margin:0 15px 0 5px;
    color:white;
}

Change every instance of _graphics/toolbar_messages_icon.gif to mod/(your theme folder or directory name)/graphics/toolbar_messages_icon.gif

Save the file.

Next use your text editor to open your theme directory/folder > views > default > page_elements > elgg_topbar.php.

Find the following...

<div id="elgg_topbar_container_left">
    <div class="toolbarimages">        <a href="http://www.elgg.org" target="_blank"><img src="<?php echo $vars['url'];?>_graphics/jed_elgg_toolbar_logo.gif" /></a>
        
        <a href="<?php echo $_SESSION['user']->getURL(); ?>"><img class="user_mini_avatar" src="<?php echo

$_SESSION['user']->getIcon('topbar'); ?>"></a>
        
    </div>

Change _graphics/elgg_toolbar_logo.gif to mod/(your theme folder or directory name)/graphics/elgg_toolbar_logo.gif

Now save the file, click on Administration > Tool Administration and adjust the position of one of the plugins (remember to make sure your theme is the bottom of the list) Then click on Dashboard and everything should look normal.

Next open up your graphics editor and load the following; theme directory/folder > mod > graphics > toptoolbar_background.gif

Change the colour to suit and then save the file. Now click on Administration > Tool Administration and adjust the position of one of the plugins (remember to make sure your theme is the bottom of the list) Then click on Dashboard and refresh your screen and the changes should be apparent.

Now you will notice that the ELGG logo at the extreme left of the top bar is still in the old top bar colour so open up elgg_toolbar_logo.gif in your graphics program and change the background to your selected color or better, if your capabilities are up to it, make the the background transparent.

Now save the file. Now click on Administration > Tool Administration and adjust the position of one of the plugins (remember to make sure your theme is the bottom of the list) Then click on Dashboard and refresh your screen and the changes should be apparent.

Looking good? Okay at the extreme right of the top bar you will notice that the logout logo still has a little bar of the old top bar colour running along the bottom so open elgg_toolbar_logout.gif in your graphics program and change the relevent colour to the same one as the others.

Now save the file. Now click on Administration > Tool Administration and adjust the position of one of the plugins (remember to make sure your theme is the bottom of the list) Then click on Dashboard and refresh your screen and the changes should be apparent.

Check the mail logo and if it needs changing open up your graphics editor and load the following; theme directory/folder > mod > graphics > toolbar_messages_icon.gif

Change the colour to suit and then save the file. Now click on Administration > Tool Administration and adjust the position of one of the plugins (remember to make sure your theme is the bottom of the list) Then click on Dashboard and refresh your screen and the changes should be apparent.

So while your admiring the changes you probably notice that the text may be a bit indistinct due to your choice of colours so use your text editor to open your theme directory/folder > views > default > css.php.

Find the following which changes the colour of things like settings/administration/chat etc.

#elgg_topbar_container_left a.usersettings {
    margin:0 0 0 20px;
    color:#999999;
    padding:3px;
}
#elgg_topbar_container_left a.usersettings:hover {
    color:#eeeeee;
}

Change to color settings to one that suits and then save the file. Now click on Administration > Tool Administration and adjust the position of one of the plugins (remember to make sure your theme is the bottom of the list) Then click on Dashboard and refresh your screen and the changes should be apparent.

Now sit back and admire your new topbar.