In this example we'll cover how to take any piece of HTML and turn it into a blox template.
Find A Template
I like to find templates on codepen or jsfiddle through google or through their search.
On each Tab you may need to select "View Compiled CSS" to get standard CSS you can use. You may want to copy the Compiled HTML and replace the Existing compiler with "None" so that it is easier to play with it.
Modifying The HTML/CSS
Remove as much of the extra divs as possible to get the HTML to only show the stuff you need.
Remove any CSS pointing to "body" , by transferring it to the root element.
You may also want to scope the CSS rules so that it doesnt apply to anything else. This can easily be done by wrapping the rules into a selector which we will apply to our Blox and using the Less Compiler. .profilecardblox { myrules } See example here https://codepen.io/lemoogle/pen/XWKKxpX
Transferring To A Blox
Create a New blox visualisation, try to have a query which returns multiple items for ease of development.
CLEAN THE HTML AND CSS
Step 1: convert to single line: https://lingojam.com/TexttoOneLine Step 2: replace " with "
MOVE THE CSS AND HTML INTO A BLOX
Use the default template; Copy the CSS into the "Style Tag". Copy the HTML into the "textBlock" Remove extra rules from the template
DEFAULT TEMPLATE CLEANUP
Remove the style tags from the default template Set showCarousel to False
In Configuration Change the Default Color to "transparent"
REMOVE THE WRAPPER CLASS
Remove the profilecardblox div we had wrapped around our code and simply put it in the "class" field of the container: This will ensure that the css rules apply to this blox and this blox only. ( or blox with this class )
ALMOST THERE
From Rows To Columns:
All your files and folders are presented as a tree in the file explorer. You can switch from one to another by clicking a file in the tree.
ADD CSS AND JAVASCRIPT TO THE STYLE AND SCRIPT ELEMENTS
.blox-container{display:flex; overflow-x:scroll; overflow-y:hidden; padding: 3rem 1rem;background-color:#3d394f} .blox-slides{display:flex; position:relative; transition:.2s} .blox-slides:hover{transform:scale(1.1);z-index:50;} .blox-slides:hover~.blox-slides{transform: translateX(0px)}
$('.blox-slides').parent().eq(0).attr('class', 'blox-container')
You can change the CSS to play with the transition , this will zoom in on a card when hovering.
ADD A FEW STYLE RULES TO THE ITEM TO GIVE IT THE PADDING TEXT STYLING YOU WANT!
"style": {
"text-align": "center",
"font-weight": "bold",
"background": "transparent",
"padding-left": "20px"
}We also set the background to transparent to ignore the default yellow.
Map The Blox To The Data
All you need to do now is to edit the textblock to map to the Query!
Make sure to escape the quotes and set it back to single line afterwards!
<div class="profile-card-1">
<div class="img"><img src="//joeschmoe.io/api/v1/{panel:fullname}" style="background-color:#f2f2f2"/></div>
<a class="view-more" href="">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
<div class="popup"></div>
</a>
<div class="mid-section">
<div class="name">{panel:fullname}</div>
<div class="description">{panel:title}</div>
<div class="line"></div>
<div class="stats">
<div class="stat">
{panel:Revenue}
<div class="subtext">Revenue</div>
</div>
<div class="stat">
{panel:Total Quantity}
<div class="subtext">Amount</div>
</div>
<div class="stat">
{panel:vslast}
<div class="subtext">vs. Last Year</div>
</div>
</div>
</div>
<div class="links"><a class="fb" href=""><i class="fa fa-facebook-f" aria-hidden="true"></i></a><a class="twitter" href=""><i class="fa fa-twitter" aria-hidden="true"></i></a><a class="follow" href=""><i class="fa fa-rocket" aria-hidden="true"></i></a></div>
</div>
Final Template
{
"style":".blox-container{display:flex; overflow-x:scroll; overflow-y:hidden; padding: 3rem 1rem;background-color:#3d394f} .blox-slides{display:flex; position:relative; transition:.2s} .blox-slides:hover{transform:scale(1.2);z-index:50;} .blox-slides:hover~.blox-slides{transform: translateX(0px)} .profile-card-1 { font-family: \"Ubuntu\", sans-serif; width: 300px; height: 390px; background: white; margin: 0 auto; border-radius: 10px; text-align: center; box-shadow: 4px 4px 10px #999; position: relative; box-sizing: border-box; overflow: hidden; } .profile-card-1 .view-more { position: absolute; top: calc(50% - .5em); left: calc(50% - .5em); z-index: 2; color: #2ECC71; font-size: 2em; } .profile-card-1 .view-more .fa-plus-circle { position: absolute; background: white; border-radius: 50%; width: 1.004em; } .profile-card-1 .view-more .fa-plus-circle:hover { background: #2ECC71; color: white; } .profile-card-1 .popup { height: 500px; width: 500px; display: block; position: absolute; top: 0; left: 0; } .profile-card-1 .mid-section { position: absolute; height: 200px; width: 100%; top: 200px; left: 0; padding: 10px 20px 0; box-sizing: border-box; background: white; } .profile-card-1 .mid-section .name { color: #333333; font-size: 1.4em; padding-top: 5px; background: rgba(255, 255, 255, 0.1); font-weight: bold; } .profile-card-1 .mid-section .description { color: gray; font-size: 0.9em; padding-bottom: 5px; background: rgba(255, 255, 255, 0.1); } .profile-card-1 .mid-section .description a { color: inherit; text-decoration: none; font-weight: bold; } .profile-card-1 .mid-section .line { background: #7ee2a8; width: 80%; height: 2px; margin: 5px auto -3px; } .profile-card-1 .mid-section .stats { display: flex; position: absolute; left: 10%; padding-top: 10px; width: 80%; justify-content: space-around; } .profile-card-1 .mid-section .stats .stat { font-size: 1.3em; color: #333333; padding: 5px; font-weight: bold; } .profile-card-1 .mid-section .stats .subtext { color: gray; font-size: 0.6em; font-weight: normal; } .profile-card-1 .img { height: 130px; width: 100%; background-image: linear-gradient(rgba(46, 204, 113, 0.4), rgba(46, 204, 113, 0.95)), url(\"https://static.pexels.com/photos/21014/pexels-photo-medium.jpg\"); padding: 20px; box-sizing: border-box; position: relative; } .profile-card-1 .img img { width: 160px; height: 160px; padding: 3px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.6); position: absolute; left: calc(50% - 84px); top: 26px; } .profile-card-1 .img:after { content: \"\"; position: absolute; width: 180px; height: 180px; border-radius: 50%; left: calc(50% - 91.5px); top: 20px; border: 3px solid rgba(255, 255, 255, 0.4); } .profile-card-1 .img:before { content: \"\"; position: absolute; width: 190px; height: 190px; border-radius: 50%; left: calc(50% - 95px); top: 15.5px; border: 2px solid rgba(255, 255, 255, 0.2); } .profile-card-1 .links { width: 100%; height: 50px; background: #F2F2F2; border-top: 1px solid #44d581; margin-top: 35px; border-radius: 5px; color: white; font-size: 2em; line-height: 1.5em; position: absolute; bottom: 0; } .profile-card-1 .links a { color: white; } .profile-card-1 .links .fb { position: absolute; left: 0; width: 25%; height: 100%; background-color: #3b5998; } .profile-card-1 .links .fb:hover { background-color: #4264aa; } .profile-card-1 .links .twitter { position: absolute; left: 25%; width: 25%; height: 100%; background-color: #55ACEE; } .profile-card-1 .links .twitter:hover { background-color: #6cb7f0; } .profile-card-1 .links .follow { position: absolute; left: 50%; width: 50%; height: 100%; background-color: #2ECC71; } .profile-card-1 .links .follow:hover { background-color: #40d47e; }.profile-card-2 { width: 250px; height: 500px; background: #2ECC71; }",
"script":"$('.blox-slides').parent().eq(0).attr('class', 'blox-container')",
"title":"",
"showCarousel":false,
"body":[
{
"type":"Container",
"items":[
{
"type":"TextBlock",
"text":"<link href=\"https://fonts.googleapis.com/css?family=Ubuntu\" rel=\"stylesheet\"/><link href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css\" rel=\"stylesheet\" integrity=\"sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1\" crossorigin=\"anonymous\"/><div class=\"profile-card-1\"><div class=\"img\"><img src=\"//joeschmoe.io/api/v1/{panel:fullname}\" style=\"background-color:#f2f2f2\"/></div><a class=\"view-more\" href=\"\"><i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i><div class=\"popup\"></div></a><div class=\"mid-section\"><div class=\"name\">{panel:fullname}</div><div class=\"description\">{panel:title}</div><div class=\"line\"></div><div class=\"stats\"><div class=\"stat\">{panel:Revenue}<div class=\"subtext\">Revenue</div></div><div class=\"stat\">{panel:Total Quantity}<div class=\"subtext\">Amount</div></div><div class=\"stat\">{panel:vslast}<div class=\"subtext\">vs. Last Year</div></div></div></div><div class=\"links\"><a class=\"fb\" href=\"\"><i class=\"fa fa-facebook-f\" aria-hidden=\"true\"></i></a><a class=\"twitter\" href=\"\"><i class=\"fa fa-twitter\" aria-hidden=\"true\"></i></a><a class=\"follow\" href=\"\"><i class=\"fa fa-rocket\" aria-hidden=\"true\"></i></a></div></div>",
"style":{
"text-align":"center",
"font-weight":"bold",
"background":"transparent",
"padding-left":"20px"
}
}
]
}
],
"actions":[
]
}