Thanks ACDC.
Although I'm willing to help out if I can, I might develop this particular app to full functionality & will not be distributing the BSV at this stage.
Below are some tips:
For HTML just use Ideas code (see the extract of the Idea BO HTML below).
For CSS, I've used a combination of Bootstrap & FontAwesomeand a separate file. Both need to be linked to in startup.html
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="FontAwesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="assets/css/myCustom.css">
HINT: MyCustom.CSS contains classes inspired by this. (in Chrome: right click > inspect element, classes on the right)
AwareIM Attributes:
To show values like Title, Number of Comments, points etc... enclose attributes in << >> example <<Idea.Title>>
Extract of my BO's VOTE Buttons & Details HTML (place in BO Form's HTML Cell):
<!-- ====================================================== -->
<!-- IDEA WRAP -->
<!-- `````````````````````````````````````````````````````` -->
<div class="an-item">
<!-- ====================================================== -->
<!-- VOTE WRAP -->
<!-- `````````````````````````````````````````````````````` -->
<div class="item-content-secondary">
<div class="user-pic"><<Idea.CreatedByAvatarSC>></div>
<div class="vote-wrap">
<div class="vote-text">
<span class="vote-title">Vote</span>
<span class="vote-points">
<span class="vote-points-value"><<Idea.VoteTotalPoints>></span> points
</span><!-- /. vote-points -->
</div><!-- /. vote-text -->
<div class="vote-buttons">
<button onClick="AwareApp.startProcessFromForm ('IDEA_VOTE_YES','main', this, false)" type="button" class="ra-btn-vote ra-btn-vote-yes btn-sm" role="button"><i class="fa fa-thumbs-o-up"></i></button>
<div class="clearfix" style="padding:1px"></div>
<button onClick="AwareApp.startProcessFromForm ('IDEA_VOTE_NO','main', this, false)" type="button" class="ra-btn-vote ra-btn-vote-no btn-sm" role="button"><i class="fa fa-thumbs-o-down"></i></button>
</div><!-- /. vote-buttons -->
</div><!-- /. vote-wrap -->
</div><!-- /. item-content-secondary -->
<!-- `````````````````````````````````````````````````````` -->
<!-- VOTE WRAP *END* -->
<!-- ====================================================== -->
<!-- ====================================================== -->
<!-- IDEA DETAILS -->
<!-- `````````````````````````````````````````````````````` -->
<div class="item-content-primary">
<div class="item-name-social">
<!-- /......... CREATED BY .. -->
<span class="item-content-primary-3 user-name"><<Idea.CreatedByNameSC>></span>
</div><!-- /. item-name-social -->
<!-- /......... IDEA TITLE .. -->
<p class="item-content-primary-1 item-title"><<Idea.Title>></p>
<!-- /......... IDEA CATEGORIES .. -->
<p class="item-content-primary-3 item-category">
<span >Categories, </span>
</p>
<!-- /......... IDEA STATUS .. -->
<p class="item-content-primary-3 item-status">
<span id="ideaStatus"><<Idea.Status>></span>
</p>
<!-- /......... IDEA BODY .. -->
<p class="item-content-primary-2 item-body">
<<Idea.Body>>
</p>
<!-- /......... IDEA AGE, NUMBER OF COMMENTS AND MERGE IDEA .. -->
<p class="item-content-primary-3 item-extra">
<!-- /............. IDEA AGE .. -->
<span><<Idea.IdeaDurationString>></span>
<!-- /............. NUMBER OF COMMENTS .. -->
<span class="item-extra-divider">·</span>
<span><a href="#" onclick=""><<Idea.NumComments>> Comments</a></span>
<!-- /............. MERGE IDEA LINK .. -->
<<IF Idea.IsTabMerged='No' THEN SHOW SECTION_START>>
<span class="item-extra-divider">·</span>
<a href="#" class="" onclick="">Merge Idea</a>
<<SECTION_END>>
</p>
</div><!-- /. content-primary -->
<!-- `````````````````````````````````````````````````````` -->
<!-- IDEA DETAILS *END* -->
<!-- ====================================================== -->
</div><!-- /. an-item -->
<!-- `````````````````````````````````````````````````````` -->
<!-- IDEA WRAP *END* -->
<!-- ====================================================== -->
There are a number of posts with HTML tips & trick on this forum plus, there are many developers here that are more than capable and willing to help answering any specific design questions. 😉
Cheers
