Jump to content

Move the Logo

twizland
 Share

Recommended Posts

twizland Newbie

twizland

Posted
Posted

Hi - I want to move my logo, just slightly up, because I created my own logo and its covering the 'categories' text a little bit. Does anyone know how to do so? I do know this has to be done through the actual programming, but I am very naive and amateur - easy click and drag is about as far as get. Can someone please give me a step by step? Thank you so much.

post-621161-0-52130900-1374218207_thumb.png

Link to comment
Share on other sites
twizland Newbie

twizland

Posted
  • Author
Posted

OH, If its what I think your talking about, when I began this a month ago I deleted the horizontal menu and just kept the one on the left hand side. Its the TwizLand logo on the left that I am trying to make a little bit higher so its not on the categories. text.

Link to comment
Share on other sites
twizland Newbie

twizland

Posted
  • Author
Posted

This is what I am looking at in CSS. I tried changing the Top to 35, then tried putting in numbers for the header_logo like you said above, but neither seemed to change anything (if I did correctly. I saved it and everything). So I un did those changes and back to the original. this is it.

 

#header {position:relative}

#header_logo {

position: absolute;

top: 30px;

z-index: 1;

}

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

this is how it looks now:

bOncxjl.png

 

your header logo is without relative / absolute position tag. it's necessary.

 

jitenx height is based on picture height:

<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />

 

with variable {$logo_image_height} - it is created in the front controller, the value of it is based on the height of the uploaded picture

Link to comment
Share on other sites
twizland Newbie

twizland

Posted
  • Author
Posted

Wow, thank you for all the tips and directions. I have been gone for a couple days so it was great to come back to this. Yea my store is a part of my artist portfolio site - www.michaelpickard.net. In the store I sell shirts, prints, and other things.

 

So, in the Find box, I type in a part of what you have pasted, like....img class="logo".... but doesn't find anything. I want to make sure I am in the correct place. Store/themes/default/css. If so, How do I find this part of the code?

Link to comment
Share on other sites
twizland Newbie

twizland

Posted
  • Author
Posted

Hey Prestashop Legend! Yeah...I can't figure out where to find the code. I am going to Store/themes/default/css then I go to Global.css. Is that where I change it? Or do I go somewhere else. Sorry, I am a true novice to css coding.

Link to comment
Share on other sites
twizland Newbie

twizland

Posted
  • Author
Posted

wow!!!!! you where able to change it???? that is way rad! It was my cache that had to be emptied. Dude thank you so very much. Ok, in that case. Can you lower it a lot? I want to have the logo right over the categories block. So really just having it raised a tad from where it was originally, just so the white box that is a part of the logo is not going over the categories block, that was the only reason I wanted to raise it in the first place - to get the white part out of the way.

 

Thank you a million.

Link to comment
Share on other sites
Jiten rash (away) Newbie

Jiten rash (away)

Posted
Posted

open themes default find header.tpl

 

cut this line

<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">

<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />

</a>

 

and paste this below

<div id="header_right" class="grid_9 omega">

 

make it like this but remember u a have margin of 30px on top

 

{*

* 2007-2013 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.org/licenses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

* @author PrestaShop SA <[email protected]>

* @copyright 2007-2013 PrestaShop SA

* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 " lang="{$lang_iso}"> <![endif]-->

<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="{$lang_iso}"> <![endif]-->

<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="{$lang_iso}"> <![endif]-->

<!--[if gt IE 8]> <html class="no-js ie9" lang="{$lang_iso}"> <![endif]-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">

<head>

<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>

{if isset($meta_description) AND $meta_description}

<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />

{/if}

{if isset($meta_keywords) AND $meta_keywords}

<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />

{/if}

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<meta http-equiv="content-language" content="{$meta_language}" />

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

<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />

<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />

<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />

<meta property="fb:admins" content="100002268516405" />

<meta property="og:title" content="Buy mobile,ipods,laptops online"/> <meta property="og:type" content="product"/>

<script type="text/javascript">

var baseDir = '{$content_dir}';

var baseUri = '{$base_uri}';

var static_token = '{$static_token}';

var token = '{$token}';

var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};

var priceDisplayMethod = {$priceDisplay};

var roundMode = {$roundMode};

</script>

<script type="application/ld+json"> // JSON-LD markup generated by Google Structured Data Markup Helper. [ ] </script>

{if isset($css_files)}

{foreach from=$css_files key=css_uri item=media}

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

{/foreach}

{/if}

{if isset($js_files)}

{foreach from=$js_files item=js_uri}

<script type="text/javascript" src="{$js_uri}"></script>

{/foreach}

{/if}

{$HOOK_HEADER}

</head>

 

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if} {if $content_only} content_only {/if}">

{if !$content_only}

{if isset($restricted_country_mode) && $restricted_country_mode}

<div id="restricted-country">

<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>

</div>

{/if}

<div id="page" class="container_9 clearfix">

 

<!-- Header -->

<div id="header" class="grid_9 alpha omega">

 

<div id="header_right" class="grid_9 omega">

<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">

<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />

</a>

{$HOOK_TOP}

</div>

</div>

 

<div id="columns" class="grid_9 alpha omega clearfix">

<!-- Left -->

<div id="left_column" class="column grid_2 alpha">

{$HOOK_LEFT_COLUMN}

</div>

 

<!-- Center -->

<div id="center_column" class=" grid_5">

{/if}

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...