Customizing + Sidebar

Man, I would MUCH rather just recreate THIS design:

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

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

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: https://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 7 years ago by Maeve Lander.

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

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

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?

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.

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!

Hmm that’s weird. Can you turn on the breadcrumbs and search setting so I can see?

Thanks,
Maeve

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.

Hey Maeve,

Did you happen to look at it and see why there are two sets of breadcrumbs and search bars?

Thanks!

Blake

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 [email protected] with temporary WP Admin access details?

Thanks,
Maeve

Okay, I just sent an email.

Thanks!

Blake

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