Cappuccino
Cappuccino is a warm, tasty style for use with the Thesis WordPress theme. It possesses subtle textures and highlights that compliment all kinds of post styles and images.
Features
- Widgetised Multimedia Box and Footer
- Styles for multi-level dropdowns
- Unique in-post styles
- Custom archives template, listing posts by category
Cappuccino requires Thesis 1.6 or above.
Installation instructions
- Upload custom.css, custom_functions.php and the images directory to your Thesis custom folder
- Set to full-width framework in the Design Options
- Set colours; this can be done by inputting the colours into the Thesis Design Options page or by uncommenting the last section of CSS in custom.css
- To set the colours in custom.css remove the
/*and*/from before and after the section headed/* === COLOUR & FONT OVERRIDES === */at the end of the file. - To set the colours in the Design Options copy them from this screenshot or enter the following items under Fonts, Colors and More! (these are changes from the default, if you’ve changed some already it may look odd)
- Body (and content area)
- Site background color: F7F2F1
- Primary text color: 382622
- Primary link color: B59173
- Leave checked “Show interior layout borders”
- Nav Menu
- Link text color: 382622
- Link text hover color: 382622
- Current link text color: B59173
- Current parent link text color: B59173
- Link background color: F7F2F1
- Hover background color: F7F2F1
- Current background color: F7F2F1
- Current parent background color: FFFFFF
- Nav border width: 0
- Header
- Header text color: EEE5E4
- Tagline text color: EEE5E4
- Headlines
- Headlines text color: 382622
- Sub-headlines text color: 382622
- Bylines and Post Meta Data
- Bylines and Post Meta data text color: 543733
- Code
- Code text color: 382622
- Multimedia Box
- Text color: 382622
- Image box background color: FFFFFF
- Video box background color: FFFFFF
- Custom box background color: FFFFFF
- Sidebars
- Sidebars text color: 382622
- Sidebar headings size: 16pt
- Sidebar headings text color: 543733
- Footer
- Footer text color: 382622
- Body (and content area)
- To set the colours in custom.css remove the





{ 2 trackbacks }
{ 21 comments… read them below or add one }
Thanks, Kristarella. It’s awesome Thesis skin
Beautiful work Kristarella. Thanks for all the work you do with Thesis. This is inspiring.
Beautiful design Kristarella – thanks for sharing this!
Hi Kristarella…i noticed in the screenshot that you have a selector for a ’style demo’…I’m just wondering what this means, and how you did it? This makes me think that with a touch of a button the entire skin will change its appearance, as I have seen on other sites–true? If so, how did you effect this? I don’t need the technical answer, just a quick idea of how you did it. Or maybe I’m just plain wrong…either way, great work!
Steve — That’s correct. The select box posts a cookie and then I have a function that detects the cookie and applies the relevant stylesheet and custom_functions.php file.
Hi Kristarella…
I’m learning wordpress/thesis and love the look of the skin you designed. How do I access the footer “sidebar_4″ to remove or modify? (A newbie question I’m sure)
Scott — On line 73 of custom_functions.php you can change
add_action('thesis_hook_footer','custom_footer',1);to//add_action('thesis_hook_footer','custom_footer',1);. What that does is comment out the add_action line that adds the widgetised footer to the site, so that area won’t be there anymore. The widgetised area is still registered and will still be seen on the Widget admin page, but won’t be called in the theme. If you want to delete it all together you can deleteregister_sidebar( array( 'name' => 'Footer', 'before_widget' => '<li class="widget %2$s" id="%1$s">', 'after_widget' => '</li>', 'before_title' => '<h3>', 'after_title' => '</h3>' ) );at the very end of the file and
// === FOOTER === // // widgetise footer function custom_footer() { ?> <div id="footer_widgets" class="sidebar"> <ul class="sidebar_list"> <?php thesis_default_widget(4); ?> </ul> </div> <?php } add_action('thesis_hook_footer','custom_footer',1);from lines 62 to 73.
Amazingly helpful, thank you. You should be teaching a class on this.
Thank you, especially for the full-width header for 1.6! My question is, how do you add a logo and remove the text/tagline from the header in this case?
Francisco — You’re welcome! To remove the tagline uncheck the option to display it under Thesis Options > Display Options > Header
Hi Kris,
Thanks for putting this together.
With regards to Scotts answer, I can’t find the…
add_action(‘thesis_hook_footer’,'custom_footer’,1);
to change it to…
//add_action(‘thesis_hook_footer’,'custom_footer’,1);
Is it just me? ;-)
Mark
Mark — Perhaps I was looking at the Mini skin custom_functions.php file when I wrote that… try
add_action('thesis_hook_after_content_area','custom_footer',1);, other than that the instructions are reasonably similar, i.e., it’s in the section marked with// === FOOTER === //.Thanks for getting back so quick.
Ok I found the above mentioned (add_action(‘thesis_hook_after_content_area’,'custom_footer’,1);
I commented that out.
It removed the whole ‘fat’ footer rather than just the footer widget called ’sidebar 4′.
I noticed in the admin panel for ‘widgets’ you cant amend that ’sidebar 4′
Hopefully there is a simple answer to ammending/removing that widget in the footer without removing the footer entirely.
If this is a totally newb question, move me on and I’ll play around for a little.
Mark
Mark — Oh, I misunderstood. That blue widget is just a default widget, it will go away as soon as you add widgets to that area via the widgets panel in the dashboard. Or deselect the option to “show default widgets” under the sidebar settings on the Thesis Options page.
Ah wicked – Thanks again.
Thanks for the skins. I’ve purchased Thesis, and am licensed to remove the footer. I know very little about wigetized footers, and don’t want to mess up the custom functions.php file. How do I remove the “Get smart with the Thesis WordPress Theme from DIYthemes.” from the footer, and replace it with something very simple, like “Copyright Barry Stephenson, 2010-.”?
Thanks you very much.
Barry — Have a look at the DIYthemes Answers blog’s answer to that. Ta.
Hi Kristella:
I’m a newbie to the Thesis world and certainly to anything related to coding. I’ve started a website, purchased Thesis, and liked this skin. I’m trying to tweak it a little
1) I want to insert my own logo file to the left in the brown banner area. How do I do this? (if you want, take a look at my site, which is in its beginning stages, to see what I’m talking about: jkameroncarter.com). And
2) to the right in the brown banner area, I would like to add an image of myself, rather than having the picture as a gravatar under “About JKC?. How do I do this?
Depending on how involved this will get (for I don’t have much time for working on it), I may want to chat with you about doing some work for me to get my website in tip-top shape.
Jay — There’s two ways of doing these things: using CSS alone and using the images as background images or using custom_functions.php to add the images as HTML on the page. Given that you want to add two images and you currently don’t have any text in the header it’s simplest to use custom_functions.php. Paste the following in that file:
function custom_header() { echo '<img class="alignright" src="' . THESIS_CUSTOM_FOLDER . '/images/profile.jpg" alt="" />'; echo '<p id="logo"><img src="' . THESIS_CUSTOM_FOLDER . '/images/header.jpg" alt="jkameroncarter.com" /></p>'; } add_action('thesis_hook_header','custom_header');To see what all that code means I would really recommend checking out the Thesis tutorials on Tech for Luddites. They’re very recent and the posts about hooks and functions go through that stuff step by step. Of course, if you have follow-up questions feel free to ask.
The code assumes that the images are in the custom/images folder of the Thesis theme and they’re called “header.jpg” and “profile.jpg” and that they’re the correct size. Rename the files or in the code as needed. The class of “alignright” on the profile image should mean that goes straight to the right, but if not some extra CSS will be needed.
Hi Kristella. . . thanks for such a speedy response.
Well, I’ve made sure to upload both the logo image file, which is to go to the left (‘JKameronCarterLogo.png’), and the image file of me (‘blogimageprofile.png’), which is to go to the right–I’ve loaded them both to the Thesis/customs/image folder. Also, I’ve pasted in the code that you gave at the bottom of custom_functions.php. And, nothing yet. Any advice?
Jay — Try copying the code from my comment again (not from the email notification, if that’s where you copied it from). The characters are still encoded, which I have to do to be able to paste the code in a comment. So every place there should be a less than sign there is a character entity made up of “&”, “l”, “t” and “;”, similar for the greater than signs.