Sidebar items in widgetised sidebar doesn’t get the same format

• vunguyen

  said

  Hi guys,

  - I’m trying to create a search field using Widgetised sidebar of Visual Composer.
  - The search widget is showing up as a default Wordpress search bar (short input field and a search button)

  - The same search widget, if I drop it into a normal sidebar, it will show up as seen on the demo: http://para.llel.us/themes/moxie-wp/blog/ –> this is how I want it to look

  For complicated reason, I can’t use a normal sidebar for this search field. What can I do so they look the same?

  Thanks guys!

• jeffw

  said

  Hi, vsync.

  This will be because in the theme’s style.css stylesheet the style for .widget-area #s is set to be 95% of the container in which it is enclosed.

  You can add a similar style to your Custom CSS box in Appearance > Theme Options > Custom CSS to target the search box you are using in the Visual Composer widgetised sidebar.

  If you use the Internet Explorer, Chrome or Safari browsers you can use their built-in developer tools to point at and “inspect” elements on a web page to find out what styles they use. You can even tweak the styles live to experiment with any changes you might fancy. If you use Firefox then there is an add-on named Firebug you can install which gives that browser the same functionality as the developer tools built into the other browsers.

  If you need to learn how to use CSS then I can recommend this site: http://www.w3schools.com/css/

  If you need me to look up the necessary CSS for you then I will need a link to a live web page that dispalys the issue.

• vunguyen

  said

  HI jeffw,

  I think you misunderstood me.
  - The search widget on the sidebar is fine as it is. (that’s the one get formatted by .widget-area #s
  Example: http://para.llel.us/themes/moxie-wp/blog/
  This is how it supposed to look.

  - If you use Widgetised sidebar element of visual composer, the search widget doesn’t get formatted by the style sheet .widget-area #s at all. I tried to use inspect element like you said. It doesn’t have the .widget-area #s in its format.
  It looks like an un-formatted, un-themed search bar of the default Wordpress.
  Example: http://wp-themes.com/twentytwelve?TB_iframe=true&width=1570&height=889

  Thanks jeffw!

• jeffw

  said

  Hi, vsync.

  You have misunderstood.

  You can add a similar style to your Custom CSS box in Appearance > Theme Options > Custom CSS to target the search box you are using in the Visual Composer widgetised sidebar. You can use your browser inspect tool to point at the search box in question and learn what CSS you need to add. If you need me to look up the necessary CSS for you then I will need a link to a live web page that dispalys the issue.

• vunguyen

  said

  Thanks jeffw,

  The site is still on xampp so I can’t link it here yet. I will let you know when I have it up on a live server.
  I tried to use inspect function on both chrome and Firefox. I can see the code and find the item. Unfortunately, I don’t know how do you come up with the answer. So many classes. I will do some googling about this.
  If you have any tip, I would be very much appreciated.

  Thank you.

• jeffw

  said

  Look for the width property on the #s selector for the search form’s input field.

• clariner

  said

  I have come across the same issue but under different cause.

  If i place the wordpress built in menu widget in the layout sidebar it will be themed, but if you place the same widget in sidebar when using visual composer the theme is not applied.

• vunguyen

  said

  Hi Clariner,

  That’s exactly what’s I’m trying to say.
  Please jeffw try and see. The theme doesn’t apply for anything in Wigetised sidebar element of Visual Composer.
  .widget-area #s doesn’t exist when I inspect the element.

  Cheers!

• andy

  said

  I think this is because the Visual Composer element does not apply the same container classes that the default widget areas have. What Jeff suggested is correct, specifically the .widget-area class is not on the widget area container produced by Visual Composer.

  There isn’t any need to add a widget area this way because you can insert the theme’s [sidebar] shortcode into any area. That should produce the styles with the correct classes, I think. I haven’t tested that but I believe it will work.

• vunguyen

  said

  Hi andy and jeffw,

  Thank you for your reply.
  After mucking around: there are two solutions to this madness
  1. Use the [sidebar] shortcode as andy suggested.
  2. Open the widgetised sidebar in Visual Composer, there is a field call: Extra class. Add widget-area into that field (without any .)
  Hope this help for anyone looking for answer

  Thank you jeffw and andy!