Web Development & WordPress

Child Themes By Automattic: Educational institutes, Yoga, Agricultural business based sites – Modifications, design and customization

Here I am sharing you the latest theme Varia and the child themes created using this theme. I have shared the css codes which is applicable for all the child themes of Varia.

Download Parent Theme varia

YOGA BASED INSTITUTION CHILD THEME BALASANA

ONLINE BUSINESS CHILD THEME SHAWBURN

EDUCATIONAL INSTITUTIONS BASED CHILD THEME STRATFORD

ORGANIZATION OR PERSONAL BASED CHILD THEME ALVES

ENTREPRENEURS AND SMALL BUSINESS OWNERS BASED CHILD THEME REDHILL

AGRICULTURE BUSINESS BASED CHILD THEME BARNSBURY

IMPRESSIVE PORTFOLIO OR PROJECT BASED CHILD THEME DALSTON

The CSS IS APPLICABLE FOR ALL CHILD THEME OF VARIA THEME. CHILD THEMES ARE SHARED AT THE BOTTOM OF THE POST

Header Site title, menu and header container modification

  1. To change Site title’s color, font size and font family, line height, letter spacing
.site-title, .site-title a {
    color: darkred;
    font-family: "Poppins",sans-serif;
    font-size: 23px !important;
    letter-spacing: normal;
    line-height: 1.2;
}

To change Site title hover color

.site-title a:hover {
    color: yellow !important;
}

2. To change header container background color

header#masthead {
    background: darkred !important;
}

3. To change menu font color, font size and font family

#masthead .site-header-wrapper .main-navigation ul li a {
    font-size: 12px !important;
    color: blue !important;
    font-family: cursive !IMPORTANT;
}

To change menu hover font color

#masthead .site-header-wrapper .main-navigation ul li a:hover {
    color: yellow !important;
}

To change Posts or Pages title, font size, color and font family and text alignment

h1.entry-title {
    font-size: 29px !important;
    color: darkred !important;
    font-family: cursive;
    text-align: center;
}

To reduce gap between paragraph in posts and pages

.entry-content p {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

To reduce gap between lines ( line height)

.entry-content p {
    line-height: 20px !important;
}

To reduce gap between post author and post navigation

#main article {
    margin-bottom: 10px !important;
}
nav.navigation.post-navigation {
    margin-top: 10px !important;
}

To change post author font size, color and font family text alignment

span.author-heading {
    font-size: 23px !important;
    font-family: cursive;
    color: darkred !important;
    text-align: center !important;
    display: block;
}

To change or increase width of content section

.entry-content p {
    max-width: 90% !important;
    width: 90% !important;
}

Changes in BlockQuote

BlockQuote gap and border color change

figure.wp-block-pullquote {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-color: red !important;
}

Blockquote font styling

.wp-block-pullquote p {
    font-family: "Poppins",sans-serif !important;
    font-size: 23px !important;
    letter-spacing: normal;
    line-height: 1.125;
    color: darkred !important;
}

Post navigation title font size color and font family change

.post-navigation .post-title {
    font-family: cursive;
    font-size: 23px !important;
    font-weight: 600;
    color: blue !important;
}

To change the headings like H2

h2 {
    font-size: 21px !important;
    color: darkred !important;
    font-family: cursive !important;
}

Reduce gap top and bottom of footer container

footer#colophon {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
main#main {
    padding-bottom: 0px !important;
}

To change footer site info or powered by text

.site-info, .site-info * {
    color: white !important;
    font-size: 19px;
}

To change footer container background

footer#colophon {
    background: darkred;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
}

To change footer social navigation icons color

.social-navigation a {
    color: darkred !IMPORTANT;
}

and also to change hover color of that social icons

.social-navigation a:hover {
    color: blue !IMPORTANT;
}

Stratford is the perfect design for your business or educational institutes online presence. Highlight your products and services, Stratford is versatile enough to be your personal blog too. You can see Stratford theme demo. Stratford theme is a child theme of Varia. So if you want to use this theme in your own hosting (except wordpress.com). Then you need to install Varia as parent theme.

Download Stratford Child theme

STRATFORD DEMO

STRATFORD CSS MODIFICATIONS

Here I am sharing you another Child Theme of Varia The Css should be same for the Child themes too

Yoga Institution Child Theme Balasana

BALASANA DEMO

BALASANA CSS MODIFICATIONS

Shawburn is the ideal choice for creating an online presence for your business.

DOWNOAD SHAWBURN CHILD THEME

SHAWBURN DEMO

SHAWBURN CSS MODIFICATIONS

Convincing design for your charity or organization’s online presence. Highlight your actions, causes and projects, Alves is versatile enough to be your personal site too.

DOWNLOAD ALVES CHILD THEME

ALVES DEMO

ALVES CSS MODIFICATIONS

Redhill is a simple theme with clean typography, created with entrepreneurs and small business owners in mind.

DOWNLOAD REDHILL CHILD THEME

REDHILL DEMO

REDHILL CSS MODIFICATIONS

Barnsbury is an earthy and friendly theme design with farming and agriculture businesses in mind. Barnsbury is versatile enough to be your personal site too.

DOWNLOAD BARNSBURY CHILD THEME

BARNSBURY DEMO

BARNSBURY CSS MODIFICATIONS

Make your online portfolio impressively awesome with Dalston. With the ability to beautifully highlight your illustration and other projects, Dalston is also versatile enough to be your personal site too.

DOWNLOAD Dalston CHILD THEME

DALSTON DEMO

DALSTON CSS MODIFICATIONS

If you have any issue feel free to ask me question here in comments section

Leave a comment