Docs

[ylpl]

Hi there,

I’m a Librarian that was given the task of building a new website for our library without great web design knowledge that you can visit at http://dev.ylpl.net/wordpress/

So far I’ve learned and applied as much of X Theme’s features as possible based on my skill level, especially Customize under the Appearance tab. But I have a few areas where I’m just stuck and hope that your expertise can help.

1. Regarding the Navbar, is there any way I can align it to the left and possibly insert a Search Bar on the very right via HTML/CSS code? Currently I have my Search Bar located on my Topbar but it is hard to align. It seems that the Navbar can only be centered at the top. I’ve checked for additional options in the Header option of the Customizer but can’t seem to find anything to tweak that.

2. Is there any way to tweak the padding/margins of the body? When I click on edit page at the top, I’m given 3 ways to edit it: Visual, Text, and Cornerstone. I’ve tried to tweak as much as is offered in the Cornerstone option for my 2 sections but would like it to be even closer to the outline of the container box that is offered in the Integrity theme I’ve chosen. Visual and Text seem to me the only way to customize these sections to the next level but the padding shows 0px. I feel that that can’t be because there is still quite a bit of space between the sections on the container box. I must be missing something on this.

3. Instead of Revolution Slider I’ve been using Layer Slider that was also offered with X Theme. They claim that it is responsive but I’ve checked on my phone and other devices and the slider isn’t formatted correctly on those devices. Is this something that can be customized or is Layer Slider simply not responsive?

4. For the simple customization I’m trying to do, do I need to install a Child Theme instead?

Sorry for the plethora of questions but if you could help me out that would be greatly appreciated!

Thank you!

Daniel

[Zeshan]

Hi Daniel,

Thanks for writing in!

#1: It’s not possible to add a search box in the navbar, however, you can enable our built-in navbar search feature from the Customizer under Header > Search > Navbar Search.

#2: As you are using default page template, this padding is a part of the content box. If you want to remove it, add following CSS under Custom > CSS in the Customizer:

.entry-wrap {
  padding: 0px;
  box-shadow: none;
  border-radius: 0px;
}

.x-boxed-layout-active .entry-wrap {
  border: none;
}

#3: Layer Slider is responsive; however the images you are using are set as background images. Background images are supposed to fill their container without losing their proportions. That sometimes cause the images to get cut-off from the sides of their container. To avoid that, use an image layer instead of the background image (see: http://prntscr.com/apnh18). For more detail, refer to Layer Slider documentation: http://support.kreaturamedia.com/docs/layersliderwp/documentation.html#slide-options

#4: Child theme is only recommended when you are trying to make template customizations, i.e., edit theme files to add your own customizations. If you want to setup a child theme in your site, refer to our knowledge base article on child theme.

Hope this helps. 🙂

Thank you!

[ylpl]

Thank you so much!

[Christopher]

You’re welcome.

[ylpl]

Hi again! Another quick question if you can assist. Is there a way to align the nav bar to the left? It seems that by default it remains centered and the only thing I can adjust is the navbar height and spacing between letters, etc.

Thanks! I may have more questions in the future if that’s alright.

Thanks again!

Daniel

[ylpl]

Woops a couple minor questions more.

1. Would there be any way to add a search bar underneath the navbar via HTML/CSS on X Theme? An example we like is found at the Pulaski County Public Library http://www.pulaskicounty.lib.in.us/

2. Also is there an option to add background color to our navbar?

Thank you again! We appreciate your help!

Daniel

[Lely]

Hi Daniel,

1.) 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.

Then copy the file wp-header.php from \wp-content\themes\x\framework\views\integrity to this folder \wp-content\themes\x-child\framework\views\integrity. Open the copied file then add the following code:

	  <div class="custom-search x-container max width">
	              <form method="get" id="searchform" class="form-search center-text" action="<?php echo esc_url( home_url( '/' ) ); ?>">
              <input type="text" id="s" class="search-query cfc-h-tx center-text tt-upper" name="s"  placeholder="Search">
			  <input type="submit" value="GO">
            </form>

	  </div>

After this line:
<?php x_get_view( 'global', '_navbar' ); ?>
Entire code will be like this:

<?php

// =============================================================================
// VIEWS/INTEGRITY/WP-HEADER.PHP
// -----------------------------------------------------------------------------
// Header output for Integrity.
// =============================================================================

?>

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

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

  <header class="<?php x_masthead_class(); ?>" role="banner">
    <?php x_get_view( 'global', '_topbar' ); ?>
    <?php x_get_view( 'global', '_navbar' ); ?>
	  <div class="custom-search x-container max width">
	              <form method="get" id="searchform" class="form-search center-text" action="<?php echo esc_url( home_url( '/' ) ); ?>">
              <input type="text" id="s" class="search-query cfc-h-tx center-text tt-upper" name="s"  placeholder="Search">
			  <input type="submit" value="GO">
            </form>

	  </div>

    <?php x_get_view( 'integrity', '_breadcrumbs' ); ?>
  </header>

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

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

2.) Please add this CSS via Appearance > Customize > Custom > CSS:

.x-navbar {
    background-color: red; /* Change to your preferred background color*/
}

Hope this helps.

[ylpl]

Thanks. But as far as adding code to Customize > Custom > CSS, that remains even with X Theme updates, correct?

So something like this below can be accomplished and will remain, right?

.x-navbar {
float: left;
}

Thank you again. You guys are awesome!

Daniel

[Rupok]

Hi Daniel,

Thanks for writing back. Yes your Customizer settings should be intact after updating theme. But to be on safe side you should take a backup of your Customizer settings from Customizer Manager under X Addons menu. An exported backup of Customizer would be very handy if something wiped out although it shouldn’t.

Hope this makes sense.

Cheers!

[ylpl]

Thanks, it does. I’ll go ahead and do that.

A couple more quick questions if that’s ok.

1. Is there any way to horizontally align my logo with my search bar in the top bar section? I’ve checked the forums and can’t seem to find it. At this moment the logo is higher than our search bar.

2. Also would there be any way to put a simple colored box around the search bar? We definitely like how Salt Lake City Public Library has done theirs. http://www.slcpl.lib.ut.us/
Would this be done in Customizer -> Custom -> Global CSS or would this be added in Customizer -> Header -> TopBar Content?

Thank you so much again! I’d be lost without you guys.

Daniel

[Lely]

Hello Daniel,

1.) Please use this CSS:

header#header {
    padding-top: 20px;
}
header#header h1 {
    width: 60%;
    float: left;
    margin-top: 0;
}

2.) The search function is not working. Please update the search code from this:

<div style="float:right">
<div style="float:up">
<form>
                                <input type="text" placeholder="Type your search here" required>
<form method="get" id="searchform" class="form-search" action="http://catalog.ylpl.net/Search/Home">
                                <input type="button" value="Search Catalog">
</form></div>

To this:

<div class="custom-search">
	              <form method="get" id="searchform" class="form-search center-text" action="<?php echo esc_url( home_url( '/' ) ); ?>">
              <input type="text" id="s" class="search-query cfc-h-tx center-text tt-upper" name="s"  placeholder="Search">
			  <input type="submit" value="Search Catalog">
            </form>

	  </div>

Then add this CSS:

.custom-search{
    float: right;
    background-color: red; /*Change to your preferred background color*/
    padding: 20px;
}

Hope this helps.

[ylpl]

Thank you! You guys rock!

[Christopher]

You’re welcome

[Author]

Posts