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

How to add a tagline under logo in Bedford?


Recommended Posts

Site URL: https://seadragon-pear-6ndb.squarespace.com/

Any suggestions on how to add a tagline under the logo? In the site styles it gives me the option to show one or the other, but I'd like to display both. 

https://seadragon-pear-6ndb.squarespace.com/ password: op1

If it's going to be an issue to add it under the logo, I have an alternate plan. I've added a green bar under the slideshow banner, but I need some advice on how to use CSS so there isn't so much space above/below it AND so the text on that green bar shows as white instead of gray. I tinkered with it for a while, but I'm very much a novice and I'm stumped. I created that bar as a section on the index, and it just has a ton of space around it. 

Link to comment
  • Replies 20
  • Created
  • Last Reply

Top Posters In This Topic

add to Home > Design > Custom CSS

h1#logoImage a:after {
    content: "Tuan Squarespace";
    display: block;
    color: #fff;
    font-size: 50px;
    margin-top: 20px;
    text-align: center;
    line-height: 1em;
}

image.thumb.png.851df6596180a796f230e32d0f7f6569.png

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
  • 1 year later...
20 hours ago, SandraC said:

Is there a way to use two different fonts in this tagline? Thank you!

Add font name to code

h1#logoImage a:after {
    content: "Tuan Squarespace";
    display: block;
    color: #fff;
    font-size: 50px;
    margin-top: 20px;
    text-align: center;
    line-height: 1em;
font-family: monospace;
}

 

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

Thank you for your reply, Tuan! I appreciate it. This changes all of the content to the font-family, in this example, to Monospace. I am wondering, is it possible to have Tuan in one font, and Squarespace in another font? Thank you.

Link to comment
15 hours ago, SandraC said:

Thank you for your reply, Tuan! I appreciate it. This changes all of the content to the font-family, in this example, to Monospace. I am wondering, is it possible to have Tuan in one font, and Squarespace in another font? Thank you.

Can you share link to your site? We can check it again easier. 

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
19 hours ago, SandraC said:

@tuanphan, sandracurry.com

 

Use this new code

h1#logoImage a {
    position: relative;
}
h1#logoImage a:after {
    content: "DACM Traditional East Asian Medicine & Medical Intuition";
    display: block;
    color: #000;
    font-size: 40px;
    text-align: right;
    line-height: 1em;
    font-family: "Olicana-smooth";
    position: absolute;
    right: -150px;
    margin-top: -30px;
}
h1#logoImage a:before {
    content: "Dr Sandra Curry, ";
    display: block;
    color: #000;
    font-size: 40px;
    text-align: right;
    line-height: 1em;
    position: absolute;
    font-family: monospace;
    right: -100px;
}

How about layout on mobile?

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

@tuanphan, thank you! This is what I have now. And also what it looks like on mobile. Any tips on how to fix the mobile appearance for the logo/tagline? Also, do you know how the "welcome" font can be a bit larger for the mobile? Thank you so much! I really appreciate your assistance!

Screen Shot 2021-09-20 at 7.04.18 PM.png

Screen Shot 2021-09-20 at 7.03.57 PM.png

Link to comment
On 9/21/2021 at 9:05 AM, SandraC said:

@tuanphan, thank you! This is what I have now. And also what it looks like on mobile. Any tips on how to fix the mobile appearance for the logo/tagline? Also, do you know how the "welcome" font can be a bit larger for the mobile? Thank you so much! I really appreciate your assistance!

Screen Shot 2021-09-20 at 7.04.18 PM.png

Screen Shot 2021-09-20 at 7.03.57 PM.png

Hi,

edit font-size value in above code

How do you want it to look on mobile?

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

@tuanphan, if I change the font-size of "welcome", it changes the font on computer, iPad, and mobile. I like the way it looks on the computer and iPad, but it shows up much smaller on mobile. is there a way to change it only on mobile.
I would like the Dr SC, TEAM & MI to appear on mobile as it does on the computer, if possible.

Link to comment
On 9/22/2021 at 10:35 PM, SandraC said:

@tuanphan, if I change the font-size of "welcome", it changes the font on computer, iPad, and mobile. I like the way it looks on the computer and iPad, but it shows up much smaller on mobile. is there a way to change it only on mobile.
I would like the Dr SC, TEAM & MI to appear on mobile as it does on the computer, if possible.

Add this CSS to change size on mobile only

@media screen and (max-width:640px) {
h1#logoImage a:before {
    font-size: 15px;
    right: 0;
}
h1#logoImage a:after {
    font-size: 15px;
    right: unset;
    left: 0;
    margin-top: -10px;
    line-height: 1;
}
}

 

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
15 hours ago, SandraC said:

@tuanphan,

thank you for your help. the dr sc, team & mi look great. can you share how I can enlarge the font of "welcome" on the mobile view, too? 

thanks again!

Where is Welcome? I see cover page only

https://www.sandracurry.com/

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
  • 2 weeks later...

@tuanphan, please see the mobile view snapshot above that I posted on 20 Sept to see "welcome." I would like the font of "welcome" to appear larger like it is on the computer view, please.

Also, I have a second question: is there a way to have "Curry" be a different font than the rest of the line "Dr SC, DACM"? 

Thank you!

Link to comment
On 10/12/2021 at 4:40 AM, SandraC said:

@tuanphan, please see the mobile view snapshot above that I posted on 20 Sept to see "welcome." I would like the font of "welcome" to appear larger like it is on the computer view, please.

Also, I have a second question: is there a way to have "Curry" be a different font than the rest of the line "Dr SC, DACM"? 

Thank you!

Here is your site, no welcome text

image.thumb.png.7d8703d008f0904908878c5504e0b8c8.png

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