Forum Discussion

avanvlack's avatar
avanvlack
Guide
14 years ago

CSS Class to remove Blocks or Styles from Custom Components

hello.

 

I am working on creating a custom content block for a lithium installation... but I am having trouble removing some of the styles for the content block. Normally when you create a custom content block it puts the content within a standard block that the Lithium skin creates for you. I am trying to wrap this content type in a wrapper that will REMOVE the custom content type CSS styles and only display the content on a white background WITHOUT the lithium block.

 

I would think it would be something like class="blank" in the div tag.... but I can't seem to find anything..

 

Can anyone help me?

 

Thank in advance!

 

 

  • JeffS's avatar
    JeffS
    14 years ago

    Hi Andrew,

     

    Instead of CSS, there is an option to remove this panel. Try going into Studio where you added this custom content component and clicking the XML tab.

     

    From here, find where your custom content is and use the following syntax instead:

     

    <component id="common.widget.custom-content" name="1" panel="false"/>

     

    The name="1" portion of this identifies which custom content you're using (so if you're using 7 for example, change the value to 7). The panel="false" will remove the standard styles and leave only the content in place.

     

    I hope this helps! Let me know if I need to clarify anything.

4 Replies

Sort By
  • JeffS's avatar
    JeffS
    Lithium Alumni (Retired)
    14 years ago

    Hi Andrew,

     

    Instead of CSS, there is an option to remove this panel. Try going into Studio where you added this custom content component and clicking the XML tab.

     

    From here, find where your custom content is and use the following syntax instead:

     

    <component id="common.widget.custom-content" name="1" panel="false"/>

     

    The name="1" portion of this identifies which custom content you're using (so if you're using 7 for example, change the value to 7). The panel="false" will remove the standard styles and leave only the content in place.

     

    I hope this helps! Let me know if I need to clarify anything.

  • avanvlack's avatar
    avanvlack
    Guide
    14 years ago
    PERFECT! I learned something new today! Thank you for the help!
  • HeatherBartron's avatar
    HeatherBartron
    Helper
    13 years ago

    Semi-related, how do you remove the grey borders from widgets i.e. the quick links widget (as seen below and in screenshot). I tried using the panel=false but it didn't work. I don't want to remove panels from all of the widgets just the one hilighted. 

     

    <component id="common.widget.custom-content" panel="false" name="1"/>
    <component id="common.widget.custom-content" panel="false" name="6"/>
    <component id="community.widget.quick-links"/>

     

    GreyLines.png

  • AdamN's avatar
    AdamN
    Khoros Oracle
    13 years ago

    Hi Heather,

     

    That particular component unfortunately doesn't have an option to toggle the panel, but you should be able to target styling of that component via CSS with the right selectors. Standard components typically have some unique classes or ids associated with them. For example, to target the Quick Links component, you could use the class: "lia-component-community-widget-quick-links"

     

    I hope this helps!