Docs

[itsltd]

Hi,

We’re at http://www.itstrain.co.uk/, and need help with the header section. We would like to (if at all possible) have our logo aligned to the left with a customisable HTML widget on the right hand side which can be changed with ease.

The thinking is that we can include a large text phone number and some share buttons. If this is possible – can someone from Themeco come back to us with a possible solution?

Many thanks in advance!

[John Ezra]

Hi there,

Thanks for writing in! It is possible to do what you are thinking, but having a customization widget area is something that needs to be custom developed and will fall beyond our scope of support. Thank you for understanding.

However if you are willing to do edits manually, editing PHP files or using mayb jQuery to add your text and share buttons, we may be able to guide you. It will all depend on how complex what you have in mind is.

Also do you have to have the content inline with the logo, you could activate the topbar in the customizer. That section accepts HTML and has social share icons if you would like to use them.

Let us know with a bit more detail, what you would like, and we’ll do our best to assist. Thanks!

[itsltd]

Hi,

Thanks for such a prompt reply. Realistically, all we’re wanting is to be able to put our phone number inline with the logo, but right aligned.

So I could settle for a text area; if that is possible to add in easily. We are already running the X-Child theme so I’m not too worried about changing some PHP files around if needed.

Is this easily done?

[Friech]

Hi There,

Thanks for the clarification. First please create a custom sidebar, to do this navigate to Appearance > Sidebars.

Take note of your sidebar ID (#4).

And then, on your child theme navigate this \x-child\framework\views\global\ directory. In there create a file named _brand.php and paste the code below.

<?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>

<?php if ( is_active_sidebar( 'SIDEBAR ID HERE' ) ) : ?>
	<div id="custom-widget" class="mll left">
		<?php dynamic_sidebar( 'SIDEBAR ID HERE' ); ?>
	</div>
<?php endif; ?>

Replace the SIDEBAR ID HERE with the actual ID of your sidebar.

Then navigate to Appearance > Widgets, you should see your sidebar there for you to place your custom widgets.

And you can style your text widget with this Custom CSS

div#custom-widget .textwidget {
font-size: 3em;
color: red;
}

You can add this under Custom > Global CSS in the Customizer.

Hope it helps, Cheers!

[itsltd]

That worked a treat, thank you. Would you be able to provide the CSS syntax for a media query that makes the text area display:none on mobile devices?

[Rupok]

Hi there,

Thanks for updating. Media query for mobile would be as follows :

@media only screen and (max-width: 767px) {

  div#custom-widget .textwidget {
    display: none;
  }

}

Hope this helps.

Cheers!

[itsltd]

That’s worked perfectly. Thanks again for the help!

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts