scottmcelroy Posted July 16, 2019 Share Posted July 16, 2019 I have a banner image with description text & button on top of it. I'd like to add background to the description text to make it more readable. I've been using this CSS below, but to no avail. Please advise - thanks! Link to comment
tuanphan Posted July 16, 2019 Share Posted July 16, 2019 @scottmcelroy can you share site url?if your site is in trial, you can setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/#HowtoSetupPasswordShareSiteURL Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
scottmcelroy Posted July 16, 2019 Author Share Posted July 16, 2019 Here's site link: https://jennamcelroyphoto.squarespace.com/config/settings/site-visibilitypw: community Thanks for your help, Tuanphan. On the Education index page, you should see the white text "Come to grow. Come to connect. Come to create." That's the text that I'd like to add background to in order to make it more visible against the current background. Link to comment
tuanphan Posted July 17, 2019 Share Posted July 17, 2019 @scottmcelroy I don't see "Come to grow...." Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
scottmcelroy Posted July 17, 2019 Author Share Posted July 17, 2019 @tuanphan Forgive me, it's 'Not linked' as the Education index page, beneath the Home index. Site is now public, are you able to see the Not Linked section? Thanks for your time, Tuanphan. Link to comment
tuanphan Posted July 17, 2019 Share Posted July 17, 2019 @scottmcelroy Nice site ;) Can you take screenshot? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
scottmcelroy Posted July 17, 2019 Author Share Posted July 17, 2019 screenshot link 1: https://www.dropbox.com/s/gtbf9ywwicp2gpo/JMP%20screenshot%201.jpg?dl=0 screenshot link 2: https://www.dropbox.com/s/6fxm8qa1ikhc3l8/JMP%20screeshot%202.jpg?dl=0 Let me know if these work, @tuanphan. Thank you! Link to comment
tuanphan Posted July 17, 2019 Share Posted July 17, 2019 @scottmcelroy Can you publish that section? I don't see... Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
scottmcelroy Posted July 17, 2019 Author Share Posted July 17, 2019 @tuanphan - It's now published under 'Education' in top navigation. Link to comment
tuanphan Posted July 17, 2019 Share Posted July 17, 2019 @scottmcelroy Add to Home > Design > Custom CSS /* Come to Grow */ .desc-wrapper p:first-child { background: #000; } /* Come to connect... */ .desc-wrapper p:nth-child(10n+2) { background: #000; } /* Remove spacing between comet to grow and connect */ .desc-wrapper p:first-child { margin-bottom: 0 !important; } .desc-wrapper p:nth-child(10n+2) { margin-top: 0 !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
scottmcelroy Posted July 17, 2019 Author Share Posted July 17, 2019 Thanks, @tuanphan. Clearly making progress, thank you! If you check now though, you can see that the .desc-wrapper extends beyond the copy (it should be just behind the text obviously) and I'd love to be able to adjust the opacity as well. Please advise - thank you! Link to comment
tuanphan Posted July 17, 2019 Share Posted July 17, 2019 @scottmcelroy You can usebackground: rgba(227,224,215,0.5);0.5 is opacity (0 --> 1) e3e0d7 = rgb(227,224,215) .desc-wrapper p:nth-child(10n+2), .desc-wrapper p:first-child { display: inline-block; } /* Remove spacing between p1 and p2 */ .desc-wrapper p:nth-child(10n+2) { margin-top: -1px !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
tuanphan Posted July 17, 2019 Share Posted July 17, 2019 -5px will be better :D Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
scottmcelroy Posted July 17, 2019 Author Share Posted July 17, 2019 @tuanphan Where do I add the opacity? / Where do I need to remove spacing from? In the settings --> description part of the page? Link to comment
tuanphan Posted July 17, 2019 Share Posted July 17, 2019 @scottmcelroy All code /* Come to Grow */ .desc-wrapper p:first-child { background: rgba(227,224,215,0.5); display: inline-block; } /* Come to connect... */ .desc-wrapper p:nth-child(10n+2) { background: rgba(227,224,215,0.5); display: inline-block; } /* Remove spacing between comet to grow and connect */ .desc-wrapper p:first-child { margin-bottom: 0 !important; } .desc-wrapper p:nth-child(10n+2) { margin-top: -5px !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
scottmcelroy Posted July 17, 2019 Author Share Posted July 17, 2019 You're too kind, @tuanphan. Thank you so much. Absolute LAST THING, what do I need to add under each .desc-wrapper to customize sizing of each text? (i.e. - make the top line of copy slightly bigger than the bottom? Link to comment
tuanphan Posted July 17, 2019 Share Posted July 17, 2019 @scottmcelroy .desc-wrapper p:first-child strong { font-size: 66px; color: red; } .desc-wrapper p:nth-child(10n+2) strong { font-size: 30px; color: black; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
scottmcelroy Posted July 17, 2019 Author Share Posted July 17, 2019 @tuanphan Thank you again for all of your help here! I do have another question, though: what CSS do I need to add to left-align the copy? Please advise - thank you! Link to comment
tuanphan Posted July 17, 2019 Share Posted July 17, 2019 @scottmcelroy Hi, morning You can use: text-align: left; If it doesn't work, try text-align: left !important; Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.