No announcement yet.

Interesting Site Builder tricks

This topic is closed.
  • Filter
  • Time
  • Show
Clear All
new posts

  • [Tutorial] Interesting Site Builder tricks

    Move the search box from the header to a Static HTML module on your page(s).

    You may already know you can remove the Search bar in the header by adding the following code to the css_additional.css template:
    .search-container {display: none;}
    However this makes it difficult for users to search.

    You can create a new Static HTML module in Site Builder -> Edit Page.

    Paste in the following code:
                                <form id="searchForm" action="//" class="h-left" method="GET">
                                    <div class="h-left">
                                        <div class="search-box search-btn-inside-box">
                                            <input type="text" name="q" id="q" placeholder="Search" class="textbox search-term" autocomplete="off" />
                                            <button type="submit" id="btnSearch" class="search-btn" title="Search"><span class="vb-icon vb-icon-search"></span></button>
                                            <div class="vertical-divider-left"></div>
                                            <div id="searchPopupControl" title="Filter search"> </div>
                                            <div id="searchPopupContent"><div class="searchPopupBody">
        <label><input type="checkbox" name="searchFields[title_only]" class="searchFields_title_only" value="1" />Search in titles only</label>
        <div class="h-clear"></div>
                <label><input type="checkbox" name="searchFields[channel][]" class="searchFields_channel" value="1" />Search in Home only</label>
        <label><span class="vb-icon vb-icon-adv-search"></span><a href="#" id="btnAdvSearch" class="adv-search-btn">Advanced Search</a></label>
        <div class="h-clear"></div>
            <button type="submit" id="btnSearch-popup" class="b-button b-button--primary h-right">Search</button>
    <input type="hidden" name="searchJSON" value="" /></div>
    Note- you need to replace the code in red with the URL of your forum, that is the only line you need to modify.

    I gave it a title called Site Search and the result was something that looked like this:

    Click image for larger version

Name:	site-search.png
Views:	334
Size:	24.9 KB
ID:	4372250

    This should work on both the download version of VB5 and vBCloud. Code tested/based off VB 5.3.1.

  • #2
    Create a custom login module.

    One of the questions I have seen asked more than once by VB5 and vBCloud Admins is how to only show a login box, because the site is private, they don't want topics visible until anyone logins. While this is certainly possibly getting a mostly empty screen and having to go to the top right to click on a link before the login box opens seemed counter intuitive.

    You could link people to the login form directly, such as, , but that is ugly, there is no logo, no colors, it just isn't very friendly.

    Click image for larger version  Name:	login-frame-only.png Views:	1 Size:	34.0 KB ID:	4372264

    First you need to create a New page in Suite Builder. I called mine Custom Login and gave it a path CustomLogin. (It's important not to give it a path that might ever become a future VB page so don't use just "Login" it's too likely to be used one day for an official page.)

    So my thought was, what if we put the login frame in an <iframe> tag inside a Static HTML module, then we could have a real looking forum page with the login form:

    Click image for larger version  Name:	login-frame-nice-page.png Views:	1 Size:	252.3 KB ID:	4372265

    Now we could also put other modules on the page, if we wanted, that doesn't give away any topics but some info on the site. We could choose a different layout, the main thing was we had a better looking login form inside of the style customizations.

    However after logging in there was a problem.

    The Login Box was still there.

    What we needed was a way to hide the login box once we logged in.

    What I realized was instead of using a Static HTML module if we used an Ad Module we could specify which usergroups the "ad" is visible to. So I merely created an ad with the following code and made it visible only to the Unregistered Users / Not Logged In group.

    <iframe src="" width="100%" height="300"></iframe>
    Replace the code in red with the URL to your forum. Adjust the height to suit your needs, this value is in pixels. Leave the width at 100%.

    Click image for larger version  Name:	login-frame-ad-info.png Views:	1 Size:	66.5 KB ID:	4372266

    Click image for larger version  Name:	login-frame-ad.png Views:	1 Size:	69.4 KB ID:	4372267

    Note- I strongly suggest putting an Activity Stream module below the login forum. If your site does not let unregistered users see topics or other content the stream will be empty before login, however once the user logins the same page will be refreshed, the login form will be gone (because it's only visible to unregistered users) so a (now full) activity steam will take its place.

    Do this and you end up with a page like:

    Now that you have a custom login page you probably want to make it your default landing page. You may know how to do that already, if not a vBCloud safe way of doing this will be the next trick.


    Related Topics