Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Twenty Eleven Customised Showcase Template

  1. isabelashdown
    Member

    I've just changed my homepage to Showcase Template. This is great - gives a more magazine feel and highlights recent blog posts below the homepage. A couple of questions:

    1) I currently use CSS to customise the background colour. This colour appears throughout my site, but has disappeared on my homepage now I've introduced Showcase. Any tips on how to change the colour to match the rest of the site?

    2) The blog posts on the bottom half of the page all appear shunted to the right hand side, creating a big blank margin to the left. Any idea why, or how I might adjust this to make it look less lopsided?

    3) The blog post section of the page is headed 'Recent Posts'. How would I go about customising these words?

    Any help greatly appreciated! Thanks, Isabel (at http://isabelashdown.com )

    The blog I need help with is isabelashdown.com.

  2. designsimply
    Happiness Engineer

    1) I currently use CSS to customise the background colour. This colour appears throughout my site, but has disappeared on my homepage now I've introduced Showcase. Any tips on how to change the colour to match the rest of the site?

    Using the built in colors tools such as Appearance → Background or Appearance → Custom Design → CSS Colors are the best first choices for editing the background color (it looks like you may have already figured this out).

  3. designsimply
    Happiness Engineer

    2) The blog posts on the bottom half of the page all appear shunted to the right hand side, creating a big blank margin to the left. Any idea why, or how I might adjust this to make it look less lopsided?

    The space you're seeing is designed to hold whatever you put in the "Showcase Sidebar" section on your Appearance → Widgets page. So if you want to add sidebar content there, the widgets page is the place to do it.

    If you would prefer to use CSS to expand the recent posts section of the showcase template to make it wider, here is an example you can start with by adding it to your Appearance → Custom Design → CSS editor:

    .page-template-showcase-php section.recent-posts {
	margin: 0;
	width: 100%;
}

  4. designsimply
    Happiness Engineer

    3) The blog post section of the page is headed 'Recent Posts'. How would I go about customising these words?

    CSS can be used to change the look of elements that already exist on the page, and changing out text usually requires editing the HTML which isn't something the WordPress.com Custom Design upgrade offers. You can easily add to the text with CSS. Here is an example:

    .showcase-heading:after {
	content: " About Writing";
}

  5. isabelashdown
    Member

    Hi designsimply

    Thanks so much. On each of the questions:

    1) Yes, I'm OK with the CSS custom colours throughout the main site, but having just introduced Showcase template, it has defaulted to a white background for the static area (introduction) of my homepage. I wondered if it's possible to customise this area to match the rest of my site?

    2) Showcase widgets - brilliant - sorted!

    3) Thanks for this - I'll give it a go. Is it also possible to change the font size of the Showcase heading? And also of the Showcase widget headers?

    Big thanks for all your help :)

  6. isabelashdown
    Member

    Hi - quick update - I just tried the CSS text addition with the code you've suggested for 3) and whilst it does add my desired new title, the old title still remains so I end up with 'Recent Posts Isabel's Blog' instead of just 'Isabel's Blog'. Any ideas? Sorry, I'm still a novice in the world of CSS!

  7. designsimply
    Happiness Engineer

    1) Yes, I'm OK with the CSS custom colours throughout the main site, but having just introduced Showcase template, it has defaulted to a white background for the static area (introduction) of my homepage. I wondered if it's possible to customise this area to match the rest of my site?

    Give this a try:

    article.intro {
	background: transparent;
}

  8. designsimply
    Happiness Engineer

    Is it also possible to change the font size of the Showcase heading?

    Do you mean the one under "Recent Posts" that says, "Good Intentions for 2013: reading, writing and learning to say ‘no’ …" ?

    If so, try adding this:

    .home .entry-title {
	font-size: 20px;
}

  9. designsimply
    Happiness Engineer

    And also of the Showcase widget headers?

    .home .widget-title {
	font-size: 12px;
}

  10. designsimply
    Happiness Engineer

    I just tried the CSS text addition with the code you've suggested for 3) and whilst it does add my desired new title, the old title still remains so I end up with 'Recent Posts Isabel's Blog' instead of just 'Isabel's Blog'. Any ideas?

    Sorry I wasn't more clear. That's correct, you can add text with CSS but you can't always change existing text.

  11. isabelashdown
    Member

    Yay - showcase background colour and widget font size changed - thanks so much!

    OK, I understand it's not always possible to change the text.

    What I mean by Showcase Heading is actually the bit that says 'Recent Posts' - is it possible to change this font size, as it now looks too small in contrast to my widget headers? http://isabelashdown.com/

    One final question - I've managed to change my follow button to a nice big green button on my sidebars and at the foot of each page. It works on every page footer except for the homepage - any idea why?

    Many thanks for your brilliant help :)

  12. designsimply
    Happiness Engineer

    What I mean by Showcase Heading is actually the bit that says 'Recent Posts' - is it possible to change this font size, as it now looks too small in contrast to my widget headers? http://isabelashdown.com/

    Try this to make it match the widget titles:

    h1.showcase-heading {
	font-size: 14px;
}

  13. designsimply
    Happiness Engineer

    I've managed to change my follow button to a nice big green button on my sidebars and at the foot of each page. It works on every page footer except for the homepage - any idea why

    The follow button at http://isabelashdown.com/ looks big and green to me. :) It looks like you got it working.

  14. isabelashdown
    Member

    Ref the follow button, I removed it from the footer area in the end, and the sidebar buttons are nice and big and green as you saw.

    And the showcase header font size - now sorted thanks to your advice above - thank you! You're a star :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags