Forum Discussion

twitchee27's avatar
twitchee27
Expert
13 years ago

Adding Bullets to Custom Component

We have a custom component that displays message subjects based on a specific tag, and I am trying incorporate a bullet point on each subject to clearly delineate between them within the component. I am unable to use the unordered list tag to do this, and am suspecting the <#list tag is preventing it. Here is the code, any ideas?

 

<style type="text/css">
	#RecentVideos li a {
		line-height: 18px;
	}
</style>
	<div style="padding-left:10px">
	<ul id="RecentVideos" >
		<#assign result=rest("/tagging/for/tags/text/training%20video/messages/recent?restapi.response_style=view&page_size=5")>
		<#list result.messages.message as message>
			<li> <a href="${message.@view_href}"> ${message.subject}  </a> </li>
		</#list>
	</ul>
	</div>

 

3 Replies

Sort By
  • jc758's avatar
    jc758
    Advisor
    13 years ago
    Hi ,
    try to add a "list-style-type:disc;" on your ul or li...
    this property might be set to 'none' in the lithium default css...
  • twitchee27's avatar
    twitchee27
    Expert
    13 years ago

    Thanks for the tip, jc758! Unfortunately, adding "list-style-type:disc;" didn't adjust anything in the component. any other ideas?

  • AdamN's avatar
    AdamN
    Khoros Oracle
    13 years ago

    It sounds like the community default stylings are taking precdence. If the inline styling isn't working for you, I'd suggest adding some CSS to your skin with selectors that are more specific than the defaults.

     

    These are likely the default selectors that are styling your list:

    #lia-body .lia-content ol 
#lia-body .lia-content ul

     

    So perhaps try something like:

    #lia-body .lia-content ul#RecentVideos, #lia-body .lia-content #RecentVideos li {
  list-style-type: disc;
}

     

    If that doesn't work, you may need to get even more specific.