Styling Problems with Kleo

[jwchameleoncorp]

Oh I also forgot to point out that the width of the User Name and Password field are not the same. Can you make the width of the User Name field, the same width as the Password field please?

[Radu]

It should be ok.

I’ve used these CSS rules

COPY CODE

.kleocustomsection .template-page, .sidebar {
    padding-top: 0 !important;
}

.kleocustomsection input#bp-login-widget-user-login {
    width: 100% !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]

Perfect @radu !

I’m trying to learn how to do this, so I added code to the CSS to remove the extra padding, and was successful. Here is the code:

.kleocustomsection .template-page, .sidebar {
padding-top: 0 !important;
padding-bottom: 0 !important;
}

However, I also tried to add code to change the font in the Login Widget. Right now you can’t see the font because it is the same color as the background. So I tried to make it white by adding this code, but was not successful. Here is the code I tried:

.kleocustomsection input#bp-login-widget-user-login {
width: 100% !important;
color: #fff !important;
}

You mind telling me what I did wrong here?

Thanks for all your help. 🙂

[jwchameleoncorp]

http://travelcuckoo.com

Hi @radu

I tried to fix the same issue with another widgetized column in the same row, but was unsuccessful. Here’s the code I tried:

.vc_column_container a.awpcp {
color: #fff !important;
}

You can go to the website or view the attachment to see the font that I’m trying to make white.

I also have the same problem with the font color in the very left column containing the “Register” link in the Login widget.

Doing my best to try to figure out the code on my own, but not nearly as talented as you guys are. You mind taking a look at it please?

Thanks!

Attachments:

You must be logged in to view attached files.

[sharmstr]

Not sure where you got that css from, but you need this

COPY CODE

.widget_bp_core_login_widget a, .widget_awpcp-categories a {
    color: #fff !important;
}

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[jwchameleoncorp]

Haha! It was my feeble attempt to do it myself. I’m trying my best to learn this stuff and not bug you guys.

You’re code worked perfectly. Freaking genius as usual. Thanks!

[sharmstr]

Shoot. I just re-read that. That was an a$$ comment. I promise I didnt mean anything by it. I love that you’re trying to learn this stuff. I was there before.

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[jwchameleoncorp]

LOL! No worries. It made me laugh…I needed that! 🙂

[sharmstr]

Well, now that we have fixed them all individually, you could have done this easier by adding a custom class name to the row (i.e. make-me-white) and added this to change all of them

COPY CODE

.make-me-white .widgets a {
    color: #fff !important;
}

😀 LOL

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[jwchameleoncorp]

See, it’s stuff like that I’d love to learn. Do you mentor students at all? If I could just learn a few basics I could get so much farther.

Just tell me your hourly rate. I’m serious.

[sharmstr]

I dont. Sorry.

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[jwchameleoncorp]

Hi @radu

If you go to http://5firemen.com, go to Login/Register (upper right), and hover so the menu displays the drop down. You’ll see that the drop down menu items are white font, and you can not see them.

I’m reviewing this thread we created together a few months ago to style the top menu, but for some reason I can’t get the drop down fonts to display in black. Below is the custom CSS I have right now. Can you see what I’m doing wrong??? Thanks!

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

#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;}

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

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

.kleo-carousel-container .entry-summary {
display: none;
}

.vc_column_container a.bbp-forum-title {
color: #fff !important;
}

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

.kleocustomsection .template-page, .sidebar {
padding-top: 0 !important;
padding-bottom: 0 !important;
}

.kleocustomsection input#bp-login-widget-user-login {
width: 100% !important;
}

.widget_bp_core_login_widget a, .widget_awpcp-categories a {
color: #fff !important;
}

[Radu]

Hi,

Add also this css to wp-admin -> theme options -> general settings -> quick css

COPY CODE

.header-color .dropdown-menu li a {
    color: #333 !important;
}

Cheers
R.

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]

Perfect. Top shelf work, as always. Thanks @radu

[Radu]

Thank you for the nice words

Have a nice week

Cheers
R.

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 ?

[Author]

Posts