Page 1 of 1

Differently colored sections (page background)

Posted: 27 Mar 2024, 03:42
by trpgforum
Hello Karl

I am looking for a way to design my site in a similar way to your wonderful site https://www.photo.gallery. In other words, with alternating sections below the header, whereby the text should only use the middle area on larger screens.

It is enough to be able to color the background differently. The nice little "triangle" that you use is not necessary.

I assume that this is done exclusively via HTML/CSS. Do you have a tip or a link?

Many thanks and best regards from Basel
Thomas

Re: Differently colored sections (page background)

Posted: 28 Mar 2024, 00:06
by mjau-mjau
Hello Thomas. The process of designing the home page took up to two weeks, although the technical implementation of sections, would take much less. It nevertheless a tedious process, as you need to balance everything and also take into consideration how everything stacks on mobile devices. The general idea, is to first set your page context module to wide (100% width), and then in your custom content section, you will need to build the custom html structure, using column classes and custom classes.

I already published www.photo.gallery for download a while ago, because someone else was asking:
www.photo.gallery.25.sep.2018.zip

It contains /content/ and /config/ dirs for www.photo.gallery, which you could either install in a separate X3 for testing, or extract the pages and data you want to read. Basically, you would find the html structure in the index page, as custom CSS in custom/files/css/*.

Simplified example of html structure for a section:
Code
<div class="mysection">
  <div class="row">
    <div class="medium-6 columns">
    <div class="medium-6 columns">
  </div>
</div>
For sure you would need to dive into HTML and CSS.

A couple other users did something similar:
danielbollinger.de
alanmacleod.co.uk

Re: Differently colored sections (page background)

Posted: 28 Mar 2024, 02:58
by trpgforum
Hello Karl

Thats great! Thank you so much!

Wish you a happy Easter!