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

 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;
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

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



<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

OR

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

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

    Like

  2. fhallab says:

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

    Like

  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?

    Like

  4. Can I delete the content slider completely?

    Like

  5. Sehria says:

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

    Like

  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!

    Like

  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.

    Like

  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.

    Like

  9. collinchang says:

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

    Like

  10. collinchang says:

    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.

    Like

  11. Sky says:

    HI What’s the current pantone of DAra?

    Like

  12. drea says:

    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.

    Like

  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.

    Like

  14. elemaha says:

    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

    Like

  15. elemaha says:

    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/

    Like

  16. elemaha says:

    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

    Like

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

    Like

  18. Hi, I am using an install of WordPress on a GoDaddy web hosting platform. Not on a free wordpress account.

    Like

  19. 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!

    Like

    • 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

      Like

  20. Christina says:

    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?

    Like

  21. Can you look at contigopm.com and tell me how to remove the extra white space above the footer? I’ve tried half a dozen different .CSS doses and nothing works.

    Like

  22. David Green says:

    Thank you! This is very helpful. Can you also provide the css to change the background color of my pages other than the home page?

    Like

  23. David Green says:

    That made no difference! I am puzzled that this is so difficult. Thanks for looking at it for me.

    Like

  24. dgreenruf says:

    The same place I posted the other codes you provided in this page – in the CSS customization area.

    Like

    • Hi David
      i see.
      sorry…without checking the dashboard …seems can’t help properly

      Om

      Like

    • Did you find a solution? I’m stuck with the same problem.

      Like

      • Hi
        are you using wordpress.com free hosted plan?
        let me know
        Om

        Like

      • 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

        Like

      • 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

        Like

      • Thank you for your time. The code is published.If you want to take a look the site is https://imbianchinicarboni.com

        Like

      • Can u share me the code you used please?
        Om

        Like

      • 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

        Like

      • I checked your gallery page https://imbianchinicarboni.com/galleria/
        and found the content section is white (background)
        to change that white background…try this code

        .content-wrapper {
        background: #FFFAF0 !important;
        }

        that is what you wanted..right?
        please let me know
        Om

        Like

      • It works. Thank you so much, I was stuck with this problem for like two weeks. Thank you very much

        Like

  25. David Green says:

    Another question please. Here is a screenshot from my phone. Do you know the code to change the color of small menu block in the middle of the mobile display? I want it gray, not aqua.
    https://dgreenruf.wordpress.com/home/

    Screenshot: https://drive.google.com/file/d/1SwTN9BQsuBA2TJ9NMMRIaRDJB9Gll13D/view?usp=sharing

    Like

  26. David Green says:

    It worked! Thanks so much! I’d never figure this out myself.

    Like

  27. David Green says:

    Om, the search window on the pages of my site seems to be in a sidebar, but it is much larger than it needs to be. Do you know how to shrink that sidebar? Thanks for your help!
    https://dgreenruf.wordpress.com/home/

    Liked by 1 person

    • 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;
      }
      }

      Like

  28. David Green says:

    Om, thanks for your help. Unfortunately, that did not change the width of my sidebar. Any other thoughts?

    Like

  29. David Green says:

    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.

    Like

  30. David Green says:

    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!

    Like

  31. David Green says:

    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!

    Like

  32. David Green says:

    Perfect! Thank you so much!

    Like

  33. grotenburgschule says:

    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

    Like

    • Hi Julia
      would you mind to go to your post editor and click on Media (to add image) and check the screenshot

      Like

      • grotenburgschule says:

        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!

        Like

      • are u using wordpress.com site?
        if yes which plan you are using?

        Like

      • grotenburgschule says:

        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.

        Like

      • grotenburgschule says:

        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?

        Like

      • 🙂
        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

        Like

      • grotenburgschule says:

        Thank you so much for your help! It’s a shame that some fuctions from .com are not included in .org Best, Julia

        Like

      • I think if you search for pluigns…u should get some

        Like

  34. Katrina says:

    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?

    Like

  35. Hello !!
    How can you modify the font-weight and color of the slogan?

    Like

  36. Fellow Fitzgerald says:

    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?

    Like

  37. Hello, I would like to move the menu to be above the header image and at the very top of the page, is this possible?

    Like

  38. hello, I’m not looking for the nav bar to be fixed, I just want it to be above the header image. Any thoughts? Thanks

    Like

  39. Gutberatenelisabeth says:

    Thank you very much for the helpful informations 😉

    Like

  40. blogpartyger says:

    Hi there, what size logo does the theme Dara expect? I can’t seem to work it out

    Like

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 )

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 )

Connecting to %s

%d bloggers like this: