JTeich Posted June 30, 2022 Share Posted June 30, 2022 Site URL: https://www.caroline-shenaz-hossein.com/the-black-social-economy Hello, I'm trying to make an alternative banner for some of my pages. So i need a full bleed image with text and a button. Although i've tried very hard, i can't seem to get it all right. This is as far are i've gotten https://www.caroline-shenaz-hossein.com/the-black-social-economy Thanks so much for your help guys. Link to comment
tuanphan Posted July 1, 2022 Share Posted July 1, 2022 Hi. DO you have a mockup/picture of desired layout? We can help easier 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
JTeich Posted July 5, 2022 Author Share Posted July 5, 2022 On 7/1/2022 at 4:20 AM, tuanphan said: Hi. DO you have a mockup/picture of desired layout? We can help easier Hey! Sorry for the delay, i kept checking for alerts, but didn't seem to ever receive one. If you look at the very top image you can see some small white text, which is an approximation of what i'm trying to do, and illustrates where i'm stuck. Although i might tweak stuff to look better, particularly the button, which i have made all different colours so that i know the code for text, background, and edges, here's an image mock up. 🙂 Thanks so much! Link to comment
tuanphan Posted July 7, 2022 Share Posted July 7, 2022 On 7/6/2022 at 4:40 AM, JTeich said: Hey! Sorry for the delay, i kept checking for alerts, but didn't seem to ever receive one. If you look at the very top image you can see some small white text, which is an approximation of what i'm trying to do, and illustrates where i'm stuck. Although i might tweak stuff to look better, particularly the button, which i have made all different colours so that i know the code for text, background, and edges, here's an image mock up. 🙂 Thanks so much! I think you can add a Poster Block with Text + Text Link Then I will give code to increase text size & move it to top left, change text link to button & move it to top right JTeich 1 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
JTeich Posted July 7, 2022 Author Share Posted July 7, 2022 9 hours ago, tuanphan said: I think you can add a Poster Block with Text + Text Link Then I will give code to increase text size & move it to top left, change text link to button & move it to top right Indeed, but I need the normal banner and everything to not be there. I need a totally different banner. So i've already hidden the normal banner. Do you know how i can so that? Thanks! Link to comment
JTeich Posted July 7, 2022 Author Share Posted July 7, 2022 11 hours ago, tuanphan said: I think you can add a Poster Block with Text + Text Link Then I will give code to increase text size & move it to top left, change text link to button & move it to top right Oh i think i know what you mean. Didn't know there was a "poster option" under images. I'll have to see if i can override the font preferences, and also add a button over top. I might have to ask about that. Thanks! Link to comment
tuanphan Posted July 8, 2022 Share Posted July 8, 2022 12 hours ago, JTeich said: Oh i think i know what you mean. Didn't know there was a "poster option" under images. I'll have to see if i can override the font preferences, and also add a button over top. I might have to ask about that. Thanks! Yes. When you've added it, let me know, we will try checking code 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
JTeich Posted July 13, 2022 Author Share Posted July 13, 2022 On 7/8/2022 at 4:49 AM, tuanphan said: Yes. When you've added it, let me know, we will try checking code I've added the poster image, and am indeed having problems overriding the default settings. There was an attempt I need a different text (font, colour, etc) on top of the image at the top (maybe in the centre, but maybe to the left), as well as the red button to be on the image. Are those things you could help me with? Here is my garbage attempt 🙂 <style> #block-yui_3_17_2_1_1657223948810_4623 .sqs-block.image-block { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 400; letter-spacing: 1px; font-family: Oswald; font-size: 15px; color: blue; !important} </style> You are a gentleman and a scholar! The url is https://www.caroline-shenaz-hossein.com/the-black-social-economy The block id is #block-yui_3_17_2_1_1657223948810_4623 The block id for the code to the custom button is #block-yui_3_17_2_1_1656094237624_4224 The block id for the button itself is #block-yui_3_17_2_1_1656093268143_3590 Link to comment
tuanphan Posted July 14, 2022 Share Posted July 14, 2022 15 hours ago, JTeich said: I've added the poster image, and am indeed having problems overriding the default settings. There was an attempt I need a different text (font, colour, etc) on top of the image at the top (maybe in the centre, but maybe to the left), as well as the red button to be on the image. Are those things you could help me with? Here is my garbage attempt 🙂 <style> #block-yui_3_17_2_1_1657223948810_4623 .sqs-block.image-block { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 400; letter-spacing: 1px; font-family: Oswald; font-size: 15px; color: blue; !important} </style> You are a gentleman and a scholar! The url is https://www.caroline-shenaz-hossein.com/the-black-social-economy The block id is #block-yui_3_17_2_1_1657223948810_4623 The block id for the code to the custom button is #block-yui_3_17_2_1_1656094237624_4224 The block id for the button itself is #block-yui_3_17_2_1_1656093268143_3590 To move text to top left, add this to Page Header or Code Block <style> .design-layout-poster .image-title-wrapper { position: absolute; top: 10px; left: 10px; } </style> JTeich 1 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
Solution JTeich Posted July 14, 2022 Author Solution Share Posted July 14, 2022 7 hours ago, tuanphan said: To move text to top left, add this to Page Header or Code Block <style> .design-layout-poster .image-title-wrapper { position: absolute; top: 10px; left: 10px; } </style> Awesome! My code doesn't seem to work completely though. I've set the text to be bright pink to make sure it's working, and it seems something is wrong. Additionally do you know how I can move the red button on the page (just below the image) so that it's on the image? Like in the image i posted early, and will post again for your convenience. Link to comment
tuanphan Posted July 15, 2022 Share Posted July 15, 2022 15 hours ago, JTeich said: Awesome! My code doesn't seem to work completely though. I've set the text to be bright pink to make sure it's working, and it seems something is wrong. Additionally do you know how I can move the red button on the page (just below the image) so that it's on the image? Like in the image i posted early, and will post again for your convenience. You can add a hyperlink on Subtitle, then we change its style + move position easier 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
JTeich Posted July 15, 2022 Author Share Posted July 15, 2022 11 hours ago, tuanphan said: You can add a hyperlink on Subtitle, then we change its style + move position easier Ok, let's do that I guess. It looks like what i've done so far isn't showing up for some reason, except when i'm editing? I guess my garbage code is maybe doing something? Here is what it looks like in editing mode (attached), what it looks like in incognito after refreshing 5 times (attached). actual link: https://www.caroline-shenaz-hossein.com/the-black-social-economy Thanks so much Link to comment
tuanphan Posted July 18, 2022 Share Posted July 18, 2022 Same problem here. Try disable all code & check again. If it still appear, you maybe need to contact Squarespace Customer Care. 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
JTeich Posted July 19, 2022 Author Share Posted July 19, 2022 On 7/18/2022 at 4:28 AM, tuanphan said: Same problem here. Try disable all code & check again. If it still appear, you maybe need to contact Squarespace Customer Care. Got it working! https://www.caroline-shenaz-hossein.com/the-black-social-economy Looking forward to your help :) Link to comment
tuanphan Posted July 20, 2022 Share Posted July 20, 2022 8 hours ago, JTeich said: Got it working! https://www.caroline-shenaz-hossein.com/the-black-social-economy Looking forward to your help 🙂 Add to Design > Custom CSS div#block-yui_3_17_2_1_1657223948810_4623 .image-subtitle p { position: absolute; top: 40px; right: 10px; background-color: red; padding: 5px; border: 2px solid blue; border-radius: 10px; } JTeich 1 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
JTeich Posted July 21, 2022 Author Share Posted July 21, 2022 On 7/20/2022 at 4:06 AM, tuanphan said: Add to Design > Custom CSS div#block-yui_3_17_2_1_1657223948810_4623 .image-subtitle p { position: absolute; top: 40px; right: 10px; background-color: red; padding: 5px; border: 2px solid blue; border-radius: 10px; } Awesome! I still have a couple questions, and tweaks if that's ok? I'll include my code so you can easily see where I'm going wrong. Here's what it looks like page looks like now: https://www.caroline-shenaz-hossein.com/the-black-social-economy 1. I can't seem to alter the padding on the red button (to match the one you can see just below the banner) 2. I can't seem to control the colour of the text. (My code says it should be pink, but it's white for some reason). I'd like to get this right to ensure i can change the colour later if i want. 2. How do i get a line break between each word so it reads: "The Black Social Economy" Here's that earlier image again as an approximation of what i mean when i refer to the padding around the button, the line breaks in the title, as well as the colour of the text being white. (I picked pink in my code to ensure i could see it was working). Here is my code as it is now .... <style> #block-yui_3_17_2_1_1657223948810_4623 .sqs-block.image-block {padding: 15px 15px; font-family: Helvetica Neue; font-weight: 400; letter-spacing: 1px; font-family: Oswald; font-size: 40px; color: pink; !important} .design-layout-poster .image-title-wrapper { position: absolute; top: 10px; left: 10px; } div#block-yui_3_17_2_1_1657223948810_4623 .image-subtitle p { position: absolute; top: 40px; right: 10px; padding: 15px 15px; font-family: Helvetica Neue; font-weight: 400; letter-spacing: 1px; font-family: Oswald; font-size: 15px; font-weight: 300px; font-style: normal; text-transform: capitalize; letter-spacing: .1em; color: blue; background-color:red; border-color: black; border-radius: 20%; background-color: red; padding: 5px; border: 2px solid black; border-radius: 10px; } </style> Thanks again, you've been so helpful! Link to comment
tuanphan Posted July 22, 2022 Share Posted July 22, 2022 #1. Adjust some attributes to this div#block-yui_3_17_2_1_1657223948810_4623 .image-subtitle p { position: absolute; top: 40px; right: 10px; padding: 15px 15px !important; font-family: Oswald !important; font-size: 15px; font-weight: 300 !important; font-style: normal; text-transform: capitalize; letter-spacing: .1em; color: blue; border-color: black; background-color: red; border: 2px solid black; border-radius: 10px; } #2. Add to Page Header <style> div#block-yui_3_17_2_1_1657223948810_4623 .image-title p { font-size: 50px !important; display: block; text-align: left; } </style> JTeich 1 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
JTeich Posted July 22, 2022 Author Share Posted July 22, 2022 9 hours ago, tuanphan said: #1. Adjust some attributes to this div#block-yui_3_17_2_1_1657223948810_4623 .image-subtitle p { position: absolute; top: 40px; right: 10px; padding: 15px 15px !important; font-family: Oswald !important; font-size: 15px; font-weight: 300 !important; font-style: normal; text-transform: capitalize; letter-spacing: .1em; color: blue; border-color: black; background-color: red; border: 2px solid black; border-radius: 10px; } #2. Add to Page Header <style> div#block-yui_3_17_2_1_1657223948810_4623 .image-title p { font-size: 50px !important; display: block; text-align: left; } </style> Legend! I was able to extrapolate from your corrections how to change the colour of the font as well! Do you know how I can make the image full bleed (makes it look a bit more like a banner) The following doesn't seem to be the ticket #block-yui_3_17_2_1_1657223948810_4623 .summary-item { padding:0 !important; } Link to comment
tuanphan Posted July 23, 2022 Share Posted July 23, 2022 14 hours ago, JTeich said: Legend! I was able to extrapolate from your corrections how to change the colour of the font as well! Do you know how I can make the image full bleed (makes it look a bit more like a banner) The following doesn't seem to be the ticket #block-yui_3_17_2_1_1657223948810_4623 .summary-item { padding:0 !important; } Hi. This is not possible. Image and other elements are in the same container. In order for the Image to be fullbleed, it will be necessary to make the other elements fullbleed as well. 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
JTeich Posted July 23, 2022 Author Share Posted July 23, 2022 (edited) 10 hours ago, tuanphan said: Hi. This is not possible. Image and other elements are in the same container. In order for the Image to be fullbleed, it will be necessary to make the other elements fullbleed as well. Just to make sure we're on the same page, you're saying it's not possible to make the header (which looks like the first image i've uploaded), look like what i've mocked up in the second image? I just want no blue background around the banner image. (Maybe i didn't describe it well). Thank you so much for all the time you've taken to help me with my banner! Edited July 23, 2022 by JTeich clarity Link to comment
tuanphan Posted July 26, 2022 Share Posted July 26, 2022 Try adding to Design > Custom CSS div#block-yui_3_17_2_1_1657223948810_4623 { position: absolute; top: 0; left: 0; width: 100%; z-index: 99999; padding: 0 !important; } div#block-yui_3_17_2_1_1656001712174_3164 { padding-top: 600px; } @media screen and (max-width:900px) { div#block-yui_3_17_2_1_1656001712174_3164 { padding-top:300px; } } @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1656001712174_3164 { padding-top: 100px; } } JTeich 1 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
JTeich Posted July 27, 2022 Author Share Posted July 27, 2022 (edited) On 7/26/2022 at 5:20 AM, tuanphan said: Try adding to Design > Custom CSS div#block-yui_3_17_2_1_1657223948810_4623 { position: absolute; top: 0; left: 0; width: 100%; z-index: 99999; padding: 0 !important; } div#block-yui_3_17_2_1_1656001712174_3164 { padding-top: 600px; } @media screen and (max-width:900px) { div#block-yui_3_17_2_1_1656001712174_3164 { padding-top:300px; } } @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1656001712174_3164 { padding-top: 100px; } } Thank you so much! I think we figured it out! Here's what it looks like now. You're a legend https://www.caroline-shenaz-hossein.com/the-black-social-economy I thought there was a way to mark this as "solved", or at least do more than hit the "thanks" button. If there is Let me know! Edited July 27, 2022 by JTeich mark as solved? Link to comment
tuanphan Posted July 28, 2022 Share Posted July 28, 2022 I think there should a Mark as answered question somewhere, not sure. 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
Create an account or sign in to comment
You need to be a member in order to leave a comment