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

How to change font size and color in a specific banner of a specific page (Hayden template)?

Question

My site: www.blueribbonarts.comI am trying to change the text "blue ribbon art academy" located in banner of the "intro" page. I tried some css codes but failed to identify the banner location. So far I tried:

intro p {

font-size:48px}

Unfortunately the code changed not only the banner font but also the whole page font. Can you please help?

Edited by yimeng1988
Initial Revision

Share this post


Link to post

11 answers to this question

Recommended Posts

  • 2

Hi @yimeng1988

Your code just needs to be a little more specific. At the moment it is targeting all the paragraph (p) text on the 'intro' page of the index.

You need to ensure that only the 'description wrapper' (the text on the banner image) is affected. Also, because there are several paragraphs in this, you need to limit the style to the first paragraph only.

Remove the CSS you've tried above, and try adding this instead to Design > Custom CSS:


#intro .desc-wrapper p:nth-of-type(1) {
   font-size: 48px;
   color: burlywood;
}


Paul


I post free answers because I want to help fellow Squarespace users - I'm not selling anything. In return please Accept an answer if it is correct. If it didn't help, feel free to ask for more help or wait for others to add their comments.

To everyone! If you find this (or any) answer helpful, please vote it up using the up arrow. This will let other users know it's a good answer. You'll find some more Squarespace tips on our website.


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include. Explore our range of Squarespace Extensions on our website, including the Enquiry Form ExtensionDatepicker Extension and Age Verification Extension. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
  • 0

No problem.

Edited by Paul2009
Initial Revision

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include. Explore our range of Squarespace Extensions on our website, including the Enquiry Form ExtensionDatepicker Extension and Age Verification Extension. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
  • 0

Also, if I want to make the second paragraph smaller ("We Offer Creative and Advanced Art Classes and Individual Art Portfolios"), how can I identify them?

Share this post


Link to post
  • 0

Also, if I want to make the second paragraph smaller ("We Offer Creative and Advanced Art Classes and Individual Art Portfolios"), how can I identify them?

Share this post


Link to post
  • 0

Looks like the second paragraph did not work when I wrote below: #intro .desc-wrapper p:nth-of-type(1) { font-size: 48px; color: burlywood; } #intro .desc-wrapper p:nth-of-type(2) { font-size: 48px; color: burlywood; }

Share this post


Link to post
  • 0

The second paragraph is bold (strong) so try this:


#intro .desc-wrapper p > strong {
    font-size: 60px;
}





Edited by Paul2009

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include. Explore our range of Squarespace Extensions on our website, including the Enquiry Form ExtensionDatepicker Extension and Age Verification Extension. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...