Web Development & WordPress

Dara By Automattic Modifications of header, footer, sidebar, contents and documentations

allaboutbasic

Theme Dara by Automattic documentation
With bold featured images and bright, cheerful colors, Dara is ready to get to work for your business.

Here I am sharing some css styling which you can use to styling your site  if you are using Dara by Automattic.

You can use my shared code and ask question in the comments section.

Question 1: How to change social icons background color in Dara theme?

Answer: Try the following code

.jetpack-social-navigation ul li {
background: darkblue;
}

Question 2: How to change or edit  site title’s font color, font size and font family

.site-title a {
color: darkblue;
font-weight: bold !important;
font-family: cursive;
font-size: 52px !important;
}

 Theme Dara by automattic header modifications

Question 3: If you want to change or edit site description’s font color, font size and family

 p.site-description, p.site-description * {
color: darkblue;
font-size: 19px !important;
font-family: cursive !important;
font-wight: inherit;
}

** If you don’t want to show or hide / remove  site description

 p.site-description
{
display:none !important;
}

 

Question 4 :  How to change  navigation menu background color 

.main-navigation {
background-color: darkblue;
}

 Theme Dara top menu modification

Question 5 : How to change dropdown menu background color

.main-navigation ul ul {
background-color: darkblue !important;}

Question 6 : How to change Navigation menu font color, size and font family?nav.main-navigation ul#top-menu a {
color: red !important;
font-family: cursive !important;
font-size: 15px !important;
}

******** Blog Page Modifications ********

Question 7 : If you don’t want to show post category at the top of post title in blog page

.blog span.cat-links {
display: none !important;
}

 Or

If you want to make the category links looks outstanding by changing font color, size and font family

.blog span.cat-links a {
color: darkblue !important;
font-family: cursive;
font-size: 16px !important;
}

Question 8 :  I don’t want to show  blog post date and post date. How to do that?

span.posted-on {
display: none  !important;
}

Also

I don’t want to show blog post author?

span.byline {
display: none !important;
}

Question 9 : I want to make blog post date and blog post author looks outstanding

For Blog post date

span.posted-on,span.posted-on * {
font-family: cursive !important;
color: darkblue;
 font-size: 13px !important;
}

For Blog post Author

span.byline ,span.byline  *{
font-family: cursive !important;
color: darkblue;
font-size: 13px !important;
 }

theme dara blog page modification

Question 10 : How to make the blog post title outstanding by changing title font, family, size and color

h2.entry-title, h2.entry-title * {
color: darkblue;
font-size: 23px;
font-family: cursive;
font-weight: bold;
}

 Question 11: I don’t want to show tags link at the bottom of posts in blog page

span.tags-links {
 display: none;
}
Or
I want to make the tag links  looks outstanding
span.tags-links ,span.tags-links  *{
color: darkblue;
font-size: 23px;
font-family: cursive;
font-weight: bold;
}

 Question 12 : How to change blog page posts  content font styling

.entry-content, .entry-content * {
font-family: cursive;
color: black;
font-size: 18px !important;
}
******** Grid Page Modifications ********

 Question 13 : In grid (page template) view of posts,  if  you want to remove the post summary

 .page-template-grid-page .entry-summary {

display: none !important;
}

********Homepage  Featured Posts Slider  Modifications ********

Theme Dara featured post slider modification

Question 14: How to remove category links in slider?

 .home .featured-posts span.cat-links {
display: none !important;
}
Question 15: How to remove  featured post date and auther in slider
.home .featured-posts .entry-meta {
display: none !important;
}

Question 16: How to remove Featured post title in slider

 .featured-posts h2.entry-title {

display: none;
}

 ********Background Color Modifications ********

Theme Dara header and body background modification

Question 17: How to change background color of the site?

body {
background: darkblue !important;
}

Question 18 : How to change background color behind the logo /  header section

.site-branding {
background: darkred !important;
}

Theme Dara footer social icons section background

Question 19: How to change background color of footer social icons section

.site-footer {
background-color: darkblue !important;
}

 Question 19: Dara By Automattic  parent theme  and child theme download

Download  Dara Theme (parent) and Dara Theme (Child) by Automattic

Question 20: How to replace “PROUDLY POWERED BY WORDPRESS | THEME: DARA BY AUTOMATTIC.” 

Answer:

in the child theme i shared.  Check footer.php  (as per the screenshot below)

Theme Dara Proudly Powered by WordPress Modification

[code type=”html”]<div class="site-info">
<a href="https://wordpress.org/">Proudly powered by WordPress</a>
<span class="sep"> | </span>
Theme: Dara by <a href="https://automattic.com/&quot; rel="designer">Automattic</a>.
</div>[/code]

198 thoughts on “Dara By Automattic Modifications of header, footer, sidebar, contents and documentations”

  1. I am currently using this theme. I really like it. However, my social icons cannot display in the header. It isn’t an option. Why is the example you are using showing them in the header. I would love to be able to move them to the header but the only options are sidebar, footer 1, footer 2, & footer 3. It is not showing there is an update available if this is a recent change. Thanks.

    Reply

      10. nop… at the buttom of my site if you click the contact us. you will see the “Get intouch” and “Career”…

      12. i used different plugins in “Getintouch” and “Career” and automatically it pop-up the “–” in my widget

  7. Can someone please help me figure out how to modify the size of the white space above the header menu? I would like to reduce so that the site starts with the header menu at the very top. Thanks so much.

    Reply

    1. Hi Collin
      try this code

      .custom-header img {
      height: 271px !important;
      width: auto !important;
      display: block;
      margin-left: auto !important;
      margin-right: auto !important;
      float: none !important;
      }

      let me know if it works

      Om

      Reply

      3. Hi ,

        Please download the screenshot from here.

        1) When I apply your CSS, the picture shrinks as desired but I am getting the dark grey area red arrow) to the left and right of the picture. Can you please let me know how to replace the grey area with the white space as shown in the area “ATP Asia OHSE?

        2) As for the green arrow, can you confirm the Dara theme is optimised to what resolution? I am using a monitor with 1920 x 1080 resolution.

        Hope to hear from you.

        https://wetransfer.com/downloads/7134da72442c6a5ffaea450dc5104d2020171108032127/5399afd741ae7d077489c229c4d6627b20171108032127/5c3e99

  10. Hi,
    I do not understand your comment “then it would touch to check the issue”? Your code works to my expectation on resizubg and hope to see a rectification CSS code for the red arrow area. Any way to help?

    Yes, if I remove the CSS code that you recommended, the red arrow section disappear and will align with the page. fyi. I am using custom CSS code plug in to implement the code change.

    Reply

  12. Hi,
    I managed to change the page background color in the front page, although when I click to go to another page, the page appears white. I did try inserting:

    .page {
    background-color: #232323;
    }

    It does change the page color, although a section of the page stays white.

    Also, thank you for this article and theme. It was so helpful.

    Reply

  14. Hello, Thank you for such a useful set of examples. I have tried your Question 12 : How to change blog page posts content font styling. This does change the styling of the font for blogs but it also changes the styling everywhere that uses entry-content.
    Is to possible to restrict the change to only the content of blogs?

    I also have a supplementary question. How do I make use of a google font e.g. Itim for blog content when the font is not included in the Dara Theme?

    Thank you very much.

    Tim

    Reply

  15. Thank you for getting back to me so quickly. I have solved the first part of my question by slightly modifying what you proposed in your Q12:

    .entry-body .entry-content { font-family: cursive
    }

    Now I need to work out how to import and reference a google font.

    You can see what I am doing here:
    https://thealbionschool.com/blog/

    Reply

  16. Just to clarify what I would like to do.

    I would like to be able to replace “cursive” in my previous comment with any font that I choose to import from Google.

    Thanks a lot.

    Tim

    Reply

    1. HI Tim
      ok put this code in your custom css portion ( i shared the thai code)

      /* thai */
      @font-face {
      font-family: ‘Itim’;
      font-style: normal;
      font-weight: 400;
      src: local(‘Itim’), local(‘Itim-Regular’), url(https://fonts.gstatic.com/s/itim/v2/K0fGzmj4WhCGfRyqF-GWtw.woff2) format(‘woff2’);
      unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
      }
      and then use

      .entry-body .entry-content
      font-family : Iitm !important;
      }

      you got the point?
      Om

      Reply

  18. Hi….how would I just replace the fonts of the headings? For example, the titles of the three featured content pages, titles of widgets, titles of page titles, etc? I thought I had figured out where to do it but nothing changes on the page. I want to swap out the Yrsa font there for Roboto.

    Reply

  20. Thank you so much for this post, it has helped me greatly. However, I do have a few questions.
    I was wondering how I can change the color of the “Older Posts” and “Follow” buttons at the bottom of my site.

    For reference, my website is: http://www.satinrussell.com

    Also, I changed the color of my category tags on the main page, but I noticed that when I click on an actual blog post, the categories revert back to the original color. How can I change this so that it stays the same from main page to post page?

    For reference:

    Here is the the main page showing #317d93 font color for categories: https://satinrussell.com/blog/

    And here is a post page example that shows the original font color for categories: https://satinrussell.com/2017/11/17/author-events-part-three/

    I am SO close to getting this page looking how I want it to. A lot of that is due to your help and this article!

    Reply

    1. Hi Satin
      sorry for the late reply
      would you mind to try this first please

      button, input[type=button], input[type=reset], input[type=submit], #infinite-handle span, .button {
      background-color: red !important;
      }

      let me know if the button color changed or not

      Om

      Reply

  21. Hi
    Great site with at lot a useful information! Thanks!
    I have changes the drop down menu colour, but then I look at my website from my mobil, the navigation with “menu” is still the wrong colour.
    You can se it here: http://www.byedelgaard.dk.
    The colour is aqua blue, but I want it to be grey. At desktop version it looks just fine, but not on mobile. Can you help?

    Reply

      2. No. I’m using a business plan. I write down the same code you gave David but it didn’t works. I can only change the color on the home page. In the other pages I can see the color only on the borders and not behind the text

      3. THanks, sorry for the late reply.
        I prefer you check, you saved the code in Preview Mode or Published Mode….you will see that (Preview mode, Published MOde) at the top of the Advance css customization option

      6. No problem. This is the CSS code:

        .site-content {
        background-color: #FFFAF0;
        }

        body.page {
        background-color: #FFFAF0 !important;
        }

        .site-branding {
        background: #FFFAF0 !important;
        }

        .site-description {
        color: #333 !important;
        }

        .widget {
        background-color: #FFFAF0;
        color: #333;
        }

        ——————————————————————————————–

        This is the html code for the page Paintwork

        Inside paintworks
        [gallery ids="239,240,241,242" type="columns" link="file"]

        When the frame meets the glaze they create lines effect and geometries that give life and harmonies to your space.
        In the photo you can see the frame made up of extruded polystyrene enriched by paintworks and glazed pearlescent or geometric lines with harmonious paintworks.

        Outside paintworks
        [gallery ids="244,245,246" type="columns" link="file"]

        Enhance the  characteristics of a house is the goal of a study of lines and colours. In these tre exemples you can see how the various colours, lines and personality of the house are harmonized and highlighted; creating a pleseant diversity.
         
        ———————————————————————————————

        If you take a look at the home page you’ll see that the color #FFFAF0 is on the background of all the page, meanwhile in the Paintwork page is only on the frame while behind the text the background is still white.

        I will so happy with you can tell me where I make a mistake. Thank you in advance for your time

    1. Hi David
      please try this code

      button.menu-toggle {
      background: grey !important;
      padding-left: 3px !important;
      padding-right: 3px !important;
      }
      please let me know if it helps

      Om

      Reply

    1. Hi David
      would u mind to check the following code please

      @media screen and (min-width: 1000px){
      #secondary.widget-area {
      width: 20% !important;
      max-width: 250px;
      }

      .content-wrapper .content-area {
      width: 78% !important;
      max-width: 752px !important;
      }
      }

      Reply

  30. Wow, that’s really strange. I tried 3 browsers: Chrome, Firefox, and Edge, and they did not display any change in the width of the sidebar. I am confused. I don’t know what that means.

    Reply

  31. OK, I discovered something. When I came home I tried my site on my wife’s computer with and without your code, and you are right – it does work! Upon further experimenting I discovered that when I narrow the browser, there comes a point where the sidebar reverts to its original size. If I keep narrowing the browser, the sidebar snaps to the bottom. That explains why I didn’t see any difference at first. I am working on a notebook computer, and I had the browser widow in that size where the sidebar stays its original size. If I widen it, the sidebar narrows as you said.

    This is all far beyond my understanding of CSS. Perhaps I should let well enough alone. But if you can think of a way to keep the sidebar *always* narrow, that would be ideal.

    Thanks again for your wonderful help!

    Reply

  32. OK, here’s another one. Can you share the code to change the color of the tagline? I’d like it darker. Mine says, “David Green’s ministry as an Area Coordinator with Reformed University Fellowship” on dgreenruf.wordpress.com. Thanks so much!

    Reply

  34. Hi, do you know if there is an easy way to create image galleries (e.g. 3 columns), that open into a slideshow as soon as one of the images is clicked (with arrows on the right and left to click through the enlarged images)? I want to include some photo galleries in some of my websites pages. Many thanks for you help, Julia

    Reply

      1. Many thanks for you quick reply! :-) I already created galleries in my posts and sites, but I just can’t find out what I have to do to create a popup slider, when clicking on one image of the gallery. At the moment the images open in a separate page when I click them. I’m lost… Do you have an idea? Maybe an addition to the CSS? Thanks a lot!

      3. No, I’m using wordpress.org. I started off with wordpress.com and then installed .org on our server and moved my .com site to the new .org site.

      4. To be precise: The popup slider worked in wordpress.com but in wordpress.org the images only open separately on a new page. Is there anything I’m missing? Anything I can change?

      5. :)
        i see, as you are using wordpress.org ……then you need to search such plugins. Actually as it depends on your choice , so i think you better to search either free plugins or in themeforest.net to get premium plugins

        Om

  35. Hi –
    I am currently using this theme and created a sidebar that I only want to show on a few pages. I set all other pages to “full width, no sidebar” however when I integrate WooCommerce the plugin forces the integrated page back to the default (with sidebar) setting and will not allow me to change it back to full width. Any tips on how to delete the sidebar from that one page?

    Reply

      2. HI Katrina
        that page is showing Coming Soon?
        you have to put the code in Appearance (Design) > Customization > Additional CSS

        Om

      3. Yes I’m in the process of building the site to publish it so others are not able to see it at the moment. Is there another way to show you what i need in order for you to assist with creating a code for this issue? Would a screenshot help?

      5. Site is up! Also, would you happen to know how to make the title or the headline image show up on the blog page. It disappears once the blog integration takes place. Thanks again for your help

      6. Try this code regarding sidebar issue

        .archive.woocommerce #primary {
        width: 100% !important;
        max-width: 100% !important;
        }
        .archive.woocommerce #secondary {
        display: none !important;
        }

        Let me know if it helps
        Om

      9. All pages have option to contain titles like “contact” “shop” and a also allows for a featured image to be placed at the top of each page however once the page is selected as posts page (page where blogs are posted) the title and featured image disappear

      12. Hi Katrina
        just checked
        actually it is not only css issue…so without checking from dashboard… cant help properly

        Om

      20. Hi Katrina
        try this code

        .single-product #primary {
        width: 100% !important;
        max-width: 100% !important;
        }
        .single-product #secondary {
        display: none !important;
        }

        let me know if it helps

        Om

  37. Hola! I can change the social menu icons in the Dara theme. I will create a link to an external personal forum and I want to customize the icon. Is it possible to do that? Which file should I edit?

    Reply

      2. Thanks
        sorry for the late response
        not sure..but
        are you searching this?

        #site-navigation {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        }

        please let me know

        Om

  43. HELLO – I am looking for the full page of example formats, that show all header styles, buttons, and any other formatting options built into the theme. I;ve been to the demo page and I dont see it anywhere.

    how do I display such a page? maybe there is a way to do it from the stylesheet? I am not very css savvy.

    thank you

    Reply

      1. Hi Patrise
        thanks,sorry for the late response
        i found , your site (patrisearts.wordpress.com) is not showing/registered?
        please let me know
        Om

  44. hah! I am not working on my own site – but this one:
    https://storyweaving.com/2019b/

    1 I found the theme demo that shows default headlines.
    2.designed a solution to the CTA (although being able to place a text area on the HOME page below the 3 Featured boxes would still be useful)
    3. My hottest question today is how to modify the CSS to make all and permanantly color #007399.

    Thank you!

    Reply

    1. Thanks
      as you mentioned

      1 I found the theme demo that shows default headlines.
      ** Great..what help you need there?

      2.designed a solution to the CTA (although being able to place a text area on the HOME page below the 3 Featured boxes would still be useful)
      ** So any help you need there?

      3. My hottest question today is how to modify the CSS to make all and permanantly color #007399.
      ** which section color you are referring?

      Om

      Reply

  45. Hello and thank you for this article! It is extremely helpful!
    I still need help changing the “Continue Reading…” link at the end of excerpts, links in the widgets in the sidebar (such as the tag cloud), and the link hover color of a title. Also, in a post, the same turquoise in the categories list above the title.

    Could you help with that? My site is not live yet but here is a preview link that I hope you can view:
    https://dalynnrmc.com/?customize_changeset_uuid=9dda1765-91d3-4abd-885c-c3297982210b

    Reply

      1. Awww. The site has not gone live yet so I was hoping you’d be able to see that preview link. I can take a screenshot to email to you?

    1. Hi Greg
      would you mind to try this please?

      .site-branding a {
      float: right;
      }
      .site-branding {
      padding-top: 0px !important;
      padding-bottom: 0px !important;
      }

      please let me know if it is ok?
      Om

      Reply

  47. Hi Om, thanks for all this info. Do you know how I can make the testimonials on the static home page into a clickable link? Tracey

    Reply

  48. Hi,

    Trying to change the font family of the menu, this isn’t working. help please!

    nav.main-navigation ul#top-menu a {font-family: ‘abril-text’,’abril-text-1′,sans-serif}

    http://nestspace.net

    (the font family string listed is the same as used for h1 h2 etc.)

    thank you!
    Chad

    Reply

    1. HI Chad
      sorry for my being late.
      is that abril-text font and Abril Fatface same

      #top-menu a {
      font-family: Abril Fatface !important;
      }

      would you mind to try this please?
      please let me know
      Om

      Reply

      1. Hi,

        You know what, it WAS that font all along, it was just all caps, which made me think it was a different font. I figured it out – thank you!

  49. Hi, are you able to help me please I have unchecked ‘display share and likes’ on the front featured pages however ‘shares’ has gone but ‘likes’ still show. Is it because they have been liked?

    Reply

  51. Hi, I have two issues i can not solve:
    1. tried to remove footer as you wrote in the article but does not work. In my page the exact content is”KÖSZÖNJÜK WORDPRESS! | SABLON: DARA, AUTOMATTIC FEJLESZTÉSÉBEN.”
    2. The footer I set does not appear

    Thanks for your help!

    Reply

  52. Good morning Om,
    I would change the links color in my site but it doesn’t work…
    I try with this code in css:
    a {
    color: blue !important;
    }
    Could you please help me?
    Thank you so much,
    janina
    http://www.placandreu.com

    Reply

      1. Unfortunatelly it seems it doesn’t work at all, thank you for trying Om!

      4. Hi Janina
        when i checked your site now..I am not seeing my provided code there
        so please check this

        1. if there is any error showing when u published the code
        2. if you have cleared the cache

        Om

  54. Hi there. I don’t think there’s enough difference in the color of all the copy and a word or phrase that is a link. When you hover over the words they change to a teal color but I’d like them to have more of a contrast without hovering…. you almost can’t see that they’re a link. Suggestions?

    Reply

  55. Hi Om,
    Thank you so much for this article and the help you are offering. I’m in the process of migrating my site from wordpress.com to another hosting platform. My problem is that the featured images no longer display correctly. They appear smaller than the space allocated to them, and off to the left. So far, searching online, I’ve found a solution for the pages by adding some css code (see at the bottom of this message), but the blog articles still have the problem. Since I have not yet updated the DNS codes, I cannot link to the problematic webpages, but I can send or upload a screenshot if you tell me how.
    Thanks again,
    Simona
    * * *
    Here is the code I’ve added to solve the problem on the pages:
    .hero .entry-thumbnail img {
    width: 100%;
    }

    Reply

      1. The problematic pages (on my new server) are not visible to others at the moment because I haven’t updated the DNS codes yet (I would rather not do it before I fix the problem), but I have uploaded a picture of one of the faulty webpages here for you to see: https://www.dropbox.com/s/4eq8gkiq960en10/Schermata%20a%202020-05-29%2014-47-39.png?dl=0
        I hope this is useful.
        If you’d like to see what this webpage SHOULD look like, here’s the link to my site on the old server (wordpress.com) – https://tea-time.it/your-mind-as-a-container/
        Thanks again for your efforts :)

  56. You are right… I can’t explain it. This morning it was still displaying funny, and now it seems ok.
    The only thing that changed since I wrote to you, is that I configured Jetpack. So perhaps that was what caused the problem…
    Thank you anyway for your good will.

    Reply

  58. This is a great blog. Thank you so much! I have just moved from wordpress.com to wordpress.org and wanted to keep the Dara theme and the same colours and fonts. But .org is more limited because Dara is a wp.com design. These hacks fixed everything! Thank you.

    Reply

  60. Hi… the white space above footer to the last word in the homepage is too big.. how to rectify that?

    Reply

  61. Hello… Im using Dara theme… there is a big white space between the last line in body/content of homepage to footer.. how do i correct this? thank you

    Reply

  62. I have two questions – website is hosted not via wp.com
    1.
    Is there any way I can add another text block below the featured pages on the static homepage?
    2.
    How can I change the powered by wordpress to show:
    Copyright &c 2014 to (current year) and then sitename

    Address is http://www.tiptreeacademy.co.uk

    Reply

      1. Yes it is a non-worpress.com hosted site

        I have a child theme set up to make the necessary changes and can do via FTP if easier

        Thank you

      2. Regarding the “powered by wordpress ” would you mind to check footer.php please?
        Regarding the homepage issue–sorry that i didnt understand what you are referring.

  63. Here is the footer,php

    For the homepage I would like to be able to add text below the native front page feature pages which are at the bottom of the homepage. There are two on the site

    Reply

Leave a Reply