Community @ The Turning Gate

Support community for TTG plugins and products.

NOTICE

The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.

This forum is now closed, and exists here as a read-only archive.

  • New user registrations are disabled.
  • Users cannot create new topics.
  • Users cannot reply to existing topics.

You are not logged in.

#1 2018-03-02 00:25:30

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

Vertical navigation shifting position

In this test site, I use vertical navigation in pallet 1. All is well except when landing on "oeuvres" (galleries). The pallet seems to shift a little to the left.
But all page templates are the same. What's going on here?

pideja.ca/luc/fr

Offline

#2 2018-03-02 00:42:03

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

Re: Vertical navigation shifting position

your page templates are not the same. Oeuvres uses a page template named "oeuvres"
your home page uses a page template named "lucfr-accueil". Each of your pages are using a different template.

Not only that, the Oeuvres page is using a different css file than the others. There's inconsistency between the page templates and the custom css files they're using.

In another thread, Daniel made the suggestion of using one page template and using css to place a different background for each page. Instead of needing to manage four separate page templates and at least two custom css files, it might make more sense to follow his advice.


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

Offline

#3 2018-03-02 01:56:44

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

Re: Vertical navigation shifting position

I designed one-page template the way I want it. I then cloned it so the layout and navigation are the same. Then just change your background image. The CSS used in "Oeuvres" is different from the others in order to take into account the album set thumbnails.
So, I should have one template only for all my pages and one CSS file for all, assigning a section to each page?
How do I address each page's different background and other customizations? Daniel indicates I should use body classes to address the different pages such as :

<body class="pangolin type-page template-id-11 template-identifier-lucfr-acceuil pages-template-id-5 pages-template-identifier-accueil slug-accueil cart-unready crg-unready" data-layout="2col left">
<body class="pangolin type-page template-id-11 template-identifier-lucfr-acceuil pages-template-id-5 pages-template-identifier-oeuvres slug-oeuvres cart-unready crg-unready" data-layout="2col left">

But I'm not too sure how to implement this. Do I add all the page's identifiers and slugs?

Last edited by pideja (2018-03-02 02:00:54)

Offline

#4 2018-03-02 04:17:57

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

Re: Vertical navigation shifting position

I'd use the slug class: .slug-accueil, etc.

Like this, from some code you already had in your css. I just used the body tag rather than the main__column class:

body.slug-oeuvres {
	background-attachment: fixed;
	background: rgb(25, 25, 25); /* Fall-back for browsers that don't support rgba */
	background: rgba(25, 25, 25, .05); 
	background-image: url(http://pideja.ca/luc/fr/backlight/designer/?c=page&a=image&p1=15&178); 
	background-size: auto;
	background-position: center ;
	background-repeat: no-repeat;
		
}

body.slug-bio {
	background-attachment: fixed;
	background: rgb(25, 25, 25); /* Fall-back for browsers that don't support rgba */
	background: rgba(25, 25, 25, .05); 
	background-image: url(http://pideja.ca/luc/fr/backlight/designer/etc....); 
	background-size: auto;
	background-position: center ;
	background-repeat: no-repeat;
		
}

body.slug-about {
	background-attachment: fixed;
	background: rgb(25, 25, 25); /* Fall-back for browsers that don't support rgba */
	background: rgba(25, 25, 25, .05); 
	background-image: url(http://pideja.ca/luc/fr/backlight/designer/etc...); 
	background-size: auto;
	background-position: center ;
	background-repeat: no-repeat;
		
}

body.slug-content {
	background-attachment: fixed;
	background: rgb(25, 25, 25); /* Fall-back for browsers that don't support rgba */
	background: rgba(25, 25, 25, .05); 
	background-image: url(http://pideja.ca/luc/fr/backlight/designer/etc...); 
	background-size: auto;
	background-position: center ;
	background-repeat: no-repeat;
		
}

Just place the url for each page's image where it belongs.


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

Offline

#5 2018-03-02 04:57:52

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

Re: Vertical navigation shifting position

The CSS used in "Oeuvres" is different from the others in order to take into account the album set thumbnails.

No need for a separate css file for this. Just add it to the other file and use one css file for the whole site.


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

Offline

#6 2018-03-04 07:42:13

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

Re: Vertical navigation shifting position

Not too sure I want to combine both CSS files just now. Kinda scary for me. Anyway, I noticed that the pages where not all the same maximum size. I set them all to 1440px and the navigation pallets are all at the same position. No more shifting! What I don't get is that all the pages save for the gallery page are clones of the Home page. Only the Background image changes. I guess I must have played with that setting without realizing the consequences.

Offline

Board footer

Powered by FluxBB