Canard Questions

  • Unknown's avatar
    merilanie · Member ·

    Hi! Trying to customize some things.

    1. How do I decrease the space between posts? I’m currently using:

    body:not(.single) .content-area .format-gallery.has-post-thumbnail, body:not(.single)

    .archive .hentry, .blog .hentry, .search .hentry {
    padding-top: 25px;
    }

    .archive .hentry, .blog .hentry, .search .hentry {
    margin-bottom: 25px;
    }

    which seems to work on my homepage but not on my category pages.

    2. Can I change the title on my category page that reads Category: Music

    3. My search icon/magnifying glass changes to red when hovered on. Can I change the color?

    4. Can I remove the previous/next articles at the bottom of each post or change the format?

    Thanks!!

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

  • supernovia · Staff ·

    Hi there, I’m going to break this into separate responses to avoid confusion :D

    1. Have you tried this instead for your padding and margins? It’s a bit simpler:

    @media screen and (min-width: 600px) {
	.archive .hentry,
		.blog .hentry,
		.search .hentry {
		margin-bottom: 25px;
		padding-top: 25px;
	}
}

    That’ll get it on the search results pages as well, and it will avoid messing with your spacing on smaller devices.

  • supernovia · Staff ·

    2. There’s no simple way to change it from “Category: {Category Name}” though of course you can change the categories themselves if you’d like.

    You could write your own CSS (or have a developer do it) to hide the original title and make your own. For example:

    /* hide all category titles*/
.category h1.page-title {
    display: none;
}

/*add a new name for Music category - do for each one */
.category-music header.page-header:after {
    content: "Whatever You Want";
    font-size: 30px;
}

    We can’t generate that for you for all categories, but you’re welcome to do it on your own if you’d like.

  • supernovia · Staff ·

    3. My search icon/magnifying glass changes to red when hovered on. Can I change the color?

    Looks like you’ve got this one sorted :) If you don’t like red, that one’s better handled through Customize > Colors since red is all over your CSS otherwise.

  • supernovia · Staff ·

    4. Can I remove the previous/next articles at the bottom of each post or change the format?

    Yes! You can hide them, but I don’t recommend it; navigation can be nice.

    .post-navigation .nav-next, .post-navigation .nav-previous {
    display: none;
}

    If you want to change the format, you can do that instead. Try using “inspect element” to play with the options available or add your own to your liking. We have more information on that here:
    https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    Hoping this helps! I do want to clarify that in our forums we offer just some basic CSS support, but it sounds to me like once you’ve got a few pointers you’ll be good to go.

    Cheers!

  • Unknown's avatar
    merilanie · Member ·

    Thanks so much! I have a couple more questions…

    1. Is there any way to change the display size of my featured images on my individual posts as to note bleed to the side edges of the pages?

    2. Can you reduce the spacing above & below the new category titles?

  • Unknown's avatar
    merilanie · Member ·

    Also can I make it so that the posts listed on my homepage under the featured posts do not include the repeated featured posts?

  • Unknown's avatar
    merilanie · Member ·

    So far I’ve answered my first & last questions. My remaining issues are:

    1. Can I reduce the spacing above & below my new category titles?

    2. I’ve removed the gradient & title overlay on my featured images on my individual post pages. Can I now display the category & title either above or below my featured image?

    3. When I load my website, the space briefly loads as black before the image file loads on top. Is there a way to have that load as white instead?

  • kokkieh · Staff ·

    1. Is there any way to change the display size of my featured images on my individual posts as to note bleed to the side edges of the pages?

    In other words, you want some white space on either side of the image, even on smaller screens? This should do it:

    /* Add padding to featured images to prevent them being full-width */
div.post-thumbnail {
	padding-right: 10%;
	padding-left: 10%;
}

    You can adjust the actual values until it looks right to you.

    2. Can you reduce the spacing above & below the new category titles?

    Do you mean on a category page like at https://frmwrkd.com/category/style/?

    Try this:

    /* Reduce whitespace above and below category page titles */
.category main.site-main {
	padding-top: 30px;
}
.category header.page-header {
	padding-bottom: 20px;
}

    2. I’ve removed the gradient & title overlay on my featured images on my individual post pages. Can I now display the category & title either above or below my featured image?

    I assume you’re speaking of the front page, correct?

    This is possible, but moving elements around like that is a complex change, and beyond what we’re able to help with as per the link @supernovia provided above. For that level of customization we recommend you hire a freelance developer through a service like Upwork to help you.

    https://en.support.wordpress.com/upwork/

    3. When I load my website, the space briefly loads as black before the image file loads on top. Is there a way to have that load as white instead?

    This seems to work in the browser inspector, but only way to know for sure is to add it to your site:

    /* Change featured image background to white */
a.post-thumbnail {
	background: #fff;
}
  • Unknown's avatar
    merilanie · Member ·

    Thank you!!!

    For

    2. I’ve removed the gradient & title overlay on my featured images on my individual post pages. Can I now display the category & title either above or below my featured image?

    I was refering to individual post pages like https://frmwrkd.com/2019/07/22/post-4/

    I’ve removed the gradient & title overlay. Is it possible to add the title either above or below the image with css? Or would I need to download a child theme & get into that?

    Also for 3. When I load my website, the space briefly loads as black before the image file loads on top. Is there a way to have that load as white instead?

    That turned the black to gray, so the image background briefly loads as gray instead of white. Any thoughts there?

  • Unknown's avatar
    merilanie · Member ·

    Also, to prevent my old fonts from loading briefly before my new fonts load, I’m using:

    /*let fonts load before loading entire page*/
    .wf-loading body {
    visibility: hidden;
    }

    This use to work but now the old fonts on my primary menu & body are briefly loading when loading the page. Thoughts?

  • staff-blorbo · Staff ·

    Is it possible to add the title either above or below the image with css? Or would I need to download a child theme & get into that?

    Try this instead to only remove the gradient, not the title:

    .entry-header-wrapper {
     background-image: none !important;
}

    Then, remove this one to restore the title:

    .entry-header-wrapper {
	display: none;
}

    That turned the black to gray, so the image background briefly loads as gray instead of white. Any thoughts there?

    The default is going to appear before the browser parses down to the custom CSS, but only for a fraction of a second.

    Also, to prevent my old fonts from loading briefly before my new fonts load

    That works, but I don’t recommend doing that. Depending on what kind of connection folks are on, they’ll have to wait a long time before they can read your content, and might just give up in the face of a blank site.

    Sure, the fonts aren’t what you’d like, but folks on excellent connections will only see them for a fraction of a second, and folks on slow connections will at least see something while the font is downloading.

  • Unknown's avatar
    frmwrked · Member ·

    That works for gradient removal! But I removed the title there because I would rather then find a way to add the title above the featured image.

    1. Is there a way to add the post title above the featured image? The full length of the featured image?

    2. Also, I added related articles through jetpack. Now my post date & share links appear below them during mobile. Is there a way to have that displayed under the featured image when viewing mobile?

    3. Is there way to have the related articles be the full length of the featured image? Or just not cut off by the widget area?

    Everyone’s been so helpful! Thanks in advance

  • kokkieh · Staff ·

    1. Is there a way to add the post title above the featured image? The full length of the featured image?

    I answered this in my reply yesterday:

    This is possible, but moving elements around like that is a complex change, and beyond what we’re able to help with as per the link @supernovia provided above. For that level of customization we recommend you hire a freelance developer through a service like Upwork to help you.

    https://en.support.wordpress.com/upwork/

    2. Also, I added related articles through jetpack. Now my post date & share links appear below them during mobile. Is there a way to have that displayed under the featured image when viewing mobile?

    This is by design – related posts always appear above the post meta and sharing buttons.

    Changing this is also a more complex change, so not something we can help with here.

    That said, Related Posts is a built-in feature of WordPress.com, so you did not need to install any plugins on your site in order to get access to that via Jetpack.

    3. Is there way to have the related articles be the full length of the featured image? Or just not cut off by the widget area?

    Related posts form part of the post content, so that element’s width depends on the width of the content area.

    To force it to extend outside its parent container will require more complex CSS, as both the container for related posts, as well as every individual related post will have to be made wider, and this will have to be done for every different screen size supported in the theme.

    This is beyond the scope of CSS support we can provide, but if you hire an Upwork freelancer they might be able to help with this.

    Unrelated, but just a note in case you’re not aware: Your plan gives you 24/7 access to live chat and priority email support via the Help icon on My Sites or via the contact form at https://wordpress.com/help/contact, so you don’t actually need to post in the public forums for help.

  • The topic ‘Canard Questions’ is closed to new replies.