Top Pallet Logo

pideja · 2019-06-21 22:26:10

Trying to implement a solution suggested on a previous post (2017-10-01) in order to have a logo in the top pallet.

This is the php:

function function pallet_top_title( $style, $path ) { 
    echo '
        <li class="top-pallet-logo">
            <a href="/">
                <picture>
                    <source media="(max-width: 440px)" srcset="/backlight/custom/images/BannierePIDEJA_beige.png">
                    <img src="/backlight/custom/images/BannierePIDEJA_beige.png">
                </picture>
            </a>
        </li>
    ';
  return false;
} // END

and the CSS:

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

/* logo as background image */------------------------------------------

 .top-pallet-logo {
    background-image: url("/backlight/custom/images/BannierePIDEJA_beige.png");
    background-repeat: no-repeat;
    width: 100%;
    height: 48px;
}
li.top-pallet-logo a {
    display: block;
    width: 100%;
    height: 100%;
    }

Nothing shows up.

Previouly, I tried this php:

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

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

  ';
  return false;
} // END

with this CSS:

/* 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;
    background-size: auto;
}

 li.page__pallet__top a {
    display: block;
    width: 100%;
    height: 100%;
}

I am trying this out internally, using MAMP so I don't know how I could provide an example.

rod barbee · 2019-06-21 22:31:50

The beginning of the php is all wrong.
I think we’ve been through this before http://community.theturninggate.net/vie … hp?id=9281

pideja · 2019-06-21 23:27:56

Reverted to the indications from the previous post but, I must be missing something...
PHP:

<?php

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

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

  ';
  return false;
} // END

And the CSS:

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

/* logo as background image */------------------------------------------

 .top-pallet-logo {
    background-image: url("/backlight/designer/?c=page&a=image&p1=11");
    background-repeat: no-repeat;
    background-size: auto;
}
li.top-pallet-logo a {
    display: block;
    width: 100%;
    height: 100%;
    }

I'm sorry to re-hash all this but evidently, something has gone astray here.

rod barbee · 2019-06-21 23:36:22

You’re using the old format for phplugins.
Be sure you’re starting with the pangolin-sample-phplugins.php file.

And you no longer need ($style, $path). See the thread I previously linked to.

pideja · 2019-06-22 00:35:45

My revised php:

<?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
{

function pallet_top_title() { 
	// Below, the default markup for the title. The LI wrapping element is mandatory;
	// replace the inner HTML as you see fit. Retain the "masthead_pallet_top" class and styling,
	// or assign a new class, with styling defined in custom CSS.
	// Take note, the top pallet height is a 48px fixed value.
	echo '

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

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

This seems to work as I can see the top pallet, but without the image.
The CSS:

/* Top Pallet Banner*/        ------------------------------------------

 .page-pallet__top > .content > ul > li {
    margin: 0;
    height: 40px;
} 

/* logo as background image */------------------------------------------

.top-pallet-logo {
    background-image: url("/backlight/designer/?c=page&a=image&p1=11");
    background-repeat: no-repeat;
    width: 192px;
    height: 48px;
}
li.top-pallet-logo a {
    display: block;
    width: 100%;
    height: 100%;
    }

Last edited by pideja (2019-06-22 00:39:30)

rod barbee · 2019-06-22 01:55:57

Double check the image url

pideja · 2019-06-22 02:39:51

I've tried:

 background-image: url("https://pideja.ca/backlight/data/designer/image_uploads/11");

and

background-image:url("https://pideja.ca/backlight/designer/page/image/11")

and

background-image:url("/backlight/designer/?c=page&a=image&p1=11");

The top line is the actual path to the Backlight uploaded images. The other two are from examples found in TTG and your site.

I'm beginning to suspect that something might be wrong with my MAMP setup because I've tried so many variations with no results. Even outlandish settings don't show up.

pideja · 2019-06-22 02:42:12

As it is, my php:

<?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
{

function pallet_top_title() { 
	// Below, the default markup for the title. The LI wrapping element is mandatory;
	// replace the inner HTML as you see fit. Retain the "masthead_pallet_top" class and styling,
	// or assign a new class, with styling defined in custom CSS.
	// Take note, the top pallet height is a 48px fixed value.
	echo '

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

	';
	return false;
}
	 
	 function page_match($gallery) {
   if (substr($_SERVER["REQUEST_URI"], 0, strlen($gallery)) == $gallery) {
      return 1;
   }  else {
      return 0;
   }
}

    function ttg_crumb($page_name)
    {
        echo '<ul class="breadcrumbs"><li class="fa_pseudo" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/" itemprop="url"><span itemprop="title">Home</span></a></li><li class="fa_pseudo" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">' . $page_name . '</span></li></ul>';
    }


} // END /**/

?>

That last part is old, I know but it's been lifted from a similar site I built that does have a logo in the top pallet, so I figured it must be useful. My CSS:

/* Top Pallet*/        ------------------------------------------

 .page-pallet__top > .content > ul > li {
    height: 50px;
	
} /* logo as background image */------------------------------------------

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

Last edited by pideja (2019-06-22 02:44:17)

rod barbee · 2019-06-22 03:19:49

pideja wrote:

I'm beginning to suspect that something might be wrong with my MAMP setup because I've tried so many variations with no results. Even outlandish settings don't show up.

if this is in MAMP, then those urls probably won't work (unless those images are actually online at that location).

have you tried:

background-image: url(/backlight/data/designer/image_uploads/11")

pideja · 2019-06-22 03:52:46

That did not work.

I also uploaded the image to the online version of the site and copied the URL from Backlight>Uploaded images>(Image name) and it's: https://pideja.ca//backlight/designer/page/image/11

.top-pallet-logo {
    background-image: url("https://pideja.ca//backlight/designer/page/image/11");
    background-repeat: no-repeat;
    width: 192px;
    height: 48px;

So, now I really don't know what to do.

Last edited by pideja (2019-06-22 03:54:00)

pideja · 2019-06-22 04:15:47

Now, as a last ditch attempt, I inserted

.top-pallet-logo {
    background-image: url("https://pideja.ca//backlight/designer/page/image/11");
    background-repeat: no-repeat;
    width: 192px;
    height: 48px;

into the CSS of the live (on line) site.

Same result=no result!

rod barbee · 2019-06-22 05:55:20

from your css above:

 .page-pallet__top > .content > ul > li {
    height: 50px;
	
}

The selector is wrong.
It should be:

.page__pallet__top > .content > ul > li

rod barbee · 2019-06-22 06:09:19

pideja wrote:

Now, as a last ditch attempt, I inserted
.top-pallet-logo {
    background-image: url("https://pideja.ca//backlight/designer/page/image/11");
    background-repeat: no-repeat;
    width: 192px;
    height: 48px;
into the CSS of the live (on line) site.
Same result=no result!

if you activate it we might be able to see what's going on. (I didn't see the css at pideja.ca)

rod barbee · 2019-06-22 06:11:19

maybe a stupid question, but if you're not seeing anything at all.... are phplugins and custom css activated in the page template?

pideja · 2019-06-23 03:56:45

First, I had forgotten to activate the php plugin;
then, after activating it and refreshed the page, I got a blank page with this:

Something went wrong
Unexpected error: syntax error, unexpected '*', expecting function (T_FUNCTION) in pideja.php on line 53
Please report error at http://community.theturninggate.net

Ran the php thru a php checker with a similar result.
The php:

<?php

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
{
/*  ITC Kabel font */

/*function head() {
echo '
<link rel="stylesheet" type="text/css" href="kabel.css">
';
}*/

// Display the logo in pallet_top
function pallet_top_title() { 
	
	echo '

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

	';
	return false;
}
	 
?>

Since this php file is copied from the Pangolin sample with green text removed, I probably missed something...looking for it!

By the way, the online version I'm working with is https://pideja.ca Still undecided as to the design of the page so the navigation and other links are not quite set. Doing this because the MAMP version does not respond to the changes I make to the php and the CSS.

Last edited by pideja (2019-06-23 04:28:37)

Daniel Leu · 2019-06-23 05:50:23

You are missing a curly closing bracket to close the class before the php closing tag.

rod barbee · 2019-06-23 07:43:54

One way to make sure that all the code that needs to be there is there, is to place your own code in the area below:
// SET USER FUNCTIONS BELOW
and above:
// END USER FUNCTIONS

Delete any functions in that area that you don't need but leave the rest of the file as is. It's just text so doesn't take up much of any room on the server and doesn't affect site load times.

You'll save yourself some headaches that way.

pideja · 2019-06-24 23:49:25

Thanks to Daniel and Rod's suggestions, I got the error out of the php file. But, still no top pallet logo.
CSS:

.top-pallet-logo {
    background-image: url("https://pideja.ca//backlight/data/designer/image_uploads/12");
    background-repeat: no-repeat;
    width: 192px;
    height: 48px;

php:

function pallet_top_title() {

	echo '

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

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

rod barbee · 2019-06-24 23:56:48

which site is this for?
can you post a link?

If this is for pideja.ca, then there appears that the phplugins file is either not inserting the html or the wrong file is being used.

The custom css has multiple problems too.

pideja · 2019-06-25 01:58:50

Yes, this is for pideja.ca.

Using a php file that is similar to "php-pangolin-sample" exept that I inserted the code for the top pallet in the // SET USER FUNCTIONS BELOW area. The only other change is that I removed most of the commented lines.
As for the CSS, I changed the URL of the logo from

background-image: url("https://pideja.ca//backlight/designer/page/image/11");

Last edited by pideja (2019-06-25 01:59:53)

rod barbee · 2019-06-25 02:19:38

the html that the phplugins should be inserting is not being inserted.
In your template, under Masthead, Top Pallet Title should be Visible on Desktop. (mobile too, if you want it there.) Check for that.

Your css has problems too:

font-family: 'ITC Kabel Std', sans-serif;

this is just a font-family declaration but it's not being applied to any selector or element

.top-pallet-logo {
    background-image: url("https://pideja.ca//backlight/data/designer/image_uploads/12");
    background-repeat: no-repeat;
    width: 192px;
    height: 48px;

This rule has not been closed with a closing brace }

    :first-child {
    font-weight: light;
}
    :nth-child(2) {
    font-weight: italic;
}

These are just sitting out there, not being applied to any selector. Pseudo selectors need to be attached to another selector or an element:

p:first-child {
.....
}

@media only screen and (min-width: 768px) {
    .contact-form {
    margin: 0 auto !important;
    width: 50%;
    }

.contact-form input {
  max-width: 100% !important;
}

ul.breadcrumbs li {
    font-size: 1.20rem;
}
.breadcrumbs a {
	font-weight: bold;
	font-size: 1.15rem;
	color: FF2115;
}
.breadcrumbs li a:hover {
              color: white;
}
@media only screen and (min-width: 360px)
.album_thumbnail {
 position: relative;
    width: 100px;
    height: 100px;
}

This media query hasn't been properly closed. It needs another closing brace } at the end

Daniel Leu · 2019-06-25 03:58:47

Pierre, to check your css code, just run it through a validator such as https://jigsaw.w3.org/css-validator/val … pideja.css

pideja · 2019-06-25 23:03:16

I revised, as much as I could, the CSS as the php is now error free.

/* Style the header */

.body {
background-color : #000000;
/*background-blend-mode : normal;*/
}

@font-face {
	font-family: 'ITC Kabel Std', Helvetica Neue;
	src: url('ITCKabelStd.otf'),
	}


.top-pallet-logo {
background-image : url("https://pideja.ca//backlight/data/designer/image_uploads/12");
background-repeat : no-repeat;
width : 192px;
height : 48px;
}
.single_image figcaption {
font-family : 'ITC Kabel Std', sans-serif;
text-align : center;
font-size : 1.00em;
color : #e0e0e0;
}
.thumbnail {
height : 200px;
overflow : hidden;
position : relative;
width : 200px;
}

/* contact */

@media only screen and (min-width: 768px) {
.contact-form {
margin : 0 auto !important ;
width : 50%;
}
.contact-form input {
max-width : 100% !important ;
}
ul.breadcrumbs li {
font-size : 1.20rem;
}
.breadcrumbs a {
font-weight : bold;
font-size : 1.15rem;
}
.breadcrumbs li a:hover {
color : white;
}

@media only screen and (min-width: 360px) {
.album_thumbnail {
 position: relative;
 width: 100px;
 height: 100px;
}
}

I know that those two curly braces (RBRACE) at the end look weird to me but according to CSS Lint, it's what is needed there.
CSS Lint also finds one error on line 54 (expected RBRACE) but it's written exactly like line 35 so I fail to see the problem. Other than that, there are two warnings because of the "!important" on lines 37 and 41 but I'll pass on these for the moment.
I realize we are drifting off topic and it's beginning to look like a CSS tutoring, and I'm sorry. I think after this reply I'd best try to find the solution on my own and not waste more of your time. Thank you for everything.

Last edited by pideja (2019-06-25 23:03:51)

rod barbee · 2019-06-25 23:45:08

pideja.ca still does not have the html that includes the top pallet title. Is Top Pallet Title set to Visible on Desktop in the page template under Masthead?

this media query:

@media only screen and (min-width: 768px) {
.contact-form {
margin : 0 auto !important ;
width : 50%;
}
.contact-form input {
max-width : 100% !important ;
}
ul.breadcrumbs li {
font-size : 1.20rem;
}
.breadcrumbs a {
font-weight : bold;
font-size : 1.15rem;
}
.breadcrumbs li a:hover {
color : white;
}

needs a closing curly brace.

I know that those two curly braces (RBRACE) at the end look weird to me but according to CSS Lint, it's what is needed there.

Nothing weird about it. the first line in a media query ends in an opening curly brace. Following that are all the rules you want to contain in the media query. Each of these rules contain opening and closing curly braces.
after all rules are written, you then have to close the media query.

rod barbee · 2019-06-25 23:48:13

pideja wrote:

I realize we are drifting off topic and it's beginning to look like a CSS tutoring, and I'm sorry. I think after this reply I'd best try to find the solution on my own and not waste more of your time.

If you have other css questions unrelated to the top pallet logo issue, just start another topic.

Community @ The Turning Gate

#1 2019-06-21 22:26:10

Top Pallet Logo

#2 2019-06-21 22:31:50

Re: Top Pallet Logo

#3 2019-06-21 23:27:56

Re: Top Pallet Logo

#4 2019-06-21 23:36:22

Re: Top Pallet Logo

#5 2019-06-22 00:35:45

Re: Top Pallet Logo

#6 2019-06-22 01:55:57

Re: Top Pallet Logo

#7 2019-06-22 02:39:51

Re: Top Pallet Logo

#8 2019-06-22 02:42:12

Re: Top Pallet Logo

#9 2019-06-22 03:19:49

Re: Top Pallet Logo

#10 2019-06-22 03:52:46

Re: Top Pallet Logo

#11 2019-06-22 04:15:47

Re: Top Pallet Logo

#12 2019-06-22 05:55:20

Re: Top Pallet Logo

#13 2019-06-22 06:09:19

Re: Top Pallet Logo

#14 2019-06-22 06:11:19

Re: Top Pallet Logo

#15 2019-06-23 03:56:45

Re: Top Pallet Logo

#16 2019-06-23 05:50:23

Re: Top Pallet Logo

#17 2019-06-23 07:43:54

Re: Top Pallet Logo

#18 2019-06-24 23:49:25

Re: Top Pallet Logo

#19 2019-06-24 23:56:48

Re: Top Pallet Logo

#20 2019-06-25 01:58:50

Re: Top Pallet Logo

#21 2019-06-25 02:19:38

Re: Top Pallet Logo

#22 2019-06-25 03:58:47

Re: Top Pallet Logo

#23 2019-06-25 23:03:16

Re: Top Pallet Logo

#24 2019-06-25 23:45:08

Re: Top Pallet Logo

#25 2019-06-25 23:48:13

Re: Top Pallet Logo

Board footer