267 thoughts on “Health, Wellness and Yoga based wordpress Karuna theme: css style modifications and documentation”

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

      2. Hi Om,

        Thank you so much for your advices !
        I have removed footer text with using css, as showed to Natalie.
        Do you know how I could write my own footer instead of existing ?

        thanks !

        Liked by 1 person

      3. Hi Elena
        to add footer issue ..either

        1. please check in Appearance>Customize to find out if there is any option to add footer text
        otherwise

        2. you have to edit the footer.php

        if you need help to edit footer php file..please contact me in my fiverr profile…i will need the dashboard access to do that

        Om

        Liked by 1 person

      1. Hi!
        I have my website hosted with 1and1 and I have installed wordpress, I am not doing it with wordpress site. I do not k ow if it helps.

        Like

      2. Hi Joan
        thanks
        please check firs your Appearance > Widget section… if there is any Header widget section or not….

        if it has any header widget section….then u can use any plugins or icons to put the social links…otherwise it will need to modify the theme file ( using child theme)

        Om

        Like

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

      1. Shan, as you are wordpress.com , so i think u should check theme option ….as there is no chance to modify theme files in wordpress.com so this different page or post different header cant be done

        Om

        Like

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

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

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

      1. HI Leanne
        thanks
        just checked ur provided site and found there is no purple line in header….
        but purple link is showing below selected menu…is that purple line u want to change?
        lease let me know
        Om

        Like

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

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

    1. HI Tullis
      in general

      a {
      color: red !important;
      }

      a:visited {
      color: red !important;
      }

      *** this will applicable to all links….including menus too… so.. let me know if you need further change

      Om

      Like

      1. HI TUllis
        would u mind to try this please

        #main a {
        color: red !important;
        }

        #main a:hover {
        color: red !important;
        }

        #main a:visited {
        color: red !important;
        }

        please let me know if it helps
        OM

        Like

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

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

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

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

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

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

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

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

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

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

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

  10. Thank you for such great info — it’s really helped me customize my website!

    A question — is it possible to remove the header image on all pages except the main page? I want the header image on the index.html, but for all other pages, I do not want it to appear.

    Like

      1. HI Jesscoll
        try this code

        .site-header .size-karuna-hero, .custom-header {
        display: none;
        }
        .home .site-header .size-karuna-hero, .custom-header {
        display: block !important;
        }

        let me know if it helps
        OM

        Liked by 1 person

      2. I gave it a try, and the first part of the code removes the header from all pages correctly. However, the second part of code puts the header back on all pages, not just the main page.

        Any thoughts?

        Like

      3. Hi Jesscoll
        got it..
        Replace my previously shared code with this one

        .site-header .size-karuna-hero, .custom-header {
        display: none;
        }
        .home .site-header .size-karuna-hero,.home .custom-header {
        display: block !important;
        }

        let me know if it helps

        OM

        Like

  11. Thanks everyone, I was so bummed my page was totally different when I changed it to a .nl webpage.. I still have 2 issues on the website. Hope someone can help me out! Website: http://kaatkeepsgoing.nl/ Sorry it’s in Dutch 🙂

    1. the sidebar widget for people to subscribe: the ‘follow us’ (in this case ‘volg ons’) still appears in purple. How can I change this to black??

    2. In the full width footer, the titles (like category ‘categorie’) appears in another letter style compared to the ones in the sidebar and the letter style at the top of the page. How can I change this?? It appears right in my free blog kaatkeepsgoing.wordpress.com

    Like

    1. HI Kaat
      Regarding issue 1 try this code

      button, input[type=”button”], input[type=”reset”], input[type=”submit”], .button {
      border-color: black;
      color: black;
      }

      REgarding issue2
      is the issue in your .nl site footer title?

      let me know
      OM

      Like

      1. Hi!
        Thanks! I tried the code, but it still remains pink 😦 Sorry

        And regarding issue 2: yes the problem is in the .nl site footer title. It is a totally different letter style compared to other titles on the page.. Also small letters instead of capital letter.

        Like

      2. Hi Karin
        ok..would u mind to try this

        button, input[type=”button”], input[type=”reset”], input[type=”submit”], .button {
        border-color: black !important;
        color: black !important;
        }

        let me know if it work?
        Om

        Like

      3. Hi thanks for the code. I noticed that your last code worked for the mobile website. Unfortunately not for the desktop. But that is fine! Thank you for your help, you are awesome!

        Like

      1. Hi Om,

        Everything on desktop is fine it happens when i view from a mobile device..

        If you go to the home page using a mobile device you can see that I will need to scroll right to see the content

        Like

  12. Hey! I am building my first page, teatrozereia.es

    I am using the karuma theme, but when I subtituted all #85cc36 colors (links with mouse over them) with my intended color in CSS, this did not change, as you can check in the page. I have scanned the rest of the css in the style page looking for other codes I could have missed, but there is nothing left to change. What should I try?

    Like

      1. HI
        thanks..sorry for the late reply
        better you try “Simple Custom Css” plugins..and copy the related css codes and paste there with your choice-able color code
        Om

        Like

      2. HI
        thanks..sorry for the late reply
        better you try “Simple Custom Css” plugins..and copy the related css codes and paste there with your choice-able color code
        Om

        Like

  13. Hi! Thanks for the great advice regarding modifying the Karuna theme.

    I am currently building site mosainteriors.wordpress.com and would like the content area to be the same width as the header and footer. Now it’s wider if I choose “full-width page” and narrower if I choose “default template”. Can I adjust it somehow so that either the header, footer and widgets are as wide as the full-width option or the full-width option is as narrow as the rest?

    Like

    1. Hi
      thanks..sorry for the late response..
      seems you have selected to centralize the text?
      and try this code….
      article {
      padding-left: 10px !important;
      padding-right: 10px !important;
      }
      let me know
      Om

      Like

  14. Further to the last, your help also regarding the following issues would be super appreciated!

    – How can I change the hover color for the buttons (menu, “more posts”) etc?
    – How can I change the texts on the front page blog area? 1. it now has a title (latest posts) – I would like to remove this title altogether 2. There’s a button at the end saying “more posts” I would like to change this text into Finnish (“lue lisää”)
    – Can I adjust the image galleries so that on mobile view there would be eg. only 1 image in a row where in the desktop view there are 3?
    – Can I change the background color and font sizes of the sidebar widget area?
    – Can I adjust the width of the primary menu? Now it’s too narrow so that I had to use a small font size to make the menu fit onto one row.
    – Is it possible to remove the page titles from being visible on the pages?
    – Is it possible to remove the banner at the very end of the pages which says “Automattic”?

    Thank you in advance if you have the time to answer me.

    Like

    1. How can I change the hover color for the buttons (menu, “more posts”)
      try this
      /***** Menu hover color *******/
      .menu-primary-container a:hover {
      color: red !important;
      }
      /***** More POst *****/
      .more-recent-posts.button:hover {
      border-color: darkred !important;
      color: red !important;
      }

      Regarding Your 2nd Issue
      *** I am not seeing any title named “Latest Post” ?
      *** as you are using wordpress.com free hosted site..you cant change the More Post button (it is my guess)..but you can try one thing..change ur blog dashboard language..i hope that may work?

      Widget section change
      ***widget title font size

      .widget-title, .wf-active .widget-title a {
      font-size: 26px !important;
      font-style: normal;
      font-weight: 400;
      }
      **whole sidebar background color change

      #secondary {
      background: green;
      }
      or
      Individual widget section background color change

      #secondary .widget {
      background: red;
      }

      /*** Removing page titles ***/
      .page .entry-header {
      display: none;
      }

      To remove Automattic

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

      *** please let me know these helps u or not..and let me know if anything remains

      Om

      Like

      1. Thanks a lot! This worked! Only thing I couldn’t solve was modifying the buttons (hover) and text for blog area. I changed the language for blog dashboard (I think so) but it didn’t help. I’ll try to get some help from WordPress.

        Still if you have any idea about whether I can modify the image galleries on the footer widget so that there would be 1 image in a row on mobile while there are 3 on desktop, please let me know!

        The title I was referring to on the front page blog area is “Viimeisimmät artikkelit” (latest posts in English). I would really like to get rid of this but don’t know how..

        Kind regards
        Sini

        Like

      2. Hi Sini
        ** Text for blog are —> please share me the blog page url
        ** buttons (hover) —> which button you are referring? can u share me screenshot please?

        i already shared you these 2 code

        /***** Menu hover color *******/
        .menu-primary-container a:hover {
        color: red !important;
        }
        /***** More POst *****/
        .more-recent-posts.button:hover {
        border-color: darkred !important;
        color: red !important;
        }

        didn’t it work?

        Regarding footer instagram image
        @media (min-width: 240px) and (max-width:560px) {
        .wpcom-instagram-images img, .wpcom-instagram-images a {
        width: 100% !important;
        display: block;
        max-width: 93%;
        margin-left: auto;
        margin-right: auto;
        }}

        please let me know if it works
        Om

        Like

  15. Hi ,
    I cannot find the way to change the size of the font in menu , the number of boxes , their size , their position ( not the drop down menu ) can you give me some advices ?
    Thanks , Michel

    Like

    1. Hi Michel
      which boxes you are referring? you mean number of menu items to show?

      To change the font size of menu

      .main-navigation a, .main-navigation a:visited {
      font-size: 12px !important;
      }

      let me know if it helps
      Om

      Like

      1. Hi Om ,

        Thanks for your quick reply , your advice it’s working , but this is also driving the font size of the drop down menu , I need to manage differently their font size .

        Yes I was meanning the number of items menu boxes 8 if needed and driving their poisitions also

        B.R

        Michel

        Like

      2. Hi Michel
        sorry for the late response
        To change only parent menu items font size..try this code

        #top-menu > li > a {
        font-size: 12px !important;
        }

        also try this code

        .main-navigation {
        width: 65% !important;
        }

        Om

        Like

  16. Hello! just wondering if you would be able to help with changing the colours of the links for the archive / categories list on the sidebar for posts?

    See here: http://www.inspiredlivingmedical.com/blog/blog-archive/

    As well, I was wondering how to change the colours of the ‘submit’ buttons for forms, we use one for sending emails on our contact page:

    See here: http://www.inspiredlivingmedical.com/contact-info/

    And lastly, I used your css code to change hyperlink colours, but it has now transferred over to the white part of the share buttons on our pages if you can see it is now lime green just like text links are. Is there away to avoid that?

    Thanks so much!

    Like

    1. Hi Julie
      sorry for the late

      To change the sidebar widget link color

      #secondary .widget a {
      color: darkred;
      }

      To change the submit button color try this code

      .contact-submit input {
      border-color: darkred;
      color: black;
      }
      please let me know if it works

      Om

      Like

    1. To further my post – the font sizes are all too big, i would like the Social – Facebook widget to fit in the same line as the contact and page widgets

      Like

      1. Thanks
        the facebook widget you placed below the Hours and Info widget

        to make the facebook widget to be inline with the HOurs and Info widget..try this

        .widget_wpcom_social_media_icons_widget ul {
        display: block !important;
        }

        .widget_wpcom_social_media_icons_widget li a {
        font-size: 25px !important;
        }

        let me know if it helps

        Om

        Like

  17. Hi! Thank you so much for the wonderful info regarding the Karuna theme! I have two questions – I am attempting to reduce the padding of my site logo (which appears in the same bar as the navigation menu). I would like it to be to the absolute left of the navigation bar and would also like to reduce the overall width of the navigation bar by decreasing the padding on the bottom and top of the logo.

    My second question is about the bar that would normally appear right below the header image slider. How would I go about changing the color of this bar? It is currently white and I would like to make it burgundy. Thanks!

    Like

    1. HI Justin
      to reduce the padding from the top and bottom of logo try this

      .site-branding {
      padding-top: 2px;
      padding-bottom: 2px;
      }
      Regarding 2nd issue
      ** are you talking about the background where the word “Home” is written below top header image?

      let me know
      OM

      Like

  18. Hi Justin,

    Hope you can help me out. I have been trying to add sidebar widgets to the static frontage of this theme, but sonar I have been unsuccessful.

    Do you have an idea on how I could accomplish sidebar widgets on the static frontpage of Karuna?

    Thanks in advance,
    Jeroen

    Like

      1. Hi Om,

        I have the same problem like Jeroen, I would like to add sidebar widgets to the frontpage, but I couldn’t find an option. Could you help me please? And when I add a sidebar widget to one page, it appears on every other pages too. I would like to add different sidebar widgets to every single page. Could you help me, how can I do that?

        Thank you in advance,
        Ib

        Like

  19. hello sir i just want to ask why I can’t install new plugins? and it sees.

    Geotagging: WordPress.com allows you to geotag your posts and pages, which means you can attach a physical location to them.

    Like

  20. I saw a question posted here about how to make the main navigation menu wider, but didn’t see a specific answer. Mine is too narrow for all of my menu categories and goes to two rows. I would like to keep it on one longer row, centered on the page, and can’t figure out how to do this.

    Like

    1. Hi Cameron
      please try this

      @media (min-width: 980px) and (max-width: 110099px) {

      .site-branding {
      display: none !important;
      }
      .main-navigation {
      width: 95% !important;
      max-width: 827px;
      float: none;
      margin-left: auto;
      margin-right: auto;
      }}

      let me know if it helps
      Om

      Like

      1. Wow, thank you so much, it worked! I have one other question I wonder if you can help me with…With the sidebar, the main content area where the blog posts are seems a little cramped. Is there a way to increase the width of the main content area/overall page? Thanks again!

        Like

      2. HI Cameron
        you mean… you want to increase the content section width in homepage and single post page?
        so that the gap between content section and sidebar reduces?
        please let me know
        OM

        Like

  21. To clarify, I’m interested to know if there a way to make the entire page wider, including the main content and sidebar. However, it would be useful to be able to reduce the gap between the main content area and sidebar as well. All info is appreciated, thanks!

    Like

    1. Hi Cameron
      please try this code only to make the left hand content section wider
      @media (min-width: 980px) and (max-width: 110099px) {
      .site-main {
      margin: 0 33% 0 0;
      text-align: justify;
      }
      }

      let me know what you think
      Om

      Like

  22. Thank you so much, yes, this is better! I have one other question I hope you don’t mind my asking. Is it possible to put an image in the top bar portion of the page? I have in mind putting a logo on the left side of the top bar, while having the social media icons to the right. (The icons are already there.) Thanks!

    Like

      1. Hi, yes, thanks for checking in. I was able to figure it out, but I have two other questions relating to previous questions I asked….

        First, in order to fit my logo in the top bar, I increased the height of the top bar. But now the social icons in the top right are no longer vertically centered. I have been trying to figure it out, but unsuccessfully so far.

        Also, I was able to put the logo in the top bar using the code “background-image.” If I wanted to put more content in the top bar, say text or a search box, how could I do that?

        Lastly, the sidebars have been removed from all pages, but I would still like the main content area to be wider in the main content area.

        Thanks again for all your help!

        Like

      2. HI Cameron
        for the top bar social icons vertical alignment issue, try this code

        .top-bar .jetpack-social-navigation.jetpack-social-navigation-svg {
        margin-top: 12px;
        }

        # for your issue 2 ( adding contents)
        ** are you using wordpress.com premium plan?

        #issue 3
        ** so u want to make the content section to be more wider? i found it is already wider?

        please let me know
        OM

        Like

  23. Hi, for the second issue, I don’t think I have the wordpress premium plan because I am hosting with Bluehost, and got started through them. I have the Bluehost Prime Web Hosting plan.

    For issue #3, yes, I would like the content section more wide. I don’t want it all the way to the edge of the page, but at least as wide as the menu at the top.

    Thanks!

    Like

  24. Hi Om – I am using the Karuna theme, and I somehow changed two things on accident:

    – The testimonials on the tatic front page… it took away the name of the person, but still shows the picture. Not sure how I did that. Can you tell me how to fix it? When I go to the individual testimonials, they are still there but they don’t display on the front page.
    – The menu top bar used to have words going across for different pages, but now it drops down if you hover over “home.” Would like to go back to the original settings.

    Also, is there a way to change the headings settings, like for headings 5 or 6, to not be all uppercase?

    http://www.creativeconnectionsmusic.org

    Like

  25. Hi!

    This thread has been an amazing help! Thank you for your time so far! So I am almost complete with my site but would love it for the header not to scroll when coming down the page. If you have a CSS code to make it static that would be very much appreciated! Thank you again.

    Like

      1. Chris
        not sure..but would u mind to try this code please?

        body.home.blog.wp-custom-logo.mp6.customizer-styles-applied.hfeed.highlander-enabled.highlander-light.custom-colors {
        padding-top: 0px !important;
        }

        let me know if it helps?
        Om

        Like

  26. Hi, I am having problems with my hyperlink hover colours. the CSS above isn’t working for me, would you be able to tell me what i’m doing wrong? I’ve used:

    #main a {
    color: red !important;
    }

    #main a:hover {
    color: red !important;
    }

    #main a:visited {
    color: red !important;
    }

    Also, I am seeing the purple line in the header, only in Google Chrome and IOS, however not internet explorer. Have you seen this issue before? i’ve used the following and its still shows:

    .no-top-bar .top-bar {
    background: #6636cc !important;
    }

    my URL is https://mechanika-ltd.com

    Like

  27. I want to change testimonials to show my about me page on the home page. Is this possible? I won’t need testimonials and this would be a good place to put about me info.

    Like

  28. Hey Om … I’ve also been working with Karuna theme for one of my clients and making a lot of updates to CSS. It may be helpful to note that for a mobile site, it will need different CSS changes – some of your readers may not realize that they need to change CSS for mobile separately!

    Like

  29. Hi Om. I am using the Karuna theme. When I click on the Page Button although the page displays but it does not navigate to the content. I have a big header image and the content is listed below this. How can I make it navigate to the text below?

    Like

      1. Heii Om. I want to show the big picture or some other picture. But, it would be nice to navigate to the text below when I click on the page. So, that it is better readable. Right now it is not visible unless we scroll down past the image.

        Like

  30. hi, thsnks a lot for your tips my friend. Hugs and congrats. I want to do the same thing. thet big image, to showit only in the home page, but no inthe internalpages, tou now? But not with the anchor link, because itkat way is not workin g]for me! There is how to do that?

    Like

  31. Hi, amazing help on here. I’ve found more in your comments than in most other sites combined! Two questions. With hyper links, mine go lime green after they’ve been clicked on. I’ve tried: a:visited {color:#404040;} to no avail. Also, my drop down menu on mobile version of Karuna is a good color but on the laptop version, it’s white. I can’t find anything white in my CSS. My site is http://www.beerwanderers.com. Thanks.

    Like

  32. Still having the odd green color to visited links. What was offered makes sense but even with important added, it’s not changing it.

    Like

      1. That seems to be working well. Only thing is the links are purple before they go green. That is only on these links.

        Thanks for all the help.

        Sent from Mail for Windows 10

        Like

      2. Yes, unfortunately, the green is gone but the purple is still there. Seems my other links are a bit different, too. Will look a bit more closely at them. I guess this is an override of links? Would my own links change in color, too? Thanks again.

        Sent from Mail for Windows 10

        Like

      3. That didn’t work, either. I’ll you the code I have, maybe something is blocking something. I did a lot to get the color back to where it was on wp.com….some from your site. Not sure what I would have done without all the help, probably went back to wp.com! haha
        .top-bar { background-color:#194E44 } .sticky-wrapper { background-color: #f6be67; }
        /* BOOK NOW NAVIGATION STYLING */
        .menu-item-6232 > a { border:solid 2px; border-color: #EA1B1B; padding:5px; }
        /*END OF BOOK NOW STYLING*/
        @media screen and (min-width: 768px) { .sticky-wrapper { background-color: #f6be67; } .fh-button-green { visibility: hidden; } } a, .entry-title a, .entry-meta a, .entry-footer a, .main-navigation a { color:#194E44; } .post-categories {display: none;} .widget { background-color: #000; color: #194E44; } .menu-toggle { border-color: #194E44; color: #194E44; } .main-navigation ul ul { background-color: #f6be67; } .entry-content a:hover { color: #EA1B1B } button.menu-toggle:hover { border-color: #EA1B1B; color: #EA1B1B; } a:hover {color:#EA1B1B;} a:focus .entry-content a { color: darkred !important; } .entry-content a:hover { color: red !important; }
        Sent from Mail for Windows 10

        Like

      4. It also hovers green just before it becomes the neutral color. No big deal, just thought you should know the overall effect.

        Sent from Mail for Windows 10

        Like

  33. Hi again, now I’ve managed to remove the previous and next post links. The same purple is in the more posts link and it again hovers to green. Guess it’s the same problem but just putting it out there. Thanks.

    Like

  34. Hi. I am using this theme for my art & fiction blog. I like to justify the text so that it looks like an actual book page when you read it. Until now the Justify Text button has worked fine, but as of today it has stopped working. Nor does the shortcut (Shift+Alt-J) work. I need this to work. I don’t like the ragged edge on my paragraphs. Thanks!

    Like

      1. I figured out how to do it with html, but I really don’t want to have to do it that way every time. If you will email me (and if you have time, of course), I’ll give you access to the blog and maybe you can straighten out. Would really appreciate it. Thank you.

        Liked by 1 person

  35. Om, the function seems to be working now even though I haven’t done anything. Momentary glitch, maybe? I appreciate your help nonetheless. Sorry to have bothered you. Have a great day, my friend!

    Like

  36. Added a full width custom HTML footer to my site but the text of the title seems unusually larger. Can I make it smaller? I also added the same widget to the sidebar and all the text is capitalized. Can I control this? Thanks.

    Like

      1. Thanks, Om. I kept looking around and managed to get the capitalization problem sorted out. Your code worked like a charm. I like the size in the side bar but now the one on the footer is slightly smaller than I’d like. Is it possible to have them differ? If not, it works for me as it is. Thanks again!

        Like

      2. Thanks, Om. All worked perfectly. Gives me some flexibility and easy to adjust if I want to later. Appreciate the quick help.

        Like

  37. Actually, like the sidebar one so much, I added it to everything but the homepage (no sidebar there on Karuna) so that is the only one with the slightly smaller text. It’s not so small and if only on one page, it’s not such a big deal. Thanks for your help once again.

    Like

  38. Hi!
    Thanks for a wonderful theme!
    I cant get my menu to change color from purple, I have tried to do as you wrote above. But I cant get it to change. I new to this, is it in the style.css I will do the changes?
    I would like to change from the color purple to the color #3BB3C1. If you hover over the “kliniker” link i the top menu, it still is purple! Please help 😉
    What code do I need and where should I put it in?

    thanks /M

    Like

  39. Hi Mr Om, I’ve tried some of the solutions mentioned here but it doesn’t work.

    I would like to do the following:

    1. Change the color of the “Hamburger” menu icon to black when the website is being viewed on Mobile devices.

    2. Change the color of the social media icons found at the footer of the page to black.

    Thank you so much for your help in advance!

    Webpage is at https://savesmartsingapore.com

    Like

    1. hi Jim
      to change Hamburger menu icon to black in mobile device..try this code

      button.menu-toggle .genericon-menu:before {
      color: black !important;
      }

      Footer social icons to black

      .jetpack_widget_social_icons ul.size-medium a {
      color: black !important;
      }
      let me know if it helps
      Om

      Like

  40. Thanks for a great theme! I would like to make the padding between the top menu and the site logo smaller. Or if it is easier to make the site-branding-wrapper wider. So that the menu of 5 pages will stay on the same row. see http://www.eriksson-berglund.se. Right now the last menu topic (kontakt) skips down on the row below. At least it does so on my mac. Is this possible to fix?
    thanks /M

    Like

  41. Hi, thanks so much for this post.

    I have looked up at the previous comments and they have been immensely helpful.
    I have two more questions on my website http://www.toomanytabs.co/

    1. IMPORTANT: The titles of the post is a deep purple and yellow when you hover above it on the WEBSITE. However, this does not apply on the MOBILE.. it just appears black. Could you help to make sure the mobile phone also has deep purple titles and yellow once you hover above?
    2. This is a bit minor – but the ‘post comment’ color is the light purple of Karuna. How can I change this colour?

    Thanks in advance!

    Like

    1. Hi Shin
      for your first issue
      would you mind to try this code please?

      .blog .entry-title a:hover {
      color: #f6bf69 !important;
      }

      For issue 2, i think you are searching this

      #commentform input#submit {
      border-color: yellow !important;
      color: yellow !important;
      }

      Om

      Like

  42. Hi Om! Thank again for helping me last time. I would really appreciate if you could help me one more time..!

    You know how in the homepage, the number of comments and post date/categories are in 2 different lines? (The number of comments comes after the post excerpt).

    How can I make all this into ONE line, so that the homepage looks like this. For example:
    july 8, 2019, posted in minimalism / 8 comments

    Thanks!

    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