Jump to content

Align logo in the center of the page

Fashionist
 Share

Recommended Posts

Fashionist Newbie

Fashionist

Posted
Posted

Hi all,

 

I have moved my logo on the center of the page instead on the left, like the default configuration in the default theme.

 

Now logo is at the center of the page but a littlebit moved on the left, how can I center it on the middle of the container???

 

Thanks all!!!!

Link to comment
Share on other sites
eburgaz Newbie

eburgaz

Posted
Posted

Hi!

http://www.prestashop.com/forums/topic/186432-solved-how-to-change-the-position-of-the-logo/

 

 

Hi all,

 

I have moved my logo on the center of the page instead on the left, like the default configuration in the default theme.

 

Now logo is at the center of the page but a littlebit moved on the left, how can I center it on the middle of the container???

 

Thanks all!!!!

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

Hi all,

 

I have moved my logo on the center of the page instead on the left, like the default configuration in the default theme.

 

Now logo is at the center of the page but a littlebit moved on the left, how can I center it on the middle of the container???

 

Thanks all!!!!

 

 

you can manage logo position with css styles

you can try to deal with margin-left or left params for #header_logo in global.css stylesheet file.

  • Like 1
Link to comment
Share on other sites
Fashionist Newbie

Fashionist

Posted
  • Author
Posted (edited)

vekia I have modified #header_logo styleshet with margin-left but after this modify my chart block go under and my template is being corrupted.

 

The result in pic:

 

uu5i.png

 

Maybe I have to reduce logo container so automatically it's going on the center?

Edited by Fashionist (see edit history)
Link to comment
Share on other sites
Fashionist Newbie

Fashionist

Posted
  • Author
Posted

Ok Vekia. Partially works cause top menù is re-aligned well but shopping cart is back of this.

 

I have this now on css (I found to reduce padding-top but it's not aligned with the logo on the right):

#header .shopping_cart {
  position: absolute;
  float: right;
  padding-top: 50px;
  right: 0px
  width: auto  }

A pic of the result:

 

jtk5.png

Link to comment
Share on other sites
Fashionist Newbie

Fashionist

Posted
  • Author
Posted (edited)

Sure:

 

<!DOCTYPE HTML>
<!--[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 lang="{$lang_iso}">
<head>
<meta charset="utf-8" />
<title>{$meta_title|escape:'html':'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 name="generator" content="PrestaShop" />
<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
<meta name="viewport" content="width=device-width, minimum-scale=0.25, maximum-scale=1.6, initial-scale=1.0" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<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}" />
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link rel="stylesheet" href="{$css_uri}" type="text/css" media="{$media}" />
{/foreach}
{/if}
{$HOOK_HEADER}
<!--[if IE 8]>
<![endif]-->
</head>
<body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {implode value=$body_classes separator=' '}{/if}{if $hide_left_column} hide-left-column{/if}{if $hide_right_column} hide-right-column{/if}{if $content_only} content_only{/if} lang_{$lang_iso}">
{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">
<div class="header-container">
<header id="header">
<div class="banner">
<div class="container">
<div class="row">
{hook h="displayBanner"}
</div>
</div>
</div>
<div class="nav">
<div class="container">
<div class="row">
<nav>{hook h="displayNav"}</nav>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
</div>
</div>
</div>
</header>
</div>
<div class="columns-container">
<div id="columns" class="container">
{if $page_name !='index' && $page_name !='pagenotfound'}
{include file="$tpl_dir./breadcrumb.tpl"}
{/if}
<div class="row">
<div id="top_column" class="center_column col-xs-12 col-sm-12">{hook h="displayTopColumn"}</div>
</div>
<div class="row">
{if isset($left_column_size) && !empty($left_column_size)}
<div id="left_column" class="column col-xs-12 col-sm-{$left_column_size|intval}">{$HOOK_LEFT_COLUMN}</div>
{/if}
<div id="center_column" class="center_column col-xs-12 col-sm-{12 - $left_column_size - $right_column_size}">
{/if}
Edited by Fashionist (see edit history)
Link to comment
Share on other sites
Fixfinn Newbie

Fixfinn

Posted
Posted

If I do this:

 

in global.css insert this:  header .row #header_logo { text-align: center;}

at line 692 remove float:left for header:logo

at line 703 remove width33.3333% for header_logo

and 

at line 271 for img-responsive: remove display:block and max-width:100%

 

Then my logo centers and I can set the size I want.

 

best regards

Link to comment
Share on other sites
  • 3 weeks later...
  • 2 months later...
  • 2 months later...
Sito Lab Apprentice

Sito Lab

Posted
Posted (edited)
sorry for my english, but I hope it will serve to help 

 

my client just wants a website catalog, so I need to remove the carriage and the search function, and then center the logo and have it display even with smartphones and tablets, my solution was this: 

 

go in header.tpl 

 

line 93 

 

found this: img class = "logo img-responsive" 

 

replace with this: img class = "logo img-logo"" 

 

then go global.css 

 

line 271 

 

copy this 

 

.img-responsive {

   display: block; 

   max-width: 100%; 

   height: auto;

add margin-left: 400px (for example) to the center} 

 

 

go to the bottom and paste 

 

replace 

 

.img-responsive 

 

with .img-logo 

 

this worked for me here, you can view the work

Edited by lui1969 (see edit history)
  • Like 1
Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...