Customizing the Yumblog Theme

  • Unknown's avatar
    stocksandbonbons · Member ·

    Hello,

    I’d like to customize the Yumblog theme in a few different ways, and am looking for some CSS. Specifically, I’d like to do the following:

    – Change the sub-categories of the “Browse Recipes” drop-down to display the posts in that category in grid-format. Ideally, the posts would display the featured image as a consistently-sized thumbnail, with the title of the post below. The posts would appear three across, with a maximum of 24 posts before linking to a next page of additional posts, similarly formatted;

    – Change the size of the header image to take up more of the title-area space (maybe double or triple its current size);

    – Change the “Tips from the Sue Chefs” page to format similarly to the other categories pages described above; and

    – Change the text font within the recipe-blocks to match the post text.

    Any assistance with any of the above would be much appreciated!

    The blog I need help with is: (visible only to logged in users)

  • staff-loquaciousloon · Staff ·

    Hi @stocksandbonbons!

    Change the sub-categories of the “Browse Recipes” drop-down to display the posts in that category in grid-format.

    Creating a grid on a theme that isn’t built with one isn’t ideal- it would involve a lot of detailed CSS, as you’d essentially be rewriting a large portion of the theme’s structure.

    If a grid is important, much better to look at themes that already include them. Here are a few examples:

    Kudos to @musicdoc1 for putting together such a nice list!

  • Unknown's avatar
    stocksandbonbons · Member ·

    Hi chad1008- thanks for your response! I’ve actually switched themes several times now trying to find one that works for the various things I want. I like the way my front page displays now, and would really only like to change themes to a grid-theme if I can still (through CSS or some other way) format the front page as is. So I guess with respect to that item, my question is whether it is easier to use a grid-theme and write CSS to have certain pages display as I currently have my homepage, or keep the current theme and write CSS to create grids. Would appreciate any thoughts!

  • staff-loquaciousloon · Staff ·

    Change the size of the header image to take up more of the title-area space (maybe double or triple its current size);

    I just took a look at the code for this part of the theme, and the image size is being set by the theme before the page loads, so directly changing the header image size won’t be possible with CSS… but…

    we can hide the existing image and override it!

    Try adding this snippet in the CSS panel of your Customizer:

    @media screen and (min-width: 1115px) {
#headimg {
  background: url('https://stocksandbonbons.files.wordpress.com/2016/12/title.png') top left no-repeat;
	background-size: contain;
	width: 800px;
	max-width: 100%;
}

#headimg img {
	visibility: hidden;
	padding-bottom: 60px
}
}

    It’s set up to only kick in on larger screens so it doesn’t displace the other header items on the right hand side of the screen on smaller devices.

  • staff-loquaciousloon · Staff ·

    Change the text font within the recipe-blocks to match the post text.

    This should do the trick:

    .jetpack-recipe, .recipe {
	font-family: inherit;
}

    :)

  • Unknown's avatar
    stocksandbonbons · Member ·

    Thanks chad1008- I added this to the CSS panel, but didn’t notice any change. Is there something else I need to do?

  • staff-loquaciousloon · Staff ·

    Was that the first part I sent, for the header image? It should be working now. It didn’t look like it was copied fully, so I dropped it into your CSS panel to make sure it was functional :)

  • Unknown's avatar
    stocksandbonbons · Member ·

    Thank you!! Those changes look great.

  • staff-loquaciousloon · Staff ·

    Happy to help! :)

  • Unknown's avatar
    stocksandbonbons · Member ·

    Thanks again Chad1008- do you have thoughts on the couple of remaining questions I noted above, namely:

    – Change the sub-categories of the “Browse Recipes” drop-down to display the posts in that category in grid-format; —– o I guess with respect to that item, my question is whether it is easier to use a grid-theme and write CSS to have certain pages display as I currently have my homepage, or keep the current theme and write CSS to create grids.

    – Change the “Tips from the Sue Chefs” page to format similarly to the other categories pages described above.

    Thanks!

  • staff-loquaciousloon · Staff ·

    Hm. grids can be challenging – generally adding (or removing) a grid isn’t recommended – there’s a lot of code involved in making that kind of conversion look good.

    For example, the following CSS:

    @media screen and (min-width: 1020px) {
  .archive article {
      width: 48%;
      float: left;
      padding-left: 2%;
      height: 380px;
  }
  .archive .entry-content,
  .archive .meta {
	    display: none;
}

    Will turn your archive pages into a two column grid on larger screens – but it doesn’t handle posts without featured images, or with longer/shorter titles too well. That’s where grids get tricky :)

    This kind of restructuring would likely work best on a self hosted WordPress site, where you could create a custom page template, or hire a designer to help set one up.

    I’m not sure how familiar you are with the two different kinds of WordPress – This is the single best article I’ve ever seen on the differences: https://dailypost.wordpress.com/2013/11/14/com-or-org/ :)

  • Unknown's avatar
    stocksandbonbons · Member ·

    That makes sense. I know you provided a list of themes that work well for grids earlier- I assume there aren’t themes that allow both grid and non-grid formats?

    Just so I can see what this looks like, how would I go about applying the CSS from your last response to the various categories pages I have set up now?

    Thanks!

  • staff-loquaciousloon · Staff ·

    I assume there aren’t themes that allow both grid and non-grid formats?

    Some themes will have grids in different places – like a grid on the home page but not on archive/category pages. Others, like Dyad for example, will use the same grid styles on any page displaying multiple posts.

    Two ways to get a good feel for the theme:

    1. pull up the demo site of a theme you’re considering – open the blog page on the demo, and find the category links. That way you can see how the category pages will look.

    2. Try the theme on your own site. WordPress.com/design (My Site > Themes) will let you Try and Customize a theme before you activate it – you can use that to see your own site wearing the new theme in the Customizer :)

    Just so I can see what this looks like, how would I go about applying the CSS from your last response to the various categories pages I have set up now?

    If you copy the code I shared previously, you can paste it into the CSS panel of your Customizer (use the Customize button next to Themes in the My Site menu).

    Try loading a category like your holiday recipes that has multiple items. If you enter the code and then change pages, but don’t see the columns, try changing the code to refresh it – just add a blank line at the end to trigger the CSS to re-load in the Customizer.

  • Unknown's avatar
    stocksandbonbons · Member ·

    Hmm, I tried adding the CSS but didn’t see any changes. Also tried the blank-line trick, that didn’t seem to change anything either.

  • staff-loquaciousloon · Staff ·

    If you’d like, you can apply the CSS and save it, then I’ll take a look directly – I do see you’ve switched themes since your last message though :)

    Let me know if you’d like me to reactivate Yumblog so I can take a peek!

  • The topic ‘Customizing the Yumblog Theme’ is closed to new replies.