Jump to content

Adding a tagline under a site title in 7.1?

Recommended Posts

Add to Home > Design > Custom CSS

a#site-title:after {
    content: "tuan phan";
    display: block;
}

 

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
  • 1 year later...
On 3/4/2021 at 1:50 AM, kimimischke said:

Is there a way to do this if you're using a logo?

Use this code

.header-title-logo a:after {
    content: "tuan phan";
    display: block;
    font-size: 20px;
    font-family: monospace;
    margin-top: 20px;
    font-weight: normal;
    text-align: center;
}

 

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
  • 4 weeks later...
  • 11 months later...
On 3/12/2022 at 1:00 AM, jenmaherconsulting said:

@tuanphan This is awesome!  Thank you for this and all of the other code snippets that you put out here for us!  With this code, is it possible to reduce the tagline size when it swicthes to mobile? 

Use this

.header-title-logo a:after {
    content: "tuan phan";
    display: block;
    font-size: 20px;
    font-family: monospace;
    margin-top: 20px;
    font-weight: normal;
    text-align: center;
}
@media screen and (max-width:767px) {
.header-title-logo a:after {
    font-size: 10px !important;
}
}

 

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
3 hours ago, tuanphan said:

Use this

.header-title-logo a:after {
    content: "tuan phan";
    display: block;
    font-size: 20px;
    font-family: monospace;
    margin-top: 20px;
    font-weight: normal;
    text-align: center;
}
@media screen and (max-width:767px) {
.header-title-logo a:after {
    font-size: 10px !important;
}
}

 

hi Tuphan i created this piece of code in the hope to move a button further up on mobile view however it says syntax error on line four could you help please

/ *move up shop now button */
@media screen and (max-width:767px) {
        Margin-left: 0px;
        Margin-right: 0px;
        Margin-top: 0px;
        Margin-bottom: 90px;
}

 

 

Regards,

Jake

Link to comment
9 hours ago, jakelyd said:

hi Tuphan i created this piece of code in the hope to move a button further up on mobile view however it says syntax error on line four could you help please

/ *move up shop now button */
@media screen and (max-width:767px) {
        Margin-left: 0px;
        Margin-right: 0px;
        Margin-top: 0px;
        Margin-bottom: 90px;
}

 

 

Regards,

Jake

Hi, Remove space between 2 syntaxs

/ *

 

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
  • 5 months later...
On 2/12/2020 at 7:18 AM, tuanphan said:

Add to Home > Design > Custom CSS

a#site-title:after {
    content: "tuan phan";
    display: block;
}

 

@tuanphan THANK YOU!!!! Amazing.

I'm curious.... Is there a way to make the tagline font smaller than the logo (this particular logo was generated in SqSp, not uploaded as a jpeg file). I'd love to have the name stand out a size or two larger than the tagline font, but keep the two fonts the same and the same color. 

Screen Shot 2022-09-09 at 12.23.11 PM.png

Link to comment
17 hours ago, racheldiane said:

@tuanphan THANK YOU!!!! Amazing.

I'm curious.... Is there a way to make the tagline font smaller than the logo (this particular logo was generated in SqSp, not uploaded as a jpeg file). I'd love to have the name stand out a size or two larger than the tagline font, but keep the two fonts the same and the same color. 

Screen Shot 2022-09-09 at 12.23.11 PM.png

Try add font size

a#site-title:after {
    content: "tuan phan";
    display: block;
	font-size: 15px;
}

 

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
12 hours ago, dantakesatx said:

Hi! Is there a way to position the tagline beside the logo versus below?

You can change :after in the code to :before

If it doesn't work, What is your site url? We can adjust code easier

Edited by tuanphan

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.