Ixion Theme – Add & Customize wording above featured content boxes

  • Unknown's avatar
    rthaw31 · Member ·

    Hi,

    We’ve received some help in adding wording above the featured images on this blog, but we’re huge CSS novices and are wondering if it’s possible to separate the wording from the featured content boxes, to show above, for example on the white space with black text (and how to modify the font size).

    Ex. We have the words: “Basketball”, “Baseball” & “Football” above the 3 featured content boxes, and want those words to show above the featured content boxes (they currently look connected) with a different background color (ex. white) and text color (ex. black).

    Also, is it possible to have these words be clickable to a specific tagged page on the site? Ex. Basketball would click to this page:

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

    Thank you for the help, this is truly an amazing forum!

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

  • staff-loquaciousloon · Staff ·

    Hi @rthaw31! :)

    Short answer- yes on the positioning above the photos, but a no go on making them clickable.

    Here’s a modified version of the CSS you’ve used for the word “Basketball”:

    .featured-content article:nth-child(1):before {
    color: #000;
    content: 'Basketball';
    text-transform: uppercase;
    z-index: 2;
    position: relative;
    top: -24px;
}

    I changed the color to black, so it wasn’t white on white, then I added top: -24 to shift it up above the image.

    Sadly, a clickable link would need to come from HTML, not CSS, so we can’t make them clickable.

  • Unknown's avatar
    rthaw31 · Member ·

    Thanks Chad, again this worked perfectly!

    What can we add to the CSS to increase the text size of the text above the featured content boxes?

    On another note, we increased the text size of headings from ‘Regular’ to ‘Large’, which we like for the post headings, but the text size on the individual featured content boxes (the ones we just modified the wording above) is now too big and running off the box on some.

    How can we then decrease the text size of the text on the featured content boxes, while not affecting the size of the other post headings?

    Thanks again!

  • Unknown's avatar
    rthaw31 · Member ·

    Hi Chad,

    One more question :)

    We changed the ‘Basketball’ featured content box to an older article, and now it is showing all the way to right (because I think it orders the blog posts in order of date created). However, now each box has the wrong header above it. I can change the wording each time we want to modify the featured content, but I’d rather be able to control where each featured content post shows.

    In this CSS:

    #featured-content #post-19 {
    background: url(‘https://allball2017.files.wordpress.com/2017/01/frank-mason.jpg?w=712’);
    background-size: cover;
    }

    #featured-content #post-19: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-19:hover:after {
    opacity: .8;
    }

    #featured-content #post-19 .post-thumbnail {
    visibility: hidden;
    }

    Is there something we can add to make sure it shows to the left (i.e.) first featured content box?

    Thanks!

  • staff-loquaciousloon · Staff ·

    Hey again @rthaw31

    I noticed that title issue as well while I was looking at your other thread!

    This will decrease the font size in the featured content area only:

    .wf-active .featured-content .hentry .entry-title {
    font-size: 23px;
}

    The order of the posts will be a little harder. I did have a different idea though, that should allow you to make sure the right title is used, even if it’s not in the right order.

    This will involve replacing the styles for the titles you have now with the following:

    .featured-content article:before {
	color: #000;
	text-transform: uppercase;
	z-index: 2;
	position: relative;
	top: -29px;
	font-size: 20px
}

.featured-content article.category-baseball:before {
	content: 'Baseball';
}

.featured-content article.category-football:before {
	content: 'Football';
}

.featured-content article.category-basketball:before {
	content: 'Basketball';
}

    Basically, since the post category appears in the HTML, we can target them and set the content that way. Just don’t put a featured post under two of these categories at once.

    Example, if you had a featured post categorized as Baseball and Basketball, it would get the Basketball title – because even though both rules apply, the Basketball style comes last, so it wins.

    This change also increases the font size a bit, and adjusts the positioning accordingly (the top value).

    If you want it larger, try increasing the font size, and then using this to make more space:

    .header-overlay {
    margin-bottom: 2em;
}

    To make even more room, bump that up a little at a time (2.1em, 2.2em, etc).

    Long post, sorry – let me know if you have any questions :)

  • Unknown's avatar
    rthaw31 · Member ·

    Thanks Chad this is working great!

    When I make the text above the featured content too big though ex. 30px, it starts to run into the image. Is there a way I can move the text up above the image as I give more space below the Header content per these instructions:

    .header-overlay {
    margin-bottom: 2em;
    }

    To make even more room, bump that up a little at a time (2.1em, 2.2em, etc).

  • staff-loquaciousloon · Staff ·

    Yep! Decrease this number:

    top: -29px;

    If, for example, you change that to -30 or -31, the text will move up a little higher. The top value tells the browser how far below the top of the containing element the text should be, so a negative number moves it above :)

  • Unknown's avatar
    cthaw24 · Member ·

    Awesome, thank you!

  • staff-loquaciousloon · Staff ·

    You’re welcome!

  • The topic ‘Ixion Theme – Add & Customize wording above featured content boxes’ is closed to new replies.