WordPress Tricks

Dyad 2 By Automattic : Modifications, Support and documentations

allaboutbasic

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

Published by allaboutbasic

103 thoughts on “Dyad 2 By Automattic : Modifications, Support and documentations”

      5. It doesn’t work for my website on Dyad2 either : whe I share the homepage link on FB, the picture doesn’t show. It shows only if I share and inside page/article. What is the trick ? What can I do to solve this (major) problem ?

        Like

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

    Reply

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

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

    Liked by 1 person

    Reply

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

        Liked by 1 person

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

    Reply

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

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

      5. I am trying to get the same thing on my website. The demo site shows 2 columns on homepage but when I customize it for my site, I see 3 columns. I would like to get 2 columns so that my images look bigger. How can I achieve this?

        Like

  14. Hey Om, I have a issue with the balance between picture and text. Out of the sudden from one blog entry it changed and now the balance is gone. Could you help me with that?
    I also use the wordpress free plan and the name is: travellingforlifeblog.wordpress.com
    I also have one more question about the size from the blogposts. I love the view with two or three posts in a row but on my tablet or especially on the phone the posts are just in a column. Can I change that somehow?
    Thanks a lot for your help (:

    Like

    Reply

      3. Yes but I cannot find the option to change the position or the side of the picture and the text. I think I remember that you could change that somewhere but I cannot find it anymore..

        Like

      5. Sure, its travellingforlifeblog.wordpress.com
        After 6 blog posts the balance is disturbed from one post. It does not matter which one because I already tried to take that post and tag it as the first post on the website but then just another blog post disturbs the balance. I checked if that is maybe the „next page“ that it is like starting over again but in my settings it says to show 20 posts per page and I just have 14.
        Thanks for trying (:

        Like

      10. It is just visible if you zoom that far that you can just see one blog post in a row, the second is underneath and so on. If you have two posts in a row it does not appear

        Like

      17. thanks
        sorry for the late
        the image and content alignment ( to show images in the left and content to the right) can be changed
        but in free wordpress.com site…i am afraid you can’t change that as it will need css to use
        Om

        Like

  16. Hello Om. Great work you’re doing. Thank you. I’ve already picked up a few things from this post.

    1. How can I get the FEATURED tag on the rotating banner to display to actual tag name? I can edit files if you can tell me where to look.

    2. Can I get YOU to modify the comments template so that it’s easier and more compact to read (especially when there are a lot of comments) like here: http://appreciation.space/gratitude-list/

    Thanks for all you do.

    Like

    Reply

    1. HI Elizabeth
      so, you want to change the word “Featured” to a tag name…
      go to your theme folder..and then “template-parts” and check “content-featured-post.php” file
      and you will see the word “Featured” there
      please let me know if it helps

      Om

      Liked by 1 person

      Reply

  17. Hi, I have just completed my golf club site and it is looking pretty good. I have a number of images in the carousel but I would like to remove the word “FEATURED” that comes up prominently in each one. Is there any way to do that?
    I am using wordpress premium and the site is http://www.bridgendgolfclub.com . The site has just gone live so there might be a delay in your service provider updating DNS settings
    Thanks
    Al

    Like

    Reply

    1. Hi AI
      sorry for the late response
      try this code please

      span.banner-featured,.site-banner-header:before, .site-banner-header:after {
      display: none !important;
      }

      please let me know if it helps
      Om

      Like

      Reply

  20. Hi Om, I am afraid that I have another question. I am trying to install a plugin to provide a calendar to manage bookings at the golf club. I have selected Amelia from TMS and it looks like a very good fit for our needs. I have successfully downloaded, installed and activated the pro version of the Amelia plugin. That is as far as I can get before running into problems. From there on everything that I try to do runs into an error code, typically Error 500.
    I have checked everything as far as I can and Amelia is compatible and should work. Do you have any suggestions of what might be going wrong.

    Thanks in anticipation
    Alastair

    Like

    Reply

  21. Hi Om, I believe that I have a fix to this issue. The version released by Amelia is not compatible with WP and they have given me a pre-release version that appears to work.
    One less thing to worry about.

    Cheers
    Alastair

    Like

    Reply

  22. Hi Om, thank you for creating this informative page. My menu consists of some categories whose pages have a title at the top like “Category: Category Name.” Do you know if there is a way not to show “Category:”? I’m using free WordPress.com plan but thinking of upgrading to the business plan.

    Like

    Reply

  23. I’m on wordpress.com, and would like to customize the text of the “read more” buttons displayed in the homepage to say “more info” ( instead of “read more”). Does anyone know how to go about that? any guidance is appreciated. 🙂

    Like

    Reply

  24. Hello, there’s a yellow icon above “Readability” in your screenshot above for Question #17. That same icon is showing up as yellow on my pages for the Dyad theme but I’d like it to be Hex Code #872D62. Could you kindly tell me how to change this? My url for example is https://www.marquitamyrick.com/about

    Thank you

    Like

    Reply

      1. Hi Om!
        Thank you for all these amazing customizations, I’ve found almost everything I wanted to change on your page. Just one more thing, in addition to the yellow/orange circle at the top, there’s also a small dot in a line just above the previous post – next post navigation. How do I change the color of that one as well?
        Thanks,
        Bianca

        Like

  25. Om, you are AMAZING!! It worked perfectly! Thank you so much. I went to your Fiverr link. I am going to order something just so I can pay you for your time and assistance. It says delivery is 2 days but you already helped me so I just wanted you to know. When I have any WP issues in the future, I’m coming to you!

    Marquita

    Like

    Reply

Leave a Reply

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

Gravatar
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 )

Cancel

Connecting to %s