Cappuccino

A warm full-width skin for the Thesis theme

A warm full-width skin for the Thesis theme

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.

Download skin View demo

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

{ 2 trackbacks }

New Thesis Skins from Kristarella
26 November 2009 at 11:59
.:: Take4u Site ::. » Blog Archive » 2 Free Thesis Skins by Kristarella
4 January 2010 at 11:56

{ 25 comments… read them below or add one }

1 Kate Mag 5 November 2009 at 16:01

Thanks, Kristarella. It’s awesome Thesis skin

2 Hal Brown 5 November 2009 at 23:51

Beautiful work Kristarella. Thanks for all the work you do with Thesis. This is inspiring.

3 Don Campbell 11 November 2009 at 03:21

Beautiful design Kristarella – thanks for sharing this!

4 Steve 20 November 2009 at 02:09

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!

5 kristarella 20 November 2009 at 08:22

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.

6 Scott 25 November 2009 at 08:05

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)

7 kristarella 26 November 2009 at 10:31

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 delete

register_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.

8 Scott 27 November 2009 at 05:41

Amazingly helpful, thank you. You should be teaching a class on this.

9 Francisco Rosales 28 November 2009 at 07:08

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?

10 kristarella 3 December 2009 at 15:43

Francisco — You’re welcome! To remove the tagline uncheck the option to display it under Thesis Options > Display Options > Header

11 Mark 17 December 2009 at 18:41

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

12 kristarella 17 December 2009 at 19:24

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 === //.

13 Mark 17 December 2009 at 20:21

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

14 kristarella 17 December 2009 at 20:27

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.

15 Mark 18 December 2009 at 04:45

Ah wicked – Thanks again.

16 Barry Stephenson 6 January 2010 at 14:14

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.

17 kristarella 6 January 2010 at 16:34

Barry — Have a look at the DIYthemes Answers blog’s answer to that. Ta.

18 Jay 8 February 2010 at 08:43

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.

19 kristarella 8 February 2010 at 21:00

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.

20 Jay 8 February 2010 at 22:05

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?

21 kristarella 9 February 2010 at 07:49

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.

22 Lawvol 16 February 2010 at 01:48

Kristarella:

How would I use the same custom footer, but in a fixed layout of 1000px wide for the container?

I am well-schooled in css and html, but am new to thesis. Any help would be greatly appreciated.

23 kristarella 16 February 2010 at 08:48

Lawvol — The footer should work in any layout, I believe I have the CSS using relative widths in the footer so that it scales for any layout arrangement. To change the width of Thesis you use the Design Options and change the column widths. You might need to experiment a bit to figure out exactly what makes up 1000px wide because the column width refers to the usable area in that column and doesn’t include the padding. In this skin the footer is “full-width” in the sense that it looks like it fills up the width of the browser, but if you take a look at my video on the full-width framework you will hopefull be able to see that you can easily make it appear only 1000px wide by removing the background from #footer_area and using a background on #footer_area .page instead.

24 rob 28 February 2010 at 08:07

ok my brain has froze, and I can not get the simplest thing done- using your skin, when you say to upload the folders to the thesis custom folder, do you use ftp or the cpanel? if so can you pleease let me know how i just need a refresh

Thanks

rob d

25 kristarella 28 February 2010 at 10:22

Rob — It can be done via FTP or cpanel. Whatever way you find easiest to transfer files to your server, use that to move the custom.css, custom_functions.php and images folder into Thesis’ custom folder. Not sure what else I can say about it that would help.

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Want to show PHP or XHTML code in your comment? Encode it first so that WordPress doesn't strip it away.

Read the comment policy.