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.
- 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
.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
.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
.single .wp-block-spacer {
height: 50px !IMPORTANT;
}
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)
You can Reduce Page Header portion Gap using Gutenberg Editor
You can change Footer gap and Footer text using Gutenberg editor as per screenshot
All About Basic 
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
LikeLike
Hi Martin
would u mind to clarify? I saw your homepage but didn’t get your issue
Regards
Om
LikeLike
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
LikeLike
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;
}
LikeLike
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;)
LikeLike
Pleasure
LikeLike