Ixion Theme Help

  • Unknown's avatar
    rthaw31 · Member ·

    Hi,

    I’m looking for some small edits on this blog:

    https://allball2017.wordpress.com

    1) Is there a way to add text in between the header image & featured content? Ex. We want to add the words ‘Basketball’, ‘Baseball’ & ‘Football’ in between the header & featured images.

    2) Is there a way to hide a specific post from the recent posts section below the featured images? Ex. We want to hide ‘Baseball’s Top Dogs’ as we are using this as the header image content.

    3) Is there a way to move a featured image on a specific blog post from above the title & excerpt to the left side of it? We ideally want to use smaller square images to the left of each post.

    4) On a specific blog post, ex:

    Kings of the Mid-Major

    Is there a way to remove the ‘Leave a Reply’ wording & box? Also, can we remove the buttons showing the previous & next posts?

    Thank you!

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

  • Unknown's avatar
    rthaw31 · Member ·

    Update:

    I was able to figure out some of these, but still looking for help on:

    2) Is there a way to hide a specific post from the recent posts section below the featured images? Ex. We want to hide ‘Baseball’s Top Dogs’ as we are using this as the header image content.

    3) I was able to move the excerpt to the right of the images, title & date. Is there now a way to move the post title & date above the image rather than below?

    Also, is there a way to horizontally center the excerpt text?

    4) I figured out how to remove the ‘Leave a Reply’ wording & box, but we actually decided we want that comment box, but to show below the footer widgets. Is there a way to do that?

    Also, we still want to remove the buttons showing the previous & next posts.

    Kings of the Mid-Major

    And one new one:

    5) Is there a way to use separate images for the featured box on the Home screen vs. on a tagged menu screen?

    For example, the article above ‘Kings of the Mid-Major’ is using an image with ratio of 1.3:1 to fit nicely in the featured image box on the Home screen. However, on this page:

    https://allball2017.wordpress.com/tag/basketball/

    The image doesn’t fit in with the rest, and we’d like to use one that stretches more horizontally across the screen.

    Thank you!

  • staff-loquaciousloon · Staff ·

    Hi there!

    Looks we have a few things to work through here, so I’ll reply to them one at a time.

    In the future, it’s best to keep your threads limited to one or two closely related questions, and open separate topics for different things. Keeps it all more organized :)

    2) Is there a way to hide a specific post from the recent posts section below the featured images? Ex. We want to hide ‘Baseball’s Top Dogs’ as we are using this as the header image content

    You can use a bit of Custom CSS to hide a specific post if needed, like so:

    .home #post-835 {
    display: none;
}

    For this to work for other posts, you would need to use the post’s ID number. This page describes finding a Page Id number, and posts work the same way :)

  • staff-loquaciousloon · Staff ·

    3) I was able to move the excerpt to the right of the images, title & date. Is there now a way to move the post title & date above the image rather than below?

    Hm. This probably won’t work, because the images can sometimes be different heights, and you’d need to account for different screen sizes – so you’d need to write a lot of CSS to make it work reliably, it would limit your image options, and you’d potentially need to write special CSS styles for certain posts (and those posts would need multiple styles to account for different screen sizes)

    Also, is there a way to horizontally center the excerpt text?

    Yep! :)

    .home #primary .entry-content {
    text-align: center;
}

    Should do the trick, and not impact other areas of the site.

  • staff-loquaciousloon · Staff ·

    4) I figured out how to remove the ‘Leave a Reply’ wording & box, but we actually decided we want that comment box, but to show below the footer widgets. Is there a way to do that?

    This is another one where the length of the post will matter, and the width of the screen, since that effects how tall the post is on the screen – plus factoring in the varied length of the comments that could be left make this something CSS won’t really be well suited to do.

    Also, we still want to remove the buttons showing the previous & next posts.

    This one we can do!

    .post-navigation {
    display: none;
}
  • staff-loquaciousloon · Staff ·

    5) Is there a way to use separate images for the featured box on the Home screen vs. on a tagged menu screen?
    For example, the article above ‘Kings of the Mid-Major’ is using an image with ratio of 1.3:1 to fit nicely in the featured image box on the Home screen.

    You can’t (easily) use a different image, no – I’d suggest using a larger version of the image you have now.

    You hit the nail on the head when you mentioned aspect ratios – using a larger copy of the image with the same aspect ratio you have now should satisfy both views: The right ratio for the home page, and then wide enough for the tag page.

    If that won’t work, you could try some post-specific CSS like this:

    #featured-content #post-1242 {
    background: url(https://allball2017.files.wordpress.com/2017/01/21571_cooper_rush_coverf.jpg);
    background-size: cover;
}

#featured-content #post-1242 .post-thumbnail {
    display: none;
}

    I used the URL of a random image from your site – I realize now that I put a football player on the basketball block, but I’m sure you’ll forgive me ;)

  • Unknown's avatar
    rthaw31 · Member ·

    Thank you Chad, this is great!!

  • Unknown's avatar
    rthaw31 · Member ·

    Hi Chad,

    For this last recommendation:

    #featured-content #post-1242 {
    background: url(https://allball2017.files.wordpress.com/2017/01/21571_cooper_rush_coverf.jpg);
    background-size: cover;
    }

    #featured-content #post-1242 .post-thumbnail {
    display: none;
    }

    It’s working great! However, it removed the shadow component of the featured image on the Home Screen. How can we get that back?

    Thanks again!

  • staff-loquaciousloon · Staff ·

    I see what you mean! We’re applying the image to a different layer, so the opacity trick doesn’t kick in anymore.

    I tried moving things around a bit to get the existing opacity to work, but then I ran into aspect ratio images again. Full circle :)

    Ultimately, I wound up creating my own opacity on top of our new image instead. Try swapping this CSS in (it’s a little more involved, but it should work)

    #featured-content #post-1242 {
	background: url('https://allball2017.files.wordpress.com/2017/02/przemek-karnowski-ncaa-basketball-ncaa-tournament-south-regional-ucla-vs-gonzaga1-590x9001.jpg?w=1462');
	background-size: cover;
}

#featured-content #post-1242:after {
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background: #192930;
	top: 0;
	left: 0;
	position: absolute;
	opacity: .6;
	transition: all .3s ease;
}

#featured-content #post-1242:hover:after {
	opacity: .8
}

#featured-content #post-1242 .post-thumbnail {
	display: none;
}

    You’ll probably also want to add:

    z-index: 2;
	position: relative;

    to the style that creates the word “Basketball” so it remains on top of the overlay :)

  • Unknown's avatar
    rthaw31 · Member ·

    Hi Chad,

    This worked great for the first 2, but when I did it for the third featured content box, now all the featured content boxes are displaying very strange (only showing a sliver of the image with all the wording jumbled on top).

    Here is the CSS I am using for all 3:

    #featured-content #post-1242 {
    background: url(‘https://allball2017.files.wordpress.com/2017/02/przemek-karnowski-ncaa-basketball-ncaa-tournament-south-regional-ucla-vs-gonzaga1-590×9001.jpg?w=1462’);
    background-size: cover;
    }

    #featured-content #post-1242:after {
    display: block;
    content: “”;
    width: 100%;
    height: 100%;
    background: #192930;
    top: 0;
    left: 0;
    position: absolute;
    opacity: .6;
    transition: all .3s ease;
    }

    #featured-content #post-1242:hover:after {
    opacity: .8;
    }

    #featured-content #post-1242 .post-thumbnail {
    display: none;
    }

    #featured-content #post-645 {
    background: url(‘https://i0.wp.com/blogimages.thescore.com/djf/files/2013/05/edwinparrot.jpg’);
    background-size: cover;
    }

    #featured-content #post-645:after {
    display: block;
    content: “”;
    width: 100%;
    height: 100%;
    background: #192930;
    top: 0;
    left: 0;
    position: absolute;
    opacity: .6;
    transition: all .3s ease;
    }

    #featured-content #post-645:hover:after {
    opacity: .8;
    }

    #featured-content #post-645 .post-thumbnail {
    display: none;
    }

    #featured-content #post-266 {
    background: url(‘https://allball2017.files.wordpress.com/2017/01/the-brock-lobster.jpg’);
    background-size: cover;
    }

    #featured-content #post-266:after {
    display: block;
    content: “”;
    width: 100%;
    height: 100%;
    background: #192930;
    top: 0;
    left: 0;
    position: absolute;
    opacity: .6;
    transition: all .3s ease;
    }

    #featured-content #post-266:hover:after {
    opacity: .8;
    }

    #featured-content #post-266 .post-thumbnail {
    display: none;
    }

    Any ideas?

    Thank you for all your help!!

  • staff-loquaciousloon · Staff ·

    Ah. It was the

    display: none

    Once all three images had that, the images went away and there was nothing to keep the row’s height intact.

    Instead, we can use

    visibility: hidden

    It hides the image, but doesn’t actually remove it from the flow of the page.

    I was testing it out so I saved it in your Custom CSS – how does it look?

  • Unknown's avatar
    rthaw31 · Member ·

    Wonderful!!

    Thank you very much Chad, you’ve been such a big help!

    I do have some more questions on other aspect of the site, but I will start a separate thread so people can more easily search and track those topics.

  • staff-loquaciousloon · Staff ·

    You’re welcome! :)

  • Unknown's avatar
    kto4 · Member ·

    Can the Ixion theme be updated so that the header image includes the designated alt text?

  • staff-loquaciousloon · Staff ·

    Hi @kto4!

    The empty alt tag on Ixion’s header is actually intentional :)

    The alt text comes in handy if the image isn’t able to be displayed, but it also gets used by assistive technology like screen readers. Because Ixion’s header is decorative (the important data is the title and tagline on top of it) the empty alt tag tells the screen reader that it can be safely skipped.

  • Unknown's avatar
    kto4 · Member ·

    Thanks for the response, staff-loquaciousloon! I ask because I’m using a creative commons licensed photo which requires attribution and had hoped to be able to include that in the alt text.

  • staff-loquaciousloon · Staff ·

    Ah, I see – the alt tag on the header will not show that, no. Perhaps you could include it in a note on a different page?

  • Unknown's avatar
    fixrestorationstudio · Member ·

    Hey Chad,

    Going back to one of the questions at the top. Once the blog posts are individually removed from the homepage, how to we get rid of the “Recent posts” “more posts” and the large blank area where the blogs used to be? I;ve asked this in a separate forum, but it was not as active as this one, so I didnt get a reply!

  • staff-loquaciousloon · Staff ·

    Hi @fixrestorationstudio!

    It sounds like you want to remove the entire Recent Posts section, is that correct?

    If so, the only way to remove it when your site is using the homepage template would be with CSS, leaving the blank area you’ve described. You could also remove the sidebar widget you have, to eliminate that blank space, but it looks like your widget is set up only to show on your homepage, so I’m not sure if that’s what you’d want to do?

    You can try this CSS, and removing the widget to see if that’s the looks you’re going for:

    .home .site-main {
	display: none
}

.front-page-wrapper {
	margin-bottom: 0;
}

    Since you have a Premium Plan or Business Plan, you can add that under My Site > Customize > CSS.

    For the posts to appear on a separate page, you’ll want to select a Posts Page under My Site > Customize > Static Front Page.

    Then you can use My Site > Customize > Menus to make sure the “Blog” link is pointing to the page you’ve selected, and not a different part of your site :)

    Let me know how that works out :)

  • Unknown's avatar
    fixrestorationstudio · Member ·

    Chad – This worked! The only reason I had the widget was to try and make the page look a little more even, since I couldn’t get rid of the blog posts. However, I’ve grown to like the widget a little. Is there a way to put it on the main blog page only?

1 2
  • The topic ‘Ixion Theme Help’ is closed to new replies.