Site Title and Tagline Color on Home Page

  • wpcomsites · Member ·

    Hello…

    I need help with the following…

    I would like to Customize the Color of the Site Title & Description on the Home Page ONLY. I am using VENI

    Thanks for your help
    RR

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

  • kokkieh · Staff ·

    Hi there,

    It looks like you have some existing CSS that’s preventing this change:

    /* site title color and size */
.site-title a {
	color: #66a5ad !important;
	font-size: 1.8rem;
}

/* site description color and size */
.site-description {
	color: #66a5ad !important;
	font-size: 110% !important;
}

    Your use of !important there means this cannot be overridden by other CSS added later in the stylesheet.

    If you need to use !important in CSS, it usually means your selector is not specific enough. Remove that existing CSS, and replace it with this instead, which is more specific:

    /* site title color and size */
.site-title a {
	color: #66a5ad;
}
.compact-navigation .site-title a {
	font-size: 1.8rem;
}

/* site description color and size */
.site-description {
	color: #66a5ad;
}
header.site-header .site-branding .site-description {
	font-size: 110%;
}

    Then to have it different on the front page only, you can add this below that:

    /* site title color on front page only*/
.home.fullwidth-slider.blog .site-title a {
	color: blue;
} 

/* site description color on front page only */
.home.fullwidth-slider.blog .site-description {
	color: blue;
}

    Substitute the color value you want.

    You don’t need to declare the size here again, as it will still inherit the font size given in the previous code, while overriding only the color declarations.

    Let me know if you have any questions about this.

    Also note that your plan gives you access to both live chat and direct email support. You can reach those at any time by clicking the Help icon that appears bottom-right on all the My Sites pages, or else via the direct link at https://wordpress.com/help/contact

  • wpcomsites · Member ·

    Thank you so much @kokkieh

    It worked perfectly doing all that.

    May I ask for a little more help? I can’t manage to do the following…

    1. About Page Titles
    I managed to change color color on single pages, and have a different color of page title on home page (featured pages). That’s ok

    Now, how can I do the same about Page Title Font Size. I want to change the font size on single pages ONLY, without affecting the page titles of the featured pages on home page.

    2. On single pages, there is too much space between Page title and top of the site. I would like to reduce the space, making the page title go up.

    Many thanks
    RR

  • staff-blorbo · Staff ·

    1. This should work:

    .page .entry-title {
    font-size: 2.75rem !important;
}

    2. This should work:

    navigation header.site-header {
    padding-bottom: 10px !important;
}
  • wpcomsites · Member ·

    Thank you @staff-blorbo … but unfortunately, they do not work

    This code works well on single pages but it also affects the page titles on home page (the ones in the featured page area). The idea was to be able to resize the page titles ONLY on single pages.

    .page .entry-title {
    font-size: 2.75rem !important;
    }

    And this one is not working either. The gap (spacing) between page title and top navigation remains the same

    navigation header.site-header {
    padding-bottom: 30px !important;
    }

    Thanks for letting me know
    I appreciate
    RR

  • staff-totoro · Staff ·

    @mindfullifestylebyralfrussi would you mind reaching out to us via live chat? Priority support is included in your Premium plan, and it may help if we can have a live conversation (back and forth) to work with you on these changes.

    You can contact us here to start a live chat session, thanks!

    https://wordpress.com/help/contact

  • The topic ‘Site Title and Tagline Color on Home Page’ is closed to new replies.