Dyad 2 By Automattic : Modifications, Support and documentations

November 13, 2017 73 Comments

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

Filed under WordPress Tricks Tagged with , , , , , , , , , , , ,

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

  1. srdesignstudiossi says:
    January 16, 2018 at 9:39 pm

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

    Like

    Reply
  2. TheTenthReader says:
    February 12, 2018 at 2:54 pm

    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

    Reply
  3. gazdikam says:
    February 19, 2018 at 2:06 pm

    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

    Reply
  4. rolandrolson says:
    March 19, 2018 at 7:48 am

    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
    • allaboutbasic says:
      March 19, 2018 at 8:07 am

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

      Liked by 1 person

      Reply
      • rolandrolson says:
        March 21, 2018 at 7:40 am

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

        Like

      • allaboutbasic says:
        March 21, 2018 at 7:57 am

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

        Like

      • rolandrolson says:
        March 21, 2018 at 9:43 am

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

        Like

      • allaboutbasic says:
        March 21, 2018 at 10:16 am

        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:
        March 21, 2018 at 6:42 pm

        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:
    April 21, 2018 at 4:21 pm

    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
  6. Gjermund Glesnes says:
    May 18, 2018 at 6:14 pm

    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

    Reply
    • allaboutbasic says:
      May 18, 2018 at 7:09 pm

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

      Like

      Reply
      • Gjermund Glesnes says:
        May 18, 2018 at 7:14 pm

        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

      • allaboutbasic says:
        May 18, 2018 at 7:18 pm

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

        Om

        Like

  8. Gjermund Glesnes says:
    May 18, 2018 at 7:30 pm

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

    Like

    Reply
  9. Rafał Greupner says:
    July 1, 2018 at 5:08 pm

    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
    • allaboutbasic says:
      July 2, 2018 at 11:05 am

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

      Like

      Reply
    • allaboutbasic says:
      July 2, 2018 at 11:11 am

      Also, it is showing 2 column in your homepage?

      Like

      Reply
      • Rafał Greupner says:
        July 2, 2018 at 11:35 am

        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

      • allaboutbasic says:
        July 2, 2018 at 12:11 pm

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

        Like

      • Rafał Greupner says:
        July 2, 2018 at 1:47 pm

        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

      • allaboutbasic says:
        July 2, 2018 at 3:24 pm

        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

  10. Murielle says:
    August 13, 2018 at 4:30 pm

    Hello! I need yto change the site description font size. Thank you
    muriellesisaket@gmail.com

    Like

    Reply
  11. ExploreSacto (@exploresacto) says:
    August 20, 2018 at 1:28 am

    Hi Om, Would it be possible to add a sidebar to the pages? I like the post layout, but I need sidebar for pages.
    Julie

    Like

    Reply
  12. ExploreSacto (@exploresacto) says:
    August 22, 2018 at 5:16 am

    I have my own domain http://best-of-sacramento.com
    self-hosted wordpress.org

    Like

    Reply
  13. Drielle Cerri says:
    August 23, 2018 at 10:41 pm

    Hello! I’m also new in WordPress and have just started a blog using this theme. But, for some strange reason, the set up automatically made my Home a page where the posts do not appear, and I think it seems weird… here it is: https://frombraziltoitaly.wordpress.com/
    How can I set this page as my home instead? -> https://frombraziltoitaly.wordpress.com/blog/
    Thanks for any help you can give me!!

    Like

    Reply
  14. Lavazza says:
    September 1, 2018 at 3:36 pm

    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
  15. sprucingthegoose says:
    September 11, 2018 at 1:05 am

    Hello, Could you advise how to allow comments aganst a blog post. I have allowed them in settings but they do not fnction on the site.

    Like

    Reply
  16. Elizabeth Richardson says:
    October 8, 2018 at 10:27 am

    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

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

%d bloggers like this: