Change font/colours – Canape theme

  • grace341 · Member ·

    Hi

    I set up a site on WordPress using the Canape theme and was able to change the font and colours via the customiser. I have since migrated my site to be hosted elsewhere and although I am still able to use the WordPress interface and Canape theme, for some reason the options for changing font and colours have disappeared from the customiser. Everything else is working the same, any ideas why this might be and how I can fix it?

    Thanks in advance

    The blog I need help with is: (visible only to logged in users)

  • grace341 · Member ·

    The blog I need help with is NOT the one above! That got added automatically! The one I need help with is actually lissagracefineart.walesawakening.org

  • garysixtyeight · Member ·

    Hi there,

    The self-hosted version of Canape doesn’t have the same design features as the WordPress.com version.

    If you can outline the specific font and colour changes you’d like make, I can provide you with CSS for them :)

  • grace341 · Member ·

    Oh thank you! I was a bit worried someone would say CSS as I’m new to all this but I’m sure I can learn! So the colour scheme I was after was the black and mauve one and the fonts were Cinzel for the headings and Lora for the base font.

    Thanks for your help!

  • garysixtyeight · Member ·

    For the fonts, please try adding the CSS below to the bottom of the customizer in Appearance > Customize > Additional CSS:

    /* Since the dotorg customizer allows external files to be loaded, let's @import Google fonts for simplicity */
 @import url('https://fonts.googleapis.com/css?family=Cinzel:400,700|Lora:400,400i,700,700i');

/* Change base font to Lora */
 body, button, input, select, textarea, .main-navigation a, .entry-meta, .footer-site-description {
     font-family: 'Lora', serif;
}

 @media screen and (min-width:768px) {
     .main-navigation ul ul a {
         font-family: 'Lora', serif;
    }
}

/* Change headings to Cinzel */
 h1, h2, h3, h4, h5,h6, button, input[type='button'], input[type='reset'],input[type='submit'],#infinite-handle span, .button, .post-navigation a, .paging-navigation a, .comment-navigation a, .widget-title, .site-title, .footer-site-title, .site-footer, .archive .page-title, .search .page-title, .front-page-content-area .entry-title, .front-testimonials h2, .front-widget-area .widget-title, .menu-breadcrumbs, blockquote cite, .comment-meta .fn, .comment-tools, .archive .jetpack-testimonial .posted-on {
     font-family: 'Cinzel', serif;
}

    So the colour scheme I was after was the black and mauve one

    To clarify, would you like to change the gold colour to mauve?

    If so, please try adding the CSS below. The 6 digit colour code can be changed to whatever shade of mauve you prefer:

    /* Change Gold colour to Mauve */
 a, .main-navigation a:hover, .main-navigation ul >:hover > a, .main-navigation ul > .focus > a, .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a , .menu-toggle:hover, .menu-toggle:focus, .entry-title a:hover {
     color: #b784b4;
}
 .entry-title a:hover {
     border-bottom-color: #b784b4;
}

    If the CSS doesn’t have the desired effect, please let me know.

    If you need any other help with the self-hosted version of Canape, please post a thread in the Canape support forum over at WordPress.org:

    https://wordpress.org/support/theme/canape/

    I hope this helps :)

  • grace341 · Member ·

    Yes, that’s perfect thank you so much!

    The only other thing is – so the CSS has changed the colour of the text when it’s highlighted but there’s a testimonials section on the homepage which still has the gold colour behind and also the boxes around the homepage ‘about’ text and widgets are still gold. Are you able to help me with those?

  • garysixtyeight · Member ·

    Sorry, just to clarify – is it these borders and backgrounds that you’d like to change to mauve?

    Screenshot:
    Lissa Grace Fine Art

    If it is, please try using the CSS below. If that’s not what you want, please let me know.

    .front-testimonials {
     border-bottom-color:#c0a8c0;
     background: #c0a8c0 
}
 .hero-container-inner .hentry, .widget {
     border-color: #c0a8c0;
}
  • grace341 · Member ·

    Yes, sorry! Borders and backgrounds :) Thank you. That’s fixed all but the border of the search widget and the ‘Testimonials’ title (I think the testimonials box was hidden to the public actually so I’ve made that visible now) Would you mind sending me one last bit of code? Sorry to ask so much! I know what I need to be spending my time learning now…!!

  • garysixtyeight · Member ·

    For the search widget, please use:

    .widget_search input[type=search] {
	border-color: #e0d4e0;
}

    For the testimonials title, please try using the CSS below. I’ve set it to black as it wouldn’t be visible if it was mauve. You can change the colour code to whatever you prefer:

    .front-testimonials h2 {
	color: #404040;
}

    I hope this helps :)

  • grace341 · Member ·

    Absolute gent. Thanks so much!

  • garysixtyeight · Member ·

    You’re welcome, glad I could help :)

  • The topic ‘Change font/colours – Canape theme’ is closed to new replies.