Menu colour change on mobile and social buttons – Karuna theme

  • Unknown's avatar
    oanamacarie · Member ·

    Hi, can you help out please with the followings:
    1. Reading on all forums, I managed to change the menu colour from the set up purple to my #ea5f40 colour, but when I hoover over is the same lime green. How can I change the lime green to a dark grey, to match my website colours?
    2. How can I change the same menu colours for mobile? On my iPhone and some android, the menu colours are the default ones (purple and lime)? Is there a way to change it to my #ea5f40 and a darker grey one?
    3. Karuna supports a handy Social Links menu, which appears in the top header strip. I managed to delete the social buttons from the top header strip when I first installed the theme a year ago. How can I add back to top header strip?
    4. If is not possible to have the social button on the top header strip, how can I change the colour from purple to my #ea5f40 in the footer where the social buttons are located now.
    5. I also managed to delete the media/photo in testimonials, it doesn’t look like the demo one, is just my pathetic attempt to look similar. Can that one be fixed?

    My site is http://www.neocruit.com and is hosted by BlueHost

    Looking forward to hearing from you.
    Kind Regards,
    Oana Macarie

  • supernovia · Staff ·

    Hi there, these forums are actually for the sites hosted here at WordPress.com. I’ll help where I can, though, since this is our theme.

    I don’t know how you deleted / changed the code for the theme, since I can’t see the back end of the site. I’d recommend undoing that / reinstalling the theme if needed.

    For changing everything to the orange and grey you mentioned, all of this CSS should help. I generated this by adding it to the color customizer built into Karuna on WordPress.com:

    @media screen and (max-width:767px) {
	.main-navigation ul ul {
		background-color: transparent !important
	}
	.main-navigation ul ul a {
		color: inherit !important
	}
}

.header-widget-area,
.header-widget-area #infinite-handle span,
.header-widget-area .button,
.header-widget-area a,
.header-widget-area a:visited,
.header-widget-area a:hover,
.header-widget-area a:focus,
.header-widget-area button,
.header-widget-area input[type=button],
.header-widget-area input[type=reset],
.header-widget-area input[type=submit] {
	color: #fff
}

.header-widget-area .button,
.header-widget-area button,
.header-widget-area input[type=button],
.header-widget-area input[type=reset],
.header-widget-area input[type=submit] {
	border-color: #fff
}

.header-widget-area .widget-title,
.header-widget-area .widget-title a,
.header-widget-area .widget-title a:visited {
	color: #fff
}

.main-navigation ul ul a,
.main-navigation ul ul a:focus,
.main-navigation ul ul a:hover,
.main-navigation ul ul a:visited,
.main-navigation ul ul a:visited:focus,
.main-navigation ul ul a:visited:hover,
.footer-widgets-wrapper,
.footer-widgets-wrapper a,
.footer-widgets-wrapper a:visited,
.footer-widgets-wrapper a:hover,
.footer-widgets-wrapper a:focus,
.footer-widgets-wrapper button,
.footer-widgets-wrapper button:hover,
.footer-widgets-wrapper button:focus,
.footer-widgets-wrapper input[type=button],
.footer-widgets-wrapper input[type=button]:hover,
.footer-widgets-wrapper input[type=button]:focus,
.footer-widgets-wrapper input[type=reset],
.footer-widgets-wrapper input[type=reset]:hover,
.footer-widgets-wrapper input[type=reset]:focus,
.footer-widgets-wrapper input[type=submit],
.footer-widgets-wrapper input[type=submit]:hover,
.footer-widgets-wrapper input[type=submit]:focus,
.footer-widgets-wrapper .button,
.footer-widgets-wrapper .button:hover,
.footer-widgets-wrapper .button:focus,
.site-footer,
.top-bar,
.top-bar a,
.top-bar a:visited,
.top-bar a:hover,
.top-bar a:focus {
	color: #fff
}

.footer-widgets-wrapper .widget-title,
.footer-widgets-wrapper .widget-title a,
.footer-widgets-wrapper .widget-title a:visited,
.footer-widgets-wrapper .widget-title a:hover,
.footer-widgets-wrapper .widget-title a:focus {
	color: #fff
}

.footer-widgets-wrapper button,
.footer-widgets-wrapper button:hover,
.footer-widgets-wrapper button:focus,
.footer-widgets-wrapper input[type=button],
.footer-widgets-wrapper input[type=button]:hover,
.footer-widgets-wrapper input[type=button]:focus,
.footer-widgets-wrapper input[type=reset],
.footer-widgets-wrapper input[type=reset]:hover,
.footer-widgets-wrapper input[type=reset]:focus,
.footer-widgets-wrapper input[type=submit],
.footer-widgets-wrapper input[type=submit]:hover,
.footer-widgets-wrapper input[type=submit]:focus,
.footer-widgets-wrapper .button,
.footer-widgets-wrapper .button:hover,
.footer-widgets-wrapper .button:focus {
	border-color: #fff
}

body,
.main-navigation a,
.main-navigation a:visited,
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation a:visited:hover,
.main-navigation a:visited:focus,
.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: #333
}

.entry-meta,
.entry-footer,
.entry-meta a,
.entry-footer a,
.entry-meta a:visited,
.entry-footer a:visited,
.entry-author .author-title {
	color: #6d6d6d
}

.comment-navigation,
.posts-navigation,
.post-navigation {
	border-color: #ddd
}

.comment-navigation,
.posts-navigation,
.post-navigation {
	border-color: rgba(221, 221, 221, .25)
}

body,
.sticky-wrapper,
.site-info {
	background-color: #fff
}

.main-navigation ul ul,
.footer-widgets-wrapper,
.site-footer,
.top-bar {
	background-color: #ea5f40
}

#infinite-handle span,
.button,
button,
input[type=button],
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=range]:focus,
input[type=reset],
input[type=search]:focus,
input[type=submit],
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
textarea:focus,
.jetpack-recipe-title {
	border-color: #cc3514
}

#infinite-handle span,
.button,
.comment-navigation a,
.comment-navigation a:visited,
.post-navigation a,
.post-navigation a:visited,
.posts-navigation a,
.posts-navigation a:visited,
a,
a:visited,
button,
input[type=button],
input[type=reset],
input[type=submit] {
	color: #cc3514
}

.header-widget-area {
	background-color: #535353
}

#infinite-handle span:active,
#infinite-handle span:focus,
#infinite-handle span:hover,
.button:active,
.button:focus,
.button:hover,
button:active,
button:focus,
button:hover,
input[type=button]:active,
input[type=button]:focus,
input[type=button]:hover,
input[type=reset]:active,
input[type=reset]:focus,
input[type=reset]:hover,
input[type=submit]:active,
input[type=submit]:focus,
input[type=submit]:hover {
	border-color: #535353
}

#infinite-handle span:active,
#infinite-handle span:focus,
#infinite-handle span:hover,
.button:active,
.button:focus,
.button:hover,
.comment-navigation a:hover,
.comment-navigation a:visited:hover,
.entry-title a:focus,
.entry-title a:hover,
.post-navigation a:hover,
.post-navigation a:visited:hover,
.posts-navigation a:hover,
.posts-navigation a:visited:hover,
a:active,
a:focus,
a:hover,
button:active,
button:focus,
button:hover,
input[type=button]:active,
input[type=button]:focus,
input[type=button]:hover,
input[type=reset]:active,
input[type=reset]:focus,
input[type=reset]:hover,
input[type=submit]:active,
input[type=submit]:focus,
input[type=submit]:hover {
	color: #535353
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title a,
.site-title a:visited,
.entry-title,
.page-title,
.entry-title a,
.entry-title a:visited,
.widget-title,
.widget-title a,
.widget-title a:visited {
	color: #333
}

    Going forward, you’ll also want to use the correct forums for self-managed installations, at https://wordpress.org/support/forums/

    Or, you’d be welcome to migrate your site to our services. You can find our pricing here:
    https://wordpress.com/pricing

    Cheers!

  • Unknown's avatar
    oanamacarie · Member ·

    Much, much appreciated. This coding helped out with changing the lime to grey and sorted the problem on PC, but still the same default colours on mobile devices (purple and lime).

    thanks

  • supernovia · Staff ·

    Odd, it was helping with my instance here, and it seems to be working on your site as well. If you need more help with this, could you head to the Karuna forums at WordPress.org (so the troubleshooting is in the correct place) and note what browser you’re using?

    https://wordpress.org/support/theme/karuna/

  • Unknown's avatar
    oanamacarie · Member ·

    Managed to have it working in the end, thank you

  • The topic ‘Menu colour change on mobile and social buttons – Karuna theme’ is closed to new replies.