Jump to content

Custom CSS for a box around text over an image...

Recommended Posts

Posted

Site URL: http://kpstyleconsultant.com

Hello!
So this is my first website & I'm elbow deep in Custom CSS & individual page coding, trying to figure out how to add a solid colored box with text inside over an image.  That's a mouthful in itself it is my very first intro image on the first section of the website.  I found a youtube tutorial that was very helpful but every time I try I save the Custom CSS & go to another page the solid box disappears.  I also saw the Squarespace forum attached.   I realize frustration is because the ID # I'm using is constantly changing.  But I can't find a section ID or a block ID & like I said this one appears to work but then the ID # is ever changing.  HELP!

YouTube:  https://www.youtube.com/watch?v=bQI-Wk-iqw4&t=61s

Squarespace:  https://forum.squarespace.com/topic/90873-how-to-find-block-id-for-specific-css-changes/

 

Current code:

13232379_ScreenShot2020-09-02at10_06_12PM.png.fc758a5b48072691dfc37687909260e2.png 

Again I know this yui...  is constantly changing & I need a different ID but I don't see another option that has worked. 

2070978252_ScreenShot2020-09-03at3_54_38AM.png.42442bebee2526424d0235f5db27ed6a.png

I'd really appreciate any help with this!  Not sure what I'm doing wrong, I've tried lots of combos & am grateful for any assistance!  Thanks in advance!!!!  This is what it's suppose to look like with the box around it so the text stand out against the background, but the box keeps disappearing like the 1st photo.  I realize it's something between 7.0 & 7.1.  But don't know how to do complete the new code for the box to permanently stay put.  I'd really appreciate any help with this!  Thanks in advance!!!!

Screen Shot 2020-09-03 at 3.48.30 AM.png

  • Replies 7
  • Views 1.5k
  • Created
  • Last Reply
Posted

@jenartsquare this is how I did it:


/* Box around text */ div#block-205d91c6a2e7808e03aa  {
    background: rgba(231, 226, 218, .75) }

 

The "a" means opacity & the .75 is the amount of 0-100, you can play with the # to see how translucent you want the box.

rgba(231, 226, 218, .75)    is the specific color I used, I took my color from the design > color portion & then googled hsl to rga to get the translated color

Hope this helps?!

Posted
1 hour ago, Kjersti1015 said:

@jenartsquare this is how I did it:


/* Box around text */ div#block-205d91c6a2e7808e03aa  {
    background: rgba(231, 226, 218, .75) }

 

The "a" means opacity & the .75 is the amount of 0-100, you can play with the # to see how translucent you want the box.

rgba(231, 226, 218, .75)    is the specific color I used, I took my color from the design > color portion & then googled hsl to rga to get the translated color

Hope this helps?!

You can also use this tool to convert color to rgb.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.