Docs

[jennifermarble]

Hi X folks,

I am struggling with some things I want to customize. I have not been able to find this info in the forum. I hope you can help. : )
1. I would like to place a colored bar with text ABOVE the slider. I cannot find any reference on how to do it.
2. I would like to be have able to experiment by placing the topbar above the slider.
3. I’d like to use icons on my homepage that do not exist in the awesome icon selection that come with the theme. Is this possible? If so, how do I do so?

Any wisdom you can offer will be greatly appreciated! Thanks very much in advance.

The working site is at worshipserviceslive.com

Cheers, Jennifer

[Rahul]

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.

[jennifermarble]

HI Rahul,

I did above 🙂
Here it is with the http noted.
http://worshipserviceslive.com

Thanks so much, I look forward to your help! – Jennifer

[Friech]

Hi Jennifer,

#1 and #2 On your child theme navigate to this directory: \x-child\framework\views\ethos\, in there create a file named wp-header.php and paste the code below on it.

<?php

// =============================================================================
// VIEWS/ETHOS/WP-HEADER.PHP
// -----------------------------------------------------------------------------
// Header output for Ethos.
// =============================================================================

?>

<?php x_get_view( 'global', '_header' ); ?>
<?php x_get_view( 'global', '_topbar' ); ?>
  <?php x_get_view( 'global', '_slider-above' ); ?>

  <header class="<?php x_masthead_class(); ?>" role="banner">
    <?php x_get_view( 'ethos', '_post', 'carousel' ); ?>
    <?php /*x_get_view( 'global', '_topbar' );*/ ?>
    <?php x_get_view( 'global', '_navbar' ); ?>
    <?php x_get_view( 'ethos', '_breadcrumbs' ); ?>
  </header>

  <?php x_get_view( 'global', '_slider-below' ); ?>
  <?php x_get_view( 'ethos', '_landmark-header' ); ?>

#3 With the release of X|Theme 4.6.3, we updated the fontAwesome to v4.6.3, please update your X|Theme and Cornerstone.

Let us know how it goes.

Cheers!

[jennifermarble]

Hi Friech,

Thank you for the help! Can you clarify for me which part will place a colored bar with text ABOVE the slider?
And which part of the would place the topbar/navigation above the slider?

PHP is VERY foreign to me and I want to be sure I am following your excellent directions!

Yes, once I back up I will update the theme.

Thank you so much and cheers to you,
Jennifer

[Friech]

Hi Jennifer,

Oh sorry I did not include the colored bar on my code above, I thought you’re experimenting with the topbar to be the colored bar.

Here is a updated code with colored bar and comments to explain which line is which.

<?php

// =============================================================================
// VIEWS/ETHOS/WP-HEADER.PHP
// -----------------------------------------------------------------------------
// Header output for Ethos.
// =============================================================================

?>

<?php x_get_view( 'global', '_header' ); ?>
<!-- This is where the topbar is place now above the slider and colored bar -->
<?php x_get_view( 'global', '_topbar' ); ?>
<!-- This is the colored bar -->
  <div class="colored-bar">
  	<div class="x-container max width">SOME TEXT HERE</div>
  </div>	 
  <!-- This is the slider-above -->
  <?php x_get_view( 'global', '_slider-above' ); ?>

  <header class="<?php x_masthead_class(); ?>" role="banner">
    <?php x_get_view( 'ethos', '_post', 'carousel' ); ?>
    <!-- The original position of the Topbar, we just commented it out -->
    <?php /*x_get_view( 'global', '_topbar' );*/ ?>
    <?php x_get_view( 'global', '_navbar' ); ?>
    <?php x_get_view( 'ethos', '_breadcrumbs' ); ?>
  </header>

  <?php x_get_view( 'global', '_slider-below' ); ?>
  <?php x_get_view( 'ethos', '_landmark-header' ); ?>

And add this on your custom CSS on Customizer to add an actual background-color to your bar.

.colored-bar {
	background-color: red;
}

Hope it helps, Cheers!

[Author]

Posts