Some advices for the new "backlight powered page"

MoritzCH · 2016-09-04 23:48:49

Hi,

I am using TTG plugins (CE4 Pages and stuff) for quite some time now and would like refresh my page using backlight. Due the fact I am not very into design specific stuff I would like to ask you for some tips and ideas to "optimize" my page to serve a good level of design.

Before you start --> Klick me for the old page

What I would like to change is the background. For me it is a bit too much. It distracts (at least me) a bit from the real purpose of this page. "Info", "About" and "Contact" are going to be on the same page and the gallery link will be splitted into 6 (1 for each continent) seperate galleries containing the different albums. Overall I would like to make my site more straight. It is a private page (sharing my holiday pictures and leisure pictures) for my relatives and friends so there is no need for a big show

This is my test page right now --> Klick me for the new page

What isn't done right now are the pictures titles and the "entrance gallery". Maybe I am wrong and my old design is not that bad ... I am open for any suggestion you have!

Thank you in advance
Moritz

Matthew · 2016-09-05 11:26:45

Hi Moritz,

I agree, losing the background is a good idea. Perhaps you should try a similar shade of blue as a simple background color, or a CSS gradient.

Also, you might consider implementing a custom, responsive masthead. So on desktop:

Around the Globe ... the first step is just the beginning ...

And on mobile:

Around the Globe
... the first step is just the beginning ...

MoritzCH · 2016-09-26 02:21:10

Finally managed to implement some things and finish most parts. The biggest change is my new domain:

--> http://www.globetrotter.one (the old one will be shut down in a few weeks)

Some things I have done:

1.) Add a "picture of the week" @ the front page
-- Export 53 images you would like to show in a new folder (called mine IOTW) and rename them from 1 to 53

-- Add the following code to the PHPlugins file

/* Image of the week */
$image_folder = "/IOTW/";
$file_type = ".jpg";
$week= date('W');
$image_name = $image_folder . $week . $file_type;
/* Image of the week */

-- use this code to get the image (page)

<Center><b>Image of the week</b><br>
<img src="<?php echo $image_name; ?>" >
</Center>

2.) my custom CSS file

/*Center image captions during slideshow*/
.pswp__caption__center {
	font-size: 0.95rem;
	text-align: center;
	padding: 0.95rem;
}
/*Center image captions during slideshow*/

/*Background transparent*/
main {
	background-color: rgba(1,1,1,0);
}

	.masthead,
	nav,
	.main, .page__main,
	.page__tray[data-position="T1"],
	.page__tray[data-position="T2"] {
		background-color: rgba( 255, 255, 255, 0.5 );
}
/*Background transparent*/

/*Border Tray left*/
.page__tray[data-position="T1"] {
	border-left: 3px solid rgba( 255, 255, 255, 0.5 );
}
/*Border Tray left*/

/*Show scrollbars to avoid side shift*/
html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}
/*Show scrollbars to avoid side shift*/

3.) Encoded my "contact" mail within the code instead of using the contact form

I know that there are captions missing, working on it. I also experienced some strange behaviour while in mobile mode (single page slideshow for a few pictures instead of Photoswipe. As stated above I am open for any suggestion

rod barbee · 2016-09-26 03:15:19

the "center" tag is deprecated in html5 as is the "b" tag

you'll be better off with something like this:

<div style="margin: 0 auto;"><p><strong>Image of the week</strong></p><br>
<img src="<?php echo $image_name; ?>" >
</div>

Daniel Leu · 2016-09-26 03:32:53

Do you get people visit your home page on a weekly basis? I am wondering if it wouldn't make more sense to show just a random image? This way visitors get to see a different image every time they visit.

 $week = rand( 1 , 53 );

MoritzCH · 2016-09-26 11:42:00

@Rod
Fixed it.

@Daniel
definitely not on a weekly basis. A random picture would be an idea ... gonna change that later this day

Community @ The Turning Gate

#1 2016-09-04 23:48:49

Some advices for the new "backlight powered page"

#2 2016-09-05 11:26:45

Re: Some advices for the new "backlight powered page"

#3 2016-09-26 02:21:10

Re: Some advices for the new "backlight powered page"

#4 2016-09-26 03:15:19

Re: Some advices for the new "backlight powered page"

#5 2016-09-26 03:32:53

Re: Some advices for the new "backlight powered page"

#6 2016-09-26 11:42:00

Re: Some advices for the new "backlight powered page"

Board footer