Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2019-11-26 08:14:53

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

template analysis

I deliberately gave garish colours to different sections of a Page template in order to identify which settings affected them : page-analysis
There are two sections for which I still can't find the controls, as you can see in grey. There are the side pallet and the extra area around the image in the center of the page.
I've looked everywhere to no avail.
Any hints?

Offline

#2 2019-11-26 08:43:16

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

Re: template analysis

you can assign a background color (or transparency) to the pallets. if you do, the color will span the height entire height of the side pallet.

As to the image, is this a page or an album? If album, what kind of album template is this? If it's something like a Vegas slide show, then that grey around the image could be the background color and the reason it's there would be due to the difference between the presentation aspect ratio and the image aspect ratio.


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-26 09:10:48

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

Re: template analysis

Thanks Rod,

I am in the process of re-designing (again) this site. So, I need to be sure of where everything is at. For the image, I just went to Vegas Slide Show>Image Scaling and set it to COVER. Did the trick.

As for the pallet, I still can't find a setting to fix the background for the 01 pallet.

I'm bound to stumble upon it.

If I may, is there a way to have the navigation as a hamburger (like in the mobile)? Just wondering.

As you can see, I'm still groping for an idea for this design.

Offline

#4 2019-11-26 09:17:59

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

Re: template analysis

for the pallet:
Page template > Content Areas > Pallets

For the navigation as a hamburger icon, just set the breakpoint in the page template (in Layout) to "Always"


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

#5 2019-11-27 02:03:14

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

Re: template analysis

Thanks, Rod. I'll continue to explore design ideas...with Backlight and a pencil as well. Hope to pull myself out of this rut soon.

Take care.

Offline

#6 2019-11-27 02:07:40

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

Re: template analysis

I always have a couple of test sites going where I can try out new designs without mucking up the real sites. Makes experimenting a lot easier and safer wink


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

#7 2019-11-27 03:11:21

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

Re: template analysis

Still on this Page Template problem.

1- I've reduced navigation to the hamburger but the background is still greyish around the red button. I've corrected some of the CSS as well as Background settings to no avail;

2- The credits, originally in the side pallet on the desktop, have disappeared although I have changed the CSS to permit such a display. Still works fine on the iPhone, as intended;

3- I'm not too sure about that title: is it really on the Top Pallet? Doesn't seem to respond.


If this helps, here is the CSS (still needs cleaning up):

.body {
	background-color: #000000;
}

/* credits */

#main-copy-credits {
	    width: 900px;
        display: block;
        font-size: .8rem;
        font-weight: 400;
        text-align: center;
        line-height: 7px;        
        overflow: hidden;
        white-space: nowrap;
        padding: 0; 
   	}

.widget {
	color: #f7f5d2;
	font-size: .8em;
	line-height: .3em;
	text-align: center;
}

.page__pallet {
	background-color: #000000;
	color: #f7f5d2;
	min-width: 200px;
	max-width: 345px;
	width: 345px;
	margin: 0;
}

/* contact page copy*/

.the__copy {
	font-size: 1rem;
	line-height: 1.5rem;
	padding: 100px;
}


/* Breadcrumbs */

ul.breadcrumbs li {
	display: inline-block;
	font-size: 1.1rem;
	letter-spacing: .015em;
	line-height: 1.125rem;
	list-style: none;
	padding: 0;
}

.breadcrumbs a {
	font-size: 1rem;
	color: black;
}

.breadcrumbs li a:hover {
	font-weight: 700;
	color: #9F191E;
}

@media only screen and (min-width: 1025px) {
 ul.single_icons {
       margin-top: 20px !important;
    }
}
.albumthumbnail {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.page__toggle__buttons label {
	margin-right: 10px;
	overflow: hidden;
	background-color: #000000;
	/*position: relative;*/
}

.page__toggle__buttons label a {
	color: #FFF6D5;
	text-decoration: none;
	font-size: 17px;
	display: block;
	padding: 14px 16px;
}

.page__toggle__buttons label a:hover {
	background-color: #ddd;
	color: #000000;
}

.active {
	background-color: #9F1A1E;
	color: #FFF6D5;
}

.page__pallet__bottom>.content ul>li {
	color: #f7f5d2;
	display: inline-block;
	height: 36px;
	line-height: 36px;
	list-style: none;
	min-width: 36px;
	text-align: center;
	vertical-align: top;
	margin: 6px;
	padding: 0;
}

/*----------------MOBILE-----------------------------*/

@media screen and (max-width: 640px) {
	#main-copy-credits {
        width: 300px;
        display: block;
        font-size: .8rem;
        font-weight: 400;
        text-align: center;
        line-height: 7px;        
        overflow: hidden;
        white-space: nowrap;
        padding: 0;
    }
    
	/* #pallet-credits {
		display: none;
	} */

	/* Style the mobile menu */
	.page__toggle__buttons label {
		content: 'Menu';
		background: black;
		display: inline;
		position: absolute;
		right: 0;
		top: 0;
	}
	.single_image figcaption {
		font-family: Helvetica Neue, 'sans serif';
		text-align: center;
		font-size: 1em;
		color: #e0e0e0;
	}
	:first-child {
		font-weight: light;
	}
	:nth-child(2) {
		font-weight: italic;
	}
	.thumbnail {
		position: relative;
		width: 200px;
		height: 200px;
		overflow: hidden;
	}
	.contact-form {
		width: auto;
		margin: 0 auto;
	}
	.contact-form input {
		max-width: 100%!important;
	}
    
    .the__copy {
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 20px;

}
.body {
	background-color: #000;
}

Still stuck on pideja.ca

Offline

#8 2019-11-27 04:08:23

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

Re: template analysis

1. I'm not seeing any grey around the navigation button

2. I don't see any credits text in the html

3. the title is in the top pallet

are you sure you've posted the correct site? I'm looking at pideja.ca


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

#9 2019-11-27 04:09:02

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

Re: template analysis

UPDATE

I corrected the credits display. For now, it will have to do.

Offline

#10 2019-11-27 04:15:32

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

Re: template analysis

1. I'm not seeing any grey around the navigation button
2. I don't see any credits text in the html

The button's background has been corrected with the CSS. As well, the credits are now in the copy area; I decided to use the "old" Markdown method. Works, for now.
While I do see the title in the top pallet, I still can't change anything (font size/colour/weight) and position on the pallet (right or left).

https://pideja.ca/galleries/01-duceppe/ … 19/1-oslo/

Last edited by pideja (2019-11-27 04:45:14)

Offline

#11 2019-11-27 04:23:47

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

Re: template analysis

I'm not understanding about the button. I can turn your custom css off in the inspector and there's still no grey around it.

I still don't see credits

I see you've found out how to move the title location


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

#12 2019-11-28 02:25:47

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

Re: template analysis

I've begun re-writing the credits. For now, only two galleries have them.

Still trying to insert a custom title (banner) into the top pallet.

The hamburger button is OK.

Offline

#13 2019-11-28 02:33:03

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

Re: template analysis

pideja wrote:

Still trying to insert a custom title (banner) into the top pallet.

Do you mean a logo rather than text? If so, you've done that with some other sites so should already have that phplugins and custom css code.


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

#14 2019-11-28 04:59:18

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

Re: template analysis

Yes, I know. I'll look up previous exchanges we've had on this topic.

Offline

#15 2019-11-28 06:46:27

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

Re: template analysis

And there are these two pages that I think I've shared before: two methods of using a graphic logo in the top pallet title:
https://backlight-2-100.barbeephoto.com … ackground/
http://www.pangolin.barbeephoto.com/top … mage-logo/


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

Board footer

Powered by FluxBB