Single Circle icon color

Hello,
You can achieve the result by using child theme too. First make a Child Theme and activate it before you go making the following changes. You should have two new files functions.php and style.css.

Tutorial:
https://codex.www.ads-software.com/Child_Themes

Plugins:
https://www.ads-software.com/plugins/one-click-child-theme/

After you are done with Child Theme set up copy and paste the following line of CSS code in style.css file.

.single-circle-icon > span i {
    background: #0b157d none repeat scroll 0 0;
    border-radius: 500px;
    height: 2.5em;
    line-height: 2.5em;
    transition: all 0.5s ease 0s;
    width: 2.5em;
}

Go to Editor and style.css of child theme to make above changes. The red color of icon should now be replaced with your desired color.

Hi,

I have created the child theme, the function and style.css created.

the color still red color, but I have added in theme option/custom.css
.single-circle-icon span i {background-color:#0b157d;} and it works, is there any different if I put the code in style.css?

what about the menu font color in responsive?

this is the function.php file looks like

<?php
// Exit if accessed directly
if ( !defined( ‘ABSPATH’ ) ) exit;

// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED – Do not modify or remove comment markers above or below:

if ( !function_exists( ‘chld_thm_cfg_parent_css’ ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( ‘chld_thm_cfg_parent’, trailingslashit( get_template_directory_uri() ) . ‘style.css’ );
}
endif;
add_action( ‘wp_enqueue_scripts’, ‘chld_thm_cfg_parent_css’ );

if ( !function_exists( ‘chld_thm_cfg_child_css’ ) ):
function chld_thm_cfg_child_css() {
wp_enqueue_style( ‘chld_thm_cfg_child’, get_stylesheet_uri() );
}
endif;
add_action( ‘wp_enqueue_scripts’, ‘chld_thm_cfg_child_css’, 999 );

// END ENQUEUE PARENT ACTION

I am glad that it worked. Custom CSS is built to write additional CSS, so it is not mandatory to make child theme to change CSS only.Child theme’s style.css and Custom CSS works in the same manner most of the time.

Regarding your second query do you mean change font color on Responsive? Can you elaborate it.

Regards.

Hi,

for the responsive meaning when the mouse hover to the menu, I’d like to change the color of the menu (Home, About, Services, Portfolio….) to other color.
and wanted to change the background color “Know More” and “SEND” when the mouse hover to it.

Thanks!

Hello @onestar,
You can change the color of menu on mouse hover by adding the following css to the Customizing > Theme options > Custom CSS section.

.main-navigation li  a:hover {
    color: aquamarine;//color of your choice
}

To change the background color of ‘SEND’ button add this CSS in the same section:

#evision-corporate-contact .wpcf7-form-control{
    background: #fff !important;
}

Finally to change ‘KNOW MORE’ of About section of the homepage you can paste h given CSS in the same section:

.btn-section.btn-over-box a {
    background-color: red;
}

Hope that helps!
Thanks,