Fallen at first hurdle - Masthead question

Terry · 2016-12-30 00:42:35

Hi,

This is my original site in CE4 http://www.terryliveseyphotography.co.uk

This is the start of backlight http://www.terryliveseyphotography.co.u … ight-test/

I can't seem to get the tagline to display as well as the image (which I know is not the correct image but I'm testing). Also I don't see to be able to put a sub tagline either?

I have the description and phone number in the header as a marketing thing; it works and making it text means that people can click it on their mobile and call me direct

How do I reproduce this in backlight - what have I missed.

Thanks,
Terry

rod barbee · 2016-12-30 01:23:45

The choices are to use an identity plate (logo image) OR use Identity plus the Tagline. You can't have both using the controls in Backlight.

I think that to do what you want with the masthead, you'll need to replace it using phplugins.

Another possible option is to move your masthead image in Tray 01 and use the copy area in Tray 01 for your tagline and linked phone number. Something like this: http://backlight-rb-test.barbeephoto.com/?page=default

Terry · 2016-12-30 01:48:19

Thanks Rod.

An expensive test then, buying all the upgrade plugins. Wasn't expecting not to have the same options as CE4.

A whole image isn't good enough as I'll loose the clickable part.

I don't know enough to write a phplugin (although I've just looked at some Matt wrote for social media) hmmm time to ponder.

Thanks for your fast response though; appreciate it

rod barbee · 2016-12-30 02:11:36

you could probably copy the existing HTML from your CE4 site:

<div id="profile-image" class="profile-image clearfix">
	<div id="profile-icon" class="profile-icon clearfix">
	<a href="/"><img alt="Advertising, Product and Commercial Photography" src="/lib/images/identityplate.png" width="450" height="89" /></a>
	</div>
	<div id="profile-labels" class="profile-labels clearfix">
 
		<h1><span><a href="/">Advertising, Product and Commercial Photography</a></span></h1>
 
		<h2><span>0800 612 4518</span></h2>
 
	</div>that 
	</div><!-- #profile-image -->

and then try styling it with custom css using the same code Matt used in CE4. That's found in the style-common.css file starting at around line 548 for the .profile-image, .profile-icon, and .profile-labels classes. It will probably need some tweaking, but it's a starting point.
(There's already a .clearfix class in Backlight)

The thing I don't know about is how this will work on mobile devices. I think that the Backlight mobile styling would take over so you might not need to provide mobile styling. This would mean you'd also need to provide a clickable phone link in the tray or in the page copy.

You'd also need to change the path to your logo image in the html.

the function in the phplugins file would look like:

function ttg_masthead_top ( $style, $path ) { 
	echo '
<div id="profile-image" class="profile-image clearfix">
	<div id="profile-icon" class="profile-icon clearfix">
	<a href="/"><img alt="Advertising, Product and Commercial Photography" src="/path-to-your-image/image.jpg" width="450" height="89" /></a>
	</div>
	<div id="profile-labels" class="profile-labels clearfix">
 
		<h1><span><a href="/">Advertising, Product and Commercial Photography</a></span></h1>
 
		<h2><a href="tel:555-555-5555">555-555-5555</a></h2>
	';
	return false;
} // END

no guarantees

Terry · 2016-12-30 02:19:20

Wow, thanks Rod. Better getting trying this. Thank you for your extra help; appreciate it I'll let you know.

Cheers,
Terry

Terry · 2016-12-30 20:39:33

Thanks for your help Rod, I finally got there

rod barbee · 2016-12-31 00:14:39

good start. Have you looked at it in smaller devices yet? Or you can just decrease the width of the browser to tablet and phone sizes and you'll see what happens with the tagline in relation to the logo image.

Terry · 2016-12-31 00:23:43

Yeah on Safari you can press CMD-ALT R and see it on a variety of devices and screen sizes. It's not 100% perfect on all of them but it will get me by for now

rod barbee · 2016-12-31 01:02:36

looks like some of your media queries are overriding each other. For example there's a media query for a max width of something like 600px followed by one for a max width of 1024. the smaller size should follow the larger size. So modifying this (with the font size) and moving it to the bottom of your custom css:

/* max-width: 784px */
@media only screen and (max-width: 600px) {
	.masthead .core {
		padding-left: 8px;
 
		padding-right: 8px;
 
		}

         .masthead h1, .masthead h2 {
               font-size: 1em;
               text-align: left;
                }
	} /* max-width: 600px */

You might want to add the .masthead h1, .masthead h2 rule to the 1024px media query instead, but still move the smaller media query to the end.

Terry · 2016-12-31 01:52:05

Okay well that buggered up when I did that. lol

Think I fixed it for the larger sizes (over 1024) now but the small ones, the text in the h2 seems to be padded out from the right way too much and I cannot find the correct bit to put in the sections to make them have no padding

Hmmm still at least it works

/* Custom_Masthead
   ========================================================================== */
.masthead .mantle {
	margin: 8px auto 0px;
	max-width: none;
	-moz-box-shadow: 0px 0px 0px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 0px rgba(0,0,0,0.5);
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
 
	}

.masthead .core {
	max-width: none;
	}

.masthead .mantle { 
	background-color: #8CB9F6;
	background-color: rgba( 140, 184, 245, 1 );
	border: 0 solid #2C2C2C;
	border-width: 0px 0 0px 0;
	padding: 10px 0 10px;
 
	}
.masthead .core { 
	background-color: transparent;
	border: none;
	padding: 0 24px 0 24px;
	}

.masthead h1, 
.masthead h2 {
	background-color: transparent;
	border: none;
	font-family: 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif;
	font-size:   32px;
	font-style:  normal;
	font-weight: normal;
	line-height: 1.2em;
	margin: 0 auto;
	text-align: right;
	text-transform: none;
	}
.masthead h1, 
.masthead a {
	color: #FFFFFF;
	color: rgba( 255, 255, 255, 1 );
	text-decoration: none;
	}
.masthead h2 {
	color: #000000;
	color: rgba( 0, 0, 0, 1 );
	font-family: 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif;
	font-size:   16px;
	font-style:  normal;
	font-weight: normal;
	margin-top: 4px;
	text-transform: none;
	}

.profile-image {
	margin: 0 auto;
	position: relative;
	}
.profile-image img {
	margin: 0;
	}
.profile-icon {
	height: 89px;
	width: 450px;
	}

.profile-labels {
	position: absolute;
		bottom: 0;
		right: 50px;
	}

@media only screen and (max-width: 1024px) {
	.masthead .mantle {
		padding-top:    8px;
		padding-bottom: 0;
		}
	.profile-icon {
		max-width: 30%;
		height: auto;
		}
	.profile-labels {
		margin: 8px 0 16px;
		max-width: 70%;
		padding: 0;
		position: static;
		}
	.masthead h1, 
	.masthead h2 {
		margin: 0;
		padding: 0;
		}
	.masthead h1 {
 
		line-height: 1.2em;
		}
	.masthead h2 {
 
		line-height: 1.2em;
		}
	} /* max-width: 1024px */

@media only screen and (max-width: 784px) {
	.masthead .mantle {
		background-color: #8CB9F6;
		background-color: rgba( 140, 184, 245, 1 );
		border: 0 solid #2C2C2C;
		border-width: 0px 0 0px 0;
		padding: 24px 0 24px;
 
		}
	.masthead .core {
		background-color: transparent;
		background-image: none;
		border: none;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 24px;
 
		padding-right: 24px;
 
		}
	.profile-icon {
		max-width: 50%;
		height: auto;
		}
	.profile-labels {
		max-width: 70%;
		margin: 8px 0 16px;
		padding: 0;

		position: static;
		}
	.masthead h1, 
	.masthead h2 {
		margin: 0;
		padding: 0;
		font-size:   14px;
		}
	.masthead h1 {
 
		line-height: 1.2em;
		}
	.masthead h2 {
 
		line-height: 1.2em;
		}
	} /* max-width: 784px */

@media only screen and (max-width: 600px) {
	.masthead .core {
		padding-left: 8px;
 
		padding-right: 8px;
 
		}
	.masthead .mantle {
		padding-top:    8px;
		padding-bottom: 0;
		}
	.profile-icon {
		max-width: 50%;
		height: auto;
		}
	.profile-labels {
		max-width: 70%;
		margin: 8px 0 16px;
		padding: 0;
		position: static;
		}
	.masthead h1, 
	.masthead h2 {
		margin: 0;
		padding: 0;
		font-size:   12px;
		}
	.masthead h1 {
 
		line-height: 1.2em;
		}
	.masthead h2 {
 
		line-height: 1.2em;
		}
	} /* max-width: 600px */

rod barbee · 2016-12-31 01:58:49

that's actually starting to look good. try adding text-align: left; to the .masthead h1, .masthead h2 rules in both media queries. That will move your tagline and phone number to the left.

Terry · 2016-12-31 02:10:00

Brilliant, Thanks again Rod

Community @ The Turning Gate

#1 2016-12-30 00:42:35

Fallen at first hurdle - Masthead question

#2 2016-12-30 01:23:45

Re: Fallen at first hurdle - Masthead question

#3 2016-12-30 01:48:19

Re: Fallen at first hurdle - Masthead question

#4 2016-12-30 02:11:36

Re: Fallen at first hurdle - Masthead question

#5 2016-12-30 02:19:20

Re: Fallen at first hurdle - Masthead question

#6 2016-12-30 20:39:33

Re: Fallen at first hurdle - Masthead question

#7 2016-12-31 00:14:39

Re: Fallen at first hurdle - Masthead question

#8 2016-12-31 00:23:43

Re: Fallen at first hurdle - Masthead question

#9 2016-12-31 01:02:36

Re: Fallen at first hurdle - Masthead question

#10 2016-12-31 01:52:05

Re: Fallen at first hurdle - Masthead question

#11 2016-12-31 01:58:49

Re: Fallen at first hurdle - Masthead question

#12 2016-12-31 02:10:00

Re: Fallen at first hurdle - Masthead question

Board footer