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
Thanks
Yes, this would be done in your layout template.
Do you mean Page Types under Pages and Themes?
Where do I find the layout template?
Thanks for the quick reply.
Much appreciated.
Where do I find the layout template?
Thanks for the quick reply.
Much appreciated.
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.
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.
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.
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.
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.
The bit we are interested in changing is here:
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:
to:
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?
<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:
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:
to:
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?
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@
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@
Much thanks, really appreciate your help and time with this.
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?
http://www.spincreativegroup.com/test/...
Any ideas of how to fix this?
There are a lot of different ways to fix this. You might want to try this:
In your css, look for this line:
add a padding there. For example:
I haven't tested this but I guess it should work...
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...
Thanks for the info, I got it aligned how I want it.
I'm still hung up on how to even access the script. Can you please point me in the right direction?
I read the instructions on how to do this with plain yogurt (see below) but the code is different in green salad
<?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>
<!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>
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>
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>
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.
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.
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
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
..
using such an url has a few disadvantages as well:
- worse caching
- worse performance due to several checks
..
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.
<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.
> 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.
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.
Yeap orisinal you're right!
I didn't think further.
:)
thanks!
I didn't think further.
:)
thanks!
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%;
}
<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%;
}
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
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
Yes, I'm feeling hopeful! But, I did change the site name, cleared the cache but the global scrapbook doesn't appear. help..
are you using plain yogurt or green salad as your theme, or something else?
My site uses green salad, I tried renaming and clearing the cache again, still no luck. Still looking for help...Thanks!
Would this be the right solution? Check this out http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/...
