Skip to main content

Hello everyone!

I recently have begun attempting some HTML/CSS coding endeavors on our homepage to hopefully make a more organized and clean experience for our users. I found a course on Docebo University, titled Take Platform Design to the Next Level and it generously supplied some ideas and accompanying codes. I implemented the ‘Custom Icon Boxes’ on our homepage, this is what it looks like on Screenshot #1 and I am very happy with the size and layout of the boxes, but there is a few things I would love some support on if anyone is willing to help.

  1. Is there a way to get rid of the white edge that borders each box? I would ideally love to have the box just be the solid color.
  2. I would love to upgrade the design and text on these boxes to make it look a little more professional or ‘finished’. I love the border and ‘button’ look of the Docebo custom content boxes, I have included a screenshot of what I am talking about. Is it possible to edit the code so I can add a border/box around the text to make it look more like a button? I also ideally would love to change the font as well to match the rest of the platform.

I appreciate any and all help anyone may have, or if you have a different ideas for this kind of menu/icon box display that is also amazing! Screenshots and code included below. 

 

Screenshot #1 (Custom Icon Boxes)
Screenshot #2 (Custom Content box that lives in Docebo)

HTML:

<div id="custom_icon_boxes">
  <a href="#link1" class="box_1_1 custom_box custom_style1"><span class="ibox_inner"><i class="zmdi zmdi-bike"></i><br />Manage Courses</span></a>
  <a href="#link2" class="box_1_1 custom_box custom_style3"><span class="ibox_inner"><i class="zmdi zmdi-city"></i><br />Manage Users</span></a>
  <a href="#link3" class="box_1_1 custom_box custom_style4"><span class="ibox_inner"><i class="zmdi zmdi-layers"></i><br />This is a link box</span></a>
  <a href="#link4" class="box_1_1 custom_box custom_style5"><span class="ibox_inner"><i class="zmdi zmdi-lock"></i><br />This is a link box</span></a>
  <a href="#link5" class="box_1_1 custom_box custom_style1"><span class="ibox_inner"><i class="zmdi zmdi-pin-account"></i><br />This is a link box</span></a>
  <a href="#link6" class="box_1_1 custom_box custom_style3"><span class="ibox_inner"><i class="zmdi zmdi-pizza"></i><br />This is a link box</span></a>
  <a href="#link7" class="box_1_1 custom_box custom_style2"><span class="ibox_inner"><i class="zmdi zmdi-help-outline"></i><br />This is a link box</span></a>
 </div> 
 

CSS:

#custom_icon_boxes{display:flex; flex-wrap:wrap; }

.custom_box:after{content:''; display:block; padding-bottom:75%; }

.ibox_inner{text-align:center; padding:15px; }

.custom_box{margin:3px; display:flex; align-items:center; justify-content:center; text-decoration:none; }

.ibox_inner i{font-size:15px; margin-bottom: 10px; }

.custom_box:hover{filter:brightness(110%); text-decoration:none;}

.custom_style1{background:#6A3460; color:#F1E6B2;}

.custom_style2{background:#F2A900; color:#6A3460;}

.custom_style3{background:#D2D755; color:#F1E6B2;}

.custom_style4{background:#A50050; color:#F1E6B2;}

.custom_style5{background:#F1E6B2; color:#6A3460;}

.box_1_1 {flex:1 0 calc(13% - 10px); font-size:15px;}

Sounds like you’re going for something more along the lines of just having the buttons spread across the widget instead of having individual boxes correct? 

You could try changing the html to be one container that has the buttons in it

HTML:

<div class="button-container">
  <a href="https://example.com/link1" class="button-link">Button 1</a>
  <a href="https://example.com/link2" class="button-link">Button 2</a>
  <a href="https://example.com/link3" class="button-link">Button 3</a>
  <a href="https://example.com/link4" class="button-link">Button 4</a>
  <a href="https://example.com/link5" class="button-link">Button 5</a>
  <a href="https://example.com/link6" class="button-link">Button 6</a>
  <a href="https://example.com/link7" class="button-link">Button 7</a>
</div>

 

CSS: 

  .button-container {
    display: flex;
    flex-direction: row;
	flex-wrap: wrap;
    align-items: center;
	justify-content: center;
	font-family: "Open Sans", sans-serif;
    padding: 20px; /* The space between the container/widget and the buttons */
	background-color: #6B325F; /* The color of the widget */
  }

  .button-container .button-link {
	text-decoration: none;
	transition: 0.3s;
    margin: 5px; /* Space between buttons */
    padding: 10px 20px; /* Space between the text and the edges of the buttons */
    font-size: 16px; /* Text size inside the button */
    cursor: pointer; /* The cursor used when the user hovers over it */

	color: #642A5A; /* The color of the font */
	border: 1px solid white; /* The border around the button */
	background-color: white; /* The color of the background of the button */
	box-shadow: 0px 0px 1px black; /* Slight shadow behind the button */
	border-radius: 1px /* Curve of the corners */
  }

  .button-link:hover {
	box-shadow: 0px 2px 4px black;
	background-color: GhostWhite; /* The background color it changes to when the user hovers over it */
  }


Might need a bit of fidgeting and trial and error to get it looking how you’d like it, but it should come out like this 
 

 

@BrentDeayton This is AMAZING! Thank you so much! I think with some further decoration and trial and error this could be exactly what I was looking for. Thank you😀

Reply


Terms & ConditionsCookie settings