Need help? Check out our Support site, then


Spun Theme - customizing static front page

  1. Hello, I would like to customize a few things on my static front page:

    1. Remove the "Home" page title
    2. Decrease the space between the menu and the page content
    3. Remove the "Like" button
    4. Decrease the space between the page content and the widget footer
    5. Decrease the space between the widget footer and the "Create a free website..."

    Thank you in advance!

    The blog I need help with is busygirlshopping.com.

  2. 1. Remove the "Home" page title

    Looks like you already figured out how to do this by creating a custom menu.

    3. Remove the "Like" button

    Looks like you already turned off Likes under Settings > Sharing. Are you still seeing a Like button anywhere it shouldn't be?

    For your spacing questions, did you still need any help? I see that you've already added some custom CSS so it looks like you're getting the hang of it.

  3. Thank you kathrynwp! I did manage to piece together those updates. And I am going to live with the spacing for now. I actually have two more questions - let me know if I need to create a new post - but:

    1. Is it possible to remove the side navigation arrows on Posts?

    2. Is it possible to change the way the posts are displayed on one Category Archive page only? I love the Spun theme layout for all of my Categories except the "Blog" category. For that one, I would love a more traditional looking WordPress layout (like "Chunk" or "Ideation & Intent") - with the latest post on top, more of the title/content showing. Does my question make sense? I'm guessing this isn't possible, but just wanted to check.

    Thank you in advance!

  4. 1. Is it possible to remove the side navigation arrows on Posts?

    Sure. Single posts all have the class single. I used a browser inspector (Chrome has one built in) to see that the navigation arrows have the classes nav-previous and nav-next . This means we can hide both arrows with this custom CSS:

    .single .nav-previous, .single .nav-next {
    	display: none;
    }
  5. 2. Is it possible to change the way the posts are displayed on one Category Archive page only?

    Since each category archive has its own unique class, it's possible to target the content within that category page.

    For example, the Blog category page has the unique class category-blog - you can see it if you view the page source in the browser, on the body tag:

    <body class="archive category category-blog category-273 logged-in admin-bar no-customize-support mp6 typekit-enabled theme-menu-maximized highlander-enabled highlander-light">

    The types of changes you can make are limited to what can be done with CSS.

    If you view the browser source again, you can see what the Dillard's Dresses post looks like on your Blog category page:

    <article id="post-5407" class="post-5407 post type-post status-publish format-standard hentry category-blog">
    	<a href="http://busygirlshopping.com/2014/06/17/todays-finds-60-dillards-dresses/" title="Today’s Finds: 60+ Dillard’s Dresses" rel="bookmark"><img src="http://busygirlshopping.files.wordpress.com/2014/06/2014-06-11-dillards-008_fotor_collage.jpg?w=700" title="Today’s Finds: 60+ Dillard’s Dresses" class="attachment-home-post wp-post-image" /><span class="thumbnail-title">Today’s Finds: 60+ Dillard’s Dresses</span></a>
    </article><!-- #post-5407 -->

    You can see that the post title has the class thumbnail-title. If you wanted to display the thumbnail title on the blog category page for posts with a featured image (they're displayed by default for posts without a featured image, as you can see on the grey circle for Sale Alert 6/17), you could add this to your custom CSS:

    .category-blog .thumbnail-title {
    	display: block;
    }

    That'll overlay the title on all circles, even those with a featured image, like this:

    https://cloudup.com/cBvOU3srSxs

    Because this text is originally meant to go over a dark grey background, you may find it hard to read on lighter images, like the example above. You can modify the colour to make it more legibile, either on a per-thumbnail basis, or with a more general CSS rule.

    This should get you started - and here are some more resources for you to explore:

    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    http://dailypost.wordpress.com/2013/06/21/css-intro/

    http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    If CSS is new to you, here are some resources for learning more about it:

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags