Changing custom font colours

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

Hi,

I have a couple of queries regarding my site

Site URL

Access Password

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.

Quote

Question 2:

A couple of things to try. Make the page section height large.

You could also try adding a page section below the current page section and adjust its height.

Let us know how it goes.

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.

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.

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

Please put the code for 3 & 4 in Custom CSS. As long as it's not causing a problem. I can then try to diagnose why it isn't working. Sometimes local testing doesn't cover all the possible configurations.

Hi Creedon,

Just added the code, its at the bottom of the custom css

Thanks,
Jon

3 was a bit wonky. I've updated the code for it.

I can see 4 working.

Let us know how it goes.

Works great! thanks for your help 😃