[solved] Two modules in one row

Palforpaws · July 20, 2013

Hi,

I'm trying to customize a free theme called "leo sportshoes", which can be found here

I have already changed most of the things that I was interested in but I have one problem. I don't know how to place two modules next to each other in one row in center column - homeslider and a box with some informations next to it. I managed to narrow homeslider to about a half of the center column but I have no idea how to place something next to it. When I tried to simply paste sth (f.e. an image) after homeslider script in its tpl file, the image showed under homeslider instead of next to it. Do you have any ideas what to do?

Attached image shows how it looks like now.

Here is a module tpl file: http://pastebin.com/R1iQJLrU

Edited July 20, 2013 by Palforpaws (see edit history)

vekia · July 20, 2013

create two divs with display:inline-block; style

one div in for the homeslider

second one for the second module

Palforpaws · July 20, 2013

So it was that simple XD

Thank you very much!

vekia · July 20, 2013

you're welcome

if you've got any other questions related to this case, feel free to write

btw. on Polish forum section one of the forum member created a lot of threads related to this theme,

(i've noticed that you're from Poland so maybe the threads will be helpfull for you)

regards

eld3k · August 20, 2013

Hello,

I have similar problem, in my theme are two modules (minicslider and customcontent), and I need to place it next to each other. So on the left will be menu (customcontent) and on the right slider. I'm new to templates, so if You could explain to me where create the div's i'll be great.

vekia · August 20, 2013

i don't know this theme, i don't know the code so i can't help.

url will be helpful.

eld3k · August 20, 2013

url to website: http://presta.twojetrendy.pl

header code:

{*
* 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>
<!--[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>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <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 name="generator" content="PrestaShop" />
<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
<meta name="author" content="Prestashop 1.5">  
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />  
<script>
if (navigator.userAgent.match(/Android/i)) {
	var viewport = document.querySelector("meta[name=viewport]");
	viewport.setAttribute('content', 'initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height');
}
if(navigator.userAgent.match(/Android/i)){
window.scrollTo(0,1);
}
</script>
<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}" />
 <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>
<link href="{$css_dir}normalize.css" rel="stylesheet" type="text/css" media="all" />
<link href="{$css_dir}bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="{$css_dir}bootstrap-responsive.css" rel="stylesheet" type="text/css" media="all" />
<link href="{$css_dir}font.css" rel="stylesheet" type="text/css" media="all" />
{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}  
<link href="{$css_dir}320.css" rel="stylesheet" type="text/css" media="all" />
<link href="{$css_dir}480.css" rel="stylesheet" type="text/css" media="all" />
<link href="{$css_dir}768.css" rel="stylesheet" type="text/css" media="all" />
{if isset($js_files)}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri}"></script>
{/foreach}
{/if}
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>
<script src="{$js_dir}/source/bootstrap.js"></script>
<script src="{$js_dir}/source/plugins.js"></script>
<script src="{$js_dir}/source/footable.js"></script>
<script src="{$js_dir}/source/jquery.core-ui-select.js"></script>
<script src="{$js_dir}/source/jquery.scrollpane.js"></script>
<script src="{$js_dir}/source/jquery.uniform.js"></script>
<script src="{$js_dir}/source/jquery.mousewheel.js"></script>
<script src="{$js_dir}/source/mainscript.js"></script>
<script src="{$js_dir}/source/modernizr-2.5.3.min.js"></script>
{$HOOK_HEADER}
<script src="{$js_dir}/source/jquery.carouFredSel-6.2.1.js"></script>
<script src="{$js_dir}/source/jquery.touchSwipe.min.js"></script>
<script>
 $(function () {
 $('#menu-custom a').wrapInner('<span></span>')
});
</script>
</head>
<!--[if lt IE 9]><div style='clear:both;height:59px;padding:0 15px 0 15px;position:relative;z-index:10000;text-align:center;'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div><![endif]-->
<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="wrapp">
   <div id="wrapp_2">
	  <header id="header" class="container ">
		<div  id="header-inner" >
	  <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>
	   </header>
 <div class="center-box">
<div id="columns" class="container ">
			 <div class="row ">
			 <div class="loader_page">  
							<aside id="left_column"  class="span3 column" style="display:none">
							   {$HOOK_LEFT_COLUMN}
							</aside>
					 <div id="center_column" class="center_column {if $page_name == 'index'}span12 {else}span9 {/if}clearfix">
{/if}

vekia · August 20, 2013

okay thanks for the url

where is the custom content? this is these three blocks with urls to the "akcesoria" "epapierosy" and "liquidy" ?

eld3k · August 20, 2013

Yes, and i have to move it to the left side of the slider.

vekia · August 20, 2013

you have to define width param to your slider block

for example: width:500px; and add float:right;

then your content module will float to the left side of the slider

eld3k · August 21, 2013

DONE

THX

Edited August 21, 2013 by eld3k (see edit history)

[solved] Two modules in one row

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in