Page 1 of 1

Insert row like www.photo.gallery

Posted: 08 Jan 2018, 08:36
by zuro
Hello
Is it possible to insert a column (rows) page like on www.photo.gallery ?
Css code or something else ?

Re: Insert row like www.imagevuex.com

Posted: 08 Jan 2018, 10:22
by mjau-mjau
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
}

Re: Insert row like www.imagevuex.com

Posted: 08 Jan 2018, 13:26
by zuro
Thanks.

Re: Insert row like www.imagevuex.com

Posted: 19 Jan 2018, 14:10
by tomek bedn
oo thanks also!  :grinning: