Jump to content

[Resolved] Logo & header


Recommended Posts

I'm trying to figure out if the header automatically expands to accommodate the size of the logo, or is it like all the other images and it gets re-sized.

I'm asking because I want to add payment type and trust logo's to the right of the logo.

I know I could just try it out, but I'd prefer to know before I goo hunting down all the relevant icons to find it doesn't work !

 

 

Link to comment
Share on other sites

In the template main.php, let's look at these lines (58-63):

58: <div class="row marg-top" id="top_header">
59:    <div class="small-4 large-3 columns">
60:       <a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_LOGO}" alt="{$META_TITLE}"></a>
61:    </div>
62:    <div class="small-8 large-9 columns nav-boxes">
63:       <div class="row" id="nav-actions">

Line 58 is a row (every row contains twelve columns) that has two div partitions: line 59 and line 62.

When the browser calculates the viewport is small, the CSS says that the div at line 59 is to use four (of twelve) columns and the div at line 62 is to use eight (of twelve) columns. When the browser calculates the viewport is large, the CSS says to use three and nine (of twelve) columns.

That is the screen real estate given everything, including images. As the width of the viewport narrows, the columns also narrow but maintain their percentage - until the CSS switch-over. (There is a maximum width.)

In maintaining their percentages, images are also scaled (by the browser) to fit inside whatever screen real estate the image's containers end up having.

So, you can create an enormous header logo, but the browser will scale it to fit the three or four (of twelve) columns.

Link to comment
Share on other sites

Depending how much room you have under the logo, maybe try this:

59:    <div class="small-4 large-3 columns">
60:       <a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_LOGO}" alt="{$META_TITLE}"></a>
          <br />
          <img src="trust_logo_1" alt="Trust Logo #1">
          <br />
          <img src="trust_logo_2" alt="Trust Logo #2">
          <br />
          <img src="trust_logo_3" alt="Trust Logo #3">
61:    </div>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...