[Mahesh]

Hi @dsommer,

For the above changes, go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS.

/* Add background to Header */
#branding {
    background-image: url('Put Your Image Link Here');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* Change site title's color */
#site-title a {
    color: #0000ff;
}
/* Change site description's color */
#site-description {
    color: #0000ff;
}

Note: Replace Put Your Image Link Here with your desired image link. Replace the color hex with your desired color.

Regards,
Mahesh

[Mahesh]

Hi @maeva,

This can be achieved with Custom CSS. Go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS.

.nav-primary {
    background-color: #00ff00;
}

.catchresponsive-nav-menu .sub-menu li a:hover,
.catchresponsive-nav-menu .sub-menu li a:focus {
    background-color: #00ff00;
}

Note: Please change the colors as desired.

Regards,
Mahesh

[Mahesh]

Hi @adunning,

For this you can use the heading tags in content for those titles. I hope you understand what I mean.
Please do no use temporary domain url as it will be put into spam. Either use google shorturl or bit.ly for such urls.

Regards,
Mahesh

[Mahesh]

Hi @adunning,

Thank you for your appreciation.
Have a nice day.

Regards,
Mahesh

[Mahesh]

Hi @americaontwowheels,

Thank you for your appreciation.
Have a nice day.

Regards,
Mahesh

[Mahesh]

Hi @Micke,

If you want it on homepage only, please use the following CSS.

.home #content .entry-title > a {
    font-family: Times New Roman;
}

Regards,
Mahesh

[Mahesh]

Hi @mescomptoirs,

Yes, the website is reduced to 720px which makes the menu bugging due to the media queries. You do have to manage it properly for all breaking points.
Yes, you do have to use the media queries. Please use the following CSS. I assume, adding this to theme’s Custom CSS won’t work as Jetpack’s Custom CSS executes at the last. Add it to the jetpack custom css hope it helps.

@media screen and (max-width: 1024px) {
    .one-column .site {
        width: 960px;
    }
}

@media screen and (max-width: 990px) {
    .one-column .site {
        width: 910px;
    }
}

@media screen and (max-width: 960px) {
    .one-column .site {
        width: 720px;
    }
}

@media screen and (max-width: 767px) {
    .one-column .site {
        width: 600px;
    }
}

@media screen and (max-width: 640px) {
    .site, .one-column .site {
        width: 460px;
    }
}

@media screen and (max-width: 479px) {
    .site, .one-column .site {
        width: 100%;
    }
}

Note: This will make your hope page responsive, however, the slider may seem a bit odd, because of max-height defined for the slider.

Regards,
Mahesh

[Mahesh]

Hi @andrewf90,

Oh that’s great.
Glad to know that you’ve managed to make it work now.

Regards,
Mahesh

[Mahesh]

Hi @andrewf90,

Hehe, thats kind of funny. 🙂
Yes, you do have to click save menu button everytime you change something to it.

Regards,
Mahesh

[Mahesh]

Hi @andrewf90,

It is kind of odd, in our server it is working fine. Do you get any error or something?
Let me know if any issue.

Regards,
Mahesh

[Mahesh]

Hi @andrewf90,

The code is working fine on our server (localhost). Have you activated the child theme? 🙂

Regards,
Mahesh

[Mahesh]

Hi @Tatsujin,

Will contact you through email privately for the details.
And as for you 3rd point, you would not need a widget area, you can achieve it with Custom CSS. Go to “Dashboard=> Appearance=> Theme Options=> Custom CSS” box and add the following CSS.

.home #main {
    display: none;
}

Regards,
Mahesh

[Mahesh]

Hi @andrewf90,

No, there is no limit for the child menu items, you can add as many items as you want. Seems all you items are in parent and not as child, so all items are displaying at once. Or may be you’ve selected the other menu instead. Go to “Dashboard=> Appearance=> Menus” then select a menu from the drop down then scroll down to the bottom to Menu Setting section and please check on Primary menu in Theme locations.

Regards,
Mahesh

[Mahesh]

Hi @andrewf90,

You need to create a child theme for this. You can find more details on creating a child theme HERE. Then your child theme’s functions.php add the following code.

function catchflames_child_adjust_footer_two_widget(){
	//Footer Two Sidebar
	register_sidebar( array(
		'name' => __( 'Footer Area Two', 'catch-flames' ),
		'id' => 'sidebar-3',
		'description' => __( 'An optional widget area for your site footer', 'catch-flames' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		//'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
}

add_action( 'init', 'catchflames_child_adjust_footer_two_widget' );

Then create a file in you child theme’s folder and name it sidebar-footer.php and the following codes:

<?php
/**
 * The Footer widget areas.
 *
 * @package Catch Themes
 * @subpackage Catch Flames
 * @since Catch Flames 1.0
 */
?>

<?php
	/* The footer widget area is triggered if any of the areas
	 * have widgets. So let's check that first.
	 *
	 * If none of the sidebars have widgets, then let's bail early.
	 */
	if ( ! is_active_sidebar( 'sidebar-2'  )
		&& ! is_active_sidebar( 'sidebar-3' )
		&& ! is_active_sidebar( 'sidebar-4'  )
	)
		return;
	// If we get this far, we have widgets. Let do this.
?>

<?php
/**
 * catchflames_before_footer_sidebar hook
 */
do_action( 'catchflames_before_footer_sidebar' ); ?>

<div id="footer-sidebar">
    <div id="supplementary" <?php catchflames_footer_sidebar_class(); ?>>
        <div class="wrapper">
            <?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
            <div id="first" class="widget-area" role="complementary">
                <?php dynamic_sidebar( 'sidebar-2' ); ?>
            </div><!-- #first .widget-area -->
            <?php endif; ?>

            <?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
            <div id="second" class="widget-area" role="complementary">
                <?php dynamic_sidebar( 'sidebar-3' ); ?>
                <?php if (is_user_logged_in()) : ?> <a href="<?php echo wp_logout_url(get_permalink()); ?>">logout | </a>
                <?php else : ?> <a href="<?php echo wp_login_url(get_permalink()); ?>">login | </a>
                <?php endif;?> </aside>
            </div><!-- #second .widget-area -->
            <?php endif; ?>

            <?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
            <div id="third" class="widget-area" role="complementary">
                <?php dynamic_sidebar( 'sidebar-4' ); ?>
            </div><!-- #third .widget-area -->
            <?php endif; ?>
        </div><!-- .wrapper -->
    </div><!-- #supplementary -->
</div><!-- #footer-sidebar -->

<?php
/**
 * catchflames_after_footer_sidebar hook
 */
do_action( 'catchflames_after_footer_sidebar' ); ?>

Regards,
Mahesh

[Mahesh]

Hi @skstewart,

You can achieve it with Custom CSS. Go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS.

/* Header Top Background Color */
#header-top {
    background-color: #ff0000;
}
/* Nav menu color and background color on hover/focus */
#header-top .nav-header-top .clean-journal-nav-menu li:hover > a, #header-top .nav-header-top .clean-journal-nav-menu li > a:focus {
    background-color: #00ff00;
    color: #fff;
}
/* Active Nav menu item color and background color */
.nav-header-top .clean-journal-nav-menu li.menu-item.current-menu-item > a, .nav-header-top .clean-journal-nav-menu li.menu-item.current-menu-ancestor > a {
    background-color: #ffff00;
}

Note: Please change the color hex value to your desired color.

Regards,
Mahesh

[Mahesh]

Hi @yogawithagnes,

For aligning logo and header+subtitle text to the middle of logo, go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS.

@media screen and (min-width: 991px ) {
    #site-header {
        margin-top: 35px;
    }
}

Regards,
Mahesh

[Mahesh]

Hi adunning,

Do you mean that background for sub pages is showing black and you want to change it to the same color as that of the parent menu item’s background color? If so please add the following CSS.

#header-menu ul.menu ul a {
    background: none repeat scroll 0 0 #7d997d;
}

Let me know if any problem.

Regards,
Mahesh

[Mahesh]

Hi @maeva,

Go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS.

#featured-content #featured-heading {
    display: none;
}

Regards,
Mahesh

[Mahesh]

Hi @annalisa,

Add the following CSS in Custom CSS box:

.nav-primary {
    background-color: #0000ff;
}

.clean-journal-nav-menu .sub-menu li a:hover, .clean-journal-nav-menu .sub-menu li a:focus, .clean-journal-nav-menu .children li a:hover, .clean-journal-nav-menu .children li a:focus {
    background-color: #0000ff;
}

Note: Please change the color hex value to your desired color.

Regards,
Mahesh

[Mahesh]

Hi @adunning,

Can you please give a specific location where actually you want it as for an example.

Regards,
Mahesh

[Author]

Posts