Decrease Scroll Speed of Featured items on homepage

  • Unknown's avatar
    dandlewood · Member ·

    Hey,
    New WP user here. Is there a way to slow the speed at which images change on the blog homepage? Also, is there a way to change the wording or coloring of the “featured” covering the images?

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

  • kokkieh · Staff ·

    Hi there,

    The speed at which featured posts scroll is hard-coded into the theme and cannot be changed without modifying the theme itself. That is not possible on WordPress.com.

    The “Featured” heading in the slider can be changed using CSS.

    What exactly do you want to change? The text color, or the background color?

  • Unknown's avatar
    dandlewood · Member ·

    Thanks for your response! Optimally I would like to be able to change both to create proper complement/contrast. I would also perhaps like to change “Featured” to “Coming soon” or some other variant that is more in line with my sites needs.

  • supernovia · Staff ·

    You can change the text color and the background easily enough if you have a plan that supports CSS.
    You can hide the word Featured pretty easily too.

    Changing it to “Coming Soon” might be a bit trickier, but given that people can click on banners, maybe hiding “featured” and adding “Coming soon” to the post title of things that are coming soon would be enough.

  • Unknown's avatar
    dandlewood · Member ·

    Hiding the Featured would also work. I have a business account so I can edit CSS and install plugins (once my domain transfer goes through)

  • supernovia · Staff ·

    OK. Here’s some CSS you could use with this theme:

    .site-banner-header .banner-featured {
	display: none;
}

.site-banner-header {
	background-color: rgba(0,0,0,.6);
	padding: 1.5em 2em 0;
}

.site-banner-header::before, .site-banner-header::after {
	border: none;
}

    That gives it a partially black background behind the white text, but, you could just as well use one of your brand colors instead or change the text color if you prefer. I added a little space, and I also took away the white borders since they seemed a little strange going just partway around the background box.

    I did not test this in different screen sizes yet. Again this only applies to this one theme. But if you’ll confirm whether that’s the kind of thing you’d like to see, we can make sure it’ll look good on smaller screens, too.

  • Unknown's avatar
    dandlewood · Member ·

    This is exactly the solution I was looking for. I can’t thank you enough, this was amazing.

  • supernovia · Staff ·

    Fabulous! I’m glad to hear that. Let us know if you need more help.

  • supernovia · Staff ·

    Oh! I did decide to take a quick look at the mobile view, and would suggest adding the following as well so it looks nice on small screens. You can adjust the padding as you’d like, of course.

    @media only screen and (max-width: 680px) {
.site-banner-header {
    padding: 1em;
}
}
  • Unknown's avatar
    dandlewood · Member ·

    Great, Added! Also, is there an easy way to bump the box upwards to center it within the header image? I’ve tried top: -100; and messing with the padding. Messing with the padding can get it to the right height, but it also increases the background size and looks unsightly.

  • supernovia · Staff ·

    Sure. You might try something like this:

    .site-banner-header {
    bottom: 30%;
}

@media only screen and (max-width: 1600px) {
.site-banner-header {
   bottom: 20%;
}
}

@media only screen and (max-width: 1200px)
.site-banner-header {
   bottom: 30%;
}
}

    Again, just adjust those numbers to suit your preference, and be sure to try the site on different screen widths.

  • Unknown's avatar
    dandlewood · Member ·

    Thanks again! No more questions aside from this one:

    Is there any way to give you rep on this site? You have been a huge help!

  • supernovia · Staff ·

    Not “rep” necessarily but your thanks here is much appreciated! I’m glad we could help.

  • The topic ‘Decrease Scroll Speed of Featured items on homepage’ is closed to new replies.