Forum Discussion

HeatherBartron's avatar
HeatherBartron
Helper
13 years ago

Change Widget Wrapper

Hello, I'd like to customize my "Ask an Expert"  widget but am afraid of doing so and ruining the functionality so I figured I'd ask here. As seen in this screenshots below, i'd like to do something ...
JeffS's avatar
JeffS
Lithium Alumni (Retired)
13 years ago

Hi Heather,

 

To style this component, you'll want to make adjustments to the respective classes in your skin's CSS.

 

In particular, the widget is housed around the .lia-component-qanda-widget-ask-an-expert div class. Within that, you can style different levels of the component, depending on what it is you're looking to do (such as using a background image, color, etc.). I've attached an image showing some of the basic HTML structure -- see ask.PNG.

 

For reference, I've included a couple of useful articles that will help you in doing this -

 

 

Please let me know if any clarification is needed.

 

Cheers!


ask.PNG
  • HeatherBartron's avatar
    HeatherBartron
    Helper
    13 years ago

    Jeff,

     

    We have already gone through all the CSS and can't find where that class is so we can style the different parts. I think the main issue is that of all the pieces to style, a lot of them aren't referenceable anywhere in the code. Would it be easier to look through ours and point it out for us? We're currently working off our stage platform. Let me know what you would need. 

     

    Thanks for all your help thus far,

    Heather

    • KaelaC's avatar
      KaelaC
      Lithium Alumni (Retired)
      13 years ago

      Hi Heather -

       

      That BeautyTalk component (and, in fact, the entire page on which it lives) is a custom build.  Also, it is using a normal search functionality, not the Ask A Question functionality.  You don't get that new div of matching topics as you type below the textarea. To use Ask an Expert, you are going to need to account for the unknown dimentions of the results area in your design.  You could add style to 

      .lia-ask-an-expert-wrapper .lia-form-input-wrapper {}

       to isolate just the entry box.

       

      If you need more divs for styling you can try wrapping the component in a custom one and creating whatever markup you need.  However, this will go around the entire component.  PM me your stage site and I'll take a look.