Jump to content

Adding a tagline under a site title in 7.1?

Recommended Posts

  • 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...
2 hours ago, TinaHobson said:

Thanks SO much for all the code help Tuan - I've been using the above. and wondered how I could make the tagline italic and white, please? (orpheus pro). Any help would be much appreciated!

 

Actually - I've sorted that on the web version but doesn't appear in the mobile version 😞 - any tips?  Thanks!

 

Link to comment
  • 2 months later...

Hey All I got this working on the main page but its not working for phone any ideas

.header-title-logo a:after {
    content: "BUILDING DESIGN";
    display: block;
    font-size: 20px;
    font-family: eurostile-extended;
    letter-spacing: 15px;
    margin-top: 15px;
    font-weight: normal;
    text-align: left;
  margin-left: 14px;
}
@media screen and (max-width:767px) {
.header-title-logo a:after {
    font-size: 10px !important;
}
}

Link to comment
5 hours ago, Jarmo2127 said:

Hey Tuanphan ... url is www.rhadleonardi.com.au

Use this code

.header-title-logo a:after, .header-mobile-logo a:after {
    content: "BUILDING DESIGN";
    display: block;
    font-size: 16px;
    font-family: eurostile-extended;
    letter-spacing: 15px;
    margin-top: 15px;
    font-weight: normal;
    text-align: left;
    margin-left: 14px;
}

 

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.