Masthead in the Top Pallet

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

pideja wrote:

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.

try:

width: 100%;

otherwise, we would need to see an example of this

Daniel Leu · 2018-12-05 02:10:23

pideja wrote:

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.

Well, you are setting the size of .page__pallet__top and not the size of the background image. That's why you break the responsive behavior! To set the background image size, please see https://www.w3schools.com/cssref/css3_p … d-size.asp.

Matthew · 2018-12-05 11:34:51

It's a background image, so try using the CSS background-size property. Depending on the size of your image and your desired effect, the value of that property will vary, so Google it to see the valid options.

pideja · 2018-12-05 22:21:02

As requested, here is the complete PHP and CSS used as I am trying to install some sort of banner in the Top Pallet:
Here is the 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() { 
  echo '

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

  ';
  return false;
} 

// END /**/
/*
 *
 *  *************************************************************************************
 *  *                                                                                   *
 *  * Warning! When using echo or print special care must be qiven to using quotes.     *
 *  *                                                                                   *
 *  * Strings inside single quotes must contain only double quotes                      *
 *  * or all single quotes must be escaped (ie \') or vice-versa                        *
 *  *                                                                                   *
 *  *************************************************************************************
 *
 *  Fourteen user exits are defined in all web engines - all are optional
 *    (i.e. user_load.php may be the only processing)
 *
 *  Some web engines will have additional exits defined, specific to that gallery type
 *
 *  Each is called with the same parameters:
 *    %1  - TTG gallery-style gallery-release
 *        3 blank delimited values
 *        - %1.1  - 'TTG'
 *        - %1.2  - string describing gallery type; no embedded blanks
 *        - %1.3  - a series of two to three period delimited integers
 *              describing gallery release level; x.y or x.y.z
 *    %2  - server filesystem file name and path of calling file
 *
 *
 *  Defined exits:
 *
 *    user_load
 *      - return value ignored
 *      - called immediately after this file returns
 *      - called before any output is produced
 *      - all header and response variables are accessible
 *      - cookie and session processing can be initialized
 *      - globals to be used by later hook calls can be defined
 *
 *    head
 *      - return value ignored
 *      - called immediately before </head>
 *      - encompasses nothing; use to insert content into the <head>
 *
 *    header_top
 *      - if return=false, the contents of the normal Backlight header are skipped
 *      - called immediately within the header section
 *      - encompasses the full contents of the header section; can be used to replace those contents
 *
 *    header_bottom
 *      - return value ignored
 *      - called last in the header section
 *      - encompasses nothing; use to insert content at the end of the header section
 *
 *    masthead_primary_top
 *      - if return=false, normal Backlight masthead is skipped
 *      - called immediately before the masthead element
 *      - fully encompasses the masthead; can be used to replace it
 *
 *    masthead_primary_bottom
 *      - return value ignored
 *      - called immediately after the masthead
 *      - encompasses nothing; use to insert content after the masthead
 *
 *    masthead_secondary_top
 *      - if return=false, normal Backlight masthead is skipped
 *      - called immediately before the masthead element
 *      - fully encompasses the masthead; can be used to replace it
 *
 *    masthead_secondary_bottom
 *      - return value ignored
 *      - called immediately after the masthead
 *      - encompasses nothing; use to insert content after the masthead
 *
 *    navigation
 *      - if return=false, normal Backlight navigation is skipped
 *      - navigation is separate from the header section, so not affected by the above header... hooks.
 *      - encompasses the navigation <ul> element; can be used to replace it
 *
 *    main_top
 *      - return value ignored
 *      - called immediately within the main content column
 *      - encompasses nothing; use to insert content at the very top of the main content column
 *      - located outside the password protected area
 *
 *    main_bottom
 *      - return value ignored
 *      - called immediately before closing the main content column
 *      - encompasses nothing; use to insert content at the very bottom of the main content column
 *      - located outside the password protected area
 *
 *    footer_top
 *      - if return=false, the contents of the normal Backlight footer are skipped
 *      - called immediately within the footer section
 *      - encompasses the full contents of the footer section; can be used to replace those contents
 *
 *    footer_bottom
 *      - return value ignored
 *      - called last in the footer section
 *      - encompasses nothing; use to insert content at the end of the footer section
 *
 *    pallet_top_title
 *      - if return=false, the encompassed code is skipped
 *      - wraps the site title in the top pallet
 *      - use to replace the site title
 *
 *    toggle_T1
 *      - if return=false, the encompassed code is skipped
 *      - wraps the label element for "page__toggle__T1"
 *      - use to replace the toggle button with one of your own making
 *
 *    toggle_T2
 *      - if return=false, the encompassed code is skipped
 *      - wraps the label element for "page__toggle__T2"
 *      - use to replace the toggle button with one of your own making
 *
 *    social_top
 *      - if return=false, normal content is skipped
 *      - called immediately before social media icons in the top pallet
 *      - encompasses the social media icons; can be used to replace them
 *
 *    social_bottom
 *      - return value ignored
 *      - called immediately after social media icons in the top pallet
 *      - encompasses nothing; use to insert content following the social media icons
 *
 *    scripts
 *      - return value ignored
 *      - called immediately before </body>
 *      - encompasses nothing; use to insert content at the very bottom of the page
 *
 *    copy_top
 *      - if return=false, normal copy is skipped
 *      - called immediately within the page copy area
 *      - encompasses the page copy; can be used to replace it
 *
 *    copy_bottom
 *      - return value ignored
 *      - called immediately before closing the page copy area
 *      - encompasses nothing; use to insert content following the page copy
 *
 *    pallet01_top
 *      - if return=false, pallet content is skipped
 *      - called within pallet01, after masthead and navigation
 *      - encompasses the pallet01 content area
 *
 *    pallet01_bottom
 *      - return value ignored
 *      - called after the pallet01 content
 *      - encompasses nothing; use to insert content at the end of pallet01
 *
 *    pallet02_top
 *      - if return=false, pallet content is skipped
 *      - called within pallet02, after masthead and navigation
 *      - encompasses the pallet02 content area
 *
 *    pallet02_bottom
 *      - return value ignored
 *      - called after the pallet02 content
 *      - encompasses nothing; use to insert content at the end of pallet02
 *
 *    albumset_top
 *      - if return=false, normal copy is skipped
 *      - called immediately within the media area
 *      - encompasses the gallery grid / slideshow; can be used to replace it
 *
 *    albumset_bottom
 *      - return value ignored
 *      - called immediately before closing the media area
 *      - encompasses nothing; use to insert content following the gallery grid / slideshow
 *
 *    album_top
 *      - if return=false, the album content is skipped
 *      - called immediately within the media area
 *      - encompasses the album grid / slideshow; can be used to replace it
 *
 *    album_bottom
 *      - return value ignored
 *      - called immediately before closing the media area
 *      - encompasses nothing; use to insert content following the album grid / slideshow
 *
 *    single_top
 *      - if return=false, single image and content are skipped
 *      - called immediately above the single image display
 *      - encompasses the single image and related metadata; can be used to replace it
 *      - available only on single-image HTML pages for applicable album templates
 *
 *    single_bottom
 *      - return value ignored
 *      - called after the single image display
 *      - encompasses nothing; use to insert content following the single image display
 *      - available only on single-image HTML pages for applicable album templates
 *
 */

// SET USER FUNCTIONS BELOW
// Some example functions are included below. Feel free to delete or modify unwanted functions.
// ****************************************************************************************************



/* DELETE THIS LINE
// Basic structure for a PHPlugins function
function _HOOK_() { 
	echo '

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



/* DELETE THIS LINE
// Display the Backlight logo in pallet_top
function pallet_top_title()
{
	echo '
	<li class="logomark backlight_logomark" style="float:left;">
		<a href="#">
			<ul>
				<li style="opacity:.85; top:75%; left:75%;"></li>
				<li style="opacity:.40; top:75%; left:50%;"></li>
				<li style="opacity:.40; top:50%; left:75%;"></li>
				<li style="opacity:.55; top:75%; left:25%;"></li>
				<li style="opacity:.55; top:25%; left:75%;"></li>
				<li style="opacity:.55; top:50%; left:50%;"></li>
				<li style="opacity:.70; top:50%; left:25%;"></li>
				<li style="opacity:.70; top:75%; left: 0%;"></li>
				<li style="opacity:.70; top:25%; left:50%;"></li>
				<li style="opacity:.70; top: 0%; left:75%;"></li>
				<li style="opacity:.85; top:50%; left: 0%;"></li>
				<li style="opacity:.85; top: 0%; left:50%;"></li>
				<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 /**/



/* DELETE THIS LINE
// Display The Turning Gate's logo in pallet_top
function pallet_top_title()
{
	echo '
	<li class="logomark theturninggate_logomark" style="float:left;">
		<a href="/">
			<ul>
				<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 /**/



/* DELETE THIS LINE
// Display content conditionally based on protection type and login status
function main_top() { 
	echo '<ul style="background-color:#FFF9C4;color:#000;margin:1.5rem 0;padding:24px 36px;">';
		if (PASSWORD_ENABLED) {
			echo '<li><strong>This gallery is private</strong>.</li>';
			if (LOGGED_IN) {
				echo '<li><small>The user is logged in</small>.</li>';
			} else {
				echo '<li><small>The user is logged out</small>.</li>';
			}
		} elseif ( $this->isManaged() ) {
			echo '<li><strong>This gallery is client managed</strong>.</li>';
		} else {
			echo '<li><strong>This gallery is public</strong>.</li>';
		}
	echo '</ul>';
	return false;
} // END /**/



/* DELETE THIS LINE
function toggle_T1() { 
	// Below, the bare minimum markup required for functioning toggles;
	// fill in the LI element as you wish. Custom CSS may be necessary.
	echo '

	<label for="page__toggle__T1">
		<ul><li></li></ul>
	</label> 

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



/* DELETE THIS LINE
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="masthead_pallet_top">
		<h1><a href="/">Your Site Title</a></h1>
	</li>

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



/* DELETE THIS LINE
function navigation() { 
	echo '
	<ul class="primary-menu menu mouseable">
		<li class="menu-item"><a href="/">Home</a></li>
		<li class="menu-item menu-item-has-children"><a href="/galleries">Galleries</a>
			<ul class="sub-menu">
				<li class="menu-item"><a href="">Sub-item 1</a></li>
				<li class="menu-item"><a href="">Sub-item 2</a></li>
				<li class="menu-item"><a href="">Sub-item 3</a></li>
				<li class="menu-item"><a href="">Sub-item 4</a></li>
				<li class="menu-item"><a href="">Sub-item 5</a></li>
				<li class="menu-item"><a href="">Sub-item 6</a></li>
				<li class="menu-item"><a href="">Sub-item 7</a></li>
				<li class="menu-item"><a href="">Sub-item 8</a></li>
			</ul>
		</li>
		<li class="menu-item"><a href="/blog">Blog</a></li>
		<li class="menu-item"><a href="/about">About</a></li>
		<li class="menu-item"><a href="/contact">Contact</a></li>
	</ul>
	';
	return false;
} // END /**/



/* DELETE THIS LINE
// Adding new social media icons before ... 
function social_top() { 
	echo '

	<li><a target="_blank" href="" class="social_media fa fa-google-plus"></a></li>

	';
	return true;
} // END

// ... and after.
function social_bottom() { 
	echo '

	<li><a target="_blank" href="" class="social_media fa fa-pinterest"></a></li>
	<li><a target="_blank" href="" class="social_media fa fa-instagram"></a></li>

	';
} // END /**/



/* DELETE THIS LINE
// Add class "current_page_item" to menu item for the current page; 
// You can style this as you like, for example, to highlight the current page menu item.
function scripts() { 
echo <<<SCRIPT
	<script>
	$("ul.menu a[href='" + window.location.pathname + "']")
		.parentsUntil('.menu', 'li')
		.addClass("current_page_item")
		;
	</script>
SCRIPT;
	return false;
} // END /**/



/* DELETE THIS LINE
// Adds custom text to Next-page Cards in albums 
function scripts() { 
echo <<<SCRIPT
	<script>
		var card = $('#nextPageCard');

		var numPages = card.data('pages');
		var thisPage = card.data('current');
		var nextPage = card.data('next');

		// 1. 
		// Add text to the card
		var cardText = $('<div />')
			.html('<p>to Page ' + nextPage + ' of ' + numPages + '</p>')
			.css({
				color: '#fff',
				display: 'block',
				fontSize: '0.875rem',
				position: 'absolute',
					bottom: 12,
					left: 0,
				textAlign: 'center',
				width: '100%'
			})
			.appendTo($(card));

		// 2. 
		// Change Font Awesome icon via addClass
		$(card).find('i')
			.removeClass('fa-step-forward')
			.addClass('fa-long-arrow-right');

		// 3. 
		// Fully replace and customize card content
		$(card).find('a')
			.html(
				'<span class="fa-stack">' + 
					'<span class="fa fa-file-o fa-stack-2x"></span>' + 
					'<strong class="fa-stack-1x"><span style="font-size: 0.75rem">' + thisPage + '</strong>' + 
				'</span>' + 
				'<i class="fa fa-long-arrow-right"></i>' + 
				'<span class="fa-stack">' + 
					'<span class="fa fa-file-o fa-stack-2x"></span>' + 
					'<strong class="fa-stack-1x"><span style="font-size: 0.75rem">' + nextPage + '</strong>' + 
				'</span>'
			);

	</script>
SCRIPT;
	return false;
} // END /**/



/* DELETE THIS LINE
// Target "Backlight Pangolin" templates specifically
function main_top() { 

	if( preg_match( '/^BACKLIGHT-PANGOLIN(.*)$/', $this->style ) ) {
		// FUNCTION HERE
		echo 'Type 1';
	}

	// OR //

	if ( $this->style == 'BACKLIGHT-PANGOLIN' ) {
		// FUNCTION HERE
		echo 'Type 2';
	}

} // END /**/



/* DELETE THIS LINE
function copy_top()
{
	//echo 'style: '.$this->style.'<br/>';
	//echo 'path: '.$this->path.'<br/>';

	if ($this->hasAlbum()) {
		echo '<p>';
		echo 'Album Title: '.$this->album->getTitle().'<br/>';
		echo 'Album Description: '.$this->album->getDescription().'<br/>';
		echo 'Number of photos: '.$this->album->getNumberOfPhotos().'<br/>';
		echo '</p>';
	}
	return true;
} // END /**/



/* DELETE THIS LINE
function single_top()
{
	if ($this->hasPhoto()) {
		echo '<p>';
		echo 'Filename: '.$this->photo->getFilename().'<br/>';
		echo 'Dimensions: '.$this->photo->getPhotoWidth().'w x '.$this->photo->getPhotoHeight().'h<br/>';
		echo '</p>';
	}
	return true;
} // END /**/



// ****************************************************************************************************
// END USER FUNCTIONS

} ?>

and the CSS:

/* Style the header */
.header {
  grid-area: header;
  background-color: #498BC7;
  image: url("https://pideja.ca/duc/backlight/designer/page/image/8");
  padding: 30px;
  
}

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

 	
@font-face {
font-family: Helvetica Neue,'sans serif';
src: url (/custom/css/HelveticaNeue.ttf);}


/* 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.png");
    background-repeat: no-repeat;
    background-size: auto;
    
}
li.page__pallet__top-logo a {
    display: block;
    width: 100%;
    height: 100%;
} 


/*------------------------------------------------------*/

.single_image figcaption {
	font-family: Helvetica Neue,'sans serif'; 
	text-align: center;
    font-size: 1.00em;
    color: #e0e0e0;
} 
    :first-child {
    font-weight: light;
}
    :nth-child(2) {
    font-weight: italic;
}

.thumbnail {
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
}


@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: #498BC7;
}	
.breadcrumbs li a:hover {
              color: white;
              


}

I just noticed, in the CSS, could there be a conflict between the header (lines 2 to 8) and Top Pallet (lines 29 to 39)?
Both refer to the same image I'm trying to install in the Top Pallet. So, I commented first the header, then the Top Pallet but nothing happened.

And the Masthead is the blue text line "Les scénographies..."

Last edited by pideja (2018-12-05 22:28:00)

rod barbee · 2018-12-05 23:21:01

the error you posted earlier mentions line 23. That's right before you've added your function.

There is a defined user area in the file for user functions (that's where Matt put all the example functions). So first, try moving your function into that defined area.

In your css, get rid of this:

.header {
  grid-area: header;
  background-color: #498BC7;
  image: url("https://pideja.ca/duc/backlight/designer/page/image/8");
  padding: 30px;
}

There is no .header class. grid-area is not a css property. Neither is image.

your function replaces the pallet top title area:

function pallet_top_title() { 
  echo '

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

  ';
  return false;
}

in this code, your html has a list item with the class "top-pallet-logo"

this is all fine as far as it goes.

but your css does not contain a class named "top-pallet-logo".

instead you're addressing the .page__pallet__top class, which is the entire top pallet, not just the title area

you also have this css:

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

This is the problem: li.page__pallet__top-logo a

you've added -logo to the .page__pallet__top class. Which means there needs to be a .page__pallet__top-logo class in your css.
So that css does nothing.

You seem to be trying to do two things at the same time: you're trying to put a background image in the top pallet via css and at the same time you're trying to replace the top pallet title area with phplugins (putting the masthead in the top pallet). Which do you want to do?

If it's replace the top pallet title, then I suggest first moving your phplugins function to where it belongs in the USER area.
(replacing the title area is the subject of those two demo pages of mine that I linked to earlier in this thread)

Then write css that addresses the class you added to that list item.

If you just want to place a background image in top pallet, then you don't need phplugins and you can do that with custom css.

for that, try using just this:

.page__pallet__top {
    background-image: url("https://pideja.ca/duc/backlight/designer/page/image/8.png");
    background-repeat: no-repeat;
    background-size: auto;

pideja · 2018-12-06 05:13:20

You seem to be trying to do two things at the same time: you're trying to put a background image in the top pallet via css and at the same time you're trying to replace the top pallet title area with phplugins (putting the masthead in the top pallet). Which do you want to do?

Well actually, I want to place a nameplate (a logo + my name) on the left side of the Top Pallet as shown in this mock-up:
Presently I built the site using Backlight settings to place the Masthead (a text line in blue) just over the image, under the Top Pallet.
Revised 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.png");
    background-repeat: no-repeat;
    background-size: auto;
}

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

I am no longer using the PHP. Even though I corrected the placement of the code in the user's area, it doesn't do anything.

Still no nameplate!

rod barbee · 2018-12-06 05:26:36

there are a few errors in your css. the class .page__pallet__top should have double underscores separating the words, you have only one underscore between words. And the url to the image is incorrect, you've added .png where it's not needed.

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

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

rod barbee · 2018-12-06 05:29:00

You'll probably want to change the location of the vertical menu. As is, when the site goes to mobile size, the mobile menu covers your logo.
Change the Pallet Position in Layout.

pideja · 2018-12-06 05:54:41

You did it again! I'll keep a record of this and of the other help Daniel, Matthew and you have so graciously afforded me.

pideja · 2020-03-12 01:41:17

Back with more Top Pallet woes...

Still working on pideja.ca and I had already a "nameplate" in the centre of the Top Pallet. I now tried adding a logo in the same Top Pallet but this time left-aligned.
Using this php:

function pallet_top_title () {
  echo '

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

  ';
  return false;
}

} ?>

witch works, so I tried adding the logo in CSS like this:

/* Top pallet (bannière en image de fond) */
/* Pierre Desjardins photographe */
.top-pallet-logo {
	background-image: url("https://pideja.ca/backlight/designer/page/image/27");
	background-repeat: no-repeat;
	float: centered;
	height: 48px;
	width: 316px;
}
/* logo */
.top-pallet-logo {
	background-image: url("https://pideja.ca/backlight/designer/page/image/9");
	background-repeat: no-repeat;
	float: left;
	height: 48px;
	width: 30px;
}

li.top-pallet-logo a {
	display: block;
	height: 75%;
	width: 75%;
}

Evidently something is wrong here because now, the logo shows up (albeit not the right position, but that wil be changed) but not the nameplate!
What's wrong with my code?

Last edited by pideja (2020-03-12 01:42:57)

rod barbee · 2020-03-12 02:50:02

the second .top-pallet-logo rule overrides the first one.
"centered" is not value of the float property

see this for using more than one background image: https://www.w3schools.com/css/css3_backgrounds.asp

rod barbee · 2020-03-12 03:13:59

try this:

.top-pallet-logo {
    background-image: url("https://pideja.ca/backlight/designer/page/image/9"), url("https://pideja.ca/backlight/designer/page/image/27");
    background-repeat: no-repeat, no-repeat;
    background-position: left, center;
    height: 48px;
    width: 100%;
  }

pideja · 2020-03-12 03:40:19

Thanks, Rod

I did not place two "no-repeat" instructions. I didn't think I should. And the width at 100% now that's good.

But, If I want to position the logo, more to the center, in a mirror position to the "menu", should I use the margin or padding instructions?

rod barbee · 2020-03-12 04:13:06

margin and padding don't seem to do anything to background images, use the background-position property:

background-position: 30px, center;

You can also use percentage:

background-position: 20%, center;

pideja · 2020-03-12 05:42:48

Chose

.top-pallet-logo {
    background-image: url("https://pideja.ca/backlight/designer/page/image/9"), url("https://pideja.ca/backlight/designer/page/image/27");
    background-repeat: no-repeat, no-repeat;
    background-position: 150px, center;
    height: 48px;
    width: 100%;

  }

The logo looks pretty good on the wide display; looks very good at 1440px wide; disappears on the Mobile phone (thats fine).

Thanks again.

Last edited by pideja (2020-03-12 05:43:11)

rod barbee · 2020-03-12 06:13:05

it's probably that positioning.
you could write a media query to make background-position: left, center; on mobile devices.

rod barbee · 2020-03-12 08:09:11

your current mobile logo in the top pallet isn't showing too well.

Try changing the css starting on line 278 of your custom css file to this:

/* Top pallet (bannière en image de fond sur portable) */
	.top-pallet-logo {
		background-image: url("https://pideja.ca/backlight/designer/page/image/24");
		background-repeat: no-repeat;
		float: none;
		height: 38px;
		width: 100%;

	}

pideja · 2020-03-13 00:54:21

Based on your excellent suggestion, I tailored the code to read:

/* Top pallet (bannière en image de fond sur portable) */
	.top-pallet-logo {
		background-image: url("https://pideja.ca/backlight/designer/page/image/9"), url("https://pideja.ca/backlight/designer/page/image/24");
		background-repeat: no-repeat;
		background-position: 15px, 65px;
		float: none;
		height: 38px;
		width: 100%;

	}

I now have the logo on the left, but not hugging the limits of the page. And, the nameplate is centred. It's still a bit low and small but, why quibble. I probably will make one a tad larger...

Also, now that the position is specified, do I really need the float command?

Thanks for the help!

Last edited by pideja (2020-03-13 00:55:38)

rod barbee · 2020-03-13 01:30:44

You probably don’t need the float. Take it out and see what happens

pideja · 2020-03-13 01:43:46

I commented the line and...no change! So, one less line to clutter my code.

Merci!

Community @ The Turning Gate

#26 2018-12-05 01:22:12

Re: Masthead in the Top Pallet

#27 2018-12-05 02:10:23

Re: Masthead in the Top Pallet

#28 2018-12-05 11:34:51

Re: Masthead in the Top Pallet

#29 2018-12-05 22:21:02

Re: Masthead in the Top Pallet

#30 2018-12-05 23:21:01

Re: Masthead in the Top Pallet

#31 2018-12-06 05:13:20

Re: Masthead in the Top Pallet

#32 2018-12-06 05:26:36

Re: Masthead in the Top Pallet

#33 2018-12-06 05:29:00

Re: Masthead in the Top Pallet

#34 2018-12-06 05:54:41

Re: Masthead in the Top Pallet

#35 2020-03-12 01:41:17

Re: Masthead in the Top Pallet

#36 2020-03-12 02:50:02

Re: Masthead in the Top Pallet

#37 2020-03-12 03:13:59

Re: Masthead in the Top Pallet

#38 2020-03-12 03:40:19

Re: Masthead in the Top Pallet

#39 2020-03-12 04:13:06

Re: Masthead in the Top Pallet

#40 2020-03-12 05:42:48

Re: Masthead in the Top Pallet

#41 2020-03-12 06:13:05

Re: Masthead in the Top Pallet

#42 2020-03-12 08:09:11

Re: Masthead in the Top Pallet

#43 2020-03-13 00:54:21

Re: Masthead in the Top Pallet

#44 2020-03-13 01:30:44

Re: Masthead in the Top Pallet

#45 2020-03-13 01:43:46

Re: Masthead in the Top Pallet

Board footer