Alternative banner with text and button

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.

Hi. DO you have a mockup/picture of desired layout? We can help easier

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!

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

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!

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!

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

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

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>

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

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

Same problem here. Try disable all code & check again. If it still appear, you maybe need to contact Squarespace Customer Care.

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 :)

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;
}

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!

#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>

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;
}

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.

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!

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;
}
}

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!

I think there should a Mark as answered question somewhere, not sure.