Creating a responsive logo
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
The logo from template manager is not designed to be responsive as it is being put in as a background image via CSS. This is how to create a responsive logo...
1. turn OFF the logo. template manager > rt_graffito - default > style tab > logo - OFF and save
2. create a new custom HTML module in module manager, assign to header-a position and put this code in it....Obviously use your own logo url<div class="rt-image rt-center"><img src="templates/rt_graffito/images/logo/logo.png" style="border-style: none;" /></div>
3. Add module class suffix " nomarginall nopaddingall" to that module (note leading space but don't add speechmarks). This will ensure that the logo can utilise the maximum space available.
REMEMBER: Make sure that in your Gantry layouts the header-a position is wide enough to contain the width of your image. If the module size is smaller than image width then in desktop and large modes your logo image won't be displayed full width.
This logo will now behave in a responsive manner.
Regards, Mark. - Last Edit: 9 years 7 months ago by MrT.
-
The following users have thanked you: DanG, Bay Area Jenn, Mrs. SaBe, Jeremy Duncan, D.Bell, Jorge Rumbau, Kike Hernandez, Thomas Condé Hansen
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- John Langlois
- Sr. Rocketeer
- Posts: 113
- Thanks: 0
- President, Foggy Bottom Web Design
-
Thank you for this great tip. I noticed that on the full size display the image appears to be about 80% of the size I uploaded. It does get smaller for the smaller screens until the 3rd iteration. Then it gets much larger.
How could I influence the size viewed on the main site and also the placement. It seems to have about 50 pixels of padding on the bottom that I would like to lose. They appear to be a part of
<div class="rt-block ">
<div class="module-surround">
<div class="module-content">
<div class="custom">
<div class="rt-image"><img src="templates/rt_graffito/images/logo/ISC_logo.png" style="border-style: none;" border="0"></div></div>
</div>
</div>
</div>
Where is the CSS for this?
Thanks. - John Langlois
www.foggybottomwebdesign.com
-
-
-
- ismadman
- Sr. Rocketeer
- Posts: 186
- Thanks: 3
-
I had the same Issue John.
I added some code to my custom override stylesheet - templates/rt_graffito/css/rt_graffito-custom.css
I changed it to this as inline border:0 is obsolete in html5
Source: www.w3.org/TR/html-markup/img.html
Apparently it is fine via a stylesheet
templates/rt_graffito/css/rt_graffito-custom.css/* Logo */ .logoimg {max-height: 50px; margin: -23px 0 10px -20px;} div.rt-image .logoimg img {max-width: 120%;border:0;border-style: none;} @media only screen and (max-width: 480px) { div.rt-image .logoimg img {max-width: 100%;} } /* End Logo */
Custom Html<div class="rt-image rt-center"> <div class="logoimg"> <img src="images/my-logo.png" alt="My logo" /> </div> </div>
My Logo image size is 312 px wide x 82 px and sits nice now.
The margins in my stylesheet were just to position it better.
Also don't know if my code is valid but it works here on all devices
Maybe someone with a bit more smartz can clarify but as I said it looks good here. -
The following users have thanked you: DanG, Jorge Rumbau
- Why isn't beer free ?
I OWE DanG : 4This image is hidden for guests.
Please log in or register to see it.
*Payable when it reaches 24
-
-
-
- John Langlois
- Sr. Rocketeer
- Posts: 113
- Thanks: 0
- President, Foggy Bottom Web Design
-
Thank you, Ismadman.
That worked perfectly and gave me a better method for future sites.
- John Langlois
www.foggybottomwebdesign.com
-
-
-
- damo
- Elite Rocketeer
- Posts: 2142
- Thanks: 0
-
How would you make the image carry a link? I'm trying to make it so they go home if they click it?
Thanks - www.c3p0.se - sweden
-
-
-
- damo
- Elite Rocketeer
- Posts: 2142
- Thanks: 0
-
Hi Henning
Tried that and didn't work for me, so stupid. Forgot to clear cache. Sorry and thanks. - www.c3p0.se - sweden
-
-
-
- ruth boon
- Newbie
- Posts: 15
- Thanks: 0
-
I've tried this on the fracture template by creating a logo and adding it to sidebar-a
Module code
<div class="rt-image rt-center"><img src="images/what_do_you_want.jpg" border="0" alt="image" style="border: 0; float: right;" /></div>
.rt-image img {
height: auto;
max-width: 100%;
It only seems to scale any items in the main-body area.
Ideally i would like to have x2 versions of the logo, for visible- desktop and other hidden-large so each one would appear and match the depth of the image in the mosaic rocksprocket.
Any ideas how i could resolve this.
BROKEN LINK REMOVED
Regards
Jason - Last Edit: 8 years 11 months ago by Kat05.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
It's only going to scale if it needs to (I.e. it becomes constrained by the container around it) In your case it fits without needing to be scaled. Then obviously your alternate logo's kick in at smaller sizes. Perhaps I've not understood you?
p.s. posting in SOLVED threads is not a good idea as we may not see it - start a new thread rather than adding to a solved thread - but by all means add a cross reference url.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- deeJ
- Jr. Rocketeer
- Posts: 34
- Thanks: 0
-
ismadman - i need the logo i created for my client to show correctly in the header section, i can't find where the height for the header section is defined/determined, how would i call a custom css style sheet like yours?
Thanks
Dee Janssen
kneading-relief-massage.com is the site i'm working on....
-
Time to create page: 0.070 seconds