Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2019-11-02 04:53:09

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Pallet 1 text in mobile and large screen

I have this site with vertical navigation in the left side pallet.
In one of the albums, I am trying out displaying the credits that correspond to the gallery within the album.
On the large screen display, I wrote the credits in Backlight>Publisher>Galleries>BILAN>Edit Album>Page Content>Pallet 01 copy. This results in the credits being displayed correctly under the navigation in Pallet 01.
The source code looks like this:

<div class="widget textwidget">

			<div class="textwidget">
			<p>Texte de  <strong>MARCEL DUBÉ</strong> </p>
<p>Mise en scène: BENOÎT VERMULEN<br />
Décor: RAYMOND MARIUS BOUCHER<br />
Éclairages: ANDRÉ RIOUX<br />
Costumes: LINDA BRUNELLE</p>
<p>du 13 novembre au 8 décembre 2019</p> 
						</div>

However, in the Mobile display, it is not feasible because written this way, the credits are buried under the hamburger menu.

So, I should have these credits written in the main collum, just over the thumbnails for them to show up on the main screen of the mobile.
Rod has suggested...

Write your text using html, putting the text for the pallet in a div with the ID of “pallet-credits” (or whatever makes sense)
And put the album copy text inside a div with an ID of “copy-credits”

Does this mean I should write these in Backlight>Publisher>Galleries>BILAN>Edit Album>Page Content>Main copy for the large display, and in in Backlight>Publisher>Galleries>BILAN>Edit Album>Page Content>Pallet 01 copy for the mobile?

I'm still learning this stuff and sometimes the curve is steep, at least for me.

https://pideja.ca/galleries/03-tnm/sais … 9/2-bilan/

Offline

#2 2019-11-02 06:44:38

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,088
Website

Re: Pallet 1 text in mobile and large screen

Does this mean I should write these in Backlight>Publisher>Galleries>BILAN>Edit Album>Page Content>Main copy for the large display, and in in Backlight>Publisher>Galleries>BILAN>Edit Album>Page Content>Pallet 01 copy for the mobile?

Exactly
Put the copy in a div with its own ID and then write css to display it when needed (using a media query that has the same breakpoint as your page template)


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#3 2019-11-02 07:04:05

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,088
Website

Re: Pallet 1 text in mobile and large screen

Use code like this in the album's pallet:

<div id="pallet-credits">
	<p>Your text</p>
	<p>Your text</p>
	<p>Your text</p>
</div>

and this in the album's main copy:

<div id="main-copy-credits">
	<p>Your text</p>
	<p>Your text</p>
	<p>Your text</p>
</div>

Add this to your custom css:

/*This makes it so that the copy in the #main-copy-credit div is not displayed by default*/

#main-copy-credits {
	display:none;
}

/*This controls when the text is displayed. Set max-width to the same break-point as the page template. 
For browser widths at the break-point or less (mobile sizes), the copy in the #main-copy-credits div will be displayed and 
the copy in the #pallet-credit div won't be*/	

@media screen and (max-width: 640px) {
		#main-copy-credits {
			display:block;
		}
		#pallet-credits {
			display:none;
		}
}

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#4 2019-11-04 03:13:40

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Pallet 1 text in mobile and large screen

Implemented this code and...all formatting is lost! https://pideja.ca/galleries/03-tnm/sais … 9/2-bilan/
Vertical navigation is now below the thumbnail grid on the desktop; it should rather look like this: https://pideja.ca/galleries/03-tnm/sais … 1-candide/. A by-product is that now the credits show up on the larger image page as well, but correctly formatted. Interesting.
On the mobile, credits are over the thumbnails but there is no longer any navigation under the hamburger.

Last edited by pideja (2019-11-04 03:16:33)

Offline

#5 2019-11-04 03:36:20

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,088
Website

Re: Pallet 1 text in mobile and large screen

must be something to do with your settings, because it's working fine for me on my test site.

In any html you've written for that page, make sure all tags are properly closed

And make sure you're using a plain text editor to write the html and css

And for the copy, make sure you're either copy/pasting from a plain text editor or that you're writing the html directly in the album copy fields


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#6 2019-11-04 04:01:52

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Pallet 1 text in mobile and large screen

I copied the code from the reply and put in the requisite credits. Looks like this:

credits
and, here is the complete CSS code:

    /* Style the header */

		.body {
				/*background-blend-mode: lighten;*/
				background-color: #000000;
				/*background-image: #000000;
*/
		}
		/* Kabel font */

		font-family: Helvetica Neue,'sans serif';
		src: url (/custom/css/ITCKabelStd-Medium.otf);
}
    /* Pallet */
.page__pallet {
		background-color: FEF5D2;
		color: #f7f5d2;
		flex-basis: auto;
		flex-grow: 1;
		margin: 0px 0;
		min-width: 200px;
		max-width: 200px;
		width: 200px;
}
   /* pallet text-align*/
/*.widget {
		color: #f7f5d2;
		text-align: center;
		font-size: 0.875em;
		line-height: 1.5em;
		padding: 0 0px;
}*/

/*This makes it so that the copy in the #main-copy-credit div is not displayed by default*/

#main-copy-credits {
	display:none;
}

/*This controls when the text is displayed. Set max-width to the same break-point as the page template. 
For browser widths at the break-point or less (mobile sizes), the copy in the #main-copy-credits div will be displayed and 
the copy in the #pallet-credit div won't be*/	

@media screen and (max-width: 640px) {
		#main-copy-credits {
			display:block;
		}
		#pallet-credits {
			display:none;
		}
}
   /* page copy (mentions créateurs)*/
.the_copy {
		font-size: 1rem;
		line-height: 1.5rem;
		margin: 0;
}
   /* large image */
.single_image figcaption {
		font-family: Helvetica Neue, 'sans serif';
		text-align: center;
		font-size: 1.00em;
		color: #e0e0e0;
}
:first-child {
		font-weight: light;
}
:nth-child(2) {
		font-weight: italic;
}
.thumbnail {
		position: relative;
		width: 200px;
		height: 200px;
		overflow: hidden;
}
   /* contact */
@media only screen and (min-width: 768px) {
		.contact-form {
				margin: 0 auto !important;
				width: 50%;
		}

		.contact-form input {
				max-width: 100% !important;
		}
	 /* Display list items side by side */

		ul.breadcrumbs li {
				display: inline-block;
				font-size: 1 rem;
				padding: 60px 16px;
		}
		/* Add a color to all links inside the list */

		.breadcrumbs li a {
				font-weight: light;
				font-size: 1 rem;
				color: rgb(0, 0, 0);
		}
		/* Add a color on mouse-over */

		.breadcrumbs li a:hover {
				color: rgb(255, 246, 208);
				font-weight: 200;
		}
		/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

		/* Portrait */

		@media only screen

		and (min-device-width: 375px)

		and (max-device-width: 667px)

		and (-webkit-min-device-pixel-ratio: 2)

		and (orientation: portrait) {

		}

		/* Landscape */

		@media only screen

		and (min-device-width: 375px)

		and (max-device-width: 667px)

		and (-webkit-min-device-pixel-ratio: 2)

		and (orientation: landscape) {

		}
		/* mobile navigation */

		@media screen and (max-width: 667px) {
				.page__toggle__buttons label {
						margin-right: 10px /*!important*/;
				}
				.force-mobile-nav .page__toggle__buttons label::after {
						display: inline;
						content: 'Menu';
				}
				.top-bar,
				.middle-bar,
				.bottom-bar {
						display: none;
				}
		/* @media only screen and (min-width: 375px)/* album thumbnails */
				.albumthumbnail {
						position: relative;
						width: 100%;
		/* height: 50px; */
						/*box-sizing: border-box;*/
						overflow: hidden;
				}
		/* Style the navigation menu */
				.page__toggle__buttons label {
						overflow: hidden;
						background-color: #333;
						position: relative;
				}
		/* Style navigation menu links */
				.page__toggle__buttons label a {
						color: white;
						padding: 14px 16px;
						text-decoration: none;
						font-size: 17px;
						display: block;
				}
		/* Style the hamburger menu */
				.page__toggle__buttons label .icon {
						background: black;
						display: block;
						position: absolute;
						right: 0;
						top: 0;
				}
		/* Add a grey background color on mouse-over */
				.page__toggle__buttons label a:hover {
						background-color: #ddd;
						color: black;
				}
		/* Style the active link (or home/logo) */
				.active {
						background-color: #4CAF50;
						color: white;
				}
}

I commented  the previous CSS settings (Pallet text-align) but left in the "page copy (mentions créateurs)" active. It does not seem to do anything anyway.

Offline

#7 2019-11-04 04:31:36

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,088
Website

Re: Pallet 1 text in mobile and large screen

you haven’t included the closing </div> tags for either copy section


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#8 2019-11-04 10:07:48

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Pallet 1 text in mobile and large screen

Sorry about that...looks good now.

Thank you.

Offline

#9 2019-11-04 22:52:24

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Pallet 1 text in mobile and large screen

UPDATE:

Thanks to your help, I'm moving along although still quite slowly.
I've started styling the credits more to my liking, using CSS and based on the HTML code you suggested.

I will now implement this formatting all through the site, to all albums.

Offline

Board footer

Powered by FluxBB