Lodestar Blog Posts block modifications

  • Unknown's avatar
    zengreenway · Member ·

    On my home page, Words panel, some of the Keep Reading links stay pink when moused over and some turn dark, unreadable blue. I’d rather they all turn a color of my choice when moused over. Is there CSS that can accomplish that? If not, I prefer the stay pink option to the unreadable blue.

    In the same Blog Posts blocks, I’d like to change the post title links to a color of my choice, if there is CSS for that. And I’d like to increase the font size of the block headers.

    Also, the title of one post (The Light is On) is not left aligned like the others. When I look at the underlying Page, it’s fine, but on the home page, it’s misaligned. Can this be corrected?

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

  • Unknown's avatar
    cuellin · Member ·

    Hi there!

    To change the link color when hovered, you can use this code. The color #A11B86 is the pink one that you are using, you can leave it as is, and the pink color won’t change when you hover the mouse or change it to the color of your choice.

    .more-link:hover {
  color: #A11B86;
}

    For the post title try this, changing “red” to the color you want

    .wpnbha.image-alignbehind .post-has-image .entry-title a {
  color: red;
}

    For the block header like Poetry or Essays, use

    .wpnbha .article-section-title {
  font-size: 1.5em;
}

    Instead of 1.5em you can use a size like 18px

    I’m not sure how to fix the last part.
    Hopefully, the code works for you, but let me know if something doesn’t work as intended.
    Cheers!

  • kokkieh · Staff ·

    Hi there,

    I’d rather they all turn a color of my choice when moused over. Is there CSS that can accomplish that?

    This code will change the hover color for links on your site:

    /* Change hover color for links */
a:hover {
	color: red;
}

    I’d like to change the post title links to a color of my choice, if there is CSS for that. And I’d like to increase the font size of the block headers.

    /* Change color for posts titles on front page */
.wpnbha.image-alignbehind .post-has-image h3.entry-title a {
	color: red;	
}

/* Change post title font size on front page */
.wpnbha article h3.entry-title {
	font-size: 2em;
}

    The default font size for the post titles is 1.6em, so you can play with that value until it looks right to you. You can also use a fixed px value or a percentage instead, but then the font size might not adjust automatically based on screen size.

    Also, the title of one post (The Light is On) is not left aligned like the others. When I look at the underlying Page, it’s fine, but on the home page, it’s misaligned. Can this be corrected?

    This is due to the content of the post itself.

    All the post titles are centered, but they’re centered relative to the width of the content contained in the post excerpt. Your top and bottom posts in that block are poems, so they have short lines, giving them a narrow width. And the title centered relative to that width makes it look as if the title is left-aligned instead.

    But the second post contains prose, and the excerpt runs the full width of the content area, making it more obvious that the title is being centered.

    But you can change it using CSS:

    /* left-align post titles on front page */
@media screen and (min-width: 30em) {
	.one-column .panel-content .wrap h3 {
		text-align: left;
	}
}

    This will only make it left-aligned on tablets and computers – on phone screens it looks better to keep the titles centered.

    However, you’ll notice this also makes the titles on your first blog posts block left-aligned, where it would perhaps look better centered. To prevent that, edit your Words page, click on the second blog posts block, click on Advanced in the settings sidebar, and add a new class – left-aligned-post-titles

    https://d.pr/i/uBiIRz

    Then use this code instead, and it should change only the second posts block titles to left-aligned, while keeping the first one’s titles centered:

    /* left-align post titles on front page */
@media screen and (min-width: 30em) {
	.one-column .panel-content .wrap h3.left-aligned-post-titles {
		text-align: left;
	}
}

    Also note that your plan gives you access to both live chat and direct email support for help with CSS questions like this. You can reach those at any time by clicking the Help icon that appears bottom-right on all the My Sites pages, or else via the direct link at https://wordpress.com/help/contact

  • Unknown's avatar
    zengreenway · Member ·

    Thank you both for your replies! I will give all this a shot. And if I have further questions, I will use the direct help. I appreciate your attention.

  • Unknown's avatar
    zengreenway · Member ·

    Want to report results, just in case others look at this topic. CSS for Blog Post header text size did not work. Neither did the left alignment modifications. Everything else was good and I thank you both again.

  • Unknown's avatar
    cuellin · Member ·

    You are welcome 😊, and thanks for updating us on the results, feedback is always helpful.
    Have a great one!

  • The topic ‘Lodestar Blog Posts block modifications’ is closed to new replies.