Docs

[ylpl]

Hi there,

My website is http://dev.ylpl.net/wordpress/

I’m trying to create a new section in my top bar: 3 simple columns underneath my Search Bar and right above my Nav Bar where I will create 3 simple links (i.e. Catalog, Digital Library, Calendar of Events).

However, no matter what I try, it extends my search bar so I’ve ditched my effort until I find the right div class; I feel like this probably has something to do with my Div Class. Are there any proper identifiers or classes I can use to separate these links from my Search bar? I feel like once I have that set up I feel confident I can fill in the details (padding, color, etc) on my own.

Below is my current FUNCTIONS.PHP for my Topbar. This is working perfect for me; I just need to add an additional section in it underneath my search bar and radio buttons.

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );

// Additional Functions
// =============================================================================

//
// add shortcodes to topbar
//

add_filter('x_option_x_topbar_content', 'top_bar_content_shortcode');
function top_bar_content_shortcode ( $content ) {
return do_shortcode ( $content );
}

 function ylpl_print_header ()
 {        $lookfor = sanitize_text_field($_REQUEST['s']);
          if ($_REQUEST['site'] == 'catalog' ) {

          echo "<script type=\"text/javascript\">
          window.location = \"http://catalog.ylpl.net/Search/Results?type=AllFields&lookfor=".$lookfor."&submit=FIND\";
          </script>";
          }
 if ($_REQUEST['site'] == 'website' ) {
   echo "<script type=\"text/javascript\">
          window.location = \"http://dev.ylpl.net/wordpress/?s=".$lookfor."&submit=FIND\";
          </script>";
 }

return    '<header id="header">
  <div class="x-container">
<div class="x-column x-1-2 x-sm">
      <h2 class="block_title man">
</h2><h2 style="margin-top:5px;">
<a rel="index" href="http://dev.ylpl.net/wordpress/" title="yorba linda public library">yorba linda public library</a></h2>
</div>
<div class="x-column x-1-2 x-sm"><span style=display:block;box-sizing:border-box;-mox=box-sizing:border-box;float:none;background-color:#36648B;padding-right:5px;padding-left:5px;padding-top:2px;margin-top:10px;><paragraph style=color:white;text-align:center;>
                 <p class="my-info">
   <b>Contact Us: </b> <a href="tel:17147772873">714-777-2873</a> <br> • 18181 Imperial Highway • Yorba Linda, CA 92886 <br>
    • Mon-Thurs  9 a.m. to 9 p.m. • Fri-Sat 9 a.m. to 5 p.m.  </br>
</p>
</div>
    </div>
</div>

<div data-element="section" class="x-section" id="x-section-1" style="padding: 0px 0px 45px; margin-top: 0px; border-width: 1px; border-style: none;">
<div data-element="row" class="x-container max width" style="padding: 0px; margin: 0px auto; border-width: 1px; border-style: none; background-color: transparent;">
<div data-element="column" class="x-column x-sm x-1-1 cs-ta-left" style="padding: 10px 0px 0px; border-width: 1px; border-style: none; background-color: rgba(117, 157, 199, 0.94);">
<div data-element="search" class="cs-preview-element-wrapper">
<div class="x-search-shortcode">
<form method="get" id="searchform" class="form-search">
  <label for="s" class="visually-hidden">Search</label>
  <div style="text-align:right"> <input type="text" id="s" class="search-query" name="s" placeholder="Search books, movies, etc"><input class="form-submit" type="submit" value="Find" style=float:none;vertical-align:middle;></div>
    <input type="radio" name="site" value="catalog" checked /> Search Catalog
  <input type="radio" name="site" value="website" /> Search Website<br></form></div></div>

';
 }

add_shortcode( 'theHeader', 'ylpl_print_header' );

Thank you. I appreciate everything you guys do!

Daniel

[Christopher]

Hi there,

please update this part of code :

<header id="header">
  <div class="x-container">
<div class="x-column x-1-2 x-sm">
      <h2 class="block_title man">
</h2><h2 style="margin-top:5px;">
<a rel="index" href="http://dev.ylpl.net/wordpress/" title="yorba linda public library">yorba linda public library</a></h2>
</div>
<div class="x-column x-1-2 x-sm"><span style=display:block;box-sizing:border-box;-mox=box-sizing:border-box;float:none;background-color:#36648B;padding-right:5px;padding-left:5px;padding-top:2px;margin-top:10px;><paragraph style=color:white;text-align:center;>
                 <p class="my-info">
   <b>Contact Us: </b> <a href="tel:17147772873">714-777-2873</a> <br> • 18181 Imperial Highway • Yorba Linda, CA 92886 <br>
    • Mon-Thurs  9 a.m. to 9 p.m. • Fri-Sat 9 a.m. to 5 p.m.  </br>
</p>
</div>
    </div>
</div>

<div data-element="section" class="x-section" id="x-section-1" style="padding: 0px 0px 45px; margin-top: 0px; border-width: 1px; border-style: none;">
<div data-element="row" class="x-container max width" style="padding: 0px; margin: 0px auto; border-width: 1px; border-style: none; background-color: transparent;">
<div data-element="column" class="x-column x-sm x-1-1 cs-ta-left" style="padding: 10px 0px 0px; border-width: 1px; border-style: none; background-color: rgba(117, 157, 199, 0.94);">
<div data-element="search" class="cs-preview-element-wrapper">
<div class="x-search-shortcode">
<form method="get" id="searchform" class="form-search">
  <label for="s" class="visually-hidden">Search</label>
  <div style="text-align:right"> <input type="text" id="s" class="search-query" name="s" placeholder="Search books, movies, etc"><input class="form-submit" type="submit" value="Find" style=float:none;vertical-align:middle;></div>
    <input type="radio" name="site" value="catalog" checked /> Search Catalog
  <input type="radio" name="site" value="website" /> Search Website<br></form></div></div>

to :

<header id="header">
  <div class="x-container">
<div class="x-column x-1-2 x-sm">
      
<h2 style="margin-top:5px;">
<a rel="index" href="http://dev.ylpl.net/wordpress/" title="yorba linda public library">yorba linda public library</a></h2>
</div>
<div class="x-column x-1-2 x-sm"><span style="display:block;box-sizing:border-box;-mox=box-sizing:border-box;float:none;background-color:#36648B;padding-right:5px;padding-left:5px;padding-top:2px;margin-top:10px;"><p class="my-info"><b>Contact Us: </b> <a href="tel:17147772873">714-777-2873</a> <br> • 18181 Imperial Highway • Yorba Linda, CA 92886 <br>• Mon-Thurs  9 a.m. to 9 p.m. • Fri-Sat 9 a.m. to 5 p.m.  </br></p></span>
</div>
</div>

<div data-element="section" class="x-section" id="x-section-1" style="padding: 0px 0px 45px; margin-top: 0px; border-width: 1px; border-style: none;">
<div data-element="row" class="x-container max width" style="padding: 0px; margin: 0px auto; border-width: 1px; border-style: none; background-color: transparent;">
<div data-element="column" class="x-column x-sm x-1-1 cs-ta-left" style="padding: 10px 0px 0px; border-width: 1px; border-style: none; background-color: rgba(117, 157, 199, 0.94);">
<div data-element="search" class="cs-preview-element-wrapper">
<div class="x-search-shortcode">
<form method="get" id="searchform" class="form-search">
  <label for="s" class="visually-hidden">Search</label>
  <div style="text-align:right"> <input type="text" id="s" class="search-query" name="s" placeholder="Search books, movies, etc"><input class="form-submit" type="submit" value="Find" style=float:none;vertical-align:middle;></div>
    <input type="radio" name="site" value="catalog" checked /> Search Catalog
  <input type="radio" name="site" value="website" /> Search Website<br></form></div></div></div></div></div>
  </header>

Hope it helps.

[ylpl]

Thanks, it created a new section, which is great! However, the width of my search box has shrunk a little bit. It does show that it’s still max-width so I’m a little confused what’s causing that. I’m trying to get it flush with the rest of my site (1140px), which is how it was before. Is there any way to re-adjust that?

Thank you again,

Daniel

[ylpl]

So I think I figured it out! In my PHP code I added:

<div data-element=”row” class=”x-container max width” style=”padding: 0px; margin: 0px auto; border-width: 1px; border-style: none; background-color: transparent; width: 100%;”>

The 100% width seemed to do the trick! Does that seem correct?

Thanks,

Daniel

[Friech]

Hi Daniel,

Yes, that will work. But you could also remove the class max width from your div.

That class is the responsible of limiting the container width.

Glad you sorted things out.

[Author]

Posts