Jump to content

[SOLVED] change the home page layout only


Recommended Posts

Hi there,

 

I need the support of all of you :rolleyes:

 

I'm going to change the layout of my prestashop 1.5.4.1

 

I want to modify the home page only adding "margin-top: 320px" to both right and left column so that I'll have a bigger slider below the "top of page >> top menu".

 

If I modify the global.css file then the column will be modified in every page of the website.

 

I think I have to write a smarty code in some TPL file (probably header and footer), but I have no idea how to do that or which code I can add :blink:

 

 

 

Thanks a lot,

Matteo

post-411583-0-78073600-1374187719_thumb.jpg

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

Hi folks,

 

thanks for the replies.

 

First of all

 

@ Vekia sorry if I duplicated the thread I didn't realize that. Should I do something in order to delete/close the duplicate? if so, please let me know.

 

Now

@ Vekia and Jitenx thanks for your support but the solution spotted seems not working :-(

 

I tried the Jienx's code body#index #header{margin-top: 320px;} (but actually I think action must be taken into the "columns" section and not in the header)

and the Martin Uker K's suggestion (provided into the duplicated topic) body#index #page #left-column, body#index #page #right-column{margin-top:320px;

 

Both of them are not effective I wonder if I wrong something, i modified the global.css file

but at this link is suggested to take action in the TPL files

http://www.iamrookie.com/blog/268/how-to-change-home-page-layout-in-prestashop.html

 

Unfortunately at the moment the website is running only in localhost on my laptop.

 

I attach the the desired home page and my global.css file modified at line 61

 

thanks again for the support

post-411583-0-05966600-1374235561_thumb.jpg

global.css

Link to comment
Share on other sites

Hello,

 

Ok, let's do something: Since we can't see the website, make sure you give us a part of the HTML structure. Your home page might have a differente name (Setted in SEO & URL). So give us the HTML code from <body> to either left or right column. To do so, just open you website and either open the code (source code) and copy it, or just save the file (Will give pure html) and post it here. We'll have a good starting point to help you.

 

Your CSS file doesn't seems to have any errors (That's why I'm blaming the HTML code) and, on top of that, the code I give you NEVER have mistakes (I know, I know: I'm great).

 

I'm sure we, me Vekia or Jitenx, can help you resolve your issue.

 

Martin

 

P.S.: Be careful Vekia is a stalker, pretty sure he's from the Dark Side...

Link to comment
Share on other sites

Hi Martin,

 

you can find below the html code from te home page (i also attach the file), I believe the name is still "index", I doublechecked the SEO & URLS too and I confirm the name is index.

 

Mybe I have to change something in some TPL file, if you want you can have a look at the link I pasted in my previous post :-)

 

 

 

 

 

 

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

 

 

<html xml:lang="it" xmlns="http://www.w3.org/1999/xhtml">

 

 

 

<head>

 

 

<title>Fallo per Te</title>

 

<meta content="Negozio powered by PrestaShop" name="description">

 

<meta content="negozio, prestashop" name="keywords">

 

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

 

<meta content="it-gb" http-equiv="content-language">

 

<meta content="PrestaShop" name="generator">

 

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

 

<link href="/falloperte/img/favicon.ico?1324977642" type="image/vnd.microsoft.icon" rel="icon">

 

<link href="/falloperte/img/favicon.ico?1324977642" type="image/x-icon" rel="shortcut icon">

 

 

<script type="text/javascript">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/themes/default/css/grid_prestashop.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/themes/default/css/global.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/blockbestsellers/blockbestsellers.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/blockpermanentlinks/blockpermanentlinks.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/blockviewed/blockviewed.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/blockcontact/blockcontact.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/blockcart/blockcart.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/blockspecials/blockspecials.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/blockcurrencies/blockcurrencies.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/blocknewproducts/blocknewproducts.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/blockmyaccountfooter/blockmyaccount.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/blockuserinfo/blockuserinfo.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/blocklanguages/blocklanguages.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/blocktags/blocktags.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/js/jquery/plugins/autocomplete/jquery.autocomplete.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/themes/default/css/product_list.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/blocksearch/blocksearch.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/favoriteproducts/favoriteproducts.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/homefeatured/homefeatured.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/blocknewsletter/blocknewsletter.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/blocktopmenu/css/superfish-modified.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/homeslider/bx_styles.css">

 

 

<link media="all" type="text/css" rel="stylesheet" href="/falloperte/modules/blockreinsurance/style.css">

 

 

<script src="/falloperte/js/jquery/jquery-1.7.2.min.js" type="text/javascript">

 

 

<script src="/falloperte/js/jquery/plugins/jquery.easing.js" type="text/javascript">

 

 

<script src="/falloperte/js/tools.js" type="text/javascript">

 

 

<script src="/falloperte/modules/blockcart/ajax-cart.js" type="text/javascript">

 

 

<script src="/falloperte/themes/default/js/tools/treeManagement.js" type="text/javascript">

 

 

<script src="/falloperte/js/jquery/plugins/autocomplete/jquery.autocomplete.js" type="text/javascript">

 

 

<script src="/falloperte/modules/favoriteproducts/favoriteproducts.js" type="text/javascript">

 

 

<script src="/falloperte/modules/blocktopmenu/js/hoverIntent.js" type="text/javascript">

 

 

<script src="/falloperte/modules/blocktopmenu/js/superfish-modified.js" type="text/javascript">

 

 

<script src="/falloperte/modules/homeslider/js/jquery.bxSlider.min.js" type="text/javascript">

 

 

<script src="/falloperte/modules/homeslider/js/homeslider.js" type="text/javascript">

 

 

<script type="text/javascript">

 

<link href="http://127.0.0.1/falloperte/modules/feeder/rss.php?id_category=4&orderby=position&orderway=asc" title="Fallo per Te" type="application/rss+xml" rel="alternate">

</head>

 

 

<body id="index" class=" ">

 

 

 

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

</body>

</html>

view-source 127.0.0.1 falloperte index.php.htm

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

Something is wrong. Are you sure these are the same page. The HTML structure change between them. One body has "category" as ID the other has "index". Anyway : The attached is setted to "#left_column" instead of "left-column"

 

So here's the new CSS code :

 

body#index #page #left_column, body#index #page #right_column{margin-top:320px;

  • Like 1
Link to comment
Share on other sites

Martin you are great!!!!!

the new code works completely. I wasn't so accurate to identify the simple difference between the dash "-" and the underscore "_" in the IDs

 

I posted the wrong source page and you read the post before I updated the right source page :-)

 

A big thanks to you and everybody else supported myself in this thread.

 

 

P.S.

I think I should update this topic as solved, I'm not sure I remember how to do it

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...