Jump to content

Logo across the whole top?

Terry V

By Terry V
in Customising Look & Feel

 Share

Recommended Posts

  • 4 weeks later...

Guest Windchime

Guest Windchime

Posted
Posted

Hi Terry

Can you tell me how you put in your wonderful header/banner, I just can not find any files to edit anywhere.

Nice site, you advise is much appreciated

Niki

Link to comment
Share on other sites
  • 3 weeks later...
  • 4 weeks later...
bsmither Veteran

bsmither

Posted
Posted

If you are willing to experiment (because I haven't actually tried this), try...

Open the file layout.css for the kurouto-substyle skin, find near line 11, and just take note of this:

#header { background: #409BBF url(../../images/blue/header_background_gradient.png) }

Don't do anything with it. Just note that this css rule, #header, sets the background image for that area. We will be overriding that with instructions below.

Within the header area, there is a paragraph block that we must also keep in mind. Within the paragraph block is an anchor tag used to offer a means of clicking on your logo to take you straight to the store's main page. The anchor tag encloses your actual logo image.

One might think to just give CubeCart a logo 1000x155 pixels. But there are other things in that area (search) and the collision will upset the layout.

What we will do is replace the existing background image with your logo. That means that the logo will have to be strategically designed to have whatever is behind any other stuff (search) to be unimportant.

Unfortunately, CubeCart does not "process" the CSS files like it does for the actual templates and determining what logos and some other dynamic images are needed on a per page or per skin basis. So, we can't code the CSS files using Smarty template placeholders. (It would be nice if we could.)

The rules of CSS usage state that any rule actually specified in the body of the document takes precedence over rules that came in from an external file. So...

In the template file main.php, we will add a css rule to the <div> that identifies the header area.

<div id="header" style=" background-image: url({$STORE_URL}/images/logos/{$SKIN_FOLDER}-{$SKIN_SUBSET}.php); ">




Question: Can we actually get rid of the whole paragraph within that div? No, because we need a block-level element (such a thing has width and height which we need) to be 'clickable'. And we need the link. But not the image within the link. So...



Let's take that header div section of HTML and make it look like this:



<div id="header" style="...">

{$SEARCH_FORM}

<a href="{$STORE_URL}/index.php" title="{$META_TITLE}"><p style=" height: 155px; width: 600px; padding: 0;"></p></a>

</div>

What we have done is to put the paragraph block inside the anchor tag making the whole paragraph clickable. And we needed to size the paragraph (that is otherwise empty) to fill the space over most of the left side of the logo sitting in the background. We didn't want the right side to be clickable as then there would be two things (search and logo) that are clickable on top of each other. I don't know which would have priority.

Observe that we over-rode the background image of #header, but not the background color, #409BBF. So, if you were to give CubeCart, as your logo for this skin-substyle, a GIF or PNG with transparent areas, that color would show through.

Give it a try, let us know.

Link to comment
Share on other sites
fettlebox Apprentice

fettlebox

Posted
Posted

I deleted the current logo & uploaded my new 1000x155 graphic. If I did the above correctly it made the left side of the paragraph block clickable with the home page as the target but my graphic didn't show. I've got around that my uploading my logo as the new header_background_gradient png. Seems to have achieved the same affect. I had to make the image 157 deep as I got a small line of repeat at the bottom.

It looks much better as I'd struggled to create a logo with the size restraints I had before it started pushing the header layout about. Really pleased with it now & will be opening shortly!

Many thanks for your time in helping me achieve the look I wanted. It is much appreciated.

Link to comment
Share on other sites
fettlebox Apprentice

fettlebox

Posted
Posted

Mobile skin - the 1000x155 logo that doesn't show up on the full size site does show up in the mobile site. Not ideal for the mobile users. However because the logo is failing to show in the regular full size site (I have it set as the background as a workaround) I've just resized it to 243 pixels wide & reloaded it. So now I have a small logo which shows on mobile & full size on desktop. Result!

Link to comment
Share on other sites
bsmither Veteran

bsmither

Posted
Posted

"...but my graphic didn't show."

I can understand that if this didn't get coded correctly:

<div id="header" style=" background-image: url({$STORE_URL}/images/logos/{$SKIN_FOLDER}-{$SKIN_SUBSET}.php); "></div>

The style located here is supposed to override the style located in the external css file.

Did you clear the skin cache after making the edits to the skin.

When I see the actual page, I will look at the HTML and try to figure out why it was that you had to swap out the image in the skin folder.

Link to comment
Share on other sites
bsmither Veteran

bsmither

Posted
Posted

Ok, I see what you did.

My first instruction was to edit the <div> tag. It should look like this:

<div id="header" style=" background-image: url({$STORE_URL}/images/logos/{$SKIN_FOLDER}-{$SKIN_SUBSET}.php); "></div></div>




Later, my instruction was to re-arrange some of the HTML to get what we needed overall. My instruction included this line:



<div id="header" style="..."></div>

The three dots in "..." is called an ellipsis. An ellipsis is used to indicate that there is a whole lot that has not been included as it does not pertain to the point being made. The point being made was that we needed to re-arrange some lines of code. But that does not mean that what was not included was to be disregarded.

To be fair, I think you just copy-pasted without looking closely at what you were copy-pasting.

So, if you are so inclined, restore the background image in the skin images folder, make the <div> tag as I suggested in my first instruction, make sure your logo is actually assigned to this skin (which I believe you went through the motions to do so), and season to taste.

*Fettle - to fix or repair, to make good. Where does this word come from?

Link to comment
Share on other sites
fettlebox Apprentice

fettlebox

Posted
Posted

Thanks! I struggled to get the letters to stand out any more but overall I'm pleased given the short period from your fix to opening the shop that I had to come up with something - just some old but relevant papers & stock arranged on a table & a digi compact on a tripod. Maybe when things settle down I'll take another look at it - busy making sure everything going smoothly at the moment!

I'm really enjoying using this product after a few false starts with other software & the support here has been excellent - thankyou

Link to comment
Share on other sites
Dirty Butter Apprentice

Dirty Butter

Posted
Posted

Is the site logo the old logo you didn't like, or the smaller version of the current background image you made for the mobile skin? Sorry to ask so many questions, but what you've done is so much better than the CC default I hope to be able to implement it on our stores. Our main store is not a CC skin, so that's going to be a real challenge.

Link to comment
Share on other sites
  • 2 weeks later...
fettlebox Apprentice

fettlebox

Posted
Posted

As the techs seem to have done a clean install to fix my upgrade issue I had another bash at the main.php. Think I got it right this time. I put the gradient image in the header block back to original. Strange thing is the main skin is now calling the mobile image & the mobile skin the main image. The main skin had my small logo repeated all over the header block. I've deleted, reloaded, cleared the caches via admin panel & browser to no avail. Deleting via admin panel didn't clear the images anyway - still there when checked via ftp. In the end I had to rename the files via ftp - ie the main logo is renamed as the mobile & visa versa. I'm pleased to have it working but strange way to do it!

Anyone else seeing this on 5.1.3?

Link to comment
Share on other sites
  • 4 weeks later...
  • 3 weeks later...
jdmdecals Newbie

jdmdecals

Posted
Posted

I tried and failed :(

http://www.jdmdecals.com/index.php


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" dir="{$TEXT_DIRECTION}" lang="{$HTML_LANG}">

  <head>

<title>{$META_TITLE}</title>

<link rel="canonical" href="{$VAL_SELF}" />

<link rel="shortcut icon" href="{$STORE_URL}/favicon.ico" type="image/x-icon" />

<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/common.css" media="screen" />

<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/{$SKIN_SUBSET}/layout.css" media="screen" />

<link rel="stylesheet" type="text/css" href="{$STORE_URL}/js/styles/styles.php" media="screen" />

{if isset($CSS)}

  {foreach from=$CSS key=css_keys item=css_files}

    <link rel="stylesheet" type="text/css" href="{$STORE_URL}{$css_files}" media="screen" />

	 {/foreach}

    {/if}

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/ie7.css" media="screen" /><![endif]-->

<meta http-equiv="Content-Type" content="text/html;charset={$CHARACTER_SET}" />

<meta name="description" content="{if isset($META_DESCRIPTION)}{$META_DESCRIPTION}{/if}" />

<meta name="keywords" content="{if isset($META_KEYWORDS)}{$META_KEYWORDS}{/if}" />

<meta name="robots" content="index, follow" />

<meta name="generator" content="cubecart" />

{if $ANALYTICS}

{literal}<script type="text/javascript">

   var _gaq = _gaq || [];

   _gaq.push(['_setAccount', '{/literal}{$ANALYTICS}{literal}']);

   _gaq.push(['_trackPageview']);



   (function() {

	 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

	 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

	 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

   })();



</script>{/literal}

{/if}

  </head>

<body>

  <div id="page_wrapper">

<div id="account">

   {$SESSION} {$CURRENCY} {$LANGUAGE}

</div>

<div id="header"style=" background-image: url({$STORE_URL}/images/logos/{$SKIN_FOLDER}-{$SKIN_SUBSET}.php); ">

   {$SEARCH_FORM}

   <a href="{$STORE_URL}/index.php" title="{$META_TITLE}"><p style=" height: 155px; width: 600px; padding: 0;"></p></a>

</div></p>

</div>

<div id="breadcrumb">

   <ul>

  <li><a href="{$STORE_URL}">{$LANG.common.home}</a></li>

  {foreach from=$CRUMBS item=crumb}

  <li><a href="{$crumb.url}">{$crumb.title}</a></li>

  {/foreach}

   </ul>

</div>

<div class="{$SECTION_NAME}_wrapper">

   <div class="sidebar" id="sidebar_left">

  {$CATEGORIES}

  {$SALE_ITEMS}

  {$MAIL_LIST}

   </div>

   <div class="sidebar" id="sidebar_right">

  {$SHOPPING_CART}

  {$RANDOM_PROD}

  {if isset($POPULAR_PRODUCTS)}{$POPULAR_PRODUCTS}{/if}

   </div>

   <div id="page_content">

  {include file='templates/box.errors.php'}

  {if isset($CHECKOUT_PROGRESS)}{$CHECKOUT_PROGRESS}{/if}

  {$PAGE_CONTENT}

  <p style="clear: both; height: 1px;">&nbsp;</p>

   </div>

   <div id="documents">{if isset($SKIN_SELECT)}{$SKIN_SELECT}{/if} {$SITE_DOCS}</div>

</div>

  </div>

 

  {$COPYRIGHT}

  {if !$CONFIG.disable_mobile_skin}<p id="mobile_switch"><a href="{$STORE_URL}/index.php?display_mobile=1">{$LANG.common.mobile_site}</a></p>{/if}

 

  {if isset($DEBUG_INFO)}{$DEBUG_INFO}{/if}

  {include file='js/common.html'}

  {if isset($JANRAIN)}{$JANRAIN}{/if}

  {if isset($LIVE_HELP)}{$LIVE_HELP}{/if}

  {foreach from=$JS_SCRIPTS key=k item=script}

  <script type="text/javascript" src="{$STORE_URL}/{$script|replace:'':'/'}"></script>

  {/foreach}

 

  {if $COOKIE_DIALOGUE}

  <form action="{$VAL_SELF}" class="cookies-notify" method="POST">

    <p>{$LANG.notification.cookie_dialogue|replace:'%s':{$CONFIG.store_name}}</p>

    <p>{if $COOKIE_DIALOGUE_FAIL} class="retry"{/if}><input type="checkbox" name="accept_cookies" value="1" /> {$LANG.notification.cookie_dialogue_declaration} <input type="submit" name="accept_cookies_submit" value="{$LANG.common.continue}" /></p>

  </form>

  {/if}

 

</body>

</html>

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.

×
 Share
Go to topic listing
×
×
  • Create New...