Dyad 2 By Automattic : Modifications, Support and documentations
November 13, 2017 19 Comments
Dyad pairs your written content and images together in perfect balance. The theme is geared towards photographers, foodies, artists, and anyone who is looking for a strong photographic presence on their website. You can check Demo of Dyad 2 by Automattic.
If you are using wordpress.com business plan or want to use the dyad2 theme in your hosting you can download the parent and child theme from below links
Dyad 2 By Automattic Parent Theme Download
Dyad 2 By Automattic Child Theme Download
You can ask question regarding any issue you are facing.
Or can take my personal help.
Question 1 : To change hover border color from light grey to different color in dyad 2 theme by Automattic
.home a.cover-link:hover {
border-color: red !important;
border-width: 11px !important;
}
Question 2: Homepage Read More button hover background color change
.home .posts .hentry:hover .link-more a {
background-color: red !important;
}
Question 3: Homepage Read More button background color, font size, font family
.home .posts .hentry .link-more a {
background-color: darkred;
color: white !important;
font-size: 12px !important;
font-family: cursive;
}
Question 4 : To change homepage posts title font color, font size and font family
.posts .entry-title, .posts .entry-title a {
font-size: 3.0rem;
color: darkred !important;
font-family: cursive !important;
}
** In single post page, to change post title’s font color, font size and font family
.single-post h1.entry-title {
color: yellow !important;
font-size: 32px !important;
font-family: cursive !important;
}
Question 5: How to change post content’s color, font size and font family from light grey to black
.entry-content {
color: black !important;
font-size: 16px !important;
font-family: cursive !important;
}
** this code is applicable for single post page too
Question 6: If you want to remove or want to make the light grey background of header menu section to be transparent
header#masthead {
background: transparent !important;
}
*** to use different background color without opacity try the code below
header#masthead {
background: red !important;
}
Question 7 : How to change the font size, color and font family of top menus
#site-navigation a {
color: #fff;
font-family: cursive !important;
font-size: 14px !important;
}
Question 8 : How to change drop down menu (child menu) black background color to different one
#site-navigation ul ul li {
background: darkred !important;
}
#site-navigation ul ul:before {
border-color: transparent transparent darkred transparent;
}
Question 9: How to change site title’s font color, font size and font family
header .site-title a {
color: yellow !important;
font-size: 34px !important;
font-family: cursive;
}
*** To change hover font color of site title
header .site-title a:hover {
color: red !important;
}
Question 10 : How to change footer widget section background color
.site-footer {
background-color: darkred !important;
}
Question 11 : To make the footer widget title centered, applying a background behind title, to change widget title’s font color, font size, font family, using border
Answer: use the following code
footer h3.widget-title {
color: white !important;
font-family: cursive;
font-size: 18px !important;
background: red;
text-align: center;
border-bottom: 1px solid white !important;
}
Question 12: To change footer widget’s links font color, font size and font family
footer .widget-area a {
color: white !important;
font-size: 14px !important;
font-family: cursive;
}
** to change footer widget’s links hover font color
footer .widget-area a:hover {
color: red !important;
}
Question 13: If you don’t want to show post date, category name, tags, author etc also want to show or hide featured image in posts, pages etc
Answer: Go to dashboard, then Appearance > Customize > Content Option and tick the options as per your choice
Question 14: To change footer copyright info without using any pluigns
Answer: Go to dashboard, then Appearance > Editor (theme editor). Follow the screenshot below
** do the change in child theme
Question 15: To change footer copyright info font color, font size and font family
.site-info a {
color: white !important;
font-size: 18px !important;
font-family: cursive;
}
*** to show the footer copyright text centered
.site-info {
display: block;
float: none !important;
text-align: center;
}
Question 16: To change footer copyright section background color
.footer-bottom-info {
background-color: darkred !important;
font-size: 1.4rem;
padding: 3rem 5.5rem;
}
Question 17 : To change the width of single page
body:not(.has-post-thumbnail).is-singular .entry-inner {
max-width: 1200px !important;
}
Question 18 : To reduce gap between top header and Page title
.is-singular div#content {
padding-top: 100px !important;
}
Question 19 : To reduce gap above and below of Page title
.is-singular:not(.home):not(.page-template-eventbrite-index) .entry-header {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
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….
Great guide, thank you so much! I’m just wondering now, how to change the colour of the button that says “featured”?
LikeLike
Hi
please share me your site url to check
Om
LikeLike
Hi! Is it possible to have three instead of two posts next to each other or that the panels consisting of text and picture can be made a bit smaller in general? Greetings!
LikeLike
HI
would you mind to try this first please?
@media only screen and (max-width: 1600px)
{
.posts .hentry {
width: 33.322% !important;
}
}
LikeLike
Hi,
my problem is if I share my page to fb or google no photo apperars. (I have no static front page.) Could you pls help? Thx!
https://clumsykitchensite.wordpress.com/
LikeLike
HI, which page u tried to share in facebook? share me that page link
Om
LikeLiked by 1 person
This: https://clumsykitchensite.wordpress.com/ When I share a blog post, it works properly, only the page’s link not.
LikeLike
Please try again now..it will work now 🙂
Om
LikeLiked by 1 person
What have you done? Magic! It works! Many thanks!
Eni
LikeLike
Pleasure Ani 🙂
LikeLike
Hi Om!
You’re doing a great job, thank you very much! Could you please help me to change space around “Previous post” and “Next post” at the bottom of a single page. Also there is a line with a dot, just above these two that could be move w little up. Thanks a million!
LikeLike
HI Rolandrolson
are you using wordpress.com free plan?
please let me know
Om
LikeLiked by 1 person
I moved to a different hosting provider, but I was on that free plan in the past.
LikeLike
In such case share me the site or post url to check please 🙂
LikeLike
http://rolandrolson.eu , any post will show you what I am trying to change. Thanks very much!
LikeLike
HI Rolandrolson
try this code
.single #jp-relatedposts {
margin-bottom: 1px !important;
padding-bottom: 0px !important;
}
.single article {
padding-bottom: 0px !important;
}
.post-navigation .nav-previous, .post-navigation .nav-next {
padding-bottom: 20px;
}
.is-singular .post-navigation .nav-links {
margin: 1em auto 0 !important;
padding: 1em 0 !important;
}
.post-navigation .nav-previous, .post-navigation .nav-next {
padding-bottom: 0px !important;
}
hope that helps
Om
LikeLike
Om, thank you very much for your help. The code did the magic, the website looks much better! You’re a star! Thanks again! 🙂
LikeLike
Hi Om,
Is it possible to have width of image more than width of column. For example, I have put width of single page 1000px as per Code #17 above and I want to have image width of 1200px on those pages.
LikeLike
please share me the page url where you want to do that change
Om
LikeLike