Replacing the Login/Logout text with images

[thewillistree]

I've more or less got my home page how I want it, but quite fancy changing the usual Login / Logout text (beneath the Welcome section) and using images instead (see below).

Can some kind person advise me which code I need to amend to make this happen?

[Brett]

Can some kind person advise me which code I need to amend to make this happen?

Check out the line that includes <a href=\"$cms[tngpath]login.php\">Log in</a> or similar in your index file.

Replace Log in with an img tag like <img src="login.jpg">

same for the logout line but other image.

[thewillistree]

Thanks Brett

The line in my index file goes like this:

<?php
                                    if( $currentuser ) {
                                        echo "<a href=\"logout.php\" class=\"sidelink\"><strong>" . strtoupper($text[mnulogout]) . "</strong></a>\n";
                                    }
                                    else {
                                        echo "<a href=\"login.php\" class=\"sidelink\"><strong>" . strtoupper($text[mnulogon]) . "</strong></a>\n";
                                    }
?>

So not quite certain which bit to replace with your suggestion...#

Paul

Check out the line that includes <a href=\"$cms[tngpath]login.php\">Log in</a> or similar in your index file.

Replace Log in with an img tag like <img src="login.jpg">

same for the logout line but other image.

[svoght]

Your current template is designed to work with multiple languages, so the actual "log in" and "log out" text are called via the variables $text[mnulogout] and $text[mnulogin]. If you're only using one language you can revise the code as follows:

<?php
    if( $currentuser ) {
        echo "<a href=\"logout.php\" class=\"sidelink\"><img src=\"path/to/logout.jpg\" width="\150px\" height=\"66px\" alt=\"Log out\" /></a>\n";
    }
    else {
        echo "<a href=\"login.php\" class=\"sidelink\"><img src=\"path/to/login.jpg\" width="\150px\" height=\"66px\" alt=\"Log in\" /></a>\n";
    }
?>

Obviously substitute the actual path to the images in lieu of path/to/image.jpg, and the width and height I provided above are based on the width and height of the images you posted here, so change those values if you revise the size and shape of either image.

[thewillistree]

Thanks for that - I knew there must be a simple reason why it was different!

Thanks too for the script - I've amended my index.php page and its working fine.

Paul

Your current template is designed to work with multiple languages, so the actual "log in" and "log out" text are called via the variables $text[mnulogout] and $text[mnulogin]. If you're only using one language you can revise the code as follows:

<?php
    if( $currentuser ) {
        echo "<a href=\"logout.php\" class=\"sidelink\"><img src=\"path/to/logout.jpg\" width="\150px\" height=\"66px\" alt=\"Log out\" /></a>\n";
    }
    else {
        echo "<a href=\"login.php\" class=\"sidelink\"><img src=\"path/to/login.jpg\" width="\150px\" height=\"66px\" alt=\"Log in\" /></a>\n";
    }
?>

Obviously substitute the actual path to the images in lieu of path/to/image.jpg, and the width and height I provided above are based on the width and height of the images you posted here, so change those values if you revise the size and shape of either image.

[RPennington]

Hi I have tried looking at the code on mine and don't see what or where I need to change these.

Here is what is in my index:

include($cms['tngpath'] . "checklogin.php");

echo tng_header($text['mnuheader'], '');

I have looked at the login.php but don't see what to change. Any clues?

[svoght]

Hi I have tried looking at the code on mine and don't see what or where I need to change these.

Here is what is in my index:

include($cms['tngpath'] . "checklogin.php");

echo tng_header($text['mnuheader'], '');

I have looked at the login.php but don't see what to change. Any clues?

You shouldn't edit anything within login.php (or logout.php) -- this is a modification to the code on the index page that links to those two pages. The precise location within the index.php file will depend on the specific template that you're using, but the overall concept (and the if/else code itself) will be the same in any template.

[RPennington]

You shouldn't edit anything within login.php (or logout.php) -- this is a modification to the code on the index page that links to those two pages. The precise location within the index.php file will depend on the specific template that you're using, but the overall concept (and the if/else code itself) will be the same in any template.

This is where I'm confused.

I do not have this: <a href=\"$cms[tngpath]login.php\">Log in</a> or similar in your index file.

in my index file just the code that I showed in above post.

Im using template 6.

Not sure what to do. Not an expert coder here.

Here is what is in my Topmenu.php for the code. Tried replacing it and get errors

<?php

echo tng_icons(1);

global $currentuser, $currentuserdesc, $flags;

$flags['noicons'] = 1;

if( $currentuser) {

echo "<span class=\"headertext\">$text[welcome], $currentuserdesc</span>&nbsp;";

echo "<a href=\"$cms[tngpath]logout.php\"><span class=\"headertext-sm\">$text[mnulogout]</span></a>";

}

else {

echo "<span class=\"headertext\">$text[anon]</span>&nbsp;";

echo "<a href=\"$cms[tngpath]login.php\"><span class=\"headertext-sm\">$text[mnulogon]</span></a>";

}

?>

[svoght]

This is where I'm confused.

I do not have this: <a href=\"$cms[tngpath]login.php\">Log in</a> or similar in your index file.

in my index file just the code that I showed in above post.

Im using template 6.

Not sure what to do. Not an expert coder here.

Here is what is in my Topmenu.php for the code. Tried replacing it and get errors

<?php

echo tng_icons(1);

global $currentuser, $currentuserdesc, $flags;

$flags['noicons'] = 1;

if( $currentuser) {

echo "<span class=\"headertext\">$text[welcome], $currentuserdesc</span> ";

echo "<a href=\"$cms[tngpath]logout.php\"><span class=\"headertext-sm\">$text[mnulogout]</span></a>";

}

else {

echo "<span class=\"headertext\">$text[anon]</span> ";

echo "<a href=\"$cms[tngpath]login.php\"><span class=\"headertext-sm\">$text[mnulogon]</span></a>";

}

?>

If you're using Template 6 then you've made some major changes to the index.php file that comes with it, because there's a lot more to that file than what you've posted above.

However, in this template you're correct to look in topmenu.php because the login/logout data is located there for this specific design. That said, changing the words "Log In" and "Log Out" to a graphic in this template will lead to a rather weird-looking page unless you do a lot to modify the login/logout graphic from the one shown earlier in this thread. You should think carefully about how a graphical button instead of a text link will fit into your site design, and only if you think it will improve the appearance then you should make the change. If you could provide a link to your site others might have suggestions as well.

If you do decide to use a graphical button for login/logout, you will make essentially the same change as outlined above, just in this part of your topmenu.php file:

<?php
echo tng_icons(1);
global $currentuser, $currentuserdesc, $flags;
$flags['noicons'] = 1;

if( $currentuser) {
    echo "<span class=\"headertext\">$text[welcome], $currentuserdesc</span> ";
    echo "<a href=\"$cms[tngpath]logout.php\"><img src=\"path/to/logout.jpg\" width=\"#px\" height=\"#px\" alt=\"log out\" /></a>";
}
else {
    echo "<span class=\"headertext\">$text[anon]</span> ";
    echo "<a href=\"$cms[tngpath]login.php\"><img src=\"path/to/login.jpg\" width=\"#px\" height=\"#px\" alt=\"log in\" /></a>";
}
?>

Once again, substitute the path to the images in lieu of "path/to/image.jpg", and insert the pixel sizes of each image into the width/height where #px is right now. It's also critical that you retain the slashes that are protecting the quotation marks, precisely as entered above, or you will get PHP errors.

[RPennington]

Thanks for the coding. Yes that worked, however it didn't look right. I found someone who has it done right, but I don't no how to put it in like that. Here's there website:

http://www.robertsfamilytree.org/genealogy/index.php

and Here's my site:

http://www.jensen-phelps.org

[svoght]

however it didn't look right...

Can you expand on this? Why didn't it look right? Was it the wrong color, wrong placement, wrong alignment, too big, doesn't fit the style of the rest of the site, too much empty space at the top? Solutions depend on details.

[RPennington]

Can you expand on this? Why didn't it look right? Was it the wrong color, wrong placement, wrong alignment, too big, doesn't fit the style of the rest of the site, too much empty space at the top? Solutions depend on details.

It didn't match the brown background like the other persons website that I showed the link too.. It was a white block with the login logo. It was problanly because of the css. Not sure.

[svoght]

It didn't match the brown background like the other persons website that I showed the link too.. It was a white block with the login logo. It was problanly because of the css. Not sure.

The other person edited the graphic and changed the colors for their site. You must have used the one posted in this thread which has blue text and a white background, which matches the design of that person's site. If you want a brown background you will need to edit the image, or create a new one with a font and color scheme that matches your design.

[thewillistree]

Hi there

Thought I'd jump in and let you know how I made the 'Log In' and 'Log Out' images. I used OpenOffice Impress (similar to MS PowerPoint) and typed the text with a suitable handwriting font . With Impress/Powerpoint you can set the colours of the text and background. Then I exported it as a jpg file and used my image editor to crop it and adjust the size of the image. Et voila!

Hope that helps...

The other person edited the graphic and changed the colors for their site. You must have used the one posted in this thread which has blue text and a white background, which matches the design of that person's site. If you want a brown background you will need to edit the image, or create a new one with a font and color scheme that matches your design.