Title: Customizing + Sidebar
Last modified: November 15, 2017

---

# Customizing + Sidebar

 *  Resolved [Blake](https://wordpress.org/support/users/alexanderblake/)
 * (@alexanderblake)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/customizing-sidebar-5/)
 * I just got started with the plugin, and want to customize more, so I have a few
   questions:
 * 1 – How can I get the search bar to span the entire container (including the 
   sidebar)? It makes the search bar look too short, or the sidebar appear too far
   to the right…
 * 2 – The buttons I use on my site (shortcodes_ultimate plugin) work on every page,
   but in the KBE articles, there’s a white line in the button, making it two lines
   tall… how do I eliminate that line? [https://www.recredit.co/kb/how-to-download-your-reports/](https://www.recredit.co/kb/how-to-download-your-reports/)
 * 3 – General Password Protection – if I password protect the KBE “page” will that
   password protect the entire knowledgebase, or will I need to enable another plugin
   like S2Member?
 * Thanks!
 * I’m sure once I have the correct “look” I will be much happier!
 * Blake
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcustomizing-sidebar-5%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 13 replies - 1 through 13 (of 13 total)

 *  Thread Starter [Blake](https://wordpress.org/support/users/alexanderblake/)
 * (@alexanderblake)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/customizing-sidebar-5/#post-9687458)
 * Man, I would MUCH rather just recreate THIS design:
 * [https://orpheus-app.com/knowledgebase/](https://orpheus-app.com/knowledgebase/)
 * It’s one of the examples you posted in the instructions. I love the header, the
   centered search button, and everything else.
 * I replaced my kbe_style.css file with his, but nothing changed. I can’t get anything
   to update, so I’m stuck.
 * I also copied the templates over into my main theme folder and named that folder‘
   wp_knowledgebase’ but I still can’t edit anything.
 * What am I missing?
 * Thanks for your help.
 * Blake
 *  Plugin Contributor [Maeve Lander](https://wordpress.org/support/users/enigmaweb/)
 * (@enigmaweb)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/customizing-sidebar-5/#post-9687868)
 * Hi Blake, no worries, happy to help you adjust your layout to get it looking 
   something like the example (which happens to be one of my own sites.)
 * 1.) I can see your theme has old style.css and I imagine, other templates too.
   The plugin was recently updated for 100% width which will work well in your theme’s
   case. Please:
    - Delete the folder you added to your theme.
    - Then, update the plugin.
    - Then, re-copy that folder into your theme
 * 2.) In the template folder that you just copied to your theme (1 – above), you’ll
   need to modify a few files to add the full width bar at the top. I’ve created
   a gist here for you to use: [https://gist.github.com/EnigmaWeb/53bdd4ff0a563b3e02739285199b18e7](https://gist.github.com/EnigmaWeb/53bdd4ff0a563b3e02739285199b18e7)
 * This adds the bar at the top, containing heading, subheading, search and breadcrumbs.
 * 3.) Turn OFF the breadcrumbs and search in the WP Knowledgebase plugin settings
   screen (because we don’t want two sets of those on the page and we added it directly
   to the template in (2) above)
 * 4.) Tweak! You’ll need to do some work to get this looking perfect on the main
   KB archive page: [http://www.recredit.co/kb/](http://www.recredit.co/kb/)
    You
   will almost certainly need to also make css adjustments to get the padding, colour
   and so on that you want for your theme. Once you’ve done all that, apply the 
   same extra chunk of code (line 27 – 56 in the gist) to other relevant templates.
 * I look forward to seeing how you go 🙂
 * Maeve
    -  This reply was modified 8 years, 6 months ago by [Maeve Lander](https://wordpress.org/support/users/enigmaweb/).
 *  Thread Starter [Blake](https://wordpress.org/support/users/alexanderblake/)
 * (@alexanderblake)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/customizing-sidebar-5/#post-9690711)
 * Awesome! I’m ALMOST THERE!
 * I don’t have a search field in there now. I have the colored bar across the top
   and the text (heading and sub-heading), but no search box.
 * Also, the breadcrumbs aren’t appearing under the header box (that’s what I’m 
   calling it).
 * FYI – I simply copied the gist code you posted above to the kbe_knowledgebase.
   php file AND the archive-kbe_knowledgebase.php file. Do I need to post it to 
   all of them to get the header in each?
 * Thanks!
 * Blake
 *  Thread Starter [Blake](https://wordpress.org/support/users/alexanderblake/)
 * (@alexanderblake)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/customizing-sidebar-5/#post-9690851)
 * I turned on the search and breadcrumbs in the settings. I got two sets of each
   to appear (that was expected). I turned them off, and it removed them BUT also
   removed all bottom margin on the colored header box.
 * It was the header box followed immediately by the articles (no padding at all).
 * I turned the search back on and set the margin to “auto” which ALMOST centers
   it.
 * I also want to reduce the margin above the header box *between the menu and header*
   but when I do that in CSS, it puts the page title up in the menu on individual
   articles. So I erased that.
 * I want to keep messing with everything, but it’s a better idea if I keep writing
   the articles and building the knowledgebase and wait for your help later.
 * Thanks again! You’re the best!
 * Blake
 *  Plugin Contributor [Maeve Lander](https://wordpress.org/support/users/enigmaweb/)
 * (@enigmaweb)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/customizing-sidebar-5/#post-9691938)
 * Cool! It’s looking a heap better. Let’s spruce this up a bit more.
 * **Header gap**
    Looks like a div called “subheader” is adding some inline css.
   Not quite sure where that’s coming from… but let’s try to override it:
 *     ```
       #Subheader {
           padding-bottom: 0px !important;
       }
       ```
   
 * **Space between blue bar and content**
    In your KB stylesheet (the copy in your
   theme) search for “.kbe_search_container” and add margin-bottom. With that line
   added it would look like this:
 *     ```
       .kbe_search_container {
           background: #0077b5;
           text-align: center;
           padding: 40px 0 50px 0;
           margin-bottom: 50px;
       }
       ```
   
 * **Search and Breadcrumbs**
    Can you clarify what you’d like to achieve here? 
   I’m not quite clear from your replies whether you want those to show or not? 
   And if so, where?
 *  Plugin Contributor [Maeve Lander](https://wordpress.org/support/users/enigmaweb/)
 * (@enigmaweb)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/customizing-sidebar-5/#post-9691943)
 * Oh one more thing… if you _wanted_ to replicate that gradient on the bar at the
   top, you could do it with CSS like this:
 *     ```
       background: #1d4695;
       background: -moz-linear-gradient(left, #1d4695 0%, #0077b5 100%);
       background: -webkit-linear-gradient(left, #1d4695 0%,#0077b5 100%);
       background: linear-gradient(to right, #1d4695 0%,#0077b5 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d4695', endColorstr='#0077b5',GradientType=1 );
       ```
   
 * So your .kbe_search_container section of CSS would become:
 *     ```
       .kbe_search_container {
           background: #1d4695;
           background: -moz-linear-gradient(left, #1d4695 0%, #0077b5 100%);
           background: -webkit-linear-gradient(left, #1d4695 0%,#0077b5 100%);
           background: linear-gradient(to right, #1d4695 0%,#0077b5 100%);
           filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d4695', endColorstr='#0077b5',GradientType=1 );
           text-align: center;
           padding: 40px 0 50px 0;
           margin-bottom: 50px;
       }
       ```
   
 * I think that could look cool.
 *  Thread Starter [Blake](https://wordpress.org/support/users/alexanderblake/)
 * (@alexanderblake)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/customizing-sidebar-5/#post-9691977)
 * MUCH BETTER! THANKS!
 * Okay, the breadcrumbs and search bar still aren’t there. In your instructions,
   you mentioned disabling them in the Knowledgebase > Settings menu so they didn’t
   appear twice after loading the templates.
 * When they’re disabled, I don’t have either. When they’re enabled, I get duplicates.
 * Ultimately, I would like them to appear just as they do on the Orpheus-app site(
   under the header bar in their own grey container)
 * I can’t thank you enough! These changes are coming together beautifully!
 *  Plugin Contributor [Maeve Lander](https://wordpress.org/support/users/enigmaweb/)
 * (@enigmaweb)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/customizing-sidebar-5/#post-9692017)
 * Hmm that’s weird. Can you turn on the breadcrumbs and search setting so I can
   see?
 * Thanks,
    Maeve
 *  Thread Starter [Blake](https://wordpress.org/support/users/alexanderblake/)
 * (@alexanderblake)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/customizing-sidebar-5/#post-9692040)
 * Done and done. Check it now.
 * I tried to center the search box by using margin: auto, but it’s not truly centered.
   I don’t know what happened.
 *  Thread Starter [Blake](https://wordpress.org/support/users/alexanderblake/)
 * (@alexanderblake)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/customizing-sidebar-5/#post-9702824)
 * Hey Maeve,
 * Did you happen to look at it and see why there are two sets of breadcrumbs and
   search bars?
 * Thanks!
 * Blake
 *  Plugin Contributor [Maeve Lander](https://wordpress.org/support/users/enigmaweb/)
 * (@enigmaweb)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/customizing-sidebar-5/#post-9704329)
 * Hi Blake, I think I may have reached the limit of what I can suggest without 
   access to the code. I’m more than happy to keep working with you on this. Would
   it be possible to shoot me an email at [support@enigmaplugins.com](https://wordpress.org/support/topic/customizing-sidebar-5/support@enigmaplugins.com?output_format=md)
   with temporary WP Admin access details?
 * Thanks,
    Maeve
 *  Thread Starter [Blake](https://wordpress.org/support/users/alexanderblake/)
 * (@alexanderblake)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/customizing-sidebar-5/#post-9704443)
 * Okay, I just sent an email.
 * Thanks!
 * Blake
 *  Thread Starter [Blake](https://wordpress.org/support/users/alexanderblake/)
 * (@alexanderblake)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/customizing-sidebar-5/#post-9725773)
 * Hey Maeve!
 * I just want to check in. I enabled a few things for you and sent a follow-up 
   email a couple of days ago. Please let me know what the next steps are. If it’s
   something (tech-support) I have to pay for, just let me know. I don’t want you
   working for nothing if it’s bigger than just a few quick lines of code!
 * Talk soon,
 * Blake

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Customizing + Sidebar’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/wp-knowledgebase_c56559.svg)
 * [WordPress Knowledge base & Documentation Plugin - WP Knowledgebase](https://wordpress.org/plugins/wp-knowledgebase/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-knowledgebase/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-knowledgebase/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-knowledgebase/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-knowledgebase/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-knowledgebase/reviews/)

 * 13 replies
 * 2 participants
 * Last reply from: [Blake](https://wordpress.org/support/users/alexanderblake/)
 * Last activity: [8 years, 6 months ago](https://wordpress.org/support/topic/customizing-sidebar-5/#post-9725773)
 * Status: resolved