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


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.

Or can take my personal help.

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

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;


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;
span.byline {
display: none !important;
span.posted-on,span.posted-on * {
font-family: cursive !important;
color: darkblue;
 font-size: 13px !important;
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;

 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;
 .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;
body {
background: darkblue !important;

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



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

Theme Dara Proudly Powered by WordPress Modification

<div class="site-info">
<a href="https://wordpress.org/">Proudly powered by WordPress</a>
<span class="sep"> | </span>
Theme: Dara by <a href="http://automattic.com/" rel="designer">Automattic</a>.</div>


If you have any issue feel free to ask me question here in comments section


Pay me some, I will help you for CSS Issue PersonallyCLICK HERE….

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

  1. emilyk74 says:

    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.


  2. fhallab says:

    hello, how can I change the default color of the contact form button?


  3. Simone says:

    Hi I want to change the default color of the contact form button but it doesn’t work with the code you suggested above?


  4. Can I delete the content slider completely?


  5. Sehria says:

    Juste un très grand et gros merci pour votre article ! Il m’a vraiment beaucoup aidé !


  6. Sehria says:

    I have no just question to ask tell you a very big thank you for your article! it really helped a lot me!


  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.


  8. collinchang says:

    How to modify the image size at the header ? At the moment, it is fixed to 1180 × 360 pixels and I want to make it smaller.


  9. collinchang says:

    https://atpasiaohse.wordpress.com/. I did not do much until this is resolved.


  10. collinchang says:

    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.


  11. Sky says:

    HI What’s the current pantone of DAra?


  12. drea says:

    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.


  13. testshiastu says:

    Hi, I have changed the navigation menu and drop down menu background color, however, when browsing with a mobile or a tablet, the “Menu” is still outlined with the original color. It is hard to describe so I’ll join a screenshot :

    Thank you for your help.


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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: