38 Useful WooThemes Canvas CSS Tweaks

WooThemes Canvas and framework is just great – just like the name implies – it is a blank canvas allowing you to change and design all the elements of the to-be-built website. The built-in theme options are extensive – but they just can’t cover every conceivable tweak.

The first time we used WooThemes Canvas we loved it – and once we’d gotten some CSS tweaks defined to put the final finishing touches to the style we needed – we loved it even more.

WooThemes Canvas has a ton of built in shortcode and options, for clients that have CMS requirements we modify or add new shortcodes to the existing options. This list of WooThemes Canvas CSS Tweaks also provides a couple of modifications to existing shortcodes.

Modifications to bullets, boxes etc are all do-able and provide that extra layer of polish to Client CMS website as well as saving a bunch of time.

If you are already a seasoned Canvas developer – you’ll know that straight out of the box it is mobile responsive – do keep in mind that modifications you make to the CSS should be tested not only on your Desktop but also on a Smartphone/Tablet devices (and if using a caching plugin – remember to disable it!).

Update December 2013 : There are now 38 WooThemes CSS Tweaks and over 150 comments which contain even more tweaks!

Canvas CSS Tweak #1

Floats the Main Navigation left – should you have a background image the z-index part of this code raises the menu above the background image.

#navigation { float: left; width: auto; z-index:10;}

Canvas CSS Tweak #2

Stops the site title from being displayed.

#logo .site-title {display: none !important;}

Canvas CSS Tweak #3

Stops the site description from being displayed.

#logo .site-description  {display: none !important;}

Canvas CSS Tweak #4

Sets the height of the site logo to 100 pixels – useful if you have a small logo but using a background.

#logo {min-height: 100px;}

Canvas CSS Tweak #5

Reduces the padding between multiple column sections. Useful if you layer or stack COL layouts.

.twocol-one,.threecol-one,.threecol-two,.fourcol-one,.fourcol-two,
.fourcol-three,.fivecol-one,.fivecol-two,.fivecol-three,
.fivecol-four,.sixcol-one,.sixcol-two,.sixcol-three,.sixcol-four,
.sixcol-five{margin-bottom:2%;}

Canvas CSS Tweak #6

Increases the padding between the Post/Page Title and the body.

.post .title, .page .title { margin: 0 0 1em;}

Canvas CSS Tweak #7

Styles the colour of the RSS icon on the menu and removes the ‘shadow’ effect from the image.

#navigation ul.rss li a:after { color:#c8c8c8; text-shadow: none;}

Canvas CSS Tweak #8

Style hover colour of the the RSS icon on the menu.

#navigation ul.rss li a:hover:after { color: #ffffff;}

Canvas CSS Tweak #9

If you need to add some top padding to the RSS icon in the menu bar, here’s how to do it.

#wrapper #navigation ul.rss li a { padding: 10px 0 0 0}

Canvas CSS Tweak #10

The input boxes for the Contact Form and Email default to white, the CSS tweak allows you to style to the colour of your choice.

input, textarea {background: none repeat scroll 0 0 #cccccc;}

Canvas CSS Tweak #11

This CSS tweak adds some padding around the footer (the footer normally holds your copyright info or suchlike). Change the padding parameters to suit your needs.

#footer { padding: 11px 10px 2px; }

Canvas CSS Tweak #12

Sometimes the ‘underline’ on hover really doesn’t work – so these two lines of CSS do two things – they turn off underline for links, and they set links to bold.

a:link, a:visited  { text-decoration: none !important; font-weight:bold;}
a:hover { text-decoration: none! important; font-weight: bold; }

Canvas CSS Tweak #13

Styles H1 to H6 to have a colour when they are a link and they are being hovered. Change the colour to suit your needs.

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
{ color: #ffffff !important;}

Canvas CSS Tweak #14

These two CSS tweaks style the Pagination shown on the Posts page (Pagination is where it says Page 1 of 6).

.nav-entries, .woo-pagination {background-color: #262626; padding: 12px 0;}
.woo-pagination a:link, .woo-pagination a:visited, .woo-pagination a:active
{ background: none repeat scroll 0 0 #262626; border: 1px solid #DEDEDE;}

Canvas CSS Tweak #15

This CSS Tweak styles the amount of padding on top and on the bottom of the main menu. You can use px if you want to.

ul.nav li a {padding-bottom: 0.75em !important;  padding-top: 0.75em 
!important; }

Canvas CSS Tweak #16

This tweak styles the colour of the bar that is just above the footer widgets.

#footer-widgets {border-top: 1px solid #4a4a4a !important;}

Canvas CSS Tweak #17

Changes the line height to 190% for main text on the page. Very handy if you are using large fonts.

.entry p { 
    line-height : 190%;
}

Canvas CSS Tweak #18

In the Portfolio Section, applies rounding to the Portfolio images on sub-pages

#portfolio img, .portfolio-img {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

Canvas CSS Tweak #19

Hides post-meta information – useful for Portfolio. You may want to add classes if you also have a blog and wish to show post-meta for posts.

.post-meta {
    display:none;
}

Canvas CSS Tweak #20

Hides the Portfolio Categories & Tags

#portfolio #port-tags .port-cat{ display:none; }

Canvas CSS Tweak #21

Changes the line height to 190% for main footer area. Very handy if you are using large fonts.

#footer, #footer p {
    line-height: 175%;
}

Canvas CSS Tweak #22

Sets the background colour of the Woo Search Widget

.searchform input.s {
    background: none repeat scroll 0 0 #FAFAFA;
}

Canvas CSS Tweak #23

Sets background colour of the main wrapper and includes a transparent PNG image (please replace the text with your actual link which is not repeated with the anchor top-left.

#wrapper {
    background:#edf2ff url('http://your-url-goes-here/image.png') no-repeat left top;
}

Canvas CSS Tweak #24

Center floats a logo – note that you must replace the width of the logo (currently 220px) in order for this to work.

#logo {
    float: none;
    margin: 0 auto;
    width: 220px;
}

Canvas CSS Tweak #25

Set the margin below the breadcrumbs.

.breadcrumb {
    margin-bottom: 20px;
}

Canvas CSS Tweak #26

When the Magazine Page is being used as home, put some nice rounded borders around each post and give a minimum line height to provide consistent spacing.

.home .post {
    border: 1px solid #4A4A4A;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    min-height: 300px;
    padding: 20px;
}

Canvas CSS Tweak #27

Used in conjunction with the tweak above, if you have modified your homepage via the tweak above and included intro text above the posts, this tweak removes the border from around the intro text (an example of this is in use is here).

.home .type-page {
     border: 0px solid #4A4A4A;
     box-shadow: none;
     padding: 0px;
}

Canvas CSS Tweak #28

Removes the “You are here” from the breadcrumb.

.breadcrumb-title {
    display: none;
}

Canvas CSS Tweak #29

Hides breadcrumbs on the home page.

.home .woo-breadcrumbs {
    display: none;
}

Canvas CSS Tweak #30

Sets the style of the title on the Magazine Slider.

.magazine #loopedSlider .content h2.title a {
    font: bold 24px/1em Molengo,arial,sans-serif;
}

Canvas CSS Tweak #31

Sets the style of the title when hovered on the Magazine Slider.

.magazine #loopedSlider .content h2.title a:hover {
    color: #AAAAAA !important;
    font: bold 24px/1em Molengo,arial,sans-serif;
}

Canvas CSS Tweak #32

Sets the style of the text content on the Magazine Slider.

.magazine #loopedSlider .content .excerpt p {
    color: #CCCCCC;
    font: 14px/1.5em Cabin,arial,sans-serif;
}

WooCommerce Canvas CSS Tweak #33

Hides related products.

.related.products {
    display: none;
}

WooCommerce Canvas CSS Tweak #34

Hides the ‘Company’ field when entered address information.

#billing_company_field {
    display: none;
}

WooCommerce Canvas CSS Tweak #35

Hides the ‘Order by’ dropdown within the catalogue.

.orderby {
    display: none;
}

WooCommerce Canvas CSS Tweak #36

Hides the ‘Add to cart button’ on the Category Page.

.add_to_cart_button {
    display: none !important;
}

Add open/close quote marks to Tweak #37

This tweak adds open/closing quote marks to the ‘quote’ shortcode.

.woo-sc-quote p:before {
    font-family: FontAwesome;
    content:"\f10d";
    margin-right:20px;
    color:#ec0083;
}
.woo-sc-quote p:after {
    font-family: FontAwesome;
    content:"\f10e"; 
    margin-left:20px;
    color:#ec0083;
}

Tweak the toggle images Tweak #38

This allows you to change the images used for the toggle shortcode. When I altered mine, I copied the existing PNG file and recoloured it to match my design.

.shortcode-toggle h4 a {
    background: url("http://www.your-website/wp-content/uploads/your-image.png")
no-repeat scroll 99% center hsl(0, 0%, 95%);
}
.shortcode-toggle.closed h4 a {
    background-image: url("http://www.your-website/wp-content/uploads/your-image.png");
}

Now check out the comments below for even more tweaks! Note that due to the volume of requests – comments are closed.

WooThemes have broken your Contract

Update 4 August 2013 : As a WooThemes & Canvas Customer you need to know about this change to your contract with Woo, WooThemes breaks contract with 100,000 Customers.
Share

157 Responses to 38 Useful WooThemes Canvas CSS Tweaks

  • Sonia

    Thank you! These were excellent.

  • The Mayne Design

    You are welcome Sonia and thank you for the feedback! I hope they helped you build your site.

    Steve

  • Rob

    Hi Steve, tweak 5 doesnt seem to work – and I do have an issue between body content and right hand column (primary sidebar).
    Any hints ?

    Tx rob

  • The Mayne Design

    Hi Rob – I have just re-tested tweak 5 and it does work.  Tweak 5 will reduce the bottom padding when using the Column Layout Shortcode.

    Is this what you are trying to do, or are you trying to do something else?  What is the link to the page you are having problems with?

    Cheers, Steve

    • Rob

      Actually – no, I’m trying to reduce the padding between columns – horizontally, in three column mode – between middle and right column.

      From Woothmes, I received this code, which does seem to do the job.

      .three-col-middle-960 #main-sidebar-container #main {width: 67%;}
      • The Mayne Design

        Thanks for sharing Rob!

        Steve

  • Vince

    Thanks for these tips! It took quite a bit of searching to figure out how to change the color of the custom contact form (tweak #10).

    If I want to change the color of the Submit button but keep the text fields white, how would I go about doing that? It seems I’d have to create some new CSS.

  • Vince

    Actually nevermind, it looks like I’m using the Jetpack plugin’s contact form and not Woothemes’. Funny how your tweak still worked!

    • The Mayne Design

      Vince

      Glad that you were able to use the tweak.

      Guess it all depends if Jetpack is using it’s own CSS or importing that from the Theme.

      Steve

  • Jignesh

    Hi,
    thank you so much for these tweaks 🙂
    can you guide me how to edit whole Primary menu bar of Canvas theme..

    i don’t like that toggle effect, how to do it ?
    thanks 🙂

    • The Mayne Design

      Hi Jignesh

      We are glad you found the tweaks helpful!

      Do you want to remove the ‘hover effect’ of the primary menu?

      Steve

      • Jignesh

        Yes i want to remove hover effect.

        when i bring the cursor it should be linked to text only not the box..

        and how can i completely change then primary menu

        thanks 🙂

        • The Mayne Design

          Hi Jignesh

          To hide the boxes do the following.

          Go to ‘Theme Options/Layout/Primary Navigation’ and set the ‘Hover Background Color’ & ‘Current Item Background Color’ to be the same as the value in ‘Theme Options/Styling/Background Color’.  This will make the boxes and the hover effect on the boxes disappear.

          Hope this helps you out!

          Thanks,
          Steve

          • Jignesh

            Yes i tried this also this helped me 🙂

            but can u suggest code tweak to remove effect also

            just to get clickable link
            e.g : wwww.hongkiat.com like his navigation bar ?

            thanks for your valuable time to reply 🙂

          • The Mayne Design

            Hi Jignesh

            If you turn off (set to zero) all the borders & styling then you will give just a clickable link.  No CSS required.

            That example uses a sprite to provide the colours and styling of the nav bar.

            Steve

  • Yanik

    Love these tips!

    Is there a way to add Twitter and facebook icons to the main navigation menu? Also change the RSS icon?

    Thanks!

    • The Mayne Design

      Hi Yanik –

      Sure, to add Twitter & Facebook items this is a code change, details are in the WooThemes Knowledge base.

      The RSS Icon is a character from the font WebSymbolsRegular, the RSS icon is charater ‘B’.

      To change the character used then use the CSS code, changing “B” to the new value.

      Steve

      #navigation ul.rss li a:after {content: "B";}
  • Nancy Wirsig McClure

    Steve, thanks for these straightforward tweaks.

    FYI: I was pleased to find the full character set of the font WebSymbolsRegular, as well as a desktop font — not webfont — to use in documentation! http://www.fontslog.com/web-symbols-regular-otf-33811.htm

    I’d be thrilled to see you post on a couple of more complex customizations, for the Canvas Slider’s use of next and previous arrows (also WebSymbolsRegular).

    (a) How to override their horizontal position, so they overlap the edges of the slider box, instead of hanging way out to left and right. I’ve made an attempt, but they slide around when the window width changes.

    (2) How to change their hover color.

    TIA!

    • The Mayne Design

      Hi Nancy – glad you have enjoyed the tweaks.

      We made a concious decision to not use the Canvas Slider because as you have identified … it sucks!

      I would recommend installing a fully-featured third party slider instead of using the built in slider.  For $15 or less, Code Canyon has a choice of WordPress Sliders that would make a much better job than the slider built into the theme.

      Let me know how you get on?

      Cheers,
      Steve

  • Tom Nguyen

    The site description disappears when you add a logo.  You can display the site description text while the logo is present by using:

    #logo .site-description { display: block; }
    • The Mayne Design

      Thank you Tom for that tweak.

      That that brings us perfectly into a tweak that is required for IE9 which, when using a background image and z-index on the Menu Navigator, IE9 has a bug and forgets that it should hide the site title and site description.  The ‘visibility:hidden;’ gives IE9 the extra info it needs to display correctly.

      #logo .site-title {display: none !important;
      visibility:hidden;} /* hides text title */
      #logo .site-description  {display: none !important;
      visibility:hidden;} /* hides site description */
    • Bill

      Hi
      Thanks for the info. It works, but what I am am having difficulty finding is how to display all three, as in

      LOGO Site title
      LOGO Site description

      Appreciate any help.

      Cheers

      Bill

      • The Mayne Design

        Hi Bill –

        Have you tried,

        #logo .site-title { display: block; }
        #logo .site-description { display: block; }

        Thanks,
        Amanda

  • Andrew

    Found these hints on woo’s website.  Outstanding..thank you! 

    I used the tweak that floats the menu to the left/right, worked great.  Now I am trying to move the logo area down to match the vertical height of the primary nav.  Just like this site’s header http://test.reiki-canada.com/

    Any thoughts from anyone?

    • The Mayne Design

      Hi Andrew –

      This is very easy – it is copy and paste from the tutorial on the WooThemes Support section, the direct link is here –> Move Main Nav to Header.

      It is a mixture of Code and CSS.

      Thanks,
      Steve

  • Gayle

    Hi

    Thank you for the tweaks!

    Do you have any tweaks to make the header, slider background, main menu and footer full width?

    I would like to do that but Woo support has said it would be difficult to do.

    Thank you for any help.

    • The Mayne Design

      Hi Gayle,

      Thank you for getting in touch with this question.

      The latest version of Canvas has cool feature to allow it to display on mobile devices, we can take advantage of this feature to provide an close approximation of a full width header etc.

      Go to the admin screen, click through on Canvas / Theme Options / Layout / Layout Setup and slide the ‘Site Width’ slider all the way to the right.  Click ‘Save’.

      Canvas will fill the screen, and it will dynamically resize content for smaller width screens.  Just try to keep your menus smaller than a 900px width.

      Hope that helps you.

      All the best,
      Steve

    • The Mayne Design

      Hi Gayle

      There is a step-by-step tutorial on Woo’s website if the solution above doesn’t meet your need.

      Hope this helps,
      Amanda

  • Shannon

    You’re a life-saver! I am in the middle of a redesign and struggling with a couple things.

    I can’t seem to override the H1 styling. I would like to do all caps on my page/post titles throughout the site but I just can’t locate it in the CSS to do the

    text-transform:uppercase

    Also — float the primary navigation bar center?

    I really appreciate your time on this, I know you get a lot of questions!  🙂

    • The Mayne Design

      Hi Shannon,

      h1 {
           text-transform: uppercase;
      }

      Will transform all the H1 Styling to uppercase.  I’ve tested using an actual site, what issue did you have?

      I haven’t had too much luck centre floating the primary nav.  There are other suggestions around the web, but the values of the CSS need to be edited each time a primary nav menu item is edited to get alignment.

      Thanks,
      Amanda

  • Niche Master

    How do you center the logo?

    • The Mayne Design

      Hi Niche Master,

      To center the logo, use this code:

      #logo {
          float: none;
          margin: 0 auto;
          width: 150px;
      }

      and set the width to the width of your image.

      Cheers,
      Amanda

  • Scott

    Hi Everyone, thanks for all your excellent posts. I am new to using Canvas and find it to be an excellent theme and your post have helped a lot.

    A question for everyone: When I publish a page or post and then check the source code I notice there is 2 H1 tags. One for the site title and one for the page/post title.

    I would like to remove the site title H1 tag so it doesn’t appear in the source code.

    Any suggestion on how I can do that?

    Thanks

    Scott

    • The Mayne Design

      Hi Scott,

      Than you for your kind words.

      The best way to do this is to create a Canvas child theme, copy header.php into the child theme, then edit header.php to change the H1 tag for the site title to the tag you wish to use.

      Drop me an email if you need any help with this.

      Thanks,
      Amanda

  • Joe

    Hi, How do you remove the H1 only from the home page. I want to tweak the file Canvas: content-page.php so that it has an if statement to remove the H1, but I am not a programmer, can you please tell me how to edit this part:

    $heading_tag = ‘h1’;
    if ( is_front_page() ) { $heading_tag = ‘h2’; }
    $title_before = ”;
    $title_after = ”;

    Thanks a lot.

    • The Mayne Design

      Hi Joe,

      Does changing the top line from ‘h1’ to ‘h2’ do what you need?

      Thanks,
      Amanda

  • Hello!
    Love your tweaks and Canvas but you should really make my day if you add the one how to center main navigation, site title and site description.

    If you solve this issue for me I will get back to Canvas from Manifest theme.

    Kindly Christer 🙂

    • The Mayne Design

      Yes it is possible.  I don’t have a site to play with that uses title or description, modifying the code below for the navigation, title & description should work.

      #logo {
          float: none;
          margin: 0 auto;
          width: 150px;
      }

      Change #logo for the css element you want to modify and change the width to the width of the element.

      Steve

      • Rob

        If I use this code to centre the nav menu it works fine for desktops and larger screens but for mobile it makes the navigation bar for the menu impossible to access. Any ideas how I can centre menu and still have it work on mobile?

        #main-nav {
        float: none;
        margin: 0 auto;
        width: 400px;
        }

  • Joel

    Hi! Thanks for all the helpful hints.
    Is there a way to change the background color of the hovered submenu when a drop down menu appears? For instance, say you have a parent item on the primary navigation, you hover over it and a drop down menu appears. When you hover over one of the links of the drop down menu, I would like the background color to change (of just that one link, not the other links in the drop down menu or the primary navigation). Is that possible?
    Thanks in advance!

    • The Mayne Design

      Hi Joel,

      Thank you for the explanation of what you are looking for.

      Can you let me know if this works for you?

      #navigation ul.nav ul > li:hover {
          background: none repeat scroll 0% 0% #ffff00;
      }

      Thanks,
      Steve

  • julie

    Thakns for these great tips. I added a border to the thumbnails – but want to remove it from the wootabs circle thumbnails. Anyone know how I can do this?
    Thanks so much.

    • The Mayne Design

      Hi Julie – what is the link to your website?  Steve

  • RW

    How do you turn off the caps on the posts content?

    • The Mayne Design

      Hi RW – please can you give me the link of the website you are referring to?  Thanks! Amanda

      • Reginald
        • The Mayne Design

          Hi Reginald – in your postmeta you have this CSS:

          .post-meta {
              text-transform: uppercase;
          }

          And this is what is causing the letters to go uppercase.

          Put this CSS into your custom.css

          .post-meta {
              text-transform: none;
          }
          

          Let me know if I have solved your problem.

          Amanda

          • Reginald

            Yes it did great job! Thank you..

          • The Mayne Design

            You are welcome Reginald 🙂

    • Reginald

      On the posts… how do you get the thumbnail or read full story link to link outside the website?

      • The Mayne Design

        By ‘outside the website’ what do you mean?

        • Reginald

          Link to an external page or website.  Most times with the post you have a thumbnail image to the left of the post. The thumbnail is hyper-linked as well as the title.  If that post links to an external page say CNN, I don’t want the visitor to have to click on the thumbnail or title to see the full post then click my “Read More” link to access the external CNN page. Make since?

          • The Mayne Design

            Yoast’s SEO Plugin allows 301 redirects – by the sound of it that’s what you are after.

  • simon

    Great article, how would you go about adding a title above the magazine slider and a separate title below introducing the posts section?

    • The Mayne Design

      Hi Simon – these can be done via tweaks to the magazine template and function.php.  The info to do both these in the WooThemes Canvas knowledge base.  Thanks!

  • Reginald

    semi-transparent background – if you go to the foundation page notice how bright my background is. I used hsla(#,#,#;#) to try an make it transparent of about 70%. I was considering using an image because this new css3 option doesn’t work in IE8. What is the correct way to fix this and be able to usu it on certain pages? Privacy Policy and terms & Conditions..

    http://69.195.124.95/~joshtwoo/joshtwoo_nba/foundation/

    another area… Post Footer – if you go the news page or any of the post when you read the full post my footer image is not visible and the text links i have aren’t see because the text is black. How do i get my footer image to reappear? http://69.195.124.95/~joshtwoo/joshtwoo_nba/category/news/

    • The Mayne Design

      I haven’t played too much with CSS3 but an image … or dropping IE8 is the solution here.  My personal take is that if Microsoft can’t be bothered to support their own software why should I!

      Post footer, I’d recommend some conditional CSS here to change the colour depending on which page you’re looking at.

  • T Miller

    How about a tweak for this please? 🙂

    My portfolio menu reads: ALL | FEATURED | CATEGORY 1 | CATEGORY 2 |
    ETC… right up to category 7.

    I do not wish for the ALL category to be displayed. Just the FEATURED AND CATEGORY 1-7 MENUS

    thanks 🙂 !!

    • The Mayne Design

      Hi there, please can you give me a link to your website?  Thanks!

  • T Miller

    Here it is:

    This is the page I want displayed:
    http://moresleep.info/test/#featured I don’t want the ALL menu tag nor everything in that category to be displayed at all

    But when you go to: http://moresleep.info/test
    it of course displays ALL

    I tried fiddling with theme-functions.php (includes/theme-functions.php) without success …

    Thanks 🙂

    • The Mayne Design

      Hi T,

      Oh that’s easy and on my list of tweaks that I need to add to the main page 🙂 so here you go –

      Hide Portfolio Categories

      #portfolio #port-tags .port-cat{ display:none; }

      I have tested on your site and it works perfectly.

      Cheers!

  • T Miller

    Thanks, but that’s not exactly what I wanted.

    Without that code above, you see the menu reads:
    ALL BLUE FEATURED GREEN ORANGE RED

    I still want the menu but wish for it to read
    FEATURED BLUE GREEN ORANGE RED

    with only Featured selections to be visible on the front page. They then have the option of selecting other menus 🙂

    Thanks again 🙂

    • The Mayne Design

      Hi T – thank you for the clarification.  That’s not going to be CSS change — you’re going to have to rewrite the page template and introduce new lookup functionality to do dynamically.  I guess you could hardcode the initial menu into the template then conditionally hide it as you drill down.  Would be messy though and would need to be manually updated if a category was added/deleted.

      • T Miller

        Ok well thanks for taking a look … 🙂 Most appreciated. thank you 🙂

  • The Mayne Design

    Just added another 20 Tweaks to this page!

  • Kitsch

    I’m having trouble reducing the padding between the Slider and the Primary Navigation menu in the Business Template… don’t see a fix here, or on the Poodle Press site.

    • The Mayne Design

      Hi there, please can you give me a link to the website you are having problems with?  Many thanks!

  • Cory Huff

    Any ideas on how to change the size of the thumb nails? I changed them in loop-portfolio.php and then regenerated thumbnails, didn’t change.

    • The Mayne Design

      Hi Cory,

      The Thumbnail sizes are changed via the Canvas / Theme Options / Dynamic Images / Thumbnail Settings dialogue box.

      My resizer settings are:
      WP Post Thumbnail is on
      WP Post Thumbnail Dynamic Image Resizing is on
      WP Post Thumbnail Hard Crop is off
      TimThumb is on
      Automatic Image Thumbnail is off

      Let me know if that helps!

      Thanks.

  • Cory Huff

    Hey thanks, I appreciate this, but I should have been more clear. I’m looking for the thumb nails on Canvas’ Portfolio page template. Here’s an example: http://www.theabundantartist.net/paulabrett/portfolio/#installations

    I’d like those thumb nails to be square instead of rectangle.

    • The Mayne Design

      Hi Cory,

      Thank you for the clarification, you’ll need,
      Canvas / Theme Options / Portfolio Settings, then set the Portfolio Thumbnail dimensions.

  • Cory Huff

    Thanks again. The Portfolio Settings option wasn’t appearing in the Theme Options menu. Since you told me it was there, I started clicking around and when I clicked the little + sign next to the Save All Changes button, it showed me the Portfolio options.

    • The Mayne Design

      Thanks for getting back to me and glad it’s sorted!

  • T Miller

    Is there a way I can display tags on individual portfolio pages please?

    • The Mayne Design

      Hi, not through CSS, but there is some code in the Woo online documentation that allows for multiple instances of Portfolio to be set up.

      • T Miller

        thanks 🙂

  • Reginald

    I have “previous” “next” page links on the bottom of my blog posts. See “social” page. Notice the first and last post. The first post has a link on the right “Zoo Atlanta” that which is under NEWS. On the last post the one on the left “Altanta Hawks player” links to a story on the news page as well.

    But the two posts in the middle link to other posts in the same category on the “Social” page.  How can i get the first and last posts to only pick up the posts on the social page? Thanks

    • The Mayne Design

      That’s not a CSS change … you could copy and customise the existing template for Blog to only pick up the Social category in the Navigation.

      • Reginald

        customize the existing template for Blog to only pick up the Social category in the Navigation. What is it that I should change in the blog template?

  • Nilesh

    Hi I am using a wordpress canvas theme, getting problem in IE10, all the menus are messed up and design get break please help me what to do.

    And I used the child theme.

    here the styl.css for child theme

    /*
    Theme Name: Canvas Child
    Theme URI: http://tattoobegonesf.com/
    Description: Child theme for the Canvas theme
    Author: Tattoobegonesf
    Author URI: http://tattoobegonesf.com/
    Template: canvas
    Version: 0.1.0
    */

    @import url(“../canvas/style.css”);

    Thank you in advance…

    • The Mayne Design

      Hi Nilesh, I suggest you comment-out the CSS in the custom.css to see if it resolves the IE10 issue.  If not, worth disabling any plugins you have until the menus return.  Then add elements one at a time until IE10 goes wrong 🙂

      • Nilesh

        thank you The Mayne Design You see the theme working fine in chrome and other browser but not in IE also if you hover courser on menu they appear…

        • The Mayne Design

          Yes, so you need to remove all your customisations and add them back one at a time until you find the one that’s causing the issue with IE10 🙂

  • Linad Bartolucci

    Doing a redesign using Canvas.  Have looked everywhere, but can’t find where I can increase the vertical height of the header.  Any suggestions?

    • The Mayne Design

      Hi Linad, what is the link of the website so I can take a look?  Tks!

      • The Mayne Design

        Thank you for the link you sent via Email.

        There are two problems, the first is that your logo is too wide at 1,000 pixels, and the second is that you are using it as a background image via the Canvas options so it’s being cropped at 960px and the current header height 🙂

        I’d suggest you resize it to 960px, and upload it as a logo, not a background image via the Canvas options.

        That’ll solve the issue!

        Thanks!

  • Mary

    How do you remove the gradient from the primary navigation menu?

    • The Mayne Design

      Hi Mary, can you give me a link to the site you wish to change? Is the gradient on ‘hover’ or there all of the time? Thanks!

      • Mary

        This is the site I’m developing: http://dev.npminc.com It’s there all the time.

      • Mary

        While you are at it, can you tell me the correct css to remove the page title from the home page only?  I’ve been trying all kinds of iterations of .home .title {display: none;}, but nothing is working!

        • The Mayne Design

          Hi Mary,

          .home .title {display:none;}

          Will hide the title on the homepage, but you may want to put a bit of padding in there.

          Afraid I can’t see a gradient to remove. A gradient goes from one colour to another colour.

  • Egis

    How to add post title above thumbnail on Homepage, categorie page?

    • The Mayne Design

      Hi Egis, the quickest way to do this is to swap the thumbnail/title php around in the template!

  • Thomas

    Hi there, thanyou for all the great tips, is there anyway to adjust the font size in the drop down menu in woo canvas theme?

    Thank you

    • The Mayne Design

      Hi Thomas,

      Try this:

      .sub-menu {
         font-size:150%;
      }
  • Thomas

    Thankyou, that worked put great! Do you know how to make the sub menu appear in front of the featured image instead of behind them – like you can see here boligmode.dk in the menu “belysning”?

    • The Mayne Design

      Hi there, if you look at their CSS, the z-index on the nav is set.

      .nav {
          z-index: 99;
      }

      There are some other z-index references which you may also need.

  • Thomas

    Thanks, should the z-index be set to af different value than 99?

    • The Mayne Design

      Hi Thomas – I just took a quick look at the CSS so couldn’t say, what is the link to the site you are having problems with?

  • Thomas

    Hi thankyou for your reply

    The site i am having problems with is the drop down menus on
    http://www.boligmode.dk/

    kind regards

    • The Mayne Design

      My apologies I thought you were asking how to put the submenu in-front of the featured image.

      It is working fine on IE/Firefox/Safari & Chrome on your website – I see the submenu in-front of the image 🙂

  • John Romaine

    Hey guys,
    I’m in the process of converting my custom CMS over to WP using Canvas, and it seems I have this annoying white space above the logo (in the header). How can I shrink the overall header size down?

    Screenshot here (still working locally)

    http://www.bringthedonuts.com/temp/space.gif

    • The Mayne Design

      Hi John,

      I’ll have to take a guess here as your site is not deployed.

      Can you try this?

      #header {
          padding-top: 0;
      }
  • John Romaine

    Sorry mate, you’re right, I’m still working locally.

    I managed to sort it out!

    Thank you so much for following up.

    I don’t suppose you know how to get rid of those “next”, “previous” related posts under the author bio do you?

    The ones that have the small arrows

    • The Mayne Design

      Hi John, I’ve got my author archives switched off on all my sites … can you send a screenshot if you are unable to send a link? Cheers.

  • John Romaine

    Here’s what I’m talking about…

    http://www.bringthedonuts.com/temp/mayne.gif

    Thanks.

    • The Mayne Design

      Thanks John. The best way to do this is to edit the theme template. I don’t have a site I can test this on but I reckon you’d need to tweak archive.php to get your desired output.

      • John Romaine

        Cheers mate.

        I’m going to hire someone on elance to help me finalise this project. There’s a few fiddly bits that need attention, and to be honest, I just want to go live and get it up!

        Thanks for getting back to me mate, appreciate it.

  • Linda Bartolucci

    Where do I change the options that appear in the POST FOOTER.  I got rid of AUTHOR, but still want to add more customization.

    • The Mayne Design

      Hi Linda, you can tweak this in the ‘Meta Manager’ section. Thanks.

      • Linda Bartolucci

        Sorry to be dense, but I can’t find the Meta Manager in my WP dashboard or under the Canvas Theme Options.  Can you tell me where to look?

        • The Mayne Design

          Hi Linda, no worries, it’s kind of hidden. If you expand the ‘Canvas’ submenu on the left, it’s in there!

  • Ron

    Hi – Wow.  What a great bunch of tips!  I am struggling to change the colors of the social media icons.  I think they are all being created via CSS, but even when I change the attribute in the styles.css file, it doesn’t change the color that is displayed.  I’m sure this is a simple fix, but I just can’t seem to sus it out!

    Thanks for any help!

    • The Mayne Design

      Hi Ron, you’ll need to edit the file located in canvas\images\ which is named ‘ico-subscribe-social.png’ with a graphics tool such as Photoshop.

      Hope that helps.

    • Ron

      Actually, I had stumbled on ico-subscribe, but it’s not where the images are being called from.  Now I’m thinking (since they are using FontAwesome) that the icons may actually be fonts….

      • The Mayne Design

        If they are FontAwesome – you can definitely change the colour 🙂

        Getting a handle to that text may be tricky though. What site and what page is impacted?

        • The Mayne Design

          Thanks for the link by email.

          Here’s an example of the code you need,

          #header .social a.twitter:before {
              background-color: #00ff00;
              color: #ff00ff;
          }

          Change twitter in the code for facebook, etc to tweak as required!

          Let me know if that works for you.

          • Ron

            Hi –

            Weird.  When I do this (and I tried editing this code before) the color attribute works.  I changed the center icon to blue or whatever.  However, the background-color call does not seem to work at all.  I really appreciate the help with this!!!

            I tried this in the custom.css file and the main style.css with no different result.

            Is it possible that some theme-specific color is over-riding this?

            Ron

          • The Mayne Design

            Hi Ron, I’ve tested on your site via doing an inline edit of custom.css, add an ‘!important’ to the background call and it’ll work perfectly 🙂

  • The Mayne Design

    I’ve added two more tweaks to this listing to customise existing shortcodes!

  • Bri

    Thanks for all the great tweaks. You guys are awesome!

    Is there a way to make the drop down menu text wider? Say, to tell it NOT to wrap the drop down menu text or at least increase the total characters so the text in the drop down doesn’t look like crap? Not the nav bar, the text hen you hover over the nav bar button. LOL, just trying to be clear.

    Thanks a bunch for any suggestions.

    Bri

    • The Mayne Design

      Hi Bri,

      This sets the min-width of the submenu to 200px.

      .sub-menu {
      min-width:200px;
      }

      Cheers

      • Bri

        Thanks a lot. That worked like a champ. You guys ROCK!

        Bri

  • Michael Smith

    Working on a mock-up site using Canvas 5.2.7 and a child theme.  I have Business Template set for my Home page and Boxed Layout enabled site-wide.  However, on my Home page I do not want the boxed frame as I want the background image to have impact on the home page.  I have tried a lot of ways to use custom CSS to not display the boxed frame on just the home page (.home), but nothing seems to work.  Your help would be greatly appreciated!

    Thanks,
    Michael Smith
    The WiredBean

    • Amanda Mayne

      Looking at your site seems you managed this? You may wish to centre the background image and set it as fixed?

  • Andrew

    Hi there,

    Thanks for all these hacks!

    I’m just wondering if it is possible to implement a slider into the header.

    I’d ideally like my page to flow:

    [ONE COLUMN WIDTH]
    Page title graphic
    Slider in which I can feature content
    [TWO COLUMN WIDTH]
    Blog on left, sidebar on right.

    Any ideas?
    THANKS!

    • Amanda Mayne

      Hi Andrew,

      Thank you for getting in contact.

      This isn’t a CSS Tweak – to do this you can use Canvas Hooks to move the slider up into the header area 🙂

      Hope that helps!

  • Gerardo

    this thread is awesome…

    Not sure if this has been asked… but is there a way to switch the main nav with the top menu… so that the main nave is above the logo…:??

    thanks

    • Amanda Mayne

      Gerardo, thanks for the question, best was to do this is to create a child theme then edit functions.php using hooks to change the order of the elements! Amanda

  • Casper Andersen

    Hello, when i try to add this to my Canvas CSS rules:

    #logo .site-title {display: none !important;}
    #logo .site-description {display: none !important;}

    The header is getting alot smaller, is there anyway to make the header have a “fixed sixe widthout ruining the reponsive design?

    • Amanda Mayne

      Hi Casper,

      Did you try Canvas CSS Tweak #4 to set the height of the header?

      Thanks,
      Amanda

  • T Miller

    Hi there, this site is great. Many thanks 🙂 🙂 Wondering how to display next post in the portfolio gallery

    Cheers 🙂

    • Amanda Mayne

      Hi, thanks for the question – I’ve solved this, basically set up the portfolio gallery, then manually include a couple of buttons as previous/next to that navigates to the next item in the gallery. It needs to be set up manually on each page and only takes a minute or so per page once the buttons are set up.

  • T Miller

    Too many to be all done manually ;(

    • Amanda Mayne

      The alternative is to use a plugin or get someone to change the code behind the portfolio gallery.

      I did a gallery of 12 or so earlier in the year and once the first one was done it only took 15 mins or so copying and pasting the buttons into the text-editor to set it up. The alternatives (plugin or changing the code) was way more expensive in time.

  • T Miller

    thanks 😉

  • Narender Singh

    Thanks for these nice modifications. I’ve been using canvas theme for over an year and its really so superb. Lots of functionality bundled into one single package 😀

  • waj

    looking for a couple of tweaks – both coming at the end of posts, namely

    – removing ‘read more…’
    and
    – removing ‘0 comments’

    any suggestions as to how to go about it ?

    • Amanda Mayne

      Hi, thank you for the question. You can edit these in the Meta Manager 🙂 Hope that helps.

  • […] Mayne Design published this extraordinarily useful set of 38 CSS tweaks for Canvas. Canvas is great. Canvas is a pain in the […]

  • Sean F.

    Great resource.  Do you know how to customize the color of info boxes?

    • Amanda Mayne

      Hi Sean – I do know how to customise the colour of the info boxes – can you give me an example of a page with a the box on as there are a few different styles – tks!

      • Sean F.

        What I’d like to be able to do is customize all of the regular “info” boxes to have a light blue color instead of the default grey color. 

        Here’s a post where I’ve got a couple info boxes.

        http://www.sleepinglikealog.com/mattress-reviews/sean-reviews-tempurpedic-cloud-luxe/

        Is it possible to turn the one that says “Further Reading” to a light blue color?  And then have all “info” boxes default to that blue color?

        • Amanda Mayne

          Hi Sean,

          The top info box can be set to the colour of your choice with this code,

          .woo-sc-box.info {
          background-color: #ffffff;
          }

          And the box below needs this code,

          .woo-sc-box.download {
              background-color: #ffffff;
          }

          Replace #ffffff with the colour of your choosing.

          Hope that helps!

          • Sean F.

            Thanks Amanda.  Unfortunately that doesn’t seem to be working for some reason.  I placed that in my custom css section to display #afd4eb, but it’s still the default light grey.  Any ideas?

          • Amanda Mayne

            Hi Sean, if you are using the custom css section you may need to add !important straight after the hex colour code. Hope that helps!

  • Sean F.

    Ah!  That worked!  Thank you so much, you are awesome!

    • Amanda Mayne

      Hi Sean – thanks for getting back to me and glad it helped! x

  • Kara

    Hi Steve – Thanks for the helpful Canvas CSS tweaks.  If you are using the boxed layout, can you tell me how to make the background color for the sidebar extend the full length of the page? The default sidebar background color stops when the sidebar content ends, but I want it to extend all the way to the end of the content container.  Do you have a CSS/hook hack to do this?  Fingers crossed that you do know!

    • Amanda Mayne

      Hi Kara – we don’t have a current tweak for that kind of change, but here’s a that ought to get you started. If we get time in later in the New Year we’ll take a look as this’d be a valuable tweak! Thank you for the question! Amanda 🙂

  • Kat

    Hi there, how do I reduce the space between each menu item on my primary menu. I want to do this so I can fit in more items and it stay on one line.

    • Amanda Mayne

      Hi Kat,

      Thank you for the question!

      This CSS should help – I can’t access the site you are referring to so it’s my best guess.

      The first piece of CSS sets the paddding on the left/right of each menu item.

      The second piece of CSS sets where the dropdown marker is positioned.

      ul.nav li a {
          padding-left: 0.5em !important;
          padding-right: 0.5em !important;
      }
      
      #navigation .nav li.parent > a:after {
          right: 0.8751em;
      }
      

      Let me know if that helps you?

      Many thanks,
      Amanda