thecigarbible 0 Posted October 27 Hello community, I have created some code to reflect a score on my website. I have limited knowledge about coding and have just thought myself it using google. I have attached a photo of what the following code looks like. <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> I want to now create a red frame around this code and also for the percentage as entered into the code to be shown on the right hand side. Can somebody please help me or guide me in the right direction. Many thanks, Max Share this post Link to post
0 tuanphan 6,143 Posted November 3 (edited) @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; } Edited November 3 by tuanphan 1 thecigarbible reacted to this Send me a message if you have any questions | View my service if you need more support View 4200+ Custom Code for Squarespace How to Setup Password & Share Site URL How to find Page ID, Block ID, Section ID Squarespace 7.1 CSS List Share this post Link to post
0 tuanphan 6,143 Posted October 27 Can you share site url? All this code will be wrapped in another div tag. You need to send the code for that tag Send me a message if you have any questions | View my service if you need more support View 4200+ Custom Code for Squarespace How to Setup Password & Share Site URL How to find Page ID, Block ID, Section ID Squarespace 7.1 CSS List Share this post Link to post
0 thecigarbible 0 Posted November 3 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 Share this post Link to post
0 thecigarbible 0 Posted November 4 You are awesome !!! I cant thank you enough for your help 😀😀 Share this post Link to post
0 thecigarbible 0 Posted November 7 (edited) @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 🙂 Edited November 9 by thecigarbible Mispelling Share this post Link to post
0 thecigarbible 0 Posted November 9 @tuanphan I just realised pasting your name does not automatically tag you. Sorry my mistake. Share this post Link to post
0 tuanphan 6,143 Posted November 9 24 minutes ago, thecigarbible said: @tuanphan I just realised pasting your name does not automatically tag you. Sorry my mistake. what is access password... Send me a message if you have any questions | View my service if you need more support View 4200+ Custom Code for Squarespace How to Setup Password & Share Site URL How to find Page ID, Block ID, Section ID Squarespace 7.1 CSS List Share this post Link to post
0 thecigarbible 0 Posted November 9 Sorry I was shortly offline due to maintenance. Back online now @tuanphan Share this post Link to post
0 tuanphan 6,143 Posted November 9 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; } 1 thecigarbible reacted to this Send me a message if you have any questions | View my service if you need more support View 4200+ Custom Code for Squarespace How to Setup Password & Share Site URL How to find Page ID, Block ID, Section ID Squarespace 7.1 CSS List Share this post Link to post
Hello community,
I have created some code to reflect a score on my website. I have limited knowledge about coding and have just thought myself it using google.
I have attached a photo of what the following code looks like.
<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>
I want to now create a red frame around this code and also for the percentage as entered into the code to be shown on the right hand side.
Can somebody please help me or guide me in the right direction.
Many thanks,
Max
Share this post
Link to post