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

Changing custom font colours


JCreateMore

Question

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 post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

Works great! thanks for your help 😃

Posted Images

9 answers to this question

Recommended Posts

  • 0

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 post
  • 0
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 post
  • 0
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 post
  • 0

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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...