Customising the Shoutbox theme

8 posts from 3 voices

• Started 9 months ago by ravsumeet
• Latest reply from Devin
• This topic is not a support question

Tags:

No tags yet.

1. 

   ravsumeet
   Member

   Hi there, I have a couple of queries regarding the shoutbox theme,for my website, http://www.themarketmogul.com

   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 TheMarketMogul.com"

   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

   Thanks!

   Posted 9 months ago #
2. 

   Ismael
   Moderator

   Hello,

   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. :)

   Regards,
   Ismael

   Posted 9 months ago #
3. 

   ravsumeet
   Member

   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!

   Posted 9 months ago #
4. 

   ravsumeet
   Member

   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!

   Posted 9 months ago #
5. 

   Devin
   Moderator

   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:
   http://www.kriesi.at/themes/abundance/templates/video-tutorials/#menu 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="http://www.yoursite.com" ><img src="http://www.yoursite.com/yourimage.jpg"></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.

   Regards,

   Devin

   Posted 9 months ago #
6. 

   ravsumeet
   Member

   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

   Posted 9 months ago #
7. 

   ravsumeet
   Member

   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?

   Thanks

   Posted 9 months ago #
8. 

   Devin
   Moderator

   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: http://html-color-codes.info/

   Regards,

   Devin

   Posted 9 months ago #

RSS feed for this topic

Reply

You must log in to post.