Create a border around some code:

@thecigarbible Wrap your code in div tag, then use CSS for div to create red border

<div class="kl-frame">
  <div class="kl-left">
  	<div class="star-ratings-sprite"><span style="width:90%" class="star-ratings-sprite-rating"></span></div>
  	<div class="text-allign-css">
    	<p style = "font-family:georgia,garamond,serif;font-size:16px;font-style:italic;">Cigar Bible Score</p>
  	</div>
  </div>
  <div class="kl-right">90%</div>
</div>

then add this CSS to Home > Design > Custom CSS

.kl-frame {
    border: 1px solid red;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    max-width: 200px;
    margin: 0 auto;
}

Can you share site url?

All this code will be wrapped in another div tag. You need to send the code for that tag

Hi,

apologies about the late reply.

my website can be found under www.thecigarbible.com

the code for that tag is as follows:

.star-ratings-sprite {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
  font-size: 0;
  height: 21px;
  line-height: 0;
  overflow: hidden;
  text-indent: -999em;
  width: 110px;
  margin: 0 auto;
  
  &-rating {
    background: url("https://static1.squarespace.com/static/5d97821167368768bccd620f/t/5db323b63c21b65b041a3822/1572021174809/star-rating-sprite.pnghttps://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
    background-position: 0 100%;
    float: left;
   
    height: 21px;
    display:block;
  }
}

.text-allign-css {
  text-align: center; 
}
 

many thanks 

You are awesome !!! I cant thank you enough for your help 😀😀

@tuanphan

Could you please help me.

I have modified the following code to look like this.

Quote

<div class="box fade-in two">
<div class="kl-frame">
  <div class="kl-left">
     <div class="star-ratings-sprite"><span style="width:90%" class="star-ratings-sprite-rating"></span></div>
     <div class="text-allign-css">
        <p style ="font-family:georgia,garamond,serif;font-size:15px; color:#404040;">Cigar Bible Score</p>
      </div>
  </div>
  
  <div class="kl-right">
       <p style = "padding-top: 5px;  font-family:Times,Optima;font-size:60px;font-style:it;color:#535353;">90</p>
  </div>
</div>
</div>

Quote

.kl-frame {
    border: 7px double #1F1111;
  padding-left: 5px;
  padding-right: 5px;
   padding-top: 5px;
    display: flex;
    justify-content: center;
    max-width: 200px;
    margin: 0 auto;
}

How can I make it so the 90 is above  and in line with the rest (stars & The Cigar Bible Score) and everything is framed in a perfect square.

I apologies to pester but I feel you can answer this for me 🙂

@tuanphan 

I just realised pasting your name does not automatically tag you. Sorry my mistake.

24 minutes ago, thecigarbible said:

@tuanphan 

I just realised pasting your name does not automatically tag you. Sorry my mistake.

what is access password...

Sorry I was shortly offline due to maintenance. Back online now @tuanphan

40 minutes ago, thecigarbible said:

Sorry I was shortly offline due to maintenance. Back online now @tuanphan

.kl-right p {
    text-align: center;
}
.kl-frame {
    flex-direction: column-reverse;
}
.kl-right {
    margin-bottom: 10px;
}