Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Jimmyness

Question

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
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

9 answers to this question

Recommended Posts

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

You can change the content to set your required tagline

Edited by bangank36

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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
  • 0

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

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

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

Create an account or sign in to comment

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


×
×
  • Create New...