Twenty Eleven Customised Showcase Template

  • 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: (visible only to logged in users)

  • designsimply · Member ·

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

  • designsimply · Member ·

    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%;
}
  • designsimply · Member ·

    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";
}
  • 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 :)

  • 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!

  • designsimply · Member ·

    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;
}
  • designsimply · Member ·

    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;
}
  • designsimply · Member ·

    And also of the Showcase widget headers?

    .home .widget-title {
	font-size: 12px;
}
  • designsimply · Member ·

    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.

  • 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 :)

  • designsimply · Member ·

    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;
}
  • designsimply · Member ·

    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.

  • 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 :)

  • The topic ‘Twenty Eleven Customised Showcase Template’ is closed to new replies.