Forum Discussion

Inactive User's avatar
Inactive User
8 years ago

Add a css class to a OOTB component as a parameter -- or anything, really?

Wondering if there's a way to add a css class to an OOTB component using the param functionality. 

For example, I'd like to add "some-class" to the "solution-info" component to easily re-style it (which turns out to be difficult), i.e., 

 

<component id="solution-info"/> 

 

Gives us, I think: 

 

<span class="lia-thread-solved lia-component-solution-link">
<a class="lia-link-navigation lia-forum-topic-page-solution-link" id="link_7" href="#somelink">Go to Solution</a>
</span>

 

I want to be able to add the class "go-to-solution-arrow" or the like to it. I'd like to do something like this:

 

<component id="solution-info" param_name="class" param_value="go-to-solution-arrow"/> 

 

and have it render

 

<span class="lia-thread-solved lia-component-solution-link go-to-solution-arrow">
<a class="lia-link-navigation lia-forum-topic-page-solution-link" id="link_7" href="#somelink">Go to Solution</a>
</span>

Any solution that gives me the final result via the quilt or layout would be helpful.

  • dchou's avatar
    dchou
    Ace
    8 years ago

    Create a component called ootb.widget@override (or whatever your component is)

     

    inside the contents you would put

     

    <div class="custom-css-class">
    <@delegate />
    </div>

     

    then it would render all the css classes under the custom-css-class. 

     

    so.. 

    <span class="lia-thread-solved lia-component-solution-link">
<a class="lia-link-navigation lia-forum-topic-page-solution-link" id="link_7" href="#somelink">Go to Solution</a>
</span>

    would then be

    <div class="custom-css-class">
    <span class="lia-thread-solved lia-component-solution-link">
<a class="lia-link-navigation lia-forum-topic-page-solution-link" id="link_7" href="#somelink">Go to Solution</a>
</span>
    </div>

     at which point you could just use css...

     

    .custom-css-class .lia-thread-solved {

    font-size:100px;

    }

    • jferrandis's avatar
      jferrandis
      Expert
      8 years ago
      have you tried the wrapper param

      <component id="solution-info" wrapper="my-class1 myClass2"/>