[jkstermitzParticipant]

I have a background image on my home page x-logobar using the css as described elsewhere in this forum:

.masthead .x-logobar {

background-image: url(http://mysitedirectory/wp-content/uploads/2017/03/myphoto.jpg);

I would like that background to appear ONLY on the home page. If I click through to a different page, I want only the navbar.

What would I modify (e.g., the view?) to achieve this?

Basically I’m thinking I need something perhaps in a .php file that is “IF page not equal to homepage then background-image display = none. Or, the reverse – display only IF the page = homepage.

I’m comfortable with CSS, PHP and Javascript….what would be the easiest way?

I have a child theme and can modify view as well.

Thanks.

[JoaoModerator]

Hi There,

You can add:

.home .masthead .x-logobar {

background-image: url(http://mysitedirectory/wp-content/uploads/2017/03/myphoto.jpg);

}

Hope it helps

Joao

[jkstermitzParticipant]

I believe the global-navbar view in my child theme would be the one to modify?

Current code:

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
        
	<div id="tagline" class="tag">
	    <div>
	        Connecting Women, 
	    </div>
	    <div>
	        Building Bridges to Economic Self-Sufficiency
	    </div>
	    
	</div>
      </div>
    </div>
  </div>

Note that I already modified the view to have a tagline. I think what I want is when the page IS the home page, that the entire x-logobar-inner is displayed, otherwise not displayed.

That would imply some php if test associated that div.

For example,

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">

      <?php if (x_get_page == 'home'): ?>
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
        
	<div id="tagline" class="tag">
	    <div>
	        Connecting Women, 
	    </div>
	    <div>
	        Building Bridges to Economic Self-Sufficiency
	    </div>
	    
	</div>
      </div>

    </div>
  </div>

rest of view code here

Note that I highlighted the pseudo-code variable X_get_page ….but I just made that up as an example.

Can the home page be identified with a x_get_ variable?

[FriechModerator]

Hi There,

Use the is_front_page() function instead.

e.g.

if (is_home() || is_front_page()) : ?>
<div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
        
	<div id="tagline" class="tag">
	    <div>
	        Connecting Women, 
	    </div>
	    <div>
	        Building Bridges to Economic Self-Sufficiency
	    </div>
	</div>
</div>
<?php endif;

Thanks.

[jkstermitzParticipant]

I’m posting the corrected code – I had to insert the test just prior to the whole x-logobar div (to drop the brand/logo as well as the background image). This works great. (Joao, I could use the simple css as you proposed as that only eliminates the background image).

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <?php if (is_front_page()) :?>
  <div class="x-logobar">
  
    <div class="x-logobar-inner">

 	
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
        
	
	
	<div id="tagline" class="tag">
	    <div>
	        Connecting Women, 
	    </div>
	    <div>
	        Building Bridges to Economic Self-Sufficiency
	    </div>
	</div>
	
	
      </div>

  
    </div>
  </div>
 <?php endif; ?>

rest of navbar code here….

[Rue NelModerator]

Hello There,

Since you have two if statements, you should have two endifs. Please update your code and make use of this:

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <?php if (is_front_page()) :?>
  <div class="x-logobar">
  
    <div class="x-logobar-inner">

 	
      <div class="x-container max width">
        
        <?php x_get_view( 'global', '_brand' ); ?>
        
		<div id="tagline" class="tag">
		    <div>
		        Connecting Women, 
		    </div>
		    <div>
		        Building Bridges to Economic Self-Sufficiency
		    </div>
		</div>
	
	
      </div>

  
    </div>
  </div>

  <?php endif; ?>
  
 <?php endif; ?>

Hope this helps. Kindly let us know.

[Author]

Posts