I've managed to create a new hook in the default template of prestashop but I can't place "featured products" under "image slider" (see image to understand what I mean).
http://oi59.tinypic.com/15s95oy.jpg
I've added a segment of header.tpl and the place where I've put my div. Do you know what I should change in order to get the final result?
<!-- Header -->
<div id="header" class="grid_9 alpha 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>
<div id="header_right" class="grid_9 omega">
{$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">
<div id="myCustomHook"> {hook h='displayTop2'} </div><!--my hook-->
{/if}
If both "Featured Products" and "Image Slider" are attached to the same hook, you can set their positions within the hook from BackOffice > Modules > Positions.
You can also make this for a better control of position :
{hook h='displayTop' mod='slider'}
{hook h='displayTop' mod='homefeat'}
Related
I am using Materialize, and I need to align a button to the right side of the card in the card-action.
This is the code:
<div class="card-action">
This is a link
</div>
This is the result:
If I remove the class="right" then I get this result:
I want the result from the second image, except the button should be aligned to the right. Am I missing something about the materialize card-action? How should I get this behavior?
It should be right-align instead of right and you've to use it on card-action div. You can check about the alignment classes in Helper page of the documentation.
<div class="row">
<div class="col s12 m4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I
require little markup to use effectively.</p>
</div>
<div class="card-action right-align">
<a class="btn blue" href="#">Right</a>
</div>
</div>
</div>
</div>
You Just Need to Mention the Alignement in below way
<div class="card-action right-align">
YOUR CONTENT WILL ALIGHT TO RIGHT
</div>
I need to target a specific div in Shopify. I'm using Boundless Theme. I want to add a custom id attribute to this specific div. How can I do this?
The div I need to target is the 3rd div with class "product-item grid__item medium-up--one-third":
<div class="featured-collection" data-section-id="featured-collection" data-section-type="featured-collection-section">
<h2 class="visually-hidden">frontpage</h2>
<div class="grid grid--no-gutters grid--uniform collection-grid">
<div class="product-item grid__item medium-up--one-third">
<a class="product-item__link " href="/products/kaylava-candor-decaf-coffee-bean">
<img class="product-item__image" src="//cdn.shopify.com/s/files/1/1460/5816/products/candor-coffee-sm_grande.jpg?v=1485668871" alt="CANDOR DECAF COFFEE">
<span class="product-item__meta">
<span class="product-item__meta__inner">
<p class="product-item__title">CANDOR DECAF COFFEE</p>
<p class="product-item__price-wrapper"><span class="txt--emphasis">from</span> $15.99</p>
</span>
</span>
</a>
</div>
</div>
</div>
In Shopify you are able to edit the HTML by modifying the themes code.
The sample above looks like its either from the index.liquid template file or product-card.liquid under the snippets.
If you are able to locate the code within the template files then you can add an ID directly to the code.
Alternatively use JQUery Selectors and navigate down using the data-section-id="featured-collection" as a base.
Found a solution with help from Toby Mills!
In Boundless Theme, the "product_item grid_item" class is generated from the product-grid-item.liquid file.
Inside the top div, I added
id="home-{{ product.id }}"
Here is the final look
<div id="home-{{ product.id }}" class="product-item grid__item {{ grid_item_width }}" >
Now each div has a unique id that I can target with CSS!
<div id="home-8748279361" class="product-item grid__item medium-up--one-third" >
<a class="product-item__link " href="/products/kaylava-candor-decaf-coffee-bean">
<img class="product-item__image" src="//cdn.shopify.com/s/files/1/1460/5816/products/candor-coffee-sm_grande.jpg?v=1485668871" alt="CANDOR DECAF COFFEE">
<span class="product-item__meta">
<span class="product-item__meta__inner">
<p class="product-item__title">CANDOR DECAF COFFEE</p>
<p class="product-item__price-wrapper">
<span class="txt--emphasis">from</span> $15.99
</p>
</span>
</span>
I have a forum that i found the code for online and i am customizing it. I'm using bootstrap 3, and inside the forum i want to have an 8 x 4 grid. I followed a tutorial but instead of placing it side by side the two divs are top and bottom
<div class="row">
<div class="col-md-8">
<div class="firstPost"
<div class="postHeading">
<h3>My shot, Banff Pano</h3>
</div>
<div class="postBody">
<p>
Here is a shot of Banff Alberta, Canada.
I took a series of photographs in the portrait orientation
and, using Lightroom and Photoshop, I stitched them together and
adjusted the image to bring out more contrast and colors. The settings
are f/11 at 1/500s; ISO 280.
</p>
<p>
I'm wondering if I should have used a wider aperture and
let the background be a little more blurred
</p>
</div>
<div class="postImage">
<img src="assets/banff.jpg" />
</div>
<div class="postFooter">
<p>
Posted on 7/23/15 at 12:05PM
</p>
</div>
</div>
</div> <!-- end of 8 -->
<div class="col-md-4">
<p>Something goes here</p>
</div>
</div> <!-- end of row -->
your are missing a closing tag > here
<div class="firstPost"
should be
<div class="firstPost">
I'm working on a project for Prestashop and I have the following file:
blocktopmenu.tpl
https://github.com/PrestaShop/PrestaShop/blob/master/modules/blocktopmenu/blocktopmenu.tpl
I need to know where is the end tag for "sf-contener clearfix" < / div >
Any idea?
Thks and sorry my english!
------ EDITED POST ------
i tried it, but no work for me :(((
I placed "exampleDiv" right here:
header.tpl
<div id="header_right" class="grid_6 omega">
{$HOOK_TOP}
<div id="exampleDiv"></div>
</div>
but i look this result in Firebug:
<div id="header" class="grid_9 alpha omega">
<a id="header_logo" href="#"></a>
<div id="header_right" class="grid_6 omega">
<div id="topMenu_bg_up"></div>
<div class="sf-contener clearfix"></div>
**i wanna to play here :D**
</div>
<div id="minic_slider" class="theme-default"></div>
<div style="display:none;">
<div>
<script type="text/javascript">
<div id="exampleDiv"></div>
**but it work in this other place :(**
</div>
</div>
Here :
https://github.com/PrestaShop/PrestaShop/blob/master/themes/default/header.tpl#L84
The #header_right is closed in blocktopmenu.tpl and the topmenu is displayed under.
Edit : If you want to add content just after the topmenu, the best way is to create e module, hook it on toppage and position it just after the blocktopmenu.
I know that we can add left and right buttons in a header in Jquery Mobile App.
But can we any more buttons or controls in the header section itself?
I think I have a better solution,
<header data-role ="header" data-theme="b">
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</header>
Screenshot;
with regard to this info:
you can find it here:
http://www.metaltoad.com/sites/default/files/Responsive-Widths_0.png
you can use this code:
<style type="text/css">
#media all{
.my-header-grid.ui-grid-b .ui-block-a { width: 30%; }
.my-header-grid.ui-grid-b .ui-block-b { width: 40%; }
.my-header-grid.ui-grid-b .ui-block-c { width: 30%; }
}
}
</style>
<div class="my-header-grid ui-grid-b" data-theme="a">
<div class="ui-block-a ui-bar-a" data-theme="a">
<div align="left" style="padding-left:5px;padding-top:3px;height:33px;height:40px;">
Back
Edit
</div>
</div>
<div class="ui-block-b ui-bar-a">
<div align="center" style="padding-top:3px;height:33px;text-align:center;height:40px;">
<div style="padding-top:7px;">
<article role="heading" aria-level="1">expand </article>
</div>
</div>
</div>
<div class="ui-block-c ui-bar-a">
<div align="right" style="padding-top:3px;height:33px;height:40px;">
Add
Refresh
</div>
</div>
</div><!-- /grid-b -->
if by any chance your programming with c# mvc razor engine don't forget to write the css media tag with 2 # like so ##media because the razor engine treats 2 # as one.
you see and can play with all of the designs shown here in this link:
http://jsfiddle.net/yakirmanor/BAat8/
iv added some links but i recommend youll read this:
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
the simple implantation is:
<header data-role ="header" data-theme="a">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<a class="ui-btn-right" data-icon="back" href="#" rel="external">Refresh</a>
</header>
or this:
<div data-role="header" data-theme="b">
<a data-icon="back" href="/" rel="external">Back</a>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
or this:
<div data-role="header" data-theme="e">
<div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
<h1 class="ui-title" role="heading">Staff</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
filter
move
</div>
</div>
hope iv helped.
It might be easier to create a custom navbar instead of modifying the header toolbar, Here si the docs: http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html
This might help:
<div class="ui-btn-right">
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="refresh" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Refresh">
</a>
<!-- Home Button -->
<a href="index.html" data-role="button"
data-icon="home" data-iconpos="notext" data-direction="reverse" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" title="Home">
</a>
</div>
This gives me those nice rounded buttons, two side by side on the right side.
Just like on the mobile docs.
Works in 1.1.1, haven't tried the latest RC
I was able to achieve this by the following code:
<div data-role ="header" data-theme="b">
Prev
<div data-role="controlgroup" data-type="horizontal" style="margin-left:75px;margin-top:5px;" >
<a href="index.html" data-role="button" data-icon="arrow-l" >P.Week</a>
N.Week
</div>
Next
</div>
No, there is a hard limit of 2 as far as I have found. The best I was able to come up with was to get another unstyled link to appear.
There are however, navbars - On one of my projects, I needed a number of buttons in the header area, I placed a navbar directly below it, and was reasonable pleased with the results.
They are explained in detail here:
http://jquerymobile.com/test/docs/toolbars/docs-navbar.html