Jump to content

Changing custom font colours

Recommended Posts

Site URL: https://www.j-creative.com.au

Hi,

I have a couple of queries regarding my site

Site URL

Access Password

260284



Question 1:

How do I change the colour of the phone number and email address and how do I add my custom font to the form text and buttons?


Question 2:

I can't seem to remove this red block from "ABOUT" page, how do I go about this?


Question 3:

How do I change the colour of the arrows in the bottom of portfolio section and is it possible to change the style of this at all? for eg. make it thicker or give it a different look.


Question 4:

How to change the colour of the portfolio headers?


Thanks so much for your help with this!

Jon







 

Question_4.png

Question_3.png

Question_2.png

Question_1.png

Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Addressing one question at a time.

Quote

Question 1:

 

/* color of phone and email on Contact page */

#block-fe75c277f7b37fd95a2c a {

  color : red;
  
  }

/* font for form on Contact page */

[data-form-id="603ec3ec94565f515d9613ec"] .sqs-block-form .field-list .title,
[data-form-id="603ec3ec94565f515d9613ec"] .form-wrapper .field-list .field .field-element

  {
  
    font-family : 'Karla-Light';
    
    }

This is for a v7.1 site and is specific to the OP's needs.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
Quote

Question 3:

Add the following to Design > Custom CSS.

/* begin change stroke (color) and stroke-width of portfolio navigation arrows */

  .collection-600e69d54955200b5b2fdc73 .bright.item-pagination[data-collection-type^="portfolio"] .item-pagination-icon svg {
  
    stroke : red;

    }
    
  /*

  // size, using LESS syntax
  
  .collection-600e69d54955200b5b2fdc73 .item-pagination-link .item-pagination-icon svg {
  
    height : 32px; // 32px is default
    width : 18px;  // 18px is default
    
    }
    
   */
   
  .collection-600e69d54955200b5b2fdc73 .icon--stroke svg {
  
    stroke-width : 3px; /* default is 1px */
    
    }
    
  /* end change stroke (color) and stroke-width of portfolio navigation arrows */

This is for a v7.1 site and is specific to the OP's needs.

I threw in a commented out size change as well as changing the size of something is a pretty common request, just in case. You'd need to remove the /* and */ just before and after the size rule-set.

To make more complex changes like changing the shape of the arrow and maintain it being an SVG you'd need some Javascript and the business plan or above. There are other techniques that replace the SVG but then the code above becomes useless.

Let us know how it goes.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
Quote

Question 4:

Add the following to Design > Custom CSS.

/* change color of portfolio grid titles */

#collection-600e69d54955200b5b2fdc73 .bright .portfolio-grid-overlay .portfolio-title {

  color : red;
  
  }

This is for a v7.1 site and is specific to the OP's needs.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Hi Creedon,

Thanks for getting back to me!

Question 1:

Changing the colour of the email and number worked though it won't let me change to the light grey so I went with white and thats all good.

With the form font the code you supplied wasn't working, so I found this one online and it worked:

 

.form-wrapper .field-list .title {

color: #E5EAF5; 

font-family: Karla-semibold !important; 

text-align: left; 

text-transform: uppercase; 
 

 

} 

 

.form-wrapper .field-list .field .caption {

color: #E5EAF5;

font-family: Karla-light; 

text-align: left; 

}

 

Question 2 all good!



Question 3: I couldn't get this working, I pasted the code in Custom CSS and no changes happened.

Question 4: This code also didn't work


Thanks,
Jon


 

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.