Masthead in the Top Pallet

pideja · 2018-11-30 23:22:59

Is it possible to have the Masthead sit in the Top Pallet? Or, can I write text and place an image in the top pallet?

Last edited by pideja (2018-12-01 00:11:19)

rod barbee · 2018-12-01 00:14:58

Yes.
Masthead > Top Pallet Title : Visible on Desktop : on
Primary Masthead: Disable

This will put a Text masthead in the Top Pallet. If you’re using a graphic logo you’ll need to use phplugins and custom css

pideja · 2018-12-01 03:51:03

It works but what I'd really like would be to have a different text in the top pallet. Also, that site title that runs thru out the site, on all pages is nice and I like it. It's in the Masthead/Identity/Site title. So where and how do I write another line of text within the Top Pallet?

pideja.ca/duc

I'd like to put a graphic and some text. Probably I will have to create some sort of banner to place within that blue band that is the top pallet.

Last edited by pideja (2018-12-01 03:53:11)

rod barbee · 2018-12-01 03:58:00

Did you disable the primary masthead?
Did you set Top Pallet Title (in the Masthead section) to be visible on desktop?
You can put whatever text you like in Masthead > Identity > Site Title

pideja · 2018-12-01 04:24:46

I disabled the primary masthead.
I set Top Pallet Title (in the Masthead section) to be visible on the desktop. But then, the site title appears in the top pallet.
If I then disable the top pallet title and have the main Masthead in the Header i have, in Masthead > Identity > Site Title, the site title appears in blue is displayed, centered on the page. This I want.
I'd like a graphic + text in the Top Pallet. Can I design and place a banner in the Top Pallet?

This is an example pulled from another post in the Forum dating 09/09/2018 by Sven:

http://www.sven-michael.com/

Last edited by pideja (2018-12-01 04:40:39)

rod barbee · 2018-12-01 04:46:43

When you opt to put the site title in the top Pallet, that site title becomes the masthead.

rod barbee · 2018-12-01 04:49:46

I'd like a graphic + text in the Top Pallet. Can I design and place a banner in the Top Pallet?

Yes. As mentioned above you need to do that with phplugins and custom css.

rod barbee · 2018-12-01 05:02:41

pideja wrote:

This is an example pulled from another post in the Forum dating 09/09/2018 by Sven:
http://www.sven-michael.com/

this looks like the site title and navigation are in the top pallet

pideja · 2018-12-01 05:37:25

Just like my site.

rod barbee · 2018-12-01 06:14:15

only your site (this one I believe: https://pideja.ca/duc/) doesn't have the title in the top pallet and doesn't have the primary masthead disabled. Or am I missing something in what you want to do?

pideja · 2018-12-01 06:20:22

I created a banner and that's what I want to place in the top pallet. The site title is in blue on the black background. The banner should be my ID and sit at the top.

Maybe if I define that banner as a masthead, I could place the navigation either within the masthead or just below.
But then there is the question of the site title that I wish to maintain as a text line in blue.

Here is a mockup of what I am trying to do:

Last edited by pideja (2018-12-01 06:38:39)

rod barbee · 2018-12-01 08:10:37

You could use phplugins to replace the top pallet. Then put whatever you want in there as a site title.
Then just use the Primary masthead as you normally would.

I have a couple of examples using two different methods. They're Pangolin, but in a Backlight 1.2 site so the phplugins function would need to be updated for Backlight 2
http://pangolin.barbeephoto.com/top-pallet-image-logo/
http://pangolin.barbeephoto.com/logo-background/

pideja · 2018-12-04 05:54:59

rod barbee wrote:

You could use phplugins to replace the top pallet. Then put whatever you want in there as a site title.
Then just use the Primary masthead as you normally would.
I have a couple of examples using two different methods. They're Pangolin, but in a Backlight 1.2 site so the phplugins function would need to be updated for Backlight 2
http://pangolin.barbeephoto.com/top-pallet-image-logo/
http://pangolin.barbeephoto.com/logo-background/

I'm trying to implement one of these php solutions but there is no effect on the page. You mention updating tp Backlight 2 but, in what way?

pideja · 2018-12-04 06:25:20

Here are the php and CSS I'm using:
PHP

function pallet_top_title()
{
	echo '
	<li class="logomark banniereDUC_logomark" style="float:left;">
		<a href="#">
			<ul>
			<li style="opacity:.98; top: 0%; left: 0%; width: 50%; height: 50%"></li>
			</ul>
			<h1><strong>B</strong>acklight</h1>
		</a>
	</li>
	';
	return false;
} // END /**/

CSS

 .page__pallet__top > .content > ul > li {
    margin: 0;
    height: 48px;
}

/*logo as background image*/

.top-pallet-logo {
    background-image: url("https://pideja.ca/duc/backlight/designer/page/image/8");
    background-repeat: no-repeat;
    width: 192px;
    height: 48px;
}
li.top-pallet-logo a {
    display: block;
    width: 100%;
    height: 100%;
    }

Note that "banniereDUC.png" is the image. The URL to this image in Backlight is: https://pideja.ca/duc//backlight/designer/page/image/8

But still, nothing shows up...

rod barbee · 2018-12-04 08:47:11

is Top Pallet Title set to be visible on desktop?

your html is strange. For example:

what is this for? you have styling in the li item but there's no content.

also, you're applying a background image to the .top-pallet-logo class yet your html has no element with that class. (which is one reason nothing is showing up.)

It looks to me that you're using some of Matt's sample code for putting a ttg logo in your masthead. Why include:
<h1><strong>B</strong>acklight</h1> ?

try referring to one of the links to my test site that I posted above

pideja · 2018-12-04 22:29:51

Frankly, I'm fumbling my way here...

Reverted to the suggested PHP code:

function ttg_pallet_top_title( $style, $path ) { 
  echo '

  <li class="top-pallet-logo"><a href="https://pideja.ca/duc"></a></li>

  ';
  return false;

and the CSS:

.page__pallet__top > .content > ul > li {
    margin: 0;
    height: 48px;
}

/*logo as background image*/

.top-pallet-logo {
    background-image: url("https://pideja.ca/duc/backlight/designer/page/image/8");
    background-repeat: no-repeat;
    width: 400px;
    height: 50px;
}
li.top-pallet-logo a {
    display: block;
    width: 100%;
    height: 100%;
    }

TOP PALLET has height on Desktop=ON.

Still no top pallet image.

But I get this error message: Unexpected error: syntax error, unexpected 'echo' (T_ECHO), expecting ';' or '{' in phplugins-pangolin-duc.php on line 30

rod barbee · 2018-12-04 22:38:04

You need to use the Backlight 2 form for the function:

function pallet_top_title () {
........

pideja · 2018-12-04 23:05:03

 /* Top Pallet Banner */
 
 function pallet_top_title($style, $path) {
 	 
  echo'  
  
  <li class="top-pallet-logo"><a href="https://pideja.ca/duc"></a></li>

  ';
  return false;
} // END

and

/* Top Pallet Banner */
 .page__pallet__top > .content > ul > li {
    margin: 0;
    height: 48px;
}

/*logo as background image*/

.top-pallet-logo {
    background-image: url("https://pideja.ca/duc/backlight/designer/page/image/8");
    background-repeat: no-repeat;
    width: 400px;
    height: 50px;
}
li.top-pallet-logo a {
    display: block;
    width: 100%;
    height: 100%;
}

return: Unexpected error: syntax error, unexpected 'function' (T_FUNCTION), expecting '{' in phplugins-pangolin-duc.php on line 23

rod barbee · 2018-12-04 23:18:27

No, you still need to change the function to comply with Backlight 2

This

function pallet_top_title() {

not this:

function pallet_top_title($style, $path) {

for more on this, see Daniel's sticky post in the Backlight 2 phplugins forum: http://community.theturninggate.net/vie … hp?id=8966

pideja · 2018-12-04 23:50:57

function pallet_top_title() {
 	 
  echo'  
  
  <li class="top-pallet-logo"><a href="https://pideja.ca/duc"></a></li>

  ';
  return false;
}

Tested with https://phpcodechecker.com/ and http://phptester.net/= no issues found. It's exactly as per Daniel's and your suggestion.
Still getting:

Unexpected error: syntax error, unexpected 'function' (T_FUNCTION), expecting '{' in phplugins-pangolin-duc.php on line 23

UPDATE: turned off PHP in Backlight and website displayed correctly, although there still was no logo in Top Pallet.

Last edited by pideja (2018-12-04 23:53:26)

rod barbee · 2018-12-05 00:05:35

Can you post the entire code in the phplugins file so we can see what might be on line 23

rod barbee · 2018-12-05 00:24:00

Are you using the Backlight 2 phplugins file? The phplugins files from Backlight 1 won't work (see Daniel's post).

your phplugins file should start with this, the first 25 lines:

<?php
/*
 *  TTG Core Elements "PHPlugins" User Hooks v1.2 - initialization mainline
 *
 *  developed by john bishop images (http://johnbishopimages.com)
 *  for Matthew Campagna of The Turning Gate (http://theturninggate.net)
 *
 */

function user_load($style, $path) {
  $g_tsvrl = explode(' ', $style);				// Extract gallery type
  define ('G_STYLE', strtoupper($g_tsvrl[1]));			// and set global for later
  $g_path = str_ireplace('\\','/',$path);		// change \ to /
  $chunks = explode('/',$g_path);					// and put into array
  define ('G_PATH', strtoupper($chunks[count($chunks)-2])); // gallery folder name is second to last
  //define ( 'TTG_SITE', '');								// set new site root for navigation, resources, etc.
  }

if (defined('BACKLIGHT_HOOK')) {
	require_once(realpath(BACKLIGHT_HOOK).'/modules/module-designer/application/helpers/APHPlugins.php');
}

class PHPlugins extends APHPlugins
{
/*

pideja · 2018-12-05 00:31:59

Here is the full PHP code:

<?php
/*
 *  TTG Core Elements "PHPlugins" User Hooks v1.2 - initialization mainline
 *
 *  developed by john bishop images (http://johnbishopimages.com)
 *  for Matthew Campagna of The Turning Gate (http://theturninggate.net)
 *
 */

function user_load($style, $path) {
  $g_tsvrl = explode(' ', $style);				// Extract gallery type
  define ('G_STYLE', strtoupper($g_tsvrl[1]));			// and set global for later
  $g_path = str_ireplace('\\','/',$path);		// change \ to /
  $chunks = explode('/',$g_path);					// and put into array
  define ('G_PATH', strtoupper($chunks[count($chunks)-2])); // gallery folder name is second to last
  //define ( 'TTG_SITE', '');								// set new site root for navigation, resources, etc.
  }

if (defined('BACKLIGHT_HOOK')) {
	require_once(realpath(BACKLIGHT_HOOK).'/modules/module-designer/application/helpers/APHPlugins.php');
}

class PHPlugins extends APHPlugins
{
/*
 /* Top Pallet Banner */
 
 function pallet_top_title() {
 	 
  echo'  
  
  <li class="top-pallet-logo"><a> href="https://pideja.ca/duc"</a></li>

  ';
  return false;
} 
// END/**/

 /* Top Pallet Banner */
 
 function pallet_top_title() {
 	 
  echo'  
  
  <li class="top-pallet-logo"><a> href="https://pideja.ca/duc"</a></li>

  ';
  return false;
} 
// END/**/

But, in the meantime, I turned off the PHP and altered the CSS like this:

/* Top Pallet Banner */
 .page__pallet__top > .content > ul > li {
    margin: 0;
    height: 48px;
}

/*logo as background image*/

.page__pallet__top {
    background-image: url("https://pideja.ca/duc/backlight/designer/page/image/8");
    background-repeat: no-repeat;
    width: 1920px;
    height: 50px;
}
li.page__pallet__top-logo a {
    display: block;
    width: 100%;
    height: 100%;
}

Good, not great: it doesn't look responsive. At smaller sizes than 1920, I lose the navigation buttons. Also, in Mobile sizes, the menu being left oriented sits on top of the logo-banner.
The modified the PHP works fine. Now the site displays but the navigation is still not responsive.

Last edited by pideja (2018-12-05 00:34:24)

pideja · 2018-12-05 00:48:50

Just noticed that if I change the width in

.page__pallet__top {
    background-image: url("https://pideja.ca/duc/backlight/designer/page/image/8");
    background-repeat: no-repeat;
    width: 1440px;
    height: 50px;
}

The whole Top pallet changes size, but not the logo! Is it because the logo is a background? Why isn't the top pallet responsive when the logo is applied to it?

When both the CSS and the PHP are turned off, the top pallet (with the navigation) is responsive. But alas, no logo.

Last edited by pideja (2018-12-05 00:52:27)

rod barbee · 2018-12-05 01:05:39

is that the entire phplugins file? It's missing something at the end:
} ?>

if you're going to use phplugins I suggest using one of the existing files that Matt's included in /backlight/custom/phplugins/.

And only add or remove code in the USER section. Leave everything else as is.

Community @ The Turning Gate

#1 2018-11-30 23:22:59

Masthead in the Top Pallet

#2 2018-12-01 00:14:58

Re: Masthead in the Top Pallet

#3 2018-12-01 03:51:03

Re: Masthead in the Top Pallet

#4 2018-12-01 03:58:00

Re: Masthead in the Top Pallet

#5 2018-12-01 04:24:46

Re: Masthead in the Top Pallet

#6 2018-12-01 04:46:43

Re: Masthead in the Top Pallet

#7 2018-12-01 04:49:46

Re: Masthead in the Top Pallet

#8 2018-12-01 05:02:41

Re: Masthead in the Top Pallet

#9 2018-12-01 05:37:25

Re: Masthead in the Top Pallet

#10 2018-12-01 06:14:15

Re: Masthead in the Top Pallet

#11 2018-12-01 06:20:22

Re: Masthead in the Top Pallet

#12 2018-12-01 08:10:37

Re: Masthead in the Top Pallet

#13 2018-12-04 05:54:59

Re: Masthead in the Top Pallet

#14 2018-12-04 06:25:20

Re: Masthead in the Top Pallet

#15 2018-12-04 08:47:11

Re: Masthead in the Top Pallet

#16 2018-12-04 22:29:51

Re: Masthead in the Top Pallet

#17 2018-12-04 22:38:04

Re: Masthead in the Top Pallet

#18 2018-12-04 23:05:03

Re: Masthead in the Top Pallet

#19 2018-12-04 23:18:27

Re: Masthead in the Top Pallet

#20 2018-12-04 23:50:57

Re: Masthead in the Top Pallet

#21 2018-12-05 00:05:35

Re: Masthead in the Top Pallet

#22 2018-12-05 00:24:00

Re: Masthead in the Top Pallet

#23 2018-12-05 00:31:59

Re: Masthead in the Top Pallet

#24 2018-12-05 00:48:50

Re: Masthead in the Top Pallet

#25 2018-12-05 01:05:39

Re: Masthead in the Top Pallet

Board footer