Docs

[wonderan]

Hi there,

So impressed with the theme so far – especially Cornerstone which is FANTASTIC, very easy to use.

Just having a little trouble getting the header I want. Have a wireframe for what I’m going for and would really appreciate a pointer in the right direction on how to achieve this

It will be a full width website

Thanks in advance for any help!

Sam

[John Ezra]

Hi Sam,

Thanks for writing in and welcome to X. While custom development is beyond our scope of support we do try our best to go above and beyond. Your request is possible, we will need to take it in steps as certain parts of the site change depending on what options you have selected within the customizer.

For your wireframe example, you will need to have a couple of things setup before we can assist with some CSS.

The masthead (header) is divided into a few main components. The topbar, the logobar and the navbar. When your header is set to inline vs stacked, the logobar is not present. The logo/ branding will be in the same div as the navbar. When set to stacked they will be in separate divs but will be centered.

You will need to use the stacked layout and then we will need to move the logo to the left via CSS.

Appearance > Customize > Header > Logo and Navigation > Layout >> Set this to Stacked

Your Topbar will need to be turned on as well if not done so already.

Appearance > Customize > Header > Miscellaneous > Topbar >> Set to On, the add your links or custom code in the Topbar Content

You will also need some customization in this area as by default the topbar content is on the left and social media links are on the right of the topbar.

Please go ahead and set these up and then provide us with your URL so we can take a look at what you have and tailor our advice to your site.

Let us know how that goes. Hope this helps – thanks!

[wonderan]

Hi,

First of all thank you for the detailed reply. I completely understand this is bespoke development and not within your remit whatsoever. So once again, thanks for taking the time to engage with this.

I have made the suggested changes and can see from your reply that I will have to do some custom changes myself.

My URL is http://www.wonderandhook.co.uk

I have temporarily turned off under construction so you can have a peek.

Any tips / pointers greatly appreciated!

Sam

[wonderan]

Forgot to mention, things like the “currency switcher” haven’t been implemented yet. This widget will be thrown in at a later date.

Just wanting to get the rough layout down / gain an understanding of what needs to be modified before I progress further.

Cheers

[Jade]

Hi Sam,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

For the header area that contains the logo and the search form with the cart content, create a file named _brand.php in wp-content/themes/x-child/framework/views/global/ then add this code in the file:

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

<div id="header-search">
     <?php get_search_form(); ?>
     
     <!-- Add the cart code here -->
</div>

Then add this in the child theme’s style.css:

.masthead-stacked .x-brand {
    float: left;
}

.masthead-stacked #header-search {
    float: right;
}

As for the widget you want to add for the currency converter, you can do the template overriding like what was suggested about but to the file _topbar.php which can also be found in the global directory.

Hope this helps.

[wonderan]

Hi,

Can’t thank you enough for this ‘above-and-beyond’ support.

I will implement your suggestions later on, thank you!!

!

[Jade]

You’re most welcome. 🙂

[Author]

Posts