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:
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!
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.
Hope that helps.
Thanks,
Sam
