Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #15062

    Hi there, I have a couple of queries regarding the shoutbox theme,for my website,

    firstly how do i change the colour of the top bar of the website, from black to a navy blue or grey?

    secondly, i would like to change the text in the search box to “search”

    I would also like to centre the title logo and use pictures in the Mega menu, above each heading title of the mega menus, such as above the word commodities in the mega menu

    I would be very grateful if you would help me with these issues




    To change the color of the top bar, just add this on your custom.css

    .submenu {
    background: blue url(../images/shared/grain.png) repeat 0 0;
    border-bottom: 7px solid #F1F1F1;

    Change “blue” to your desired color.

    To change the search form value, open searchform.php and find this code

    <input type="text" id="s" name="s" value="search site"/>

    Change the value. :)




    Thanks for your message. I’ve added the extra bit i wanted to into the searchbar, but i would like to make the original searchbox wider, so all the text can be seen, and when hovering over it, to go all the way to the last tab of ‘get in touch’. how would i do this?

    Also, how would i update my mega menu, as mentioned in the last message??

    I really appreciate your help

    Thank you!


    Also, how would i make the sidebar wider? it appears that some of the boxes such as the twitter feed go outside of the sidebar, making it look very messy. i would like to make the side bar wide enough to accomodate all of the side boxes?

    Thank you once more!


    Hi ravsumeet

    To change the width of the search bar Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    .search_site #searchform #s {
    width: 70%;

    Next you need to open js>avia.js in your theme files and search for:

    jQuery(".main_menu .search_site").avia_expand_element({expandToWidth:300, speed:800});

    Replace it with

    jQuery(".main_menu .search_site").avia_expand_element({expandToWidth:367, speed:800});

    You can edit the mega menu in Appearance>Menus in the wordpress admin. To add images, you’ll set up the basic mega menu like in this video: then you can make a new menu item with the URL set to # and in the Description field of that item you’ll put in the html for an image and a link:

    <a href="" ><img src=""></a>

    I think the first widget in your sidebar is causing the rest of your widgets to be incorrectly scaled. If you can put in the QR code image without using an iframe it should fix the issue. Making the sidebar wider would cause the entire site layout to need to be redone.




    Thank you ever so much for your help!

    1 final question:

    How do i get the main logo of TheMarketMogul to either centre or bigger to appears in the centre of the website at the top?

    Thanks once more


    finally, one last query,

    in the footer region, with the tag cloud etc, how do i get that section to be a light shade of grey?



    For the logo:

    #top .logo img {
    margin-left: auto;
    margin-right: auto;

    and for the footer:

    #footer {
    background: #fff;
    border-top: 1px solid #EEEEEE;

    You can change the #fff to the color code you’d like. See:



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

The topic ‘Customising the Shoutbox theme’ is closed to new replies.