Docs

[jensmith3]

Hello,

My site is on the temporary url of http://103.37.8.129/~thekidsa/

My client does not want a logo but a full-width banner which I have added. I would like to add some padding to the top of the page site so that it is not flush with the top of the screen.

Also, is it possible to have the tag line (as in Setting > General Settings >Tagline) show below the site title?

Many thanks and kind regards,

Jenny

[Christopher]

Hi there,

Please update your code to :

header.masthead {
    background-image: url("http://103.37.8.129/~thekidsa/wp-content/uploads/2016/08/TKAbannerNoText.jpg");
    width: 100%;
    max-width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: 10px;
}

Copy _brand.php from framework/views/global and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/GLOBAL/_BRAND.PHP
// -----------------------------------------------------------------------------
// Outputs the brand.
// =============================================================================

$site_name        = get_bloginfo( 'name' );
$site_description = get_bloginfo( 'description' );
$logo             = x_make_protocol_relative( x_get_option( 'x_logo' ) );
$site_logo        = '<img src="' . $logo . '" alt="' . $site_description . '">';

?>

<?php echo ( is_front_page() ) ? '<h1 class="visually-hidden">' . $site_name . '</h1>' : ''; ?>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  <?php echo ( $logo == '' ) ? $site_name : $site_logo; ?>
</a>
<br>
<?php bloginfo('description'); ?> 

Hope it helps.

[jensmith3]

Hi there,

Thank you so much. The first part worked perfectly except I had to change margin-top to padding-top to avoid a gap.

The second part partly worked in that I can see the tag line but it runs along side the site title. Is it possible to have it underneath the site title and change the colour to white.

Many thanks and kind regards,

Jenny

[Rupok]

Hi Jenny,

Please update the code a bit first :

<?php

// =============================================================================
// VIEWS/GLOBAL/_BRAND.PHP
// -----------------------------------------------------------------------------
// Outputs the brand.
// =============================================================================

$site_name        = get_bloginfo( 'name' );
$site_description = get_bloginfo( 'description' );
$logo             = x_make_protocol_relative( x_get_option( 'x_logo' ) );
$site_logo        = '<img src="' . $logo . '" alt="' . $site_description . '">';

?>

<?php echo ( is_front_page() ) ? '<h1 class="visually-hidden">' . $site_name . '</h1>' : ''; ?>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  <?php echo ( $logo == '' ) ? $site_name : $site_logo; ?>
</a>
<p class="site-tagline"<?php bloginfo('description'); ?></p> 

Then add this under Custom > CSS in the Customizer.

.x-brand {
  float: none;
}

.site-tagline {
  color: #fff;
  display: block;
  float: none;
  margin-left: 5px;
  margin-top: 5px;
  position: relative;
}

Hope this helps.

[jensmith3]

Hi there,

I replaced the code but it didn’t work – it actually showed in the header itself – so I replaced it with the original code.

I did however add the custom css and that has worked except the colour of the text has not change.
Any thoughts?

Many thanks and kind regards,

Jenny

[Christopher]

Hi there,

Please add the code we provided in previous replay https://community.theme.co/forums/topic/add-top-padding-to-site-title/#post-1133076

Clear cache and check again.

Thanks.

[Paul R]

Hi Jenny,

You may replace this line of code

<?php bloginfo('description'); ?> 

with this

<p class="site-tagline"><?php bloginfo('description'); ?> </p>

Then add this in custom > Edit Global CSS

.site-tagline {
   color:#fff;
}

Hope that helps

[jensmith3]

Hello,

I have replaced the line of code as suggested by Paul R and that has worked perfectly. Could I ask one final thing on this; can I reduce the space between the site title and the tag line?

Many thanks again and kind regards,

Jenny

[Thai]

Hi There,

Please add the following CSS:

p.site-tagline {
    margin-top: -20px;
}

Hope it helps 🙂

[jensmith3]

Too good. Thanks so much.

Kind regards,

Jenny

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts