Karuna theme wordpress css style modifications and documentation

Karuna theme style changesKaruna is a clean business theme designed with health and wellness-focused sites in mind. With bright, bold colors, prominent featured images, and support for customer testimonials, your business’ brand will shine with Karuna. If you are an Yoga instructor..this theme is for you :). You can check the Karuna theme demo.
You can use my shared code and ask question in the comments section.

Or can take my personal help. Also to secure your wordpress site, you can check Steps and plugins to Secure your wordpress site.

1. If you want to change Karuna theme’s green ribbon’s background color, font family, font color and more use the following code
*** it is actually header widget area from which u can create such green ribbon

.header-widget-area {
color: white;
background-color: darkred;
font-weight: bold;
font-family: cursive;
font-size: 15px !important;
}

theme karuna green ribbon modification

2.If you want to change drop down menu background color, font color, font size and more in Karuna theme use the code below

.main-navigation ul ul {
background-color: darkred !important;
font-family: cursive;
font-size: 15px !important;
}

Also
** To change the menu font color
.main-navigation a, .main-navigation a:visited {
color: darkred;

}
.main-navigation a {

color: darkred;
}
.main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a, .main-navigation .current-menu-ancestor > a {
color: darkred;

}

theme karuna drop down menu modification


If you want to change Footer widget section background color in Karuna Theme use the code below

#colophon, .footer-widgets-wrapper {
background: darkred !important;
}

theme karuna footer widget background color modification

3.To Change Top header background color in Karuna theme

.sticky-wrapper {
background: darkred;
}

theme karuna header background color modification

5. Blog Page Modifications in Karuna theme

theme karuna blog page modification

If you want to change blog page title’s font color, size and font family

.blog .entry-title a {
color: #333333;
text-decoration: none;
font-family: cursive;
font-size: 25px;
}

ALso if you want to change blog page title’s Hover font color in Karuna theme

.blog .entry-title a:hover {
color: #333333;

}

In Blog page if you want to reduce gap between posts and put border as separator between posts

.blog .hentry {
margin: 0 0 3.2em;
margin-bottom: 20px !important;
border-bottom: 2px solid darkred !important;
}

In blog page and single post page if u don’t want to show Tags at the bottom of posts
*** it is applicable for single post page too

.entry-footer {
display: none !important;
}

In blog page if you don’t want to show Post date and category (meta )

.entry-meta {
display: none !important;
}

If you want to remove sidebar from blog page

.blog #secondary {
display:none !important;
}

.blog .content-area {
float: none !important;
width: 80%;
margin: auto !important;
}
.blog #primary #main {
margin: auto !important;
}
.blog .post-thumbnail img {
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
display: block !important;
}
karuna theme blog page sidebar remove

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

OR


Want me to help you personally for CSS Issue?CLICK HERE….

69 Responses to Karuna theme wordpress css style modifications and documentation

  1. Natalie on the rocks says:

    Thanks for this! How do you remove the footer credit using CSS? I’m at campbellcomms.ca. Thanks!

    Like

    • Hi Natalie
      please try this

      .site-info {
      display: none !important;
      }

      let me know if it works

      Om

      Like

      • Natalie on the rocks says:

        That seems to have worked fine for the inner pages, but the static front page is now buggy when you scroll to the bottom. The screen starts flickering or something weird. This happens on both Chrome and Firefox, but not IE. Is this a sizing issue?

        Thanks again for your help!!!

        Like

      • HI Natalie
        it seems theme issue is related to the image
        can u try to use smaller in height image?

        Om

        Like

  2. Joan Mesquida says:

    How do you set your facebook and twitter icon at the top header?

    Like

  3. shan says:

    Hi

    i want to have different header images for different pages. When I try to change the header image of a particular page(e.g contact us) then it is not reflecting even after saving it. pl advice

    Like

  4. Hello Om,

    Do you know how to disabled the Logo resize on scrolling? At the moment my logo changes when I scroll, but i would like it to always stay the same size.

    Thanks 🙂

    Like

  5. Can you tell me what code to put in the CSS so that the body font on the homepage is the same size as the other pages (ok to leave header as is).

    https://peterthompsonmassage.com

    Like

  6. Good afternoon, I did you customised help and I need a last one.
    I want to change the purple color in the Headband.
    Do you have the CCS code as I can change it ?

    Here my website
    http://www.filierepolymecanicien.ch/

    Thanks before

    Like

    • HI
      would u mind to clarify what you are referring as “purple color in the Headband” ?
      sorry didnt understand it
      Om

      Like

      • I did it

        .top-bar {
        color: white;
        background-color: #6636cc;
        font-weight: bold;
        padding: 0.8em 0;
        text-transform: uppercase;
        width: 100%;
        font-size: 14px;
        font-size: 0.875rem;
        content: “”;
        display: table;
        table-layout: fixed;
        }

        Like

      • Hello, I did it and change directly in the CCS.

        I steel have 2 big problems:

        1 ° the footer «Proudly powered by WordPress | Theme: Karuna by Automattic. ”
        I can not find a way to remove it, to replace it with the one of my choice.

        2° the images I want to insert into my page are small.
        It does not want to put full width of my content
        If you could help me, I would hold you tight for grateful and indebted

        Thanks before

        Liked by 1 person

      • HI
        did the previous code i shared worked?
        Om

        Like

  7. Change background-color: #6636cc;

    Like

  8. Hi, how can I change the thin purple header across the very top of the page?

    Like

  9. Hi there… As I said the theme is not live as yet. But you if you go here https://wordpress.com/themes/karuna/ you will see the thin purple line along the top edge of the theme, with the social icons and phone no. in it? That is what I wish to change the colour of.
    Leanne

    Like

  10. First of all thank you SO much for sharing this information! It has been a huge help to me. With color customization, I am stuck with one problem: Since this theme is responsive, the menu becomes a button with dropdown options when in tablet/smartphone mode and the color goes back to the Karuna default colors of purple (and then turns green when you tap the button). Is it possible to write CSS code to change the menu button color in tablet/smartphone mode? Thank you sincerely!

    Liked by 1 person

  11. matt says:

    how do i remove the top purple bar

    Like

  12. Faye Bryan says:

    I am using Karuna theme.

    I’ve installed the Download Manager Plugin.

    I know how to remove the sidebar from my regular pages but I can’t figure out how to remove it from the download page – this is the page my customer is directed to once he has paid for my item. The download link is there for him to get his product.

    It isn’t technically considered a ‘page’ as it’s a download.

    My website is http://www.yolk-marketing.co.uk

    Any help would be greatly appreciated.

    Thanks

    Faye

    Like

  13. Hi, it removes everything from the side which is great but not the details under the download box. Is there additional code for that?

    Like

  14. bri2222222 says:

    Hi there,

    Can you tell me how I can make my site title smaller?

    Thank you!

    Like

  15. tullis71 says:

    Hi
    Great theme!
    What CSS can I use to change the color on links (that are now purple when not visited and green when visited) to blue and grey instead?

    Like

  16. tullis71 says:

    Hi again
    That actually changed to much. A friend of mine looked at the source code and found this, and it did the trick
    a {
    color: #709fe0;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
    }
    a:visited {
    color: #5e5e5f;
    }
    a:hover, a:focus, a:active {
    color: #000033;
    }
    a:focus {
    outline: thin dotted;
    }
    a:hover, a:active {
    outline: 0;
    }

    Now I only have two problems.
    1 When changing the sites size to quite small – or looking in a smartphone, and the menu from the right side of the top bar changes to a MENU-button, it turns lilac / green (standard karuna colors). How do I set my colors on this button?
    2 The dropdown lists, when pushing the MENU-button which on my site are dark blue with white text in normal screen size turns dark blue in smart phone mode, so no text is visible. How can I change this?

    Thank you so much in advance!!

    Like

    • HI Tullis

      *** mobile menu border color of kearuna theme ****
      button.menu-toggle {
      border-color: darkred !important;
      color: darkred !important;
      }

      **** mobile menu hover color *****
      button.menu-toggle:hover {
      border-color: darkred !important;
      color: darkred !important;
      }

      For your issue 2

      @media (min-width: 240px) and (max-width:640px) {
      .main-navigation a, .main-navigation a:visited {
      color: white !important;
      }
      }

      would u mind to try this and let me know please?

      Om

      Like

  17. Sarah says:

    Hi,

    I have the FaceBook widget on my sidebar, but the title of the sidebar is still Karuna purple. How can I change that?

    Thank you!

    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 )

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: