[Onsta]

Hello everyone,

I am in the process of setting up my free theme and I have a few questions:

• I am trying to change the background color of the articles button in the blog section. However, I am facing difficulty as the summary block does not provide an option to select just the button.  Is there any way to resolve this issue?
• I am looking to change the hover color of links and buttons on my website. I have tried using additional CSS, but it hasn’t made any difference. Do I need to work on the source code or is it not possible to make these changes with the free version?

I would appreciate any help on these matters.

Thank you in advance!

[tikaram]

@onsta : If you are having issues adding the additional css please post in your site URL and let me know the desired colors so that I can provide you the required additional css to changes color of different section. To know more about adding additional  css please follow the link below.
https://catchthemes.com/fse-faq/#question-fse-basics-how-to-add-custom-css-in-block-themes

Regards,
Tikaram

[Sakin]

@onsta: For the blog button color and hover color, you can change the color code in the following CSS and add it in Additional CSS.

/* Blog Button Color */
.wp-block-post-excerpt .wp-block-post-excerpt__more-link {
  background-color: 2a7aac;
  color: #fff;
}

/* Blog Button Hover Color */
.wp-block-post-excerpt .wp-block-post-excerpt__more-link:hover,
.wp-block-post-excerpt .wp-block-post-excerpt__more-link:focus {
  background-color: 05a394;
  color: #fff;
}

[Onsta]

Thank you so much! The blog problem is solved.

I forgot to mention another problem with the hover color:

I would also like to change it on the homepage (menu and title) and in the footer (list of articles and social networks).

At the moment it is light blue (menu, article links, privacy policy) and black on the title but I would like them with this color: #f39419

Is it always possible with additional CSS?
This is the URL: https://www.onstartagency.com/

Thank you in advance!

[Sakin]

Try adding the following CSS.

a:hover, a:focus, .wp-block-widget a:hover,
.wp-block-widget a:focus, .wp-block-button.is-style-VisionArt-button .wp-block-button__link:hover:hover,
.wp-block-button.is-style-VisionArt-button .wp-block-button__link:hover:focus,
.wp-block-button.is-style-VisionArt-button .wp-block-button__link:focus:hover,
.wp-block-button.is-style-VisionArt-button .wp-block-button__link:focus:focus,
.wp-block-post-comments.is-style-VisionArt-pro-post-comments .comment-metadata a:hover,
.wp-block-post-comments.is-style-VisionArt-pro-post-comments .comment-metadata a:focus,
.wp-block-post-comments.is-style-VisionArt-post-comments .comment-metadata a:hover,
.wp-block-post-comments.is-style-VisionArt-post-comments .comment-metadata a:focus,
.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus,
.wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container-close:focus,
.wp-block-post-comments .comment-metadata a:hover,
.wp-block-post-comments .comment-metadata a:focus,
form .wpcf7-submit:hover, form .wpcf7-submit:focus,
.ect-section.style-three .entry-meta a:hover,
.ect-section.style-three .entry-meta a:focus,
.price ins:hover, .price ins:focus,
.event-section #ect-section.ect-event.style-two .events-content-wrapper a:hover,
.event-section #ect-section.ect-event.style-two .events-content-wrapper a:focus,
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:hover,
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:focus,
.wp-block-post-navigation-link a:hover, .wp-block-post-navigation-link a:focus,
a.comment-reply-link:hover, a.comment-reply-link:focus, .wp-block-post-title a:hover,
.wp-block-post-title a:focus, .wp-block-site-title a:hover, .wp-block-site-title a:focus,
.post-navigation-link__label:hover, .post-navigation-link__label:focus,
.wp-block-site-generator p a:hover, .wp-block-site-generator p a:focus, ins:hover,
ins:focus, .wp-block-widget-area .wp-block-latest-posts__list > li > a:hover,
.wp-block-widget-area .wp-block-latest-posts__list > li > a:focus,
.single .taxonomy-category.wp-block-post-terms > a:hover,
.single .taxonomy-category.wp-block-post-terms > a:focus,
.entry-breadcrumbs span.breadcrumb a:hover,
.entry-breadcrumbs span.breadcrumb a:focus,
.wc-block-mini-cart__button:hover, .wc-block-mini-cart__button:focus,
.footer-title + p a:hover,
.footer-title + p a:focus,
.events-section #ect-section.ect-section.style-two .content-wrapper h2 a:hover,
.events-section #ect-section.ect-section.style-two .content-wrapper h2 a:focus,
.wc-block-components-product-title a:hover,
.wc-block-components-product-title a:focus,
.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce .woocommerce-breadcrumb a:focus,
.events-content-wrapper .entry-header .entry-title a:hover,
.events-content-wrapper .entry-header .entry-title a:focus,
td.product-name a:hover,
td.product-name a:focus,
.featured-content .wp-block-post-excerpt__more-link:hover,
.featured-content .wp-block-post-excerpt__more-link:focus,
.single .taxonomy-post_tag.wp-block-post-terms > a:hover,
.single .taxonomy-post_tag.wp-block-post-terms > a:focus,
.bottom-footer .wp-block-navigation ul:not(.wp-block-navigation__submenu-container) > li > a:hover,
.bottom-footer .wp-block-navigation ul:not(.wp-block-navigation__submenu-container) > li > a:focus {
  color: #f39419;
}

[Onsta]

Copied and pasted into both the website editor and single block for additional CSS but no changes were observed.

[Sakin]

@onsta: You just need to add in Website editor. I have updated the CSS. Please try now.

[Author]

Posts