• Resolved Blake

    (@alexanderblake)


    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/

    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 to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • Thread Starter Blake

    (@alexanderblake)

    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

    Plugin Contributor Maeve Lander

    (@enigmaweb)

    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: 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 4 years, 6 months ago by Maeve Lander.
    Thread Starter Blake

    (@alexanderblake)

    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

    (@alexanderblake)

    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

    (@enigmaweb)

    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

    (@enigmaweb)

    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

    (@alexanderblake)

    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

    (@enigmaweb)

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

    Thanks,
    Maeve

    Thread Starter Blake

    (@alexanderblake)

    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

    (@alexanderblake)

    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

    (@enigmaweb)

    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 with temporary WP Admin access details?

    Thanks,
    Maeve

    Thread Starter Blake

    (@alexanderblake)

    Okay, I just sent an email.

    Thanks!

    Blake

    Thread Starter Blake

    (@alexanderblake)

    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.