Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
zuro
Experienced
Topic Author
Posts: 53
Joined: 24 Jan 2011, 17:04

Insert row like www.photo.gallery

08 Jan 2018, 08:36

Hello
Is it possible to insert a column (rows) page like on www.photo.gallery ?
Css code or something else ?
Attachments
screen X3 row.jpg
screen X3 row.jpg (83.89 KiB) Viewed 4779 times
 
User avatar
mjau-mjau
X3 Wizard
Posts: 11298
Joined: 30 Sep 2006, 07:37

Re: Insert row like www.imagevuex.com

08 Jan 2018, 10:22

This custom page layout is possible, but requires intermediate skill levels with CSS/HTML. Hopefully we can cover these things better in our new X3 docs section coming soon. The www.photo.gallery website includes extensive custom CSS styles, and I can't explain this process in detail, but here is the gist:

1. Set your Page > Context > Width to WIDE. This is required to create the full-width content layout, where you will add your custom segments inside.

2.A Use the Foundation GRID (included in X3) to create segments inside your content. For example:
Code
<div class="row">
  <div class="small-9 small-centered columns">9 columns centered</div>
</div>
2.B OPTIONALLY, instead of the above, you can create your own HTML/CSS. For example something like this:
Code
<section class="my-section">
  <div class="my-inner-section">
    BLAH BLAH
  </div>
</section>
CSS:
Code
.my-section {
  background: #EEE; // background color for the section
  padding: 4em 1em 3em; // padding for the section
}
.my-section-inner {
  max-width: 850px; // inner section should be max 850px
  margin: 0 auto; // center the inner section
}
 
User avatar
zuro
Experienced
Topic Author
Posts: 53
Joined: 24 Jan 2011, 17:04

Re: Insert row like www.imagevuex.com

08 Jan 2018, 13:26

Thanks.
 
tomek bedn
Posts: 1
Joined: 19 Jan 2018, 11:49

Re: Insert row like www.imagevuex.com

19 Jan 2018, 14:10

oo thanks also!  :grinning: