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

94 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

    Liked by 1 person

  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?

    Liked by 1 person

  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

      • tullis71 says:

        This worked fine. I have now just discovered another issue on the smartphone size.
        If you look att http://www.upplandsschottisen.se on the computer, you see the menu on the right – Dansa schottis – Inför – Efter
        These words are darkblue as I want them to be – in the web interface.
        However on the smartphone interface they apparently are white, so they are “hidden”
        Dansa schottis are just below the MENU button on the smartphone, but not visible.
        How can I change this color?

        Like

      • HI Tullis
        sorry for the late response
        try this code
        @media (max-width: 640px) and (min-width: 240px){
        .main-navigation a, .main-navigation a:visited {
        color: #0b3d92 !important;
        }}

        Liked by 1 person

      • tullis71 says:

        I still have one issue on the smartphone. I have iPhone 6. On the screen, when the phone is standing, it looks ok. But if I slip the phone to horizontal position, the words (tävlingsinfo, anmälan, program and resultat, galleri, historik) in the dropdown menus disapear.

        I was also thinking, maybe to have the dropdown lists not blue, but white with only a blue frame. So the words are better visible. I can not make the text white since it is the same code for the above menues (dansa schottis, inför, efter) which are on white background.
        Is it possible?

        Like

      • HI Tullis
        can u share me screenshot how it is looking in ur end in horiontal view please?

        OM

        Like

      • tullis71 says:

        How can I upload a screenschot? Or should I send it by e-mail? If so, to which address?

        Like

      • Hi Tullis
        upload it to ur wordpress media library and share me the link here?
        Om

        Like

      • tullis71 says:

        Here they come. Both screenshots from my iPhone.

        Like

      • sorry for the late Tullis
        i am checking

        Like

      • Tullis
        please try this
        @media (min-width: 240px) and (max-width:980px) {
        .main-navigation a, .main-navigation a:visited {
        color: black !important;
        }}

        Liked by 1 person

  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

  18. architsharma says:

    Hi,

    I am quite new in changing themes. Can you please help by informing which place shall I go to add this code. For e.g. if I need to change the color of Full-Width Header, where shall I go and paste your text as am unable to see any location for this while customizing widgets.

    Like

  19. BobbyD says:

    Very helpful.. When I view the site on mobile the menu button outline is purple and when selected and open to few the drop down menu it is green outlined, I can’t find a code to change the purple or the green. Any help?

    Like

    • HI Bobby
      would you mind to share me the site url you are working on?
      Om

      Like

      • Hi Bobby

        Regarding purple color

        @media (min-width: 240px) and (max-width: 560px) {
        button, input[type=”button”], input[type=”reset”], input[type=”submit”], .button {
        border-color: #6636cc;
        color: #6636cc;
        }
        }

        Regarding Green color

        @media (min-width: 240px) and (max-width: 560px) {
        button:hover, input[type=”button”]:hover, input[type=”reset”]:hover, input[type=”submit”]:hover, .button:hover {
        border-color: #85cc36;
        box-shadow: none;
        color: #85cc36;
        }}

        Please change the Color Hex code using your one

        Om

        Like

      • BobbyD says:

        Hey this worked however now on mobile view when I click the menu and the drop-down appears it’s blue and I don’t see a specific spot for that. Just the menu button

        Like

      • Hi Bobby
        please try this
        @media (min-width: 240px) and (max-width: 560px) {
        .main-navigation ul ul {
        background-color: green !important;
        }
        .main-navigation a, .main-navigation a:visited {
        color: white !important;
        }
        }

        Om

        Like

  20. BobbyD says:

    My website is still working on other computers and incognito, but when i got to visit site from wordpress in my dashboard it suddenly comes up as this..

    Warning: require_once(/home1/firstpl8/public_html/wp-content/plugins/jetpack/class.jetpack.php): failed to open stream: No such file or directory in /home1/firstpl8/public_html/wp-content/plugins/jetpack/jetpack.php on line 71

    Fatal error: require_once(): Failed opening required ‘/home1/firstpl8/public_html/wp-content/plugins/jetpack/class.jetpack.php’ (include_path=’.:/opt/php70/lib/php’) in /home1/firstpl8/public_html/wp-content/plugins/jetpack/jetpack.php on line 71

    Fatal error: Uncaught Error: Call to undefined function is_user_logged_in() in /home1/firstpl8/public_html/wp-content/mu-plugins/endurance-page-cache.php:235 Stack trace: #0 /home1/firstpl8/public_html/wp-content/mu-plugins/endurance-page-cache.php(272): Endurance_Page_Cache->is_cachable() #1 /home1/firstpl8/public_html/wp-includes/class-wp-hook.php(298): Endurance_Page_Cache->finish(”) #2 /home1/firstpl8/public_html/wp-includes/class-wp-hook.php(323): WP_Hook->apply_filters(NULL, Array) #3 /home1/firstpl8/public_html/wp-includes/plugin.php(453): WP_Hook->do_action(Array) #4 /home1/firstpl8/public_html/wp-includes/load.php(677): do_action(‘shutdown’) #5 [internal function]: shutdown_action_hook() #6 {main} thrown in /home1/firstpl8/public_html/wp-content/mu-plugins/endurance-page-cache.php on line 235

    Like

  21. Faye Bryan says:

    Hi, Something weird is going on with my website http://www.yolk-marketing.co.uk

    I set it up so all posts are on the blog page only. Everything was perfect. I have just returned from holiday and something strange has happened.

    When I view my website on a desktop (without being logged in) the home page appears fine. When I view it on a mobile however the home page is my blog page and it appears different. It is only when I click on view full site that I see what the mobile version should look like on my mobile.

    When I view my website on the desktop whilst logged in (the customised function) the blog posts all appear on my home page even though the static front page settings are set to just appear on the blog page.

    What has happened, is this something you can advise on please?

    Faye

    Like

  22. BobbyD says:

    Suddenly my social media icons on the main page are gone and when I go on to add them again.. it makes my menu go away.. how did I have both before?

    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: