Jump to content

How to add a tagline under logo on Bedford cover page?

Recommended Posts

Site URL: https://www.jimmyness.com/

Hi there,

I'm trying to add a tagline under my name on my cover page in Bedford but you can't do this without using CSS. I'd like this to display in both mobile and on computer. Any help would be amazing. I saw @tuanphan answer a topic on this previously in 2020, but the code for me just displays broken at the top of my page so I couldn't quite get it working. 

Thank you!

Link to comment
  • Replies 9
  • Views 410
  • Created
  • Last Reply

Top Posters In This Topic

On 10/15/2021 at 10:51 AM, Jimmyness said:

Site URL: https://www.jimmyness.com/

Hi there,

I'm trying to add a tagline under my name on my cover page in Bedford but you can't do this without using CSS. I'd like this to display in both mobile and on computer. Any help would be amazing. I saw @tuanphan answer a topic on this previously in 2020, but the code for me just displays broken at the top of my page so I couldn't quite get it working. 

Thank you!

Do you mean something like this

image.thumb.png.ec17158dbdcadea6dbfdfac9a6b8569e.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
39 minutes ago, Jimmyness said:

Hey @bangank36,  that's exactly what I'm after! 

You can try in Home > Design > Custom Css

#collection-57eaaf7603596ed76b1f103e #logoWrapper:after {
  content: "YOUR TAGLINE";
  color: #fff;
  position: absolute;
  bottom: -1.5em;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1em;
}

#collection-57eaaf7603596ed76b1f103e #logoWrapper {
  position: relative;
}

Support me by pressing 👍 if this useful for you

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

You can change the content to set your required tagline

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 10/17/2021 at 7:40 PM, bangank36 said:
#collection-57eaaf7603596ed76b1f103e #logoWrapper:after {
  content: "YOUR TAGLINE";
  color: #fff;
  position: absolute;
  bottom: -1.5em;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1em;
}

#collection-57eaaf7603596ed76b1f103e #logoWrapper {
  position: relative;
}

Thank you @bangank36!

That worked a charm. I'd like my tagline to be two words, but when I write this, it displays over two lines rather than one.

What do I need to edit in the code to have my two word tagline display as one line under my logo? Thank you again. 

Screen Shot 2021-10-19 at 2.45.13 pm.png

Edited by Jimmyness
Providing context.
Link to comment

@Jimmyness Try this new code

#collection-57eaaf7603596ed76b1f103e #logoWrapper:after {
  content: "YOUR TAGLINE";
  color: #fff;
  position: absolute;
  bottom: -1.5em;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1em;
	white-space: nowrap;
}

#collection-57eaaf7603596ed76b1f103e #logoWrapper {
  position: relative;
}

 

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

Link to comment
On 10/20/2021 at 11:33 PM, tuanphan said:

@Jimmyness Try this new code

#collection-57eaaf7603596ed76b1f103e #logoWrapper:after {
  content: "YOUR TAGLINE";
  color: #fff;
  position: absolute;
  bottom: -1.5em;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1em;
	white-space: nowrap;
}

#collection-57eaaf7603596ed76b1f103e #logoWrapper {
  position: relative;
}

 

@tuanphan Thanks so much. I've played around with it and got it almost perfect so I do appreciate your help :). Finally, I'm trying to adjust the weight of the font to match the other page titles exactly. Below is my current code and the exact weight of the site font for reference. 

<style>

#collection-57eaaf7603596ed76b1f103e #logoWrapper:after {
  content: "RESEARCHER";
  color: #fff;
  position: absolute;
  bottom: -0.85em;
  display: bold;
  width: 100%;
  font-family: Proxima-Nova;
  text-align: center;
  font-size: 0.7em;
    white-space: nowrap;
}

#collection-57eaaf7603596ed76b1f103e #logoWrapper {
  position: relative;
}

 

Screen Shot 2021-10-22 at 11.40.47 am.png

Edited by Jimmyness
Link to comment
On 10/22/2021 at 7:55 AM, Jimmyness said:

@tuanphan Thanks so much. I've played around with it and got it almost perfect so I do appreciate your help :). Finally, I'm trying to adjust the weight of the font to match the other page titles exactly. Below is my current code and the exact weight of the site font for reference. 

<style>

#collection-57eaaf7603596ed76b1f103e #logoWrapper:after {
  content: "RESEARCHER";
  color: #fff;
  position: absolute;
  bottom: -0.85em;
  display: bold;
  width: 100%;
  font-family: Proxima-Nova;
  text-align: center;
  font-size: 0.7em;
    white-space: nowrap;
}

#collection-57eaaf7603596ed76b1f103e #logoWrapper {
  position: relative;
}

 

Screen Shot 2021-10-22 at 11.40.47 am.png

Use this

<style>
#collection-57eaaf7603596ed76b1f103e #logoWrapper:after {
  content: "RESEARCHER";
  color: #fff;
  position: absolute;
  bottom: -0.85em;
  display: bold;
  width: 100%;
  font-family: Proxima-Nova;
  text-align: center;
  font-size: 0.7em;
    white-space: nowrap;
  font-weight: 700 !important;
}
#collection-57eaaf7603596ed76b1f103e #logoWrapper {
  position: relative;
}
</style>

 

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

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.