Hi - I've started using Scroll Viewport app for my confluence, similar to Atlassian.
Does anyone know how to go about creating the cards on their homepage? Is it a plugin, shortcode? etc?
Talking about the 6 main boxes on this page:
https://support.atlassian.com/jira-software-cloud/
@Brendan Freestone
You could use the Help Center theme, which creates cards like this automatically. You can see them in action on our help site.
These cards are created for each space in your help center. If you'd like a tile that takes users somewhere other than a space in the help center, you could add a space with the information to generate the card and then add a redirect macro on the home page of the space to wherever you'd like users to be sent.
@Brendan Freestone ,
We too use Scroll View Port for our Help Documentation.
You would need to customize the velocity template based on your styling . Attached is a reference code of our Home page which uses cards.
##========== Search section ================================<header id="home_header" class="v26-home-header-search"><section><h1>$repository.name</h1>$include.template("/partials/search_snippet.vm")</section></header>####========== Rest ===============================================##<div id="ht-wrap-container" class="sp-grid-float" style="background: #FAFBFC;">####======== Tiles for each child pages with links ==============##<article class="ht-content"><div id="main-content" class="wiki-content"><div class="sp-grid-section"><div class="sp-grid-cell sp-grid-100">##========#set( $vp = "v26Pages")#set( $map = {"${vp}_default" :'default',"${vp}_faqs" :'faq',"${vp}_get_support" :'get-support',"${vp}_getting_started" :'getting-started',"${vp}_rest_api" :'rest-api',"${vp}_setup_and_administer" :'setup-administer',"${vp}_visualize_and_analyze" :'analyse-visualize',"${vp}_publish_reports" :'viewing-insights-publish-reports'} )##========#### RECTANGLE CARDS##<div class="v26-row landing-page-tiles">#foreach($item in $page.children)<div id="second"class="v26-panel" style="width:400px"><div style="padding: 15px 0;">## --------- Set card image name ---------#set( $indexName = $item.title.toLowerCase().replace(" ", "_"))#set ($varName = "${vp}_${indexName}")#set ($imageName = '')#set ($str = '')#set ($str = $map.get(${varName}))#if((!!$str) && $str.length() >1)#set ($imageName = $map.get(${varName}))#else#set( $imageName = 'default')#end## ------------------------------------<img src="${theme.baseUrl}/assets/img/${imageName}.svg/" alt="..." class="img-fluid img-responsive"></div><section class="panelContent" style="padding-left:25px;"><h1><a href="$item.absoluteLink">$item.title</a></h1><ul style="list-style-type: none;padding: 0;">#foreach($sub in $item.children)## --- limit to 2 sub pages in case of FAQs ------------#if(($item.title.toLowerCase() != 'faqs') || ( $item.title.toLowerCase() == 'faqs' && $velocityCount < 3))<li><a href="$sub.absoluteLink">$sub.title </a></li>#end#end</ul><p style="text-align: center;"><br></p></section></div>#end</div>## end card</div></div>## ==== $page.content (Add later if required) =============</div></article>
####======== Footer =============================================##$include.template("/include/include-footer.vm")</div>
Thank you for the response.
Hi Matt - that's perfect - but what content do you have on that homepage do generate those cards?
My heirachy as two items at the top - and the page just displays an accordion rather than cards.
Actually I found it - when editing the theme, in theme properties settings
- spaceHomePage.topicType=tiles
Thank you for your help!
It looks like you're new here. Sign in or register to get started.
