Docs

[Scott]

Hi Again!

I’ve searched everywhere for the answer but can’t find it.

How do I make the Landmark headlines/titles look identical to the Renew 1 custom headlines? I need them centered, with the accents either side, and the breadcrumbs centered below the titles.

Thanks for your help!

[John Ezra]

Hi there,

Thanks for writing in! To assist you with this issue, would you mind providing us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything. Thanks!

[Scott]

This reply has been marked as private.

[John Ezra]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

header.x-header-landmark {
    background: #ffffff;
}

h1.h-landmark.entry-title {
    overflow:hidden
}

h1.h-landmark.entry-title span:before {
    right: 100%;
    margin-right: 0.5em;
}

h1.h-landmark.entry-title span:after {
    left: 100%;
    margin-left: 0.5em;
}

h1.h-landmark.entry-title span:before, h1.h-landmark.entry-title span:after {
    content: "";
    position: absolute;
    top: 50%;
    height: 2px;
    width: 9999px;
    display: block;
    margin-top: -1px;
    background-color: #e5e5e5;
}

Hope this helps – thanks!

[Scott]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back. It seems you have the following code with a media query that’s creating the extra space on small screens :

.x-logobar-inner {
  padding-bottom: 20px;
  padding-top: 20px;
}

You can reset this for small screen with the following code :

@media only screen and (max-width: 480px) {
.x-logobar-inner {
  padding-bottom: 15px;
  padding-top: 0;
}
}

Hope this helps.

Cheers!

[Scott]

Thank you so much! Worked perfectly!

I have one more question. Apologies, I’m fairly new to X and LOVE IT, but am still learning my way around.

I have decided to put my have my entry title in the landmark header float left. I would like to have the social sharing icons float right (where the breadcrumbs would be if they were enabled).

How would I put the entry share icons into the right/middle of the landmark header and have control over which icons and/or email button are displayed.

I deeply appreciate your help. I’d heard about how amazing your support is and, boy, they weren’t kidding!

[Friech]

Hi There,

You need a custom landmark template for this. On your child theme navigate to this directory: \x-child\framework\views\renew in there create a file named _landmark-header.php and paste the code below on it.

<?php

// =============================================================================
// VIEWS/RENEW/_LANDMARK-HEADER.PHP
// -----------------------------------------------------------------------------
// Handles content output of large headers for key pages such as the blog or
// search results.
// =============================================================================

$disable_page_title = get_post_meta( get_the_ID(), '_x_entry_disable_page_title', true );
$breadcrumbs        = x_get_option( 'x_breadcrumb_display' );

?>

<?php if ( ! x_is_blank( 1 ) && ! x_is_blank( 2 ) && ! x_is_blank( 4 ) && ! x_is_blank( 5 ) ) : ?>
  <?php if ( is_page() && $disable_page_title == 'on' ) : ?>

  <?php else : ?>

    <header class="x-header-landmark">
      <div class="x-container max width">
        <div class="x-landmark-breadcrumbs-wrap" style="display: inline;">
          <div class="x-landmark">

          <?php if ( x_is_shop() || x_is_product() ) : ?>

            <h1 class="h-landmark"><span><?php echo x_get_option( 'x_renew_shop_title' ); ?></span></h1>

          <?php elseif ( x_is_bbpress() ) : ?>

            <h1 class="h-landmark"><span><?php echo get_the_title(); ?></span></h1>

          <?php elseif ( x_is_buddypress() ) : ?>
            <?php if ( x_buddypress_is_component_with_landmark_header() ) : ?>

              <h1 class="h-landmark"><span><?php echo x_buddypress_get_the_title(); ?></span></h1>

            <?php endif; ?>
          <?php elseif ( is_page() ) : ?>

            <h1 class="h-landmark entry-title"><span><?php the_title(); ?></span></h1>

          <?php elseif ( is_home() || is_single() ) : ?>
            <?php if ( x_is_portfolio_item() ) : ?>

              <h1 class="h-landmark"><span><?php echo x_get_parent_portfolio_title(); ?></span></h1>

            <?php else : ?>

              <div class="h-landmark"><span><?php echo x_get_option( 'x_renew_blog_title' ); ?></span></div>

            <?php endif; ?>
          <?php elseif ( is_search() ) : ?>

            <h1 class="h-landmark"><span><?php _e( 'Search Results', '__x__' ); ?></span></h1>

          <?php elseif ( is_category() || x_is_portfolio_category() || x_is_product_category() ) : ?>

            <?php

            $meta  = x_get_taxonomy_meta();
            $title = ( $meta['archive-title'] != '' ) ? $meta['archive-title'] : __( 'Category Archive', '__x__' );

            ?>

            <h1 class="h-landmark"><span><?php echo $title; ?></span></h1>

          <?php elseif ( is_tag() || x_is_portfolio_tag() || x_is_product_tag() ) : ?>

            <?php

            $meta  = x_get_taxonomy_meta();
            $title = ( $meta['archive-title'] != '' ) ? $meta['archive-title'] : __( 'Tag Archive', '__x__' );

            ?>

            <h1 class="h-landmark"><span><?php echo $title ?></span></h1>

          <?php elseif ( is_404() ) : ?>

            <h1 class="h-landmark"><span><?php _e( 'Oops!', '__x__' ); ?></span></h1>

          <?php elseif ( is_year() ) : ?>

            <h1 class="h-landmark"><span><?php _e( 'Post Archive by Year', '__x__' ); ?></span></h1>

          <?php elseif ( is_month() ) : ?>

            <h1 class="h-landmark"><span><?php _e( 'Post Archive by Month', '__x__' ); ?></span></h1>

          <?php elseif ( is_day() ) : ?>

            <h1 class="h-landmark"><span><?php _e( 'Post Archive by Day', '__x__' ); ?></span></h1>

          <?php elseif ( x_is_portfolio() ) : ?>

            <h1 class="h-landmark"><span><?php the_title(); ?></span></h1>

          <?php endif; ?>

          </div>

          <?php if ( $breadcrumbs == '1' ) : ?>
            <?php if ( ! is_front_page() && ! x_is_portfolio() ) : ?>
              <div class="x-breadcrumbs-wrap">
                <?php x_breadcrumbs(); ?>
              </div>
            <?php endif; ?>
          <?php endif; ?>

          <?php if ( x_is_portfolio() ) : ?>
            <div class="x-breadcrumbs-wrap">
              <?php x_portfolio_filters(); ?>
            </div>
          <?php endif; ?>

        </div>
       <div class="landmark-social right"> <?php x_social_global(); ?></div>
      </div>
    </header>

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

Icons will only show if they are set on the Customizer > Social panel.

After that you can add this on your custom css to style the social icons.

.landmark-social .x-social-global a {
	margin-left: 6px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 18px;
}

Hope it helps, Cheers!

[Scott]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for the updates! The icons is actually in place. It is not visible because it has a white color. To change the color and it’s size, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.landmark-social .x-social-global a {
    color: #000;
    font-size: 24px;
    margin: 0 3px;;
}

Hope this helps.

[Scott]

Thank you!

So, I’ve managed to style the social icons, but how do you vertically align them with the middle of the landmark header bar, inline with the entry title? So, entry title is on the left/middle, social icons are on the right/middle, with equal spacing above and below.

I’d also like them to wrap centered on mobile, like the entry title does. Is that possible too?

[Scott]

Actually, I managed to get the icons to align right/middle. This is my css, is it correct?

x-landmark {
width: auto;
padding-left: 0;
float: left;
}

.landmark-social .x-social-global {
width: auto;
padding-right: 0;
float: right;
}

So my only remaining question is, how do I get the buttons to align center on mobile? Thank you again!

[Scott]

Okay, not to worry, I figured out. Please can you just take a quick look at my css and check it’s correct. Is there anything I should change, add, or take away?

TO ALIGN THE ENTRY TITLE LEFT AND THE SOCIAL ICONS RIGHT:

x-landmark {
width: auto;
padding-left: 0;
float: left;
}

.landmark-social .x-social-global {
width: auto;
padding-right: 0;
float: right;
}

TO WRAP AND CENTER THE SOCIAL ICONS WHEN THE ENTRY TITLE CENTERS:

media all and (max-width: 767px) {
.landmark-social .x-social-global {
width: auto;
text-align: center;
float: none;
margin-top: 36px;
}

[Rad]

Hi Scott,

It’s correct, but, maybe just some typo error

.x-landmark {
width: auto;
padding-left: 0;
float: left;
}

.landmark-social .x-social-global {
width: auto;
padding-right: 0;
float: right;
}

@media all and (max-width: 767px) {
.landmark-social .x-social-global {
width: auto;
text-align: center;
float: none;
margin-top: 36px;
}

Cheers!

[Author]

Posts