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!).
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.
Stops the site title from being displayed.
Stops the site description from being displayed.
Sets the height of the site logo to 100 pixels – useful if you have a small logo but using a background.
Reduces the padding between multiple column sections. Useful if you layer or stack COL layouts.
Increases the padding between the Post/Page Title and the body.
Styles the colour of the RSS icon on the menu and removes the ‘shadow’ effect from the image.
Style hover colour of the the RSS icon on the menu.
If you need to add some top padding to the RSS icon in the menu bar, here’s how to do it.
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");
}
No comments:
Post a Comment