Adding a tagline under a site title in 7.1?

Hi, 

I'm just wondering if anyone knows how to add a tag line under a site title in 7.1 perhaps using css? 

I'm happy copying and pasting bits of code but my understanding of coding is fairly limited - just a heads up. 

Any help with this would be much appreciated. 

Many thanks 

John

Add to Home > Design > Custom CSS

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

@tuanphan Thanks very much my friend 🙂

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

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;
}

Thank you!!-

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

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;
}
}

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

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

/ *

On 3/14/2022 at 2:20 AM, tuanphan said:

Hi, Remove space between 2 syntaxs

/ *

 

worked! thank you again!!

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. 

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. 

Try add font size

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

@tuanphan THANK YOU! Worked like a charm. I appreciate you!  🙂 

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

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

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!

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!

On 3/30/2023 at 11:38 PM, TinaHobson said:

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

 

What is site url?

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;
}
}

2 hours ago, Jarmo2127 said:

Mobile uses a different class name. What is your site url? We can check it again easier

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

whats the best practices for images should we be using Hyphens ? for SEO >

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;
}