Pangolin Top Pallet Logo

Sven · 2017-07-02 00:46:17

Hey there,
just started to use Pangolin, the demonstration looks awesome!
On the demonstration page (http://theturninggate.net/galleries/) you've integrated your logo in the Top Pallet (both for desktop and mobile). Could you help me how to do this? I cannot find the option in the designer.
Many thanks! and Krgds
Sven M

gengl · 2017-07-02 02:13:01

In Design Template -

Masthead => Identity => Site Title - enter the desired title, or leave blank to use company name
=> Top Pallet - Visible on Desktop - On
=> Top Pallet - Visible on Mobile - On
=> Primary Masthead - Location - Disabled

I believe that should do it.

rod barbee · 2017-07-02 02:13:22

Try this:
In the Designer under Masthead > Top Pallet, set to Visible for both Desktop and Mobile.
Scroll down to Add a Logo Image and turn on Replace the Site Title With an Image.
Then choose the image you've uploaded for the purpose.

rod barbee · 2017-07-02 02:15:27

Oh, and what Gengl said about disabling header location.

Sven · 2017-07-02 02:27:18

Dear both,
many thanks!
I've tried Top Pallet on for desktop and mobile, primary masthead disabled and Replace the site title with an image on, but unfortunately it is not working on my test page.
Anything else I can do?
Krgds
Sven M

charlie.choc · 2017-07-02 02:31:52

Doesn't work for me either.

Matthew · 2017-07-02 11:01:54

The image controls don't impact the top pallet. This is in part because it's a fixed space, whereas the regular masthead is sized more dynamically.

For my demonstration, I'm using PHPlugins to create the logo. The function I'm using is this:

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

  <li class="logo"><a href="#"><ul class="logo_theturninggate">
    <li style="top: 0%; left: 0%;" class="color_999999"></li>
    <li style="top: 0%; left:25%;" class="color_66ccff"></li>
    <li style="top: 0%; left:50%;" class="color_0099cc col_x2"></li>
    <li style="top:25%; left: 0%;" class="color_ff9933 col_x2 row_x2"></li>
    <li style="top:25%; left:50%;" class="color_999999"></li>
    <li style="top:25%; left:75%;" class="color_999999"></li>
    <li style="top:50%; left:50%;" class="color_999999"></li>
    <li style="top:50%; left:75%;" class="color_66cc33 row_x2"></li>
    <li style="top:75%; left: 0%;" class="color_999999"></li>
    <li style="top:75%; left:25%;" class="color_999999"></li>
    <li style="top:75%; left:50%;" class="color_99cc66"></li>
  </ul><h1>The Turning Gate</h1></a></li>

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

So, to make that more generic for others to use, I would probably use this as a starting point:

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

  <li class="logo"><a href="#"><h1>Site Title</h1></a></li>

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

If you want to use a graphic, then you should know the top pallet is 48-pixels in height, so try to work within that. And you could probably either insert the image into the hyperlink, or set it as a background via CSS.

Sven · 2017-07-02 17:40:57

Many, many thanks Matt!
Works great and that really was the icing on the cake.

alfred · 2017-07-10 20:29:07

Hi there, I need some help please with getting my logo into the top pallet. I have the fotowarkstee.php plugins file working and have tried to follow Matt’s proposal how to add the logo to the top pallet.
What I have added to the fotowarkstee.php file is this:
function ttg_pallet_top_title( $style, $path ) {
echo '
<li class="logo"><a href="http://www.fotowarkstee.de/backlight/images/backlight-owl-logo-2017-07-08-1.png"><h1>fotowarkstee alfred schulte</h1></a></li>
';
return false;
} // END /**/

The effect is, that the inserted text shows up at the right place (fotowarkstee alfred schulte) and when I click on the text, the logo is shown in a new window. Now, how do I get the logo shown there?
I just do this not often enough – I got stuck. Any advice will be much appreciated.

The album I am fiddling with at the moment is here: http://fotowarkstee.de/galleries/1_bird … rufous-owl
Alfred

Last edited by alfred (2017-07-10 20:30:08)

Matthew · 2017-07-10 20:43:42

Hi Alfred,

Your A element is pointing at the image file; that should point at the page address where you want the link to go.

Also, you might not need the "logo" class.

Try this; hopefully more clear:

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

  <li><a href="http://yoursite.com"><h1>Site Title</h1></a></li>

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

alfred · 2017-07-10 21:37:42

Thanks Matthew,
that makes it clear how to implement a text and a corresponding link to the home page.

What I am looking for is having a logo there and then the link to the homepage - as if this would be in the Masthead.
I had misunderstood your original statement " If you want to use a graphic, then ... And you could probably either insert the image into the hyperlink". I reckon, I need to replace "<h1>Site Title</h1>" with a command to insert the logo graphics somehow? I lack experience and know-how here ...

Thanks, Alfred

Matthew · 2017-07-10 21:53:33

The image could go into the HTML:

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

  <li><a href="http://yoursite.com"><img src="image.jpg" /></a></li>

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

... or you could use CSS to put it in there, which may give you more control over various aspects, if you need it.

BerndBerlin · 2017-07-13 05:31:43

Hi Matthew, same problem as Alfred. Tried the latest script but all get is the icon of a missing image. Where is the "image.jpg" in your example above located?
Thanks
Bernd

rod barbee · 2017-07-13 05:45:20

you need to provide that. one strategy is to upload your image to a folder on your site for the purpose. For example, I have a folder in the root of my site named "img" just for the purpose storing images I want to use on pages. Use the image url for the img source:

<li><a href="http://yoursite.com"><img src="http://yoursite.com/img/image.jpg" /></a></li>

Another option is to upload your image via the Backlight Image Upload utility (Designer> Templates > Uploaded Images)
Once the image is uploaded, click on its title and you'll see some info, including the image URL. Copy this and use it as the img source. For example:

<li><a href="http://yoursite.com"><img src="http://yoursite.com/backlight/designer/?c=page&a=image&p1=8" /></a></li>

I've got a couple of example pages on my test site.
Inserting an image file: http://pangolin.barbeephoto.com/top-pallet-image-logo/

Using css, another method that Matt mentioned above: http://pangolin.barbeephoto.com/?page=logo-background

EDIT: Note that my demo pages are using the 1.2.2 Pangolin beta. There are some changes to the top-pallet controls as well as some css changes. So this may not work as expected in pre 1.2.2 versions.

BerndBerlin · 2017-07-13 19:26:48

Hi Rod,
thank you so much. That solved my problem. I had the first option you suggested but backlights strangely couldn't find the image.
But your solution with the uploaded file works like a charm.

I just have one strange thing happen to me. Unlike in your example my logo doesn't show up on the left of the window (where the original text masthead was as well) but just on the left of the menu which is located as well in the top palette.

Here is a link to the site
http://berndott.net/galleries/free/
That is the only thing I'd like to fix.

And thanks to everyone here for the patience with non-coders like myself.

rod barbee · 2017-07-13 21:46:19

Ah. I'm using a beta version of the next update. It has extra controls.
Probably should have mentioned that....

In the meantime you can try adding this to your custom css:

.page__pallet__wide > .content > ul > li:first-child {
  float:left;
}

alfred · 2017-07-13 21:46:39

Hi Rod, when I used your CSS variant, then my logo pops up in the footer as well. I have turned the Backlight logo on there and I have the sneaking suspicion that there are more "logo" definitions around which are interfering?

I have not tried turning the Backlight logo off, I have gone back to Matt's variant instead, but only when keeping the class "logo" I get it aligned left.

Last edited by alfred (2017-07-13 21:47:50)

rod barbee · 2017-07-13 21:50:17

Try using a different class name to replace the "logo" class I used. I forgot it's also used in the footer and I replaced the footer on my demo page with my own (via phplugins)

I'll change the class name my demo pages

charlie.choc · 2017-07-13 21:52:32

On my top pallet logo if I drop the class "logo" my menu items don't show up, but they are still there as I mouse over them.

rod barbee · 2017-07-13 22:03:38

The logo might be hiding them? As I mentioned above, I'm using the 1.2.2 beta so that might make a difference.

but try changing the class to something like "top-pallet-logo" both in the html and custom css

charlie.choc · 2017-07-13 22:14:10

I'm not using any custom css for my logo, just this code:

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

With class="logo" it works fine, without it hides the menu items.

rod barbee · 2017-07-13 22:19:23

I've got two versions, one is inserting an image into the a element inside the li element using the code that Matt has above:

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

  <li><a href="http://yoursite.com"><img src="image.jpg" /></a></li>

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

But I am using it with Pangolin 1.2.2 beta, so that might be making a difference.

The other example I have is placing the image as a background-image in the li item. In that example I gave it the "logo" class so I could better target it with css. But since "logo" is also used in the footer in Backlight 1.2 (if you're including the Backlight logo), I've changed the "logo" class I was using to "top-pallet-logo"

(Looks like the "logo" class is gone in 1.2.2 though.)

charlie.choc · 2017-07-13 22:35:37

Thanks. As you might have figured out, I'm using Backlight to learn more about css. ;-)

rod barbee · 2017-07-13 23:02:07

that started for me way back in the pre CE days....
it's been fun. The book I learned the most from was CSS: The Missing Manual

charlie.choc · 2017-07-13 23:24:58

I just recently got that book, it's a good one. It's a far cry from my old mainframe days.

Community @ The Turning Gate

#1 2017-07-02 00:46:17

Pangolin Top Pallet Logo

#2 2017-07-02 02:13:01

Re: Pangolin Top Pallet Logo

#3 2017-07-02 02:13:22

Re: Pangolin Top Pallet Logo

#4 2017-07-02 02:15:27

Re: Pangolin Top Pallet Logo

#5 2017-07-02 02:27:18

Re: Pangolin Top Pallet Logo

#6 2017-07-02 02:31:52

Re: Pangolin Top Pallet Logo

#7 2017-07-02 11:01:54

Re: Pangolin Top Pallet Logo

#8 2017-07-02 17:40:57

Re: Pangolin Top Pallet Logo

#9 2017-07-10 20:29:07

Re: Pangolin Top Pallet Logo

#10 2017-07-10 20:43:42

Re: Pangolin Top Pallet Logo

#11 2017-07-10 21:37:42

Re: Pangolin Top Pallet Logo

#12 2017-07-10 21:53:33

Re: Pangolin Top Pallet Logo

#13 2017-07-13 05:31:43

Re: Pangolin Top Pallet Logo

#14 2017-07-13 05:45:20

Re: Pangolin Top Pallet Logo

#15 2017-07-13 19:26:48

Re: Pangolin Top Pallet Logo

#16 2017-07-13 21:46:19

Re: Pangolin Top Pallet Logo

#17 2017-07-13 21:46:39

Re: Pangolin Top Pallet Logo

#18 2017-07-13 21:50:17

Re: Pangolin Top Pallet Logo

#19 2017-07-13 21:52:32

Re: Pangolin Top Pallet Logo

#20 2017-07-13 22:03:38

Re: Pangolin Top Pallet Logo

#21 2017-07-13 22:14:10

Re: Pangolin Top Pallet Logo

#22 2017-07-13 22:19:23

Re: Pangolin Top Pallet Logo

#23 2017-07-13 22:35:37

Re: Pangolin Top Pallet Logo

#24 2017-07-13 23:02:07

Re: Pangolin Top Pallet Logo

#25 2017-07-13 23:24:58

Re: Pangolin Top Pallet Logo

Board footer