Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #3961

    Hi there,

    I have purchased a site switcher and would like to add the code below the search box.

    Can you show me how to add this feature? Do you need to see the files?





    yes – we need to see the code first. If it’s a time intensive task it’s beyond the scope of this support forum but if it’s just inserting a few lines of code we can help you :)


    This is the CSS file:

    .switcher ul.dropdown {

    width: 252px;

    min-height: 100px;

    padding: 16px 0px 14px;

    display: block;

    background: #232323;

    border: 1px solid #565044;

    -moz-border-radius: 7px;

    -webkit-border-radius: 7px;

    border-radius: 7px;

    position: relative;

    margin-left: -9999px;

    margin-top: -72px;


    .switcher ul.dropdown li {

    display: inline-block;

    width: 220px;

    height: 50px;

    padding: 12px 16px 4px 16px;


    .switcher ul.dropdown li:hover {

    background: #20201f;

    border: 1px solid #565044;

    border-width: 1px 0px;

    height: 48px;

    margin: -1px 0px 1px;


    .switcher ul.dropdown li a{

    display: inline-block;

    width: 220px;

    height: 50px;


    .switcher a.switchbutton {

    display: inline-block;

    text-indent: -9999px;

    width: 13px;

    height: 21px;

    position: relative;

    top: -15px;

    left: 1px;

    background: url(‘../i/switcher.png’) no-repeat 0px 0px transparent;


    .switcher a.switchbutton:hover {

    background-position: -13px 0px;


    .switcher a.switchbutton:active + ul.dropdown, ul.dropdown:hover {

    margin-left: -17px;


    and this is the HTML code:

    <span class="switcher">
    <a href="#" title="ThemeForest"><img src="i/themeforest.png" alt="themeforest" /></a>
    <a href="#">switchbutton</a>

    <ul class="dropdown">

    <li><a href="#" title="ThemeForest"><img src="i/themeforest.png" alt="themeforest" /></a></li>
    <li><a href="#" title="CodeCanyon"><img src="i/codecanyon.png" alt="codecanyon" /></a></li>
    <li><a href="#" title="3dOcean"><img src="i/3docean.png" alt="3docean" /></a></li>
    <li><a href="#" title="ActiveDen"><img src="i/activeden.png" alt="activeden" /></a></li>

    It is something like what Themeforest did with their logo on the left. But I would like to add this feature below the search box..I think it would be much better right?

    Thanks a lot!



    open up header.php and insert the html code you posted above (doesn’t seem to be 100% correct though – i.e. the closing ul tag is missing) after following code:

    <!-- end social_bookmarks-->

    Then open up custom.css (located in the folder “css”) and paste in the css code you posted above. At least add following code to custom.css (after the code you posted above):

    position: absolute
    right: 20px;
    top: 70px;

    The site switcher seems to be a pure css solution – I like it because it’s unobtrusive. Adjust the top and the right value as you like. If you increase the top value the site switcher will move towards the bottom, if you increase the right value it will move towards the logo on the left.


    Thanks a lot for the guide. It’s working actually but when I roll over to the switcher and try to click on one of the link, the drop-down switcher disappeared.

    By the way, I found out the tabs and toggles are not working and they were aligned vertically instead. I tried it on another test subdomain and still the same. Perhaps you guys can check on it?



    Hi there,

    Actually the tabs and accordion are not working if I use it for the subdomain. I try to use it on a domain itself, it’s working well.




    I think I have wrongly seen the correct functioning one. I clicked on the Home button and it went to Brightbox demo page and saw the working version on the other domain.




    Can you post a link to your website please – I need to investigate thre code myself.


    Hi there,

    Sorry for the late reply. I’ve redownload the files and uploaded them and it’s working fine now.

    Is it possible for me to email you to check out on the switcher? It seems that when I roll-over to it, it will disappear.




    Can you create me an admin account and send me the login details to: (Email address hidden if logged out) – if I find a quick solution I’ll fix it.

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘How can I add switcher below the search box?’ is closed to new replies.