Developer

You are not logged in. Log In or Sign Up

Home

Documentation

Examples

Discussion Board

Members

Announcements

Visit Flux.com

FML Samples

These FML examples are a perfect way to get started creating customized FML modules for your community. These samples were created using the standard Flux community CSS styles, so you can easily plug the samples into your own community and they will automatically inherit your own chosen CSS theme. This list of sample modules will continue to grow over time, so keep checking back for more updates.

Alternating Video List
Photo List
People Gallery
Posts Detail List
News Summary List
2 Column People List
Official / Member Photos

Alternating Video List

    <?fml version="1.0" ?> 
    <div class="moduleVideo">
    
    <div class="videoModule">
        <div class="navPanel" style="padding-bottom:5px;">
            <div style="padding-right:5px;"><a target="_top" class="linkButton" href='<fx:Url path="Content/videos/AddVideo.aspx"/>' >add video</a></div>			
        </div>
    
        <fx:grid datasource="feeds/videos/?max-results=6">
            <fx:header>
                <div class="itemsList">
            </fx:header>
            
            <fx:item>
            <div style="padding-bottom:5px;">
                <div style="float:left;width:70px;padding-right:10px;">
                    <fx:item-content-thumbnail size="70x53"/>
                </div>
                <div style="width:192px;float:left;border:1px solid #000000;background:#FFFFFF;padding:5px;">
                    <div style="font-size:14px;font-weight:bold;"><fx:item-content-title MaxLength="20"/> </div>
                    <div>Created by:<fx:item-content-creator-name /> </div>
                    <div>Date created:<fx:item-content-dateCreated format="shortDate" /> </div>
                    <div>Rate: <fx:item-content-rating /> </div>
                </div>
                <div style="clear:both;"></div>
            </div>
            </fx:item>           
             <fx:alternatingItem>
             <div style="padding-bottom:5px;">
             <div style="float:right;width:70px;padding-right:7px;">
                    <fx:item-content-thumbnail size="70x53"/>
                </div>
                <div style="width:190px;float:left;border:1px solid #000000;background:#FFFFFF;padding:5px;">
                    <div style="font-size:14px;font-weight:bold;"><fx:item-content-title MaxLength="20"/> </div>
                    <div>Created by:<fx:item-content-creator-name /> </div>
                    <div>Date created:<fx:item-content-dateCreated format="shortDate" /> </div>
                    <div>Rate: <fx:item-content-rating /> </div>
                </div>
                <div style="clear:both;"></div>
             </div>
             </fx:alternatingItem>      
            <fx:noresult>There is not video for this community</fx:noresult>
            <fx:footer>
                </div>
            </fx:footer>
        </fx:grid>
        
        <div style="clear: both;"></div>            
          </div>
    </div>
    </div>

TOP

Photo List

<style type="text/css">
.navPanel .spacing { padding-right:5px;padding-bottom:3px; }
</style>
<?fml version="1.0" ?> 
<table cellpadding="0" cellspacing="0" border="0" width="100%">
	<tr>
		<td valign="top" style="padding-bottom:5px;">
			<div class="navPanel">
				<div class="spacing"><a href='<fx:Url path="/Content/Picture/AddPhoto.aspx"/>'>add photo</a></div>			  
			</div>
		</td>
	</tr>

	<tr>
		<td style="padding: 5px 7px;">
			<fx:grid datasource="feeds/pictures/?max-results=3" columns="2">
				<fx:header>
					<div class="photos">
                      <div style="background:#FFF;padding:10px;">
				</fx:header>
				<fx:item>
                	<div style="border:1px solid #d1d1d1;margin-bottom:5px;">
						<div style="padding:5px;">                    
                            <div style="width:90px;float:left;"><fx:item-content-thumbnail size="90x90" /></div>
                            <div style="width:150px;float:left;padding-left:10px;">
                                <div style="font-size:12px;font-weight:bold;padding-bottom:3px;"><a style="color:#333333;text-decoration:none;" href="<fx:item-content-detailUrl />"><fx:item-content-title MaxLength="50"/></a></div>
                                <div style="font-size:11px;font-weight:normal;color:#333333;padding-bottom:3px;text-overflow:ellipsis;" title="Creator Name">Created by: <a style="font-size:11px;font-weight:normal;color:#333333;text-decoration:none;" href="<fx:item-content-creator-profileUrl />"><fx:item-content-creator-name MaxLength="15"/></a></div>
                                <div style="font-size:11px;font-weight:normal;color:#333333;padding-bottom:3px;" title="Date Created"><fx:item-content-dateCreated format="LongDateTimeAMPM"/></div>
                                <div style="font-size:11px;font-weight:normal;color:#333333;padding-bottom:3px;" class="rating">Rating: <fx:item-content-rating /></div>
                            </div>
                             <div style="clear:both;"></div>       
                        </div>
                    </div>                    
				</fx:item>
				<fx:footer>
                <div class="navPanel">			
				<div class="spacing"><a href='<fx:Url path="/Content/Picture/PictureCategories.aspx"/>'>more photos »</a></div>
			</div>
						</div>        	                                       
					</div>				
				</fx:footer>
				<fx:noresult>No photos</fx:noresult>
			</fx:grid>
		</td>
	</tr>

	<tr>
		<td valign="bottom" style="padding-top:5px;">
			
		</td>
	</tr>
</table>
<div class="bottomLeft">
	<div class="bottomRight">
		<div class="bottomCenter">
		</div>
	</div>
</div>

TOP

People List

<?fml version="1.0" ?>
<div class="modulePeople"> 
<div class="modulePeopleProfile">
    <div class="navPanel">
    </div>
    <fx:grid datasource="feeds/people/members/?max-results=9" columns="1">
        <fx:header>
            <div class="itemsList">
            	<div style="margin-left:24px;">
        </fx:header>
        <fx:item>
            <div class="listItem" style="padding:5px;float:left;">
                <div align="left"><a class="itemImg" title="<fx:item-user-title/>" href="<fx:item-user-profileUrl />"><img alt="<fx:item-user-title />" src='<fx:item-user-thumbnailUrl size="70x70" />' class="thumbnailSize70x70" /></a></div>                
            </div>
        </fx:item>
        <fx:rowSeparator />
        <fx:columnSeparator />
        <fx:footer>
        			</div>
                <div style="clear: both; height: 0px; font-size: 0px;"> </div>
            </div>
        </fx:footer>
    </fx:grid>
    <div class="navPanel">
    	<a href='<fx:Url path="Content/Community/BrowseUsers.aspx"/>'>more members »</a>
    </div>
</div>
</div>
<div class="bottomLeft">
    <div class="bottomRight">
        <div class="bottomCenter">
        </div>
    </div>
</div>

TOP

Posts Detail List

<?fml version="1.0" ?> 
<div class="postList">
	<div class="navBar">
		<div style="padding-right:5px;"><fx:pager/></div>
	</div>
	
	<fx:grid datasource="feeds/posts/?max-results=5" columns="1">
		<fx:item>
			<div class="listItem">
			
				<div class="itemTitle">
					<a style="font-size:14px;color:#333333;font-weight:bold;text-decoration:none;" href="<fx:item-content-detailUrl />" testaction="postTitle" target="_top">
						<fx:item-content-title MaxLength="70"/>
					</a>
				</div>
				<div class="text" style="line-height:1.6em;font-size:12px;color:#333333;"><fx:item-textContent-message MaxLength="1500"/></div>
				<div class="itemLinks">
					<div class="smallText" style="padding-top:8px;color:#333333;">
						posted
						<fx:item-content-dateCreated format="LongDateTimeAMPM" />
						| <a style="color:#333333;text-decoration:none;" href="<fx:item-content-detailUrl />" class="smallText"
							testaction="newsItem" target="_top">Comments (<fx:item-content-numberOfComments />)</a>
					</div>
				</div>
			<div style="padding:5px 0px; border-bottom:1px dotted #ccc;"></div>				
			</div>
		</fx:item>
		<fx:rowSeparator/>
		<fx:columnSeparator />
		<fx:noresult>There are not posts for this community.</fx:noresult>
	</fx:grid>
	
	<div class="navBar">
		<div style="padding-right:5px;"><fx:pager/></div>
	</div>

</div>

TOP

News Summary List

<?fml version="1.0" ?> 
<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
        <td valign="top">
            <div class="navPanel">
                <div style="padding-right:5px;"><a href='<fx:url path="/News" />'>more news »</a></div>
                <div style="padding-right:5px;"><fx:pager /></div>
            </div>
        </td>
    </tr>

    <tr>
        <td style="padding: 10px 5px;">
            <fx:grid datasource="feeds/news/?max-results=5" columns="1">
                <fx:header>
                    <table cellpadding="0" cellspacing="0" border="0" width="100%">
                </fx:header>
                <fx:item>
                <tr>
                    <td valign="middle">
                        <div class="GraphicItemNum"><fx:item-index/></div>
                    </td>
                    <td valign="top" width="100%">
                        <div align="right"><div align="right" style="padding-top: 10px; padding-bottom: 10px; width: 200px;">
                            <a href="<fx:item-content-detailUrl />">posted: <fx:item-content-dateCreated format="LongDateTimeAMPM"/></a></div>
                        <div><a style="font-size:16px;font-weight:bold;" href="<fx:item-content-detailUrl />">
                            <fx:item-content-title MaxLength="70" /></a></div>
                        <div><fx:item-textContent-message MaxLength="150"/></div>
                        <div><span><fx:item-content-action ShowFlag="false" ShowComments="true" ShowPermalink="true"  ShowFShare="false" 
                                ShowAddToMyProfile="true" ShowVote="false" /> </span></div>
                    </td>
                </tr>
                </fx:item>
                <fx:rowSeparator>
                    <tr>
                        <td height="1" colspan="2" style="padding:5px 0px; border-bottom:1px dashed #ccc;">
                        </td>
                    </tr>
                </fx:rowSeparator>
                <fx:columnSeparator />
                <fx:footer>
                        </tr>
                    </table>
                </fx:footer>
                <fx:noresult>There is no news for this community.</fx:noresult>
            </fx:grid>
        </td>
    </tr>

    <tr>
        <td valign="bottom">
            <div class="navPanel">
                <div style="padding-right:5px;"><fx:pager /></div>
                <div style="padding-right:5px;"><a href='<fx:url path="/News" />'>more news »</a></div>
            </div>
        </td>
    </tr>
</table>
<div class="bottomLeft">
        <div class="bottomRight">
            <div class="bottomCenter">
        </div>
</div>

TOP

2 Column People List

<?fml version="1.0" ?> 
<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
        <td style="padding: 5px 7px;">
			<div class="member">

			<fx:grid datasource="feeds/people/members/?sort=lastLoginDate&max-results=10" columns="2">
				<fx:header>
		            <table cellpadding="0" cellspacing="0" border="0" style="text-align:left">
						<tr>			   
				</fx:header>                        
				<fx:item>
		            <td valign="top">						
					<div style="width:260px;float:left;padding-bottom:10px;">
						<div style="width:50px;float:left;padding-right:10px;"><fx:item-user-thumbnail size="50x50" MouseOverEffect="Zoom" ShowTitle="false" /></div>
						<div style="width:180px;float:left;">
							<div><fx:item-user-title /></div>
							<div><span><fx:item-user-city />, <fx:item-user-statecode /> <fx:item-user-country /></span></div>                                   
							<div class="iconMemberOnline"> Online</div>
						</div>
					</div>
		            </td>					
				</fx:item>
				<fx:columnSeparator>
				</fx:columnSeparator>				
				<fx:rowSeparator>
					<div style="clear:both;" />
					</tr><tr>	
				 </fx:rowSeparator>

				
				<fx:footer>
		                </tr>
		            </table>				
				</fx:footer>
			</fx:grid>

			</div>
        </td>
    </tr>
    
    <tr>
        <td valign="bottom" style="padding-top:5px;">
            <div class="navPanel">
                <div style="padding-right:5px;">
                    <a class="linkButton" href='<fx:url path="/Community/BrowseUsers.aspx"/>'> more people » </a></div>
            </div>
        </td>
    </tr>
</table>
<div class="bottomLeft">
    <div class="bottomRight">
        <div class="bottomCenter">
        </div>
    </div>
</div>

TOP

Official / Member Photos

<style type="text/css">
.navPanel .spacing { padding-right:5px;padding-bottom:3px; }
</style>
<?fml version="1.0" ?> 
<table cellpadding="0" cellspacing="0" border="0" width="100%">
	<tr>
		<td style="padding: 5px 7px;">
			<fx:grid datasource="feeds/pictures/?max-results=3" columns="2" id="1">
				<fx:header>
					<div class="photos">                   
                      <div style="background:#FFF;padding:10px;">
						 <div style="background:#cccccc;font-size:16px;font-weight:normal;color:#333333;padding:3px;margin-bottom:1px;">Official Photos</div>                      
				</fx:header>
				<fx:item>
                	<div style="border:1px solid #d1d1d1;margin-bottom:5px;background:#fbfafa;zoom:1;">
						<div style="padding:5px;">                    
                            <div style="width:90px;float:left;"><fx:item-content-thumbnail size="90x90" /></div>
                            <div style="width:150px;float:left;padding-left:10px;">
                                <div style="font-size:12px;font-weight:bold;padding-bottom:3px;"><a style="color:#333333;text-decoration:none;" href="<fx:item-content-detailUrl />"><fx:item-content-title MaxLength="50"/></a></div>
                                <div style="font-size:11px;font-weight:normal;color:#333333;padding-bottom:3px;text-overflow:ellipsis;" title="Creator Name">Created by: <a style="font-size:11px;font-weight:normal;color:#333333;text-decoration:none;" href="<fx:item-content-creator-profileUrl />"><fx:item-content-creator-name MaxLength="15"/></a></div>
                                <div style="font-size:11px;font-weight:normal;color:#333333;padding-bottom:3px;" title="Date Created"><fx:item-content-dateCreated format="LongDateTimeAMPM"/></div>
                                <div style="font-size:11px;font-weight:normal;color:#333333;padding-bottom:3px;" class="rating">Rating: <fx:item-content-rating /></div>
                            </div>
                             <div style="clear:both;"></div>       
                        </div>
                    </div>                    
				</fx:item>
				<fx:footer>
                <div class="navPanel">			
				<div class="spacing"><a href='<fx:Url path="/Content/Picture/PictureCategories.aspx"/>'>more photos »</a></div>
			</div>
						</div>        	                                       
					</div>				
				</fx:footer>
				<fx:noresult>No photos</fx:noresult>
			</fx:grid>
            
<fx:grid datasource="feeds/pictures/?max-results=15" columns="1" id="2">
        <fx:header>
        <div style="margin-top:10px;">
        	<div style="background:#FFFFFF;font-size:14px;font-weight:bold;color:#333333;padding:5px;">Member Photos<span style="font-size:12px;font-weight:normal;padding-left:8em;"><a style="text-decoration:none;" href='<fx:Url path="/Content/Picture/AddPhoto.aspx"/>'>add photo</a></span></div>
            <div class="itemsList" style="background:#FFFFFF;padding:10px 5px 10px 5px;zoom:1;">       	       
        </fx:header>
        <fx:item>
            <div class="listItem" style="padding:1px;float:left;">
                <div><a class="itemImg" title="" href="<fx:item-content-detailUrl />"><fx:item-content-thumbnail size="50x50" /></a></div>            </div>
        </fx:item>
        <fx:rowSeparator />
        <fx:columnSeparator />
        <fx:footer>
                <div style="clear:both; height: 0px; font-size: 0px;"> </div>						
				<div align="right" style="padding-right:5px;"><a href='<fx:Url path="/Content/Picture/PictureCategories.aspx"/>'>more photos »</a></div>
            </div>
          </div>
        </fx:footer>
    </fx:grid>
		</td>
	</tr>

	<tr>
		<td valign="bottom" style="padding-top:5px;">
			
		</td>
	</tr>
</table>
<div class="bottomLeft">
	<div class="bottomRight">
		<div class="bottomCenter">
		</div>
	</div>
</div>

TOP