0
Welcome Guest! Login
0 items Join Now

Creating a responsive logo

    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Creating a responsive logo

    Posted 11 years 5 months ago
    • 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....
       
      <div class="rt-image rt-center"><img src="templates/rt_graffito/images/logo/logo.png" style="border-style: none;" /></div>
       
      Obviously use your own logo url
      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: 8 years 11 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's Avatar
    • John Langlois
    • Sr. Rocketeer
    • Posts: 113
    • Thanks: 0
    • President, Foggy Bottom Web Design

    Re: Creating a responsive logo

    Posted 11 years 5 months ago
    • 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's Avatar
    • ismadman
    • Sr. Rocketeer
    • Posts: 186
    • Thanks: 3

    Re: Creating a responsive logo

    Posted 11 years 5 months ago
    • 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 : 4
      This image is hidden for guests.
      Please log in or register to see it.

      *Payable when it reaches 24
    • John Langlois's Avatar
    • John Langlois
    • Sr. Rocketeer
    • Posts: 113
    • Thanks: 0
    • President, Foggy Bottom Web Design

    Re: Creating a responsive logo

    Posted 11 years 5 months ago
    • damo's Avatar
    • damo
    • Elite Rocketeer
    • Posts: 2142
    • Thanks: 0

    Re: Creating a responsive logo

    Posted 11 years 4 months ago
    • 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
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: Creating a responsive logo

    Posted 11 years 4 months ago
    • wrap it in an a tag?

      <div class="rt-image rt-center">
      <div class="logoimg">
      <a href="blah"><img src="images/my-logo.png" alt="My logo" /></a>
      </div>
      </div>
    • damo's Avatar
    • damo
    • Elite Rocketeer
    • Posts: 2142
    • Thanks: 0

    Re: Creating a responsive logo

    Posted 11 years 4 months ago
    • Hi Henning
      Tried that and didn't work for me, so stupid. Forgot to clear cache. Sorry and thanks.
    • www.c3p0.se - sweden
  • Re: Creating a responsive logo

    Posted 11 years 4 months ago
    • 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 3 months ago by Kat05.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Creating a responsive logo

    Posted 11 years 4 months ago
    • 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? :oops:

      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's Avatar
    • deeJ
    • Jr. Rocketeer
    • Posts: 34
    • Thanks: 0

    Re: Creating a responsive logo

    Posted 11 years 4 months ago
    • 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.091 seconds