Dyad 2 By Automattic : Modifications, Support and documentations

dyad2 by Automattic documentation and tutorials

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;
}

dyad2 by Automattic homepage posts border readmore and style change

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;
}

dyad2 by Automattic header menu site title modifications

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;
}
dyad theme footer widget section modification
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

Hide or remove category tags author and show featured image

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

dyad theme footer copyright info change without using plugins

 

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;
}
footer copyright section modification

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;
}
dyad2 by Automattic single page modifications

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….

34 Responses to Dyad 2 By Automattic : Modifications, Support and documentations

  1. Great guide, thank you so much! I’m just wondering now, how to change the colour of the button that says “featured”?

    Like

  2. 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!

    Like

  3. gazdikam says:

    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/

    Like

  4. rolandrolson says:

    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!

    Like

    • HI Rolandrolson
      are you using wordpress.com free plan?
      please let me know
      Om

      Liked by 1 person

      • rolandrolson says:

        I moved to a different hosting provider, but I was on that free plan in the past.

        Like

      • In such case share me the site or post url to check please 🙂

        Like

      • rolandrolson says:

        http://rolandrolson.eu , any post will show you what I am trying to change. Thanks very much!

        Like

      • 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

        Like

      • rolandrolson says:

        Om, thank you very much for your help. The code did the magic, the website looks much better! You’re a star! Thanks again! 🙂

        Like

  5. dipz says:

    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.

    Like

  6. Hi! Is there a fix that makes a category’s or tag’s description visible on the first page, but not on page 2, 3 etc?

    Like

    • HI Gjermund Glesnes
      Would u mind to clarify some more?
      sorry didn’t understand your issue
      Om

      Like

      • I use 24 posts per page on my category and tag pages. If the category has more posts, they will show up on /Page/2/, /Page/3, etc.
        To improve my search rankings for the category pages I have started to write better descriptions, up to 300 words for each. However, the Dyad 2 theme by default shows the same description on all of them – making for duplicate content and poor usability.

        Like

      • let me check
        share me any of your category or tag page where /Page/2/ showing

        Om

        Like

  7. The code was
    /*hide taxonomies description from paged archives*/
    body.tag.paged .taxonomy-description, body.category.paged .taxonomy-description{
    display: none;
    }

    Like

  8. Rafał Greupner says:

    Hi, Im totaly new in wordpress and need some help in customizing your theme. Its beautifull and brings my blog to entire new high-class level but want to made some tweaks:
    1. how to change number of columns from 3 to 2? in live demo on my screen i can see 2 columns of pictures but after enabling theme my site got 3 columns. can you help?
    2. where to appy all those changes you highlighted in list above? apperance–>editor? which option to select and where to put those codes you highlighted in points:4/5/9? cannot find them.

    thanks a lot for help! youve done great work so far!!!

    Like

    • Hi Rafal
      sorry for the late response, was busy with some personal matter.
      are you using wordpress.com ?
      please let me know
      Om

      Like

    • Also, it is showing 2 column in your homepage?

      Like

      • Rafał Greupner says:

        HI, my blog is http://www.bezwegli.pl. Im using it directly from wp-admin.php panel but Im register on wordpress.com . on my homepage I got 3 columns but would like to have just 2. thanks for any hints how and where to apply your code

        Like

      • Hi Rafal
        what is your screensize?
        it is showing 2 column in my end?
        please let me know
        Om

        Like

      • Rafał Greupner says:

        Hi, my screensize is 1366×768 . the reason I was confused is that on live demo its showing 2 columns on full screed byt after implementation its showing 3.

        what about those code changes? also I saw that in demo you got auto hidding on main menu on top of the page and cannot find this option in setup

        thanks
        Rafal

        Like

      • Hi Rafal
        sorry seems i am not getting your issue,
        would you mind to share me screenshot how it is looking in your end please?

        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 )

w

Connecting to %s

%d bloggers like this: