Styling Problems with Kleo

[jwchameleoncorp]

http://travelcuckoo.com

Hello,

I am having a lot of problems with styling the Kleo theme.

1. How do I change the color of navigation menu font for the home page? It is set for black (and appears black) in every page EXCEPT the home page, where it appears white for some reason??? (See attached pic)

2. Why don’t the social icons show up on the top menu on the Home Page??? They show up on every other page.

Thanks.

Attachments:

You must be logged in to view attached files.

[jwchameleoncorp]

Here are more examples:

http://travelcuckoo.com

1. No top menu or social icons
2. Font in Nav Bar is white

http://travelcuckoo.com/about
1. top menu and social icons display (this is what I want on EVERY page)
2. Font in Nav Bar is black (this is what I want on EVERY page)

I can’t find any way to customize the styling the way I want in the Kleo Dashboard or options.

[jwchameleoncorp]

Also, on the About Page (and on the Home Page and EVERY other page), I want the background color of the Top Menu to be identical to the color in the bread crumbs area > #3D5A99

[Andrei]

Well, you firstly set your menu as transparent for that case, and it won’t fall in the normal case. You can try to change the transparency color from black to white, that should change the menu color in black or I think you might want to consider to create a few css rules for making some fine tunings to the menu colors.

You social icons are missing because you probably disabled the top bar section for that page.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Andrei]

This is still an issue now ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[jwchameleoncorp]

Hi Andrei,

Yep, still an issue. I went through the styling settings one by one.

Compare headers on the Home Page, versus About Page, versus Member Profile Page.

About Page: http://travelcuckoo.com/about/
Member Profile Page: http://travelcuckoo.com/members/traveljen/
Home Page: http://travelcuckoo.com/

I attached a snapshot of my styling settings for the header. None of the items are set for transparency and the text is set for black.

There’s also no top menu on the Home Page.

What I’m striving for is a header that looks and behaves like the About Us Page, and the Member Profile Page, with one addition. I still haven’t found a way to style the color of the Top Menu, which I’d like to look exactly like the bread crumbs styling.

Thanks for taking a look.

Cheers.

Attachments:

You must be logged in to view attached files.

[Andrei]

Please go and edit your front page, and under the content editor you will find some settings that applies per page basis, here you should change your “Transparent main menu color” to black.
( http://seventhqueen.com/public-files/andrei/2015-08-26-m2rum.png )

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[jwchameleoncorp]

Ahhh! Got it. Thanks @andrei

Also, would this snippet of code that I used to stylize the Top Header in Sweet Date, work the same for stylizing the Top Header in Kleo?

.top-links {
background: #359 !important;
}
.top-links, .top-links a, .circular-progress-item
input, .ajax_search_image .icon {
color: #fff !important;

[Andrei]

Absolutely not, please provide me some screenshots with the elements you want to change and the exact colors and I’ll try to help you with that.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[jwchameleoncorp]

Hi @andrei

Thanks for the reply.

The element I’m trying to stylize is the top header and the fonts/icons in the header (see attached snap shot).

The exact colors are described in my last message in this thread (in the snippet of code). Essentially the background would be blue, while the fonts and icons would be white, throughout the website on all pages.

Thanks for the help.

Cheers

Attachments:

You must be logged in to view attached files.

[Andrei]

My colleagure @Radu will assist you with this small modifications on Monday.
Meanwhile have a nice weekend.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[jwchameleoncorp]

Thanks @Andrei

You have a great weekend as well.

Cheers. 🙂

[Radu]

Hi,

I see that you have made that modification, can i help you with anything else ?

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

Hi @Radu,

I was able to make the modification for the Sweet Date Theme, but can you please provide the code for Kleo?

Thank you for your help.

[Radu]

White Kleo scrolled header white transparency.

COPY CODE

.kleo-main-header.header-normal.header-scrolled {
    background-color: rgba(255,255,255,0.6);
}

Black Kleo scrolled header black transparency.

COPY CODE

.kleo-main-header.header-normal.header-scrolled {
    background-color: rgba(0,0,0,0.6);
}

it’s ok?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

Hi @radu

Just following up on this. I’m building a site locally with Kleo and can’t find a way to stylize just the background color of the Top Menu by itself. I would like the Top Menu background to match the color of my breadcrumbs bar, blue background with white fonts/icons (see attached).

Is there a setting for this that I am overlooking?

Thanks.

[jwchameleoncorp]

I forgot the attachment. Here it is.

Cheers! 🙂

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

COPY CODE

.header-color.social-header {
    background-color: #eeeeee;
}

Replace #eeeeee with the breadcrumbs bg color then add this css snippet to wp-admin -> Theme Options -> General Settings -> Quick CSS

Regards

RAdu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

Hi @radu

Thanks for the reply. I added the code as instructed and changed the #eeeeee to the breadcrumb background, but there was no change. Did I miss something?

Also, is there a setting that allows me to control the size of the social icons, and where they display in the top header (left or right?)

Cheers!

[jwchameleoncorp]

Attached is a snap shot of the header after the CSS was added.

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

Replace that css snippet with this css and let me know if it works now.

COPY CODE

.header-color.social-header {
    background-color: green !important;
}

Regards

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

Thanks @radu

That worked! Is there a way to make the icons and fonts in the top header white? Would also like to make the social icons a little bigger, if possible.

Thanks for all the help. You guys do a really great job. 🙂

[Radu]

You’re welcome

Try with these css snippets

COPY CODE

#top-social li, #top-social li a, #top-social li i, #top-social li .ts-text {color: #fff !important;}
.top-menu li.bp-login-nav a:before, .top-menu li.bp-register-nav a:before {color:#fff !important;}

Regards

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

http://travelcuckoo.com

Worked great Radu. Thanks!

Only one icon is not updated to white… shopping cart (very right side). How do I add that?

Thanks!

[jwchameleoncorp]

http://travelcuckoo.com

Hi @radu

I noticed that the My Account button and drop down (in addition to the shopping cart) also did not update to white. See attached.

Is there a way to include that too?

Thanks!

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

Use this

COPY CODE

ul#menu-kleotopmenu i.icon {color:#fff; } 

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

http://travelcuckoo.com

Hi @radu

Thanks for the code. It fixed the shopping cart, but the My Account/Login/Register button did not change. What code should I add?

Thanks for all your help.

[Radu]

Hi,

Please provide a dummy account.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

This reply has been set as private.

[Radu]

Hi,

You are referring to the text color of these buttons “My Account/Login/Register” cuz here i cannot see any icons for these buttons?

Regards

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

Hi Radu,

I know, that’s the problem. The color of those links in to the top navigation bar match the background almost exactly, which makes them hard to see. Look closely to the left of the shopping cart icon in the top navigation bar and you can barely see the link “My Account”

That font needs to be white so you can see it.

[Radu]

Hi,

Use this CSS

COPY CODE

.top-menu ul#menu-kleotopmenu li.kleo-menu ul.dropdown-menu a { color:#333 !important; }
.header-color .top-menu li > a, .header-color #top-social li a { color:#fff !important; }

It should to be ok.

Let me know if is ok.

Regards

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

Solid! That did the trick! Thanks for your help @radu

Cheers!

[jwchameleoncorp]

http://travelcuckoo.com

Hi @radu

Sorry to bug you, but I found another styling issue with the same scenario.

I was testing the site on mobile devices, and found one more problem.

The drop down arrow to the right of the My Account link (that enables you to access the login panel) is almost exactly the same color as the background. As a result people can not see it to login when on their mobile devices (see snap shot).

If you use Google Developer tools to simulate mobile devices, you’ll see what I’m talking about.

You mind taking a look please?

Thanks for everything. You guys are awesome! 🙂

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

This is not a bug, this is how theme works you can see live example here : http://seventhqueen.com/themes/kleo/uncategorized/interior-design/

Regards

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

Hi @Radu

Hope you had a great weekend. Thanks for the reply. Yeah, I know it’s not a bug. It’s a styling issue in the top menu bar, like all the other topics in this thread. Is there a way to change the color of that little drop down arrow link (looks like this “^” except upside down) so that it is white like all the other links we’ve made white? People can’t see it on mobile devices and don’t know how to login.

Thanks again for ask you’re excellent work

[Radu]

Hi,

You are welcome

Use this css

COPY CODE

.header-color .top-menu li > a span.caret:after {
    color: #fff !important;
    font-weight: bold !important;
}

Regards

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

That did the trick! I have to tell you Radu, your work is fantastic. I can’t thank you enough for taking the time to help. I’m extremely grateful. Have a wonderful day. 🙂

[Radu]

You’re welcome !

Thank you for your kind words.

Have a nice day too !

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[jwchameleoncorp]

http://travelcuckoo.com

Hello @radu !

Cleaning up some of the styling issues before launching the site, and was hoping you could help me, please?

In the pictures attached you’ll see some styling issues in the “Community” section of the Home Page on my site. You can also see these styling issues when visiting the website itself.

Anyway, what I’m trying to do is get all the sections to line up with the same top margin (I drew the red line that spans across the top as an example), remove extra space between the content above the “All Forums” and “All Topics” buttons, and force the links to be white that are to see because they appear similar to the background color in the left most column, where the login/register widget is located.

Can you please take a look?

Thanks in advance for your time. You’re work is fantastic!

Attachments:

You must be logged in to view attached files.

[Author]

Posts