WordPress Tricks

WordPress theme Zoologist by Automattic: CSS Customization of header, footer, contents and more

Zoologist by Automattic
Image Courtesy WordPress.com

Zoologist  by Automattic is a simple single column theme. If you are searching for a single column layout theme with basic design then this theme can be a good choice for you. Here I am going to share you CSS tricks to modify header, footer, fonts style and more.

Live Demo of Zoologist by Automattic

If you want to install it in your self hosted wordpress site, you can download them from WordPress.com repository.

Download Zoologist Parent theme Blockbase

Download Zoologist Child theme

Also You need to Install Gutenberg Plugins by Gutenberg Team

So, Here I am sharing you the css tricks which you can use to change the style of the theme.

  1. If you want to change overall background color and font color ( all over the site) like screenshot below

( go to Appearance > Customize > Color and change the option as per screenshot)

2) If you want to change background of content section and also the font ( as per background) color like the screenshot

.home .wp-block-post-template * {
    color: black;
}
.home .wp-block-post-template {
    background: white;
    max-width: 800px !IMPORTANT;
    padding: 12px;
}

3) If you want to increase the width of content section of Zoologist  theme by Automattic

Zoologist by Automattic content section width increase

.entry-content * {
    max-width: 900px !important;
}

4) If you want to change Post title’s font size color and font family and also removing the Underline below the title

Zoologist by Automattic block font title style and underline

.wp-block-post-title, .wp-block-post-title * {
    font-size: 32px !important;
    color: darkred;
    font-family: cursive;
    text-decoration: none !IMPORTANT;
}

5) In single post if you want to reduce gap below post content and Next / Previous posts links in zoologist theme by automattic

Zoologist by Automattic reduce spacing below single post content

.single .wp-block-spacer {
    height: 50px !IMPORTANT;
}
Menu modification of zoologist theme

6) If you want to change font size, color and font family of Menu in Zoologist theme

.wp-block-navigation.wp-block-navigation a {
    color: darkred !IMPORTANT;
    font-size: 17px !IMPORTANT;
    font-family: cursive !important;
}

7) To reduce the gap between top header and starting of the site in Zoologist theme

.site-header {
padding-bottom: 40px!IMPORTANT;
}

Modification using Gutenberg Editor

** If you want to change footer text and the gaps, you can do it using Gutenberg Editor ( at that case css i shared above may not be needed)

Modifying Footer text in Gutenberg Site Editor

You can Reduce Page Header portion Gap using Gutenberg Editor

Page Header Gap reduce using Gutenberg Editor

You can change Footer gap and Footer text using Gutenberg editor as per screenshot

6 thoughts on “WordPress theme Zoologist by Automattic: CSS Customization of header, footer, contents and more”

  1. dear OM,

    first of all: many many thanks for your awesome site and for bringing your outstanding service to the community. It is just great.

    i have some issues with a theme – (twenty-twenty): see https://www.f-s-j.de

    Why do i have double image include on the page https://www.f-s-j.de
    which is a truely beta-beta page.

    Note: the image is included two times. Any idea ?

    Look forward to hear from you
    regards

    Like

  2. hello dear OM

    many many thanks for the quick reply. I am very glad to hear from you

    the image (s) in the header part – “image x” is shown two times.

    it looks very funny see here: https://imgur.com/a/irOXp6f

    well how to solve these issues –
    a. it is shown to times and
    b. it does not look like the original one – wihch is the same like i use on a other site.

    this image is exactly the same as i have added here https://www.job-starter.com

    look forward to hear from you
    martin

    Like

    1. Hi Martin
      ok
      try replacing this code ( which u seems added to test)

      .header-footer-group {
      background-image: url(http://www.job-starter.com/wp-content/uploads/2019/07/cropped-runway_4_claimtest__white_mos_-2000×1199.png) !important;
      padding-top: 120px;
      background-repeat: no-repeat !important;
      background-size: 100% 65% !important;
      }

      by this

      article .header-footer-group {
      background-image: url(http://www.job-starter.com/wp-content/uploads/2019/07/cropped-runway_4_claimtest__white_mos_-2000×1199.png) !important;
      padding-top: 120px!IMPORTANT;
      background-repeat: no-repeat !important;
      background-size: cover;
      padding-bottom: 120px !IMPORTANT;
      }

      Like

  3. hello dear OM

    awesome – this is just outstanding: Youre hit the point. This helped me alot. I added the code and the site behavior was getting better.

    a. the image (the double image) vanished. Note: this image was fetched from another page -t he job-starter.com page:
    b. now i added the picture to the site (and the media-library) of the page f-s-j.de –

    on a sidenote: the site f-s-j.de is set up as static page with
    a. (static) page
    b. blog

    now i added the image to the page – and this worked.

    many thanks for all
    your are a hero

    have a great day 😉
    pps. thanks for helping me-. i will digg deeper in all theming this. You encouraged me.
    keep up the great project here – it rocks;)

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s