Forum Discussion

bsamson's avatar
bsamson
Adept
11 years ago

Creating a Custom Page in Lithium Studio

What html code would I use to  add padding to a custom content module so that I can increase left and bottom margins?

 

Also, words in custom module are currently stacked and I would like them to be side by side. Any suggestions for how to do this?

 

Here is the custom content:

2014-04-04_1819.png

  • dementad's avatar
    dementad
    Genius
    11 years ago

    You can apply any special CSS rules to your component by adding it to your Community Skin. Here is an example of CSS that I added to a custom component in my community:

     

    #alstom-component-jfi-steps {
    margin-top: 20px;
    padding-top: 5px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    width: 100%;
    }

     

    In your example, your words:

     

    Explorer Hosted Events

    Group Directory

     

    are stacked because you have them in separate table rows. As long as they are in separate table rows, they will necessarily be stacked.

     

    Generally speaking, you can modify the look-and-feel of your community quite extensively using CSS. If you need a quick tutorial on CSS, there are many free resources available online, such as:

     

    http://www.w3schools.com/css/DEFAULT.asp

     

    Good luck!

  • bhupen's avatar
    bhupen
    Advisor
    11 years ago
    bsamson you can not embed directly style into custom component. Better you use css in specific board/pages inside the skin's css and using particular class/id. So that everything remains same, just get effect on your particular area.
  • samudhraa's avatar
    samudhraa
    Expert
    11 years ago

    Hi bsamson ,

     

    Here is a sample custom content , that would display links side ways . You can give custom styling in the global skin , and make it sepcific by mentioning Page class (.ForumTopic etc)  as well as class name for your html elements (div , span  etc)

     

    Custom Content : 

    <span>
    <a href="">Explorer Hosted Events</a>
    </span>
    <span>
    <a href="">Explorer Hosted Events</a>
    </span>

     

    CSS : 

    .lia-panel.lia-panel-standard.CustomContent.Chrome.lia-component-common-widget-custom-content {
    margin-left: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    padding-left: 10px;
    }

    .lia-body .lia-content .lia-component-common-widget-custom-content .custom-title-link {
    color: red;
    }

     

    This is how my component looks on page. You can modify css as per your needs.

    testContent.png

     

    Hope that helps.

     

    Thanks,

    Sam