Jump to content

Alternative banner with text and button

Go to solution Solved by JTeich,

Recommended Posts

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!

 

unsplash-image-RgRtcl8tLLo.jpeg

Link to comment
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!

 

unsplash-image-RgRtcl8tLLo.jpeg

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

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

 

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

unsplash-image-RgRtcl8tLLo.jpeg

Link to comment
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. 

unsplash-image-RgRtcl8tLLo.jpeg

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

Screen Shot 2022-07-15 at 4.31.23 PM.png

Screen Shot 2022-07-15 at 4.34.03 PM.png

Link to comment
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;
}

 

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

 

unsplash-image-RgRtcl8tLLo.jpeg.12123b18Here 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

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

 

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

screencapture-caroline-shenaz-hossein-the-black-social-economy-2022-07-23-15_22_38.png

screencapture-caroline-shenaz-hossein-the-black-social-economy-2022-07-23-15_22_38.jpg

Edited by JTeich
clarity
Link to comment

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

 

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
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 by JTeich
mark as solved?
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.