Use Logo Instead of Site Name

Permalink 1 user found helpful
Is it possible to use a logo instead of the Site Name or force c5 not to display a site name by default.

Thanks
View Replies:
jizzle replied on at Permalink Reply
jizzle
Yes, this would be done in your layout template.
mliving replied on at Permalink Reply
Do you mean Page Types under Pages and Themes?

Where do I find the layout template?

Thanks for the quick reply.

Much appreciated.
ScottC replied on at Permalink Reply
ScottC
I don't have the code open, watching 24 right now, well commercial.

If you look at a later release on the default theme, you will see a href in the header that links to the homepage. Since it is an href it can take anything that can be clicked as a link back to the home page, be it an echoed out string of the sitename as specified in install and in the dashboard, or with very slight tweaking this really sweet image that just so happens to be your logo that just so happens to link back to your homepage.
MotionKit replied on at Permalink Reply
Hello:

I'm having the same issue with adding logo in place of the Site Name.

Could someone please post a detailed description of how to do this by modifying the code?

Much appreciated.
ScottC replied on at Permalink Reply
ScottC
You are going to have some code that looks like this, if you use the same coding guidelines as they used in the RC2 of Concrete5.2 under default theme, elements, header.php You should mirror this with your template.

<div id="headerNav">
         <?php 
         $a = new Area('Header Nav');
         $a->display($c);
         ?>
      </div>
      <h1 id="logo"><a href="<?php echo DIR_REL?>/"><?php echo SITE?></a></h1>
      <?php 
      // we use the "is edit mode" check because, in edit mode, the bottom of the area overlaps the item below it, because
      // we're using absolute positioning. So in edit mode we add a bit of space so everything looks nice.
      ?>
      <div class="spacer"></div>


The bit we are interested in changing is here:

<h1 id="logo"><a href="<?php echo DIR_REL?>/"><?php echo SITE?></a></h1>


Which reads as: a h1 tag with the id (css class) of logo that contains a href(link). The ?php echo statement pulls DIR_REL (your siteroot/homepage where index.php sits. Inside of this href tag it outputs your site's well name followed by a close to the href by the </a> and a close of the h1 tag.

Code to change:

<h1 id="logo"><a href="<?php echo DIR_REL?>/"><?php echo SITE?></a></h1>


to:

<span id="logo"><a href="<?php echo DIR_REL ?>/"><img src="<?php echo $this->getThemePath()?>/images/logo.png" alt="logo" /></a></span>


This code assumes that you have a folder named images in your theme, and that this folder contains a logo that is saved in the png. format that is named logo.png

I also changed the h1 to a span (could be anything or removed entirely) because you might get some weird padding with CSS and how h1 tags are handled differently between browsers if they don't have a css attribute provided.

That help?
mliving replied on at Permalink Reply
Scott,

Thanks for the excellent step through the process.

I think the plain english explains are awesome and really help make sense of the code for us non-php'rs. :)

Regards
M@
MotionKit replied on at Permalink Reply
Much thanks, really appreciate your help and time with this.
MotionKit replied on at Permalink Reply
I implemented per your instructions and all looks good. The one issue now is the Main Nav buttons have been spaced upward. So now there is a gap between Nav buttons and the dotted line. You can see here:

http://www.spincreativegroup.com/test/...

Any ideas of how to fix this?
Remo replied on at Permalink Reply
Remo
There are a lot of different ways to fix this. You might want to try this:

In your css, look for this line:
#page #header #headerNav{ position: absolute; top: 14px; right: 0px; z-index:2; width:100%; overflow:visible;}


add a padding there. For example:
#page #header #headerNav{ position: absolute; top: 14px; right: 0px; z-index:2; width:100%; overflow:visible; padding-top: 30px;}


I haven't tested this but I guess it should work...
MotionKit replied on at Permalink Reply
Thanks for the info, I got it aligned how I want it.
danct replied on at Permalink Reply
I'm still hung up on how to even access the script. Can you please point me in the right direction?
maximusbean replied on at Permalink Reply
maximusbean
I read the instructions on how to do this with plain yogurt (see below) but the code is different in green salad
maximusbean replied on at Permalink Reply
maximusbean
<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>

<!-- Site Header Content //-->
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />


<?php Loader::element('header_required'); ?>


</head>
<body>
maximusbean replied on at Permalink Reply
maximusbean
synlag it's in the page types
Jun 09, 2009 at 11:18 PM
...
<h1 id="logo"><a href="<?=DIR_REL?>/"><?=SITE?></a></h1>
...


you've to modify the

home.php
full.php
default.php

to:


<span id="logo"><a href="<?php echo DIR_REL ?>/"><img src="<?php echo $this->getThemePath()?>/images/logo.png" alt="logo" /></a></span>
orisinal replied on at Permalink Reply
orisinal
No no no, this solution is not recommended, I'm sorry. What if user has a device that doesn't show images nor process advanced CSS styles (most mobile devices), or he is using screen reader? Those browsers wouldn't understand that <span id="logo"> was header of the page. Mobile device users sees the site beginning like "logoThis is the beginnig of my content", as logo is in span and not div. And even if screen reader would read that element for some reason, user hears just "logo". I could continue this list a long time, but unfortunately some people just think "who cares?".

Better solution is a lot easier. You don't need to change anything from the templates. It's quite accessible like it is. Instead make changes to CSS (main.css).

#page #header #logo {
width: 250 px; /* width of your logo image */
height: 100 px; /* height of your logo image */
background: transparent url(images/logo.png) top left no-repeat;
text-indent: -100em;
}

Text-indent with -100em value moves the header text (not the image) out of screen, but screen readers, mobile devices etc. deal with them properly. This isn't however the perfect solution, as if you turn off images in modern browser (also some mobile devices), you'll get a blank box.
Mnkras replied on at Permalink Reply
Mnkras
i do not suggest using the /images/logo.png i suggest uploading it to the concrete5 filemanager and getting the ling eg: index.php/view_inline/-/12
Remo replied on at Permalink Reply
Remo
why? just because it allows you to replace the logo using the filemanager?

using such an url has a few disadvantages as well:
- worse caching
- worse performance due to several checks
..
Sergio replied on at Permalink Reply
Sergio
Another aproach, which I think it's better, is to combine @orisinal solution with a little html change:

<h1 id="logo"><a href="<?=DIR_REL?>/"><img src="" alt="<?=SITE?>"></a></h1>

#logo a{
display: block;
width: 250 px; /* width of your logo image */
height: 100 px; /* height of your logo image */
background: transparent url(images/logo.png) top left no-repeat;
}
#logo img {
display: none;
}

Why an empty image?
1 - Normal user with images disabled will see the alt text.
2 - Screen reader will "say" the alt text.
3 - CSS disabled users (or using some cellphones) will see the alt text.
orisinal replied on at Permalink Reply
orisinal
> 1 - Normal user with images disabled will see the alt text.

Hmm...no? That img has display:none, so it hides the img element totally, with alt text.

> 2 - Screen reader will "say" the alt text.

Almost every screen reader ignores elements, that are hidden from screen with display:none;

3 - CSS disabled users (or using some cellphones) will see the alt text.

Yes, but browsers may struggle with that empty src and it's not valid for sure. Browsers may try to load the image from the current file (like action="" with forms) or from "/null". The first one causes page loading twice, but yes, it shows the alternative text after that.
Sergio replied on at Permalink Reply
Sergio
Yeap orisinal you're right!
I didn't think further.

:)

thanks!
orisinal replied on at Permalink Reply
orisinal
So far "Shea method" has been best for me, but it needs a new span inside the header. Also logos with some transparent parts may not be usable, as the header text behind transparent parts may be shown.

<h1 id="logo"><a href="<?=DIR_REL?>/"><span></span><?=SITE?></a></h1>

#page #header #logo {
width: 250px; /* width of your logo image */
height: 100px; /* height of your logo image */
position: relative;
}

#page #header #logo span {
background: transparent url(images/logo.png) top left no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
braintre replied on at Permalink Reply
I'm looking for directions on how to do the same thing but I need it in REALLY basic terms. Think like your telling your grandma how to do this over the phone!

I know I go to the Cpanel and I assume I use file manager, but then what? I have a site with green salad theme but I cannot find the file I might need. Nor do I really understand what to do next.

Could someone provide this in the most basic of basic terms.

Thanks
frz replied on at Permalink Reply
frz
this help?
http://www.concrete5.org/help/faq/how_do_i_get_rid_of_my_sitename_/...
braintre replied on at Permalink Reply
Yes, I'm feeling hopeful! But, I did change the site name, cleared the cache but the global scrapbook doesn't appear. help..
frz replied on at Permalink Reply
frz
are you using plain yogurt or green salad as your theme, or something else?
braintre replied on at Permalink Reply
My site uses green salad, I tried renaming and clearing the cache again, still no luck. Still looking for help...Thanks!