WordPress Tricks

WordPress Theme for fashion, food, travel, or design: Publication theme by Automattic css style modifications

wordpress publication theme for fashion, food, travel, or design by automattic

Publication is an elegant blog and magazine theme that features full-screen Featured Images. It’s perfect for sites about fashion, food, travel, or design. With balanced typography, colors, and attention to detail, Publication helps you create visually stunning posts. You can check the Demo of Publication theme.

You can download Publication Parent Theme for fashion, food, travel or design.
Also, You can download Publication Child Theme for fashion,food travel or design to edit the theme files.
You can ask question regarding any issue you are facing.

Or can take my personal help.

theme publication by automattic archive tag category search page posts modification

To change title color, font size and family of homepage, archive / blog/ tag/ category/ search page  post

.entry-title a {
font-size: 14px !important;
color: darkred !important;
font-family: !cursive important;
}

To change hover color of the post titles

.entry-title a:hover {
color: yellow;
}

To change font size, color and font family of Continue Reading

.more-link {
font-size: 14px;
color: darkred !important;
font-family: !cursive important;
}

To change hover color of Continue Reading

.more-link:hover {
color: yellow !important;
}

To Reduce gap between posts (check the screenshot) in publication theme use the code below

theme publication by automattic reduce gap between posts.hentry {
margin-bottom: 20px !important;
padding-bottom: 2px !important;
}

To change the border color and border thickness which is showing between posts

.hentry {
border-bottom: 3px solid darkred !important;
}

theme publication by automattic archive tag category search page header modification

In Category / Tag / Search or Archive pages if you want to change font size, color and font family of Category / Tag / Search or Archive names

.page-header, .page-header * {
font-size: 16px !important;
color: darkred !important;
font-family: cursive !important;
}

*** If you don’t want to show that category / tag / search or archive name

.page-header {
display: none !important;
}

If you want to use a background color behind the category / tag / search or archive name

.archive .page-header {
background: lightblue;
width: 92% !important;
padding-left: 2%;
}

theme publication by automattic reduce height of top header image

To reduce the height of the top header image in single post page

.hero {
height: 263px !important;
}
#secondary {
display: block;
margin-top: 134px !important;
}

theme publication by automattic content font size color font family and line height

If you want to change font size, color, font family and also to increase or reduce gap between lines in content section

.entry-content {
font-size: 17px !important;
color: black;
font-family: cursive;
line-height: 30px;
}

To change comments title font size, color, font family, use background and also to reduce gap  use the code below

theme publication by automattic comments title modification

.comments-title {
font-size: 23px;
color: white;
font-family: cursive;
background: darkblue;
padding-top: 14px !important;
padding-bottom: 14px;
padding-left: 12px !important;
}

theme publication by automattic comments section modification

To change Comments author font size, color and font family

.comment-author a, .comment-author b {
font-weight: 400;
color: darkred !important;
font-size: 21px;
font-family: cursive;
}

If you don’t want to show comments meta (comments date and time) use the code below

.comment-metadata {
display: none;
}

OR
If you want to change comments meta (comments date and time) font size, color and font family

.comment-metadata a {
box-shadow: none !important;
font-size: 12px !important;
color: blue !important;
font-family: cursive !important;
}

If you want to change comments content font size, color and font family and gap between lines

.comment-body {
font-size: 15px !important;
line-height: 20px;
font-family: cursive;
color: black !important;
}

If you want to remove “Comments are closed.”  in the comments section

.no-comments {
display: none !important;
}

/******** Toggle menu *********/

theme publication by automattic toggle menu background color change

To change top toggle menu black background color (which is showing surrounding the hamburger menu icon)

.menu-toggle {
background: darkred !important;
}

theme publication by automattic change background color of slide menu

To change background and Outline color of slide menu (which opens when you click on hamburger menu icon)

#slide-menu {
background: darkred !important;
outline-color: darkred !important;
}

To change border color ( showing in slide menu) between menu items

.main-navigation li {
border-top: 1px solid white !important;
}

To change font size, color and font family of toggle slide menu items

.main-navigation a {
color: #fff !important;
font-size: 13px !important;
font-family: cursive !important;
}

theme publication by automattic slide menu items hover text and background color

To change toggle slide menu items hover font color and background color

.main-navigation a:hover {
background: red !important;
color: yellow !important;
}

li.menu-item:hover > button {
background: red !important;
}

*** To change font size, color, font family, background color, text aligned centered and more like the below screenshot

theme publication by automattic sidebar widget title modification

.widget-title {
background: red !important;
text-align: center;
color: white !important;
font-size: 24px;
padding-bottom: 8px !important;
font-family: cursive !important;
}

To change font size, color and font family of links in widget section

.widget a {
font-size: 13px !important;
font-weight: normal !important;
font-family: cursive;
color: darkred !important;
}

To change hover color of widget links

.widget a:hover {
color: yellow !important;
}

If you want to change footer copyright info or  Proudly Powered By WordPress in Publication theme by Automattic

Go to your dashboard. Then Appearance > Editor > footer.php . Please check the screenshot for better understanding and use the code i shared below the screenshot to change copyright info

theme publication by automattic footer copyright info and year modification

				© Copyright 2018 or 2019
				<span class="sep"> | </span>
                Message about your company

If you have any issue feel free to ask me question here in comments section
OR
Pay me some, I will help you for CSS Issue Personally CLICK HERE….

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