template analysis

pideja · 2019-11-26 08:14:53

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?

rod barbee · 2019-11-26 08:43:16

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.

pideja · 2019-11-26 09:10:48

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.

rod barbee · 2019-11-26 09:17:59

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"

pideja · 2019-11-27 02:03:14

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.

rod barbee · 2019-11-27 02:07:40

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

pideja · 2019-11-27 03:11:21

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

rod barbee · 2019-11-27 04:08:23

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

pideja · 2019-11-27 04:09:02

UPDATE

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

pideja · 2019-11-27 04:15:32

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)

rod barbee · 2019-11-27 04:23:47

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

pideja · 2019-11-28 02:25:47

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.

rod barbee · 2019-11-28 02:33:03

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.

pideja · 2019-11-28 04:59:18

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

rod barbee · 2019-11-28 06:46:27

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/

Community @ The Turning Gate

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

template analysis

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

Re: template analysis

#3 2019-11-26 09:10:48

Re: template analysis

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

Re: template analysis

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

Re: template analysis

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

Re: template analysis

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

Re: template analysis

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

Re: template analysis

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

Re: template analysis

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

Re: template analysis

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

Re: template analysis

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

Re: template analysis

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

Re: template analysis

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

Re: template analysis

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

Re: template analysis

Board footer