Changing the image: Revision

Last updated by jededitor

The ELGG you see at the top of a page is just an image.

Now make sure a copy of your new logo is placed into the graphic folder/directory of your theme folder/directory.

Go to your theme directory/folder then views > default > page_element and open the header_contents.php file with your text editor you will find these lines..

    <div id="site_logo">
        <a href="<?php echo $vars['url']; ?>">
            <img src="<?php echo $vars['url']; ?>mod/theme_yourchoiceof name/graphics/example-theme-logo.gif" border="0" />
        </a>
    </div>

Just change example-theme-logo.gif to whatever your logo image is.

Save the file.

Click on Administration > Tool Administration  and adjust the position of one of the plugins - NOT your theme one which should be at the bottom of the list.

Click Dashboard and refresh the page and you should see your logo sitting at the top of the page there.

Now it is likely that it will over flow the page content below it. So what you need to do then is to go to your theme folder/directory > views > default  and open css.php with your text editor

Find the following;

#layout_canvas {
    margin:0 0 20px 0;
    padding:20px;
    min-height: 360px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    background: white;
    border-bottom:1px solid #cccccc;
    border-right:1px solid #cccccc;
}

Now change the margin settings to move the position of your graphic and remember after every change to save the file.

Click on Administration > Tool Administration  and adjust the position of one of the plugins - NOT your theme one which should be at the bottom of the list.

Click Dashboard and refresh the page and you should see your logo sitting in its new position at the top of the page.

As an example the following correction

margin: 0px 5px 10px 3px;

Will give your image a top margin of 0 pixels, a right margin of 5 pixels, a bottom margin of 10 pixels, and a left margin of 3 pixels.

Now if your image is an odd size or you just want it placed in the centre of the page you can use the auto setting.

So changing the 5px (right margin) & 3px (left margin) to auto makes their values equal. This horizontally centers the image on the page. Maybe not a good idea to attempt to do this vertically though, as depending on the visitors browser, the image may end up anywhere on the page.

Continue changing the margin settings until you have your logo exactly where you want it.

Beginning Developers

Beginning Developers

This space is for newcomers, who wish to build a new plugin or to customize an existing one to their liking

History