Jump to content

Adding a line break in site title

Recommended Posts

14 minutes ago, oliviasusan said:

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

Hi, looking to add a line break to my site title to make it read:

"the art of

Susan Boser"

The password for the site is hello. 

Thank you for your help!

You can add an image as logo so the text can be modified as required

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
14 minutes ago, oliviasusan said:

Hi, thanks for your response. Is there really no way to do this more simply within Squarespace if I don't have or want a logo? 

 

Alright, you can use custom code injection

1. Change the title to Susan Boser

2. Add this to Design->Custom CSS

.header-title-text a {
  display: block;
}
.header-title-text a:before {
  content: 'the art of';
  display: block;
}

image.png.81f0044e8d6aa5a17d7dc319fc9c2487.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
  • 1 year later...
On 2/20/2021 at 7:32 PM, bangank36 said:

Alright, you can use custom code injection

1. Change the title to Susan Boser

2. Add this to Design->Custom CSS

.header-title-text a {
  display: block;
}
.header-title-text a:before {
  content: 'the art of';
  display: block;
}

image.png.81f0044e8d6aa5a17d7dc319fc9c2487.png

Hi Bangank36,

Unfortunately this changes the website title to the second line, "Susan Boser" in this case... so the Site Title, Site Name, indexed name on Google and social sharing name all lose the first line... any ideas how to fix that? Thanks!

Link to comment

Can you share some screenshots of your issues?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
  • 8 months later...

I have a similar question - but looking for a thrid line break. Can anyone help me with the custom CSS required for that? I can't figure out how to use two different calls for :before...

Ideally my finished result would display on three lines as:

Canadian
Typography
Archive

 

Here's what I have (edited site title to read Archive, but am missing the third line solution).

.header-title-text a {
  display: block1;
}
.header-title-text a:before {
  content: 'Canadian Typography';
  display: block;
}
 

Note: I was able to get the look I wanted by adding <br> between the three lines in the editor, and it displayed correctly until I hit save - and then added the <br> in the text directly (no longer hidden). So weird that it displayed correctly before hitting save...

Screen Shot 2022-11-23 at 5.57.02 PM.png

Link to comment

Temporary solution found : 

(with name of site title as Typography - the middle word...)

.header-title-text a {
  display: block;
}
.header-title-text a:before {
  content: 'Canadian';
  display: block;
}
.header-title-text a:after {
  content: 'Archive';
  display: block;
}

Link to comment
On 11/24/2022 at 6:01 AM, bobbeck said:

I have a similar question - but looking for a thrid line break. Can anyone help me with the custom CSS required for that? I can't figure out how to use two different calls for :before...

Ideally my finished result would display on three lines as:

Canadian
Typography
Archive

 

Here's what I have (edited site title to read Archive, but am missing the third line solution).

.header-title-text a {
  display: block1;
}
.header-title-text a:before {
  content: 'Canadian Typography';
  display: block;
}
 

Note: I was able to get the look I wanted by adding <br> between the three lines in the editor, and it displayed correctly until I hit save - and then added the <br> in the text directly (no longer hidden). So weird that it displayed correctly before hitting save...

Screen Shot 2022-11-23 at 5.57.02 PM.png

You can add <br> tag then share site url, we can give script code to make br work

However, the br will appear on Google Search Result & some other pages

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

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.