Customizing Dyad Theme

Hi there,

1) How can I change the color of the blue category (e.g., “Recipes”) that appears over the featured image on individual posts?

You can target the background colour to your categories on individual posts via the following custom CSS:

.has-post-thumbnail .entry-meta .cat-links {
    background: #678db8;
}

Change the value of #678db8 to any HEX code of your choice.

2) At the bottom of my posts, there is a line with a yellow circle above the “Previous Post” text, before the comments section. Can I change the color of that circle?

That circle can be targeted with the following:

.is-singular .post-navigation .nav-links:after {
    background-color: #e7ae01;
}

As before: Enter the above snippets via Jetpack’s custom CSS module.

If you’re curious about how I found the needed CSS: I used my browser’s built in tools to inspect the theme’s existing CSS and experiment with the specific CSS for your needs. We have guidance on how you could use your browser’s tool in a similar way here:

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

3) How do I change the color of the yellow “Read More” buttons on the home page?

You will need to target .link-more a to change the background colour of the “Read More” buttons from yellow to something else:

.link-more a {
    background-color: #e7ae01;
}

4) Is it possible to edit the snippet that shows up in the slider for the featured posts? I ask because I am using anchors that automatically scrolls the page down to the recipe section if people desire. The text for this is at the beginning of the post. If there is a way to have that “Click here to skip to the recipe” not sure up, that would be great.

Yes, you can create a custom excerpt for the featured posts in your slider, which will then display alongside them.

To add a custom except:

• Navigate to the editor for a post.
• Scroll down to the bottom of the post to discover the “Excerpt” module.
• If you can’t find the “Excerpt” field straight away, click on the Screen Options tab in the upper right. Check the box next to “Excerpt” there to activate the module.
• Enter the text you wish to display alongside the post in the slider in the module’s text field.

Hope that helps out! We’re right here if extra questions come up.

You are so amazing!!! Thank you very much!

Everything worked except for one minor thing:
For the read more button, the code you worked helped me change it to purple, however, I noticed that when I hover over it, it oddly changes back to yellow. If there is a way to fix that, that would be great. If not, it’s no biggie, especially because I can have my personal excerpts now thanks to the instructions you provided.

I’m glad that my reply helped. ??

You can target the colour of the button when it’s hovered over by targeting .posts .hentry:hover .link-more a in your custom CSS:

.posts .hentry:hover .link-more a {
    background-color: #663696;
}

That worked perfectly! Thank you again Siobhan!!!

You’re most welcome! Feel free to start a new thread if anything else comes up, too.

Thanks again! Going to mark this as resolved.

Also on the Dyad theme…
I really like it but the featured image side feels much too large at 50% of the screen when on a PC. Is there a way of adjusting that down to 30 or 25%?