Docs

[kgarvey]

Hi,

I love the css layout of the form code on the ethos stack for woocommerce during checkout (http://demo.theme.co/shop-ethos/checkout/).

I was wondering is there anyway i can copy this into another stack as i dont want to use the ethos stack for my site??

thanks in advance

Kieron

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide 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.

[kgarvey]

Thanks for your reply. I decided to use the Agency stack (already ethos) and customize it.

I do have another question.

URL: http://myonlineincome.club/

If you look at the above URL you will see that i have the logobar and the navbar there. I was wondering if its possible to add something else to the logobar. I want to add something like in the image attached.

On the right hand side i want to add the Sign In and a Join Now! (instead of order now!). Can this be done with the logobar or could you give me an idea how i can have a container above my navbar like this

Also i want to add white slashs (/) between the items on the navbar like there is in the footer menu.

Another thing about the footer. Would i be better off just creating a container at the bottom for customization or is there a way to change the footer widgets to be left and right rather than on top of each other??

thanks again, Kieron

[Lely]

Hi Kieron,

Thank you for the URL.
To add those links on the logogbar, please add the following code via Appearance > Customize > Custom > Edit Global Javascript:

jQuery(function($) {
$( ".x-brand" ).append( $( '<div class="logo-right"><a href="#">SIGN IN</a>/<a href="#">ORDER NOW</a></div>' ) );
});

Then add the following CSS on Appearance > Customize > Custom > Edit Global CSS:

.logo-right a:first-of-type {
    margin-right: 5px;
}
.logo-right a {
    color: #464343;
    font-size: 15px;
}
.logo-right {
    float: right;
    color: #464343;
    font-size: 15px;
    padding-top: 15px;
}

Regretfully, at this time I am not entirely certain what it is you would like to accomplish on the footer. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[kgarvey]

I’m wanting to have 2 containers in my footer a left and a right on. Currently I have a menu in my footer I want this on the right and space to a logo once made on the left like the footer in this site.

Example footer: http://www.valentus.com

Thanks for your help with the header I’ll try it once I get home

Also if I wanted to change the sign in and order links depending if the person is signed in or not.

Could I add a hiiden div and if there logged in change it to show and hide the other.

By adding something like this to my functions.php file

<?php
if ( is_user_logged_in() ) {
   /* Hide sign in and order
      Show hidden div*/
} else {
    /*Show sign in and order */
}
?>

[Rue Nel]

Hello There,

Thanks for writing in!

Because what you are trying to accomplish requires a template customization, we would like to suggest that you use 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.

To add a custom content something at the right side of the logobar, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?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">
        
        <div class="x-column x-sm x-1-2" style="padding: 0px;">
          <?php x_get_view( 'global', '_brand' ); ?>
        </div>

        <div class="x-column x-sm x-1-2" style="padding: 0px;">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque eros eu pulvinar dictum.</p>
        </div>

      </div>
    </div>
  </div>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

3] Save the file named as _navbar.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/global/

And for your footer to split it in half like what is in the example url, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/ETHOS/WP-FOOTER.PHP
// -----------------------------------------------------------------------------
// Footer output for Ethos.
// =============================================================================

?>

  <?php x_get_view( 'global', '_header', 'widget-areas' ); ?>
  <?php x_get_view( 'global', '_footer', 'scroll-top' ); ?>
  <?php x_get_view( 'global', '_footer', 'widget-areas' ); ?>

  <?php if ( x_get_option( 'x_footer_bottom_display' ) == '1' ) : ?>

    <footer class="x-colophon bottom" role="contentinfo">
      <div class="x-container max width">

        <div class="x-column x-sm x-1-2" style="padding: 0px; text-align: center;">

          <?php 

            $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 . '">';

          ?>

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

        <div class="x-column x-sm x-1-2" style="padding: 0px; text-align: right">

          <?php if ( x_get_option( 'x_footer_content_display' ) == '1' ) : ?>
            <div class="x-colophon-content">
              <?php echo do_shortcode( x_get_option( 'x_footer_content' ) ); ?>
            </div>
          <?php endif; ?>

          <?php if ( x_get_option( 'x_footer_menu_display' ) == '1' ) : ?>
            <?php x_get_view( 'global', '_nav', 'footer' ); ?>
          <?php endif; ?>

          <?php if ( x_get_option( 'x_footer_social_display' ) == '1' ) : ?>
            <?php x_social_global(); ?>
          <?php endif; ?>

        </div>

      </div>
    </footer>

  <?php endif; ?>

<?php x_get_view( 'global', '_footer' ); ?>

3] Save the file named as wp-footer.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/ethos/

You can add any of your custom content between the columns as we have provided in the codes above.
Hope this helps. Kindly let us know.

[kgarvey]

Amazing thanks a million for that

Ive added my code to display something different if user is logged in or not now. I also added an div with id of logobarNav

when your not logged in you see “Your NOT Logged IN” at the minute. I have it floating to the right at present but want to float right and bottom any ideas on how i can do this??

Another thing is the four boxes below the slider. I can not get them to be displayed with the same gaps between each other no matter what i do. Could you point me in the right direction

Also in my initial post i asked how i would get the slash in between the navbar items on my top navbar like in the footer one??

[Lely]

You’re welcome!

To make Your NOT Logged IN to the bottom, please update this custom CSS:

#logobarNav {
    float: right;
    position: relative;
}

To this:

#logobarNav {
    float: right;
    position: relative;
    padding-top: 24px; /*Adjust this accordingly*/
}

By default columns have equal spacing already. But then the elements inside this columns have fixed width more than this column causing this content to spill out of this container taking up the space for each columns. See image below.
The thin border is the size of each column. The content inside are more than this container. As you can see, when I adjusted the width for the first column content you can now see the space. Please adjust width for every content.

For the divider on the topbar, please use the following CSS:

.x-navbar .desktop .x-nav>li>a:after {
    content: "/";
    display: inline-block;
    margin: 0 0 0 1.75em;
    color: #fff;
}
.x-navbar .desktop .x-nav>li:nth-child(6)>a:after, .x-navbar .desktop .x-nav>li:nth-child(7)>a:after, .x-navbar .desktop .x-nav>li:nth-child(8)>a:after {
    content: "";
}

Hope this helps.

[Author]

Posts