Adding a custom logo?

[Jake]

When I go to "styles" in the gantry framework and upload my logo, it is not working.  It shows a "broken image" where the logo should be displayed.  Any ideas?  I have tried .png, .jpeg, .jpg, etc. and they are all coming back as broken images.

Should I be typing something different in the URL reference other than my homepage?  PLEASE HELP!!!

[Michael]

Did you give it the same name as the logo that comes with the Gantry template and rename the old one?  The default Gantry logo, depending on if you chose light or dark is contained here /www/templates/gantry/images/logo then choose the light or dark folder.

Your other option is to create a new module, choose custom HTML, set the module to the position you want your logo to show and insert your logo.

Also, if you're sure you've entered everything correctly try clearing the Gantry cache and see if that works.

Hope this helps,

regards,

Michael

[Luke Douglas]

Michael is correct.  I never use the Gantry Logo as I find it gives me more flexibility to use a module.  This really comes in handy when you want a different header / logo on different pages.  Using modules with link assignments gives you a lot of power.  Learn to use it.

Luke

--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to
gantry-framework...@googlegroups.com
To unsubscribe from this group, send email to
gantry-framework-for-j...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org

[Jake]

Great advice!  I used the header-a module and it is working out great. Is there a way to adjust its size?  Whether I make it 500 x 400 or 50 x 40, the logo is same size in the module position, and it takes up about half the screen!

[Luke Douglas]

Jake,

As you indicated that it only takes up 50% of the width, I'd recommend that you look at the Gantry template settings under layout to see if the 'header' position is set for 2 modules with 50% width on each.  If so, you need to change it to '1' module position and it should default to 100% width.  As far as forcing a set width / height, I usually embed my header images inside a DIV with an ID so I can do custom styling to adjust for margins, padding, borders, etc.

Home page example:

HTML in module 'header-home' published to 'header-a' position. Note: Template setting has 'header' position layout set to 1 module and 100% width. Also, there are 'two' images but it could easily be just one.

 
<div id="header-home"<div id="header-home-left"><img src="images/modules/header/home/header-home-logo.jpg" alt="Home Page" height="125" width="740" /></div><div id="header-home-right"><img src="images/modules/header/home/header-home-address.jpg" alt="business address" height="125" width="200" /></div></div>

Then I use CSS in the custom stylesheet to specifiy margins and padding to align the images as well as the "float-left" code for the 'header-home-left' DIV.  Please note that although I have put the height and width inside the image html code, I usually don't put it there as I like to specify the width and height in the CSS for good coding practices.  I've shown it here for example purposes only.

Now some people might look at this code and say, why not set the layout positions for '2' modules and assign a fixed width to each? The reason is flexibility.  On some pages, I might want the home page 'header-a' module to have a 'logo' image that is 740 pixels wide and the side image to be 200 pixels wide whereas on another 'header-a' module assigned to other links, I might want the logo image or content to only be 470 pixels wide and the side image or content to be 470 pixels wide with CSS setting margins and padding.

If you have 50 links and you have three different header 'styles', you could duplicate the template, assign to the links you want, change the layout settings for the 'header' position and use the fixed widths for the module positions.  This procedure will work if the widths fit your requirements.  I've done it this way on a couple of sites and it works just fine.

Luke

--

[Grant Preston]

If you copy Luke's code to use it remember to close his first opening <div> tag as it is still open in his example on accident. I believe he meant <div id="header-home">

One other thing if you are using width in your image you may want to set them as percentages instead of absolute pixels for responsive reasons and set height to auto. Of course you would need to make sure the images are created proportionately in the beginning for that to work correctly with the height being set auto.

[Luke Douglas]

Grant,

Nice catch!  You are correct.  I left out the '>".  But I had an excuse.  My 3 1/2 year old grandson was jumping on me while I typed. LOL

Luke

[Grant Preston]

Yeah Luke, we all leave out something at times. Wouldn't have mentioned it at all but people often just copy and paste and then come back confused without studying it for missing code. Just figured I'd save a step lol.

Not exactly sure the reason for a div on both sides of the image though since you can add margin and padding independently on either side with a single div. just curious if you had a use case for it as I found it interesting if nothing else...

[Luke Douglas]

Grant,

It's simply for more flexibility. That's all. I have found that having an enclosing DIV, like you see on most templates, can come in handy.

Luke

[Grant Preston]

Well it is a neat concept. I suppose you could use it for things I haven't yet considered :D