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.

You can take my personal help in skype : om2000_cuet

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

You can take my personal help in skype : om2000_cuet

Published by allaboutbasic

193 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

  26. Hey there, I need to add a plugin PHP code into my header.php so that an image slider can appear on my website’s header. I just can’t figure out where exactly should I paste the code in the file so it works. I’ve tried shuffling it here and there a number of times but nothing seems to work. Could you please help me out? Thanks

    Like

    Reply

  27. Hi, I’m using this theme and I have a problem with the thumbnail images of the articles. Normally when I post an Article, the first image displayed in the homepage is the firstone of the article, but this time it doesn’t work and it puts the second one. I don’t know why the theme is working like this and I’d like it to be back to normal since that’s really disappointing seeing an image that doesn’t fit as a thumbnail.

    Like

    Reply

  29. hi there is it possible to edit the colors of the read more buttons, color of the header /footer area on WordPress.org. Had the theme is WordPress.com and moved to a new host and installed this theme and now it isn’t as customizable but I do love it! Also my pics are blurry and I am not sure if it is due to the theme or not. any help is much appreciated

    Like

    Reply

    2. Try this code

      to change the color of read more button
      .link-more a {
      background-color: darkred !important;
      color: #fff !Important;
      }

      background color of footer
      .site-footer {
      background-color: darkred !important;
      color: white !important;
      }
      footer text color
      .site-footer * {
      color: white !important;
      }

      let me know if it helps

      Om

      Like

      Reply

  30. Hi. I’m running Dyad 2 them on WordPress 5.2.4 but the tiled galleries are displaying as single images (no masory/tiling effect). Love the theme and was hoping to keep it. Works like a dream on the free WordPress platform, but not on when I tried hosting it elsewhere. Works great in every other respect. Doesn’t seem to be calling the javascript or adding the addtional classes for the tiling to take shape?

    Like

    Reply

      1. Yeah, I installed Jetpack, and then did a re-install just in case. Other plugins are: SEO Yoast, Akismet Anti-Spam and Limit Login Attempts Reloaded. have only modified the style.css manually. Jepack version 7.8?

        Like

      6. No joy with that, sadly. Still not displaying when previwed. Curiously, the tiled mosaic effect takes shape and displays in the edit/content panel (the block) but not when you view the actual page preview. Also noticed that when I enabled ‘Lazy load for images’ in Jetpack, none of the page images would display?

        Like

      8. I enabled lazy load site wide. Will look at Plug in conflicts but the only plugins are those named above. Will try it on another site on another server. That was running php 7.3. Will try a couple of things. No problem. Thanks for the input. Theme works great elsewhere.

        Like

      10. Thanks for all the input on this. In the end I tried the theme on a fresh domain and all worked well, so I removed the theme from the orginal site then did a fresh install and now everything seems to work fine. The tiled gallery displays nicely now. Just one of those things I suppose. Issue resolved! Thanks!

        Like

  31. My site is https://gryphoneblog.com.

    If I click on a category (for example, Cooking), I see the 10 most recent entries for that category. But I have 11 entries in the category and the 11th is not visible. At the bottom, there is a black rectangle and if I click that, then the 11th entry displays. Shouldn’t the black rectangle have some kind of text like “More” or “See More”? Otherwise, the user does not know to click on it to see the remaining entries.

    I have tested this on Chrome, Edge, Opera, and Brave.The behavior is the same for all of them.

    Like

    Reply

    1. Hi David
      put this code

      div#infinite-handle * {
      color: white !important;
      }

      in your Appearance > Customize > Additional CSS section

      let me know if it helps

      ** to show more than 10 posts in a category page, you can change it from Settings > Reading >
      Blog pages show at most

      Regards
      Om

      Like

      Reply

  33. Is there a way to have an image display in the left pane, but not with the text in the right pane, or vice versa? Sometimes I want an image in one place or the other, sometimes I want it in both places. Is this flexibility possible?

    Like

    Reply

      1. I noticed yesterday that if there is text in italics in a blog entry it now looks a little different (and I think clearer and better). It’s probably just my imagination.

        Like

  36. Hi there, thank you for this it is very useful! Would you know how to change or remove the line breaker at the top of each post, it shows as either a camera or word icon depending on the type of post. I would like to delete the whole breaker if possible?

    Like

    Reply

      5. Hello Om, the thing is that in my blog I have a menu that links to different categories. As an example:

        https://chinchetasenunmapa.com/categorias/el-salvador/
        https://chinchetasenunmapa.com/categorias/ecuador/

        Is a bit complicated, as I use Dyad2 only for single posts and another template (with its own scroll-to-top-button) for the rest of the blog.

        If you enter the links I shared, you will see that I managed to put in the same position the button of the plugin with the button of the template.

        The plugin let exclude some pages as “home” or “blog page”, but I don’t know how to refer “categories” to the plugin to exclude them too….

        I don’t know if I explained well… 🙂

        Like

  39. Hello Om
    I am working on a wordpress website on localhost because i want to change the theme of the website. i am changing the theme to dyad 2 but i am not getting all the customising options on localhost can you help me ? and tell where i am going wrong?

    Like

    Reply

      2. can you try this please?

        @media (min-width: 320px) and (max-width: 668px) {
        .site-branding {

        float: left !important;
        }
        #site-navigation {
        width: 100% !important;
        float: left !important;
        }
        #masthead.site-header {

        clear: both;
        overflow: hidden;
        display: block;
        }
        }

        Regards
        Om

        Like

      5. Thanks a lot. Let me test again when I’m in front of the computer tonight.

        OTOH, it does seem better to put the logo in centre on phones…. Anyway to make only the logo clicks instead of the big surrounding area too?

        Cheers.

        Like

  41. Hello Om Prakash;
    Thank you for this page! it is really helpful!

    Well, i have a question, if you can help me please in this,
    The homepage of the Dyad 2 theme shows an image behind the top menu, which is really great, and i would like to do so for the other pages.
    I tried using the featured image, but it shows up on the left side, which is not what i want.
    Is there anyway by which i can have the other pages with a similar top image full width and behind the top menu (like homepage)?

    The website im working on is http://www.chromeaccountants.com.au/
    so i need for example the contact us page to have a similar header top image as the homepage.
    Is it possible? Can you help?

    Like

    Reply

    1. Hi,
      thanks,
      would you mind to try this code please?

      body.page:not(.home) #content, body.page:not(.home) #content .entry-inner {
      padding-top: 0px !IMPORTANT;
      margin-top: 0px;
      }

      Regards
      Om

      Like

      Reply

      2. Is there a way to have it also appear on top behind the menu for lower screen resolutions?
        It worked fine with desktop resolutions, but when I open it via mobile it shows a top white padding. Can we solve this?

        Thanks in advance!
        ghina

        Like

      3. Hi Ghina
        please try this

        @media (min-width: 320px) and (max-width: 668px) {
        body.page:not(.home) #content .entry-content {
        padding-top: 0px;
        }
        header#masthead {
        position: absolute;
        }
        header#masthead .site-branding {
        padding-bottom: 0px;

        }
        body.page:not(.home) #content .entry-content {
        padding-top: 61px;
        }
        }

        Regards
        Om

        Like

      4. Well, i have used the code, but it is still showing white top padding on small screen resolutions. I have updated the file and deleted the cache though..

        Like

  43. Salam again Om,

    I have another question if you don’t mind..
    As we scroll down, the top menu header with the navigation menu and the logo goes up and disappears. How can we keep the whole top header (the logo, navigation menu and its transparent background) fixed, even if we scrolled down the page.
    I’ve tried some plugins to have it as sticky menu, but it didn’t work, it only kept the navigation menu without the logo and with no transparent bg behind.

    It is still for the same website http://www.chromeaccountants.com.au/
    Any advice?

    Thank you again for your time and effort, and I wonder if we can do you any favor in return..
    I’m a graphic designer, so if you need any help with photos or illustrations, i’ll be glad to help.. Thanks again..

    Kind Regards
    ghina

    Like

    Reply

    1. Hi Ghina
      thanks
      for the fixed header issue try this code ( i have shared the code for desktop version)

      @media (min-width: 1110px) {
      header#masthead {
      position: fixed !important;
      }
      }

      Regards
      Om

      Like

      Reply

      1. Unfortunately, it didn’t work either. Neither for desktop, nor for tabs or mobiles.The whole top header menu moved up and disappeared as I scrolled down.

        Can you please share the code again for having a fixed top menu for all media resolutions.
        I didn’t find the fixed header code that you shared for desktop version.

        Sorry for interrupting you again..
        Thanks for your time and efforts..

        Regards
        ghina

        Like

      3. I have removed it in order not to be confused.. i”ll use it again in a minute for you to check. Thank you!

        Like

      1. Yes! Amazingly, it worked for both!
        I just changed the code for header position @media (min-width: 320px) and (max-width: 668px) to be fixed instead of absolute as such;
        header#masthead {
        position:fixed !important;}
        But it all worked with your great help Om! I thought i would never be able to find the solutions for these issues. Thank you!

        Like

  46. Hello Om,

    Hope my message finds you well..
    Thank you for your great help earlier this week..

    I still have a question, hope you would be able to help me again in this,
    Is there any way by which i can change the height of the header image in the homepage?
    It is usually 1800px by 720px. Can we for example make it 1800px by 1000px, or any other height?

    Thank you
    ghina

    Like

    Reply

      2. Hi Ghina
        in your theme’s ( if you are using child theme then check parent theme) function.php
        and try to find and change this parameter
        add_image_size( ‘dyad-2-banner’, ‘1800’, ‘720’, true );

        ** you may need to reattach the banner image to see the effect..otherwise current header may not show the effect

        Regards
        Om

        Like

  47. Thank you Om,

    Well, I’m not working on a child theme.
    I did modify the parameter in functions.php to;
    add_image_size( ‘dyad-2-banner’, ‘1800’, ‘1181’, true )
    and i have uploaded a totally new image having the mentioned new size (1800×1181) but unfortunately it didn’t work..

    Anyways, Thank you for your great help!

    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