Multiple Q’s from a new user of Kleo Theme:

[nextwave]

How do I:

1) Add the button to the Menu area as in the Header examples?

2) Adjust the font sizes of the top bar, header (menu), footer and socket?

Nothing is mentioned in the documentation about either of these.

Thanks!

[nextwave]

3) How do I hide the part in the header where the page title and breadcrumbs are – only on the home page?

4) For an individual page how do I hide the sidebar area?

[Kieran_SQ]

Hi,

Thanks for reaching out to us about issues you’re facing, as you have numbered these points already I will respond in the same format.

1. You can select the menu item style (button) by going to Appearances > Menus > Select: Desired menu. You can then open a menu item you have already added and you will see an option titled ‘Menu style’. You can select default, buy button, see through or highlight.

2. To set the menu font size please go to Theme Option > Header Options > Header Fonts > Scroll to: Main Menu Font size and the set your desired px value. To override the font sizes used in the top bar, footer and socket please add the below CSS to your KLEO Child theme’s style.css or to Theme Options > General Settings > Scroll to: Quick CSS. Adjust the px value to suit your specific requirements.

COPY CODE

.top-bar {font-size: 16px;}
#footer {font-size: 16px;}
#socket {font-size: 16px;}

3. To hide the breadcrumbs are please go to WP Admin > Pages > Open: Desired page. Scroll down past the post editor to ‘Theme General Settings’ and in the tab titled ‘Title Section’ you’ll find options to turn off parts or all of that area.

4. To change the page templare please go to WP Admin > Pages > Open: Desired page on the right side of the screen you will see a section titled ‘Page Attributes’, in the dropdown menu for template please select ‘Full-width’.

Thanks,

Kieran.

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

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[nextwave]

Hello Kieran,

Thank you for those answers.

1) What are the styling options for BUY BUTTON and HIGHLIGHT?
– I had it set to Buy Button but it didn’t look like a button.
– I have now chosen Highlight and it looks like a button.
– Do you have visual examples of each option?
– What does Link Relationship (XFN) mean/do?
– How do I set the color scheme for each of the three options individually?

2) How do I get this design for the look of the posts for the blog grid?
– https://seventhqueen.com/themes/kleo/blog/

3) How did you achieve each of these blocks on this demo page:
– https://seventhqueen.com/themes/kleo/news-magazine/#link_tab-lifestyle

4) I have the clients element inserted on my home page – but it is displaying the logos as faded initially and on hover they are full color – where can I change this so that they are either full color the whole time or they have a grey screen over them?

5) I have entered in this code as found in your forum for the top bar:
.social-header.header-color {
background: black !important;
}
.top-bar a {
color: white !important;
}

– However the drop down menu for the top bar needs to have the text in black- what is the code to make only the drop down text for the top bar black?

6) I have entered a custom menu in the footer and the background for the page I am on is Black for that menu item- how do I alter that?

[Kieran_SQ]

Hi,

1. The styling for all of the menu styles is generated automatically from the options you set within Theme Options > Styling > Header. I attach a screenshot with examples of see through and highlight. It appears that there is an issue with the ‘buy button’ style, and I will assign this ticket after this response to one of our developers @Radu who will be able to assist you further on that issue.

You can read more about XFN and other WordPress features in the WordPress Codex, here is an article on XFN that will be of assistance in describing what it is and does https://codex.wordpress.org/Defining_Relationships_with_XFN.

2. To have an archive layout for the blog in the same way please go to Theme Options > Blog > Scroll to: ‘Categories/Archives Layout’ and set it to use the right sidebar. Any post you make in the future will appear in the archive using that layout.

3. Please go to Appearance > KLEO Demo Data > Scroll to: ‘Home News Magazine’ and click import, this will import the demo content for those pages and you can how they work by open the desired page in Pages > All Pages

4. Please add the below CSS to your KLEO Child theme’s style.css or to Theme Options > General Settings > Scroll to: ‘Quick CSS’ to turn off the effect.

.client img {opacity: 1 !important;}

5. I will ask my colleague @Radu to look into this for you.

6. Please provide more information on point 6 as I do not understand what you mean.

Thanks,

Kieran.

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

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

Attachments:

You must be logged in to view attached files.

[Radu]

Hi

For the top menu links color use this css

COPY CODE

.header-color .top-menu li > a, .header-color #top-social li a {color:#000 !important}

Related to the buy button this will work and highlight only on the scroll, this is how it was built.

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 ?

[nextwave]

Hi Thank you for those answers 🙂

1) I would then suggest that the ‘buy button’ is renamed as it doesn’t work as a button per say in the traditional sense and really is more of a highlight on scroll. And the ‘Highlight’ & ‘See Through’ options are actual buttons- which are solid and outline styles of buttons…..

3) I don’t want to have to bring in a whole pile of demo data. Can you not share a video, instructions or screenshot of the elements that make up each section of that page please?

5) I added that in and it didn’t fix my issue. See attached screenshot.

6) See attached screenshot of what I am referring to.

Thanks!

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

1. Yes, the buy button will be highlighted only at the scroll, you can use the rest of the styles instead to show the outline directly.

3. You can enable only one page from our demo, and then you can open the imported page in visual composer beside your page and you can inspire and see in real time the values and properties.

The single page of the demo can be imported from wp-admin -> theme options -> theme demo data, see screenshot.

I cannot see your topbar it’s displayed nothing on your website http://seventhqueen.com/public-files/radu/httpsiagd.nextwavehosting.net_2017-09-27_17-56-18.png

For the picture with the menu what its the issue there? (blue background picture)

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 ?

[nextwave]

Hi Radu,

Thanks for the quick response.

1) Ok
3) Ok
5) The text should be black and it’s white is the problem in that drop down, and on hover the background is light grey with white text- this needs to be whit hover with red text – in the live notifications and Live messages in that top bar the drop down has white background with black text.
6) The issue is the black bar that shows when I am on that page – where are the settings for this?

I know all you see is white as it’s in dev. I can make a login for you if you give me the info…

Thanks

[nextwave]

Feature request- to be able to enter in a color code in the button element.
And for both the Kleo and normal button elements to see a preview while making it instead of having to preview the page to see it.

[Radu]

Hi,
try with this css instead

COPY CODE

ul#menu-kleotopmenu li a {
    color: #000 !important;
}

IF still not works provide a URL where the top menu it’s visible for a guest user

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 ?

[nextwave]

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

.header-color .top-menu li > a, .header-color #top-social li a {color:white !important}

ul#menu-kleotopmenu li a {
color: #000 !important;
}

This is the code that is there.
– If I remove this: .header-color .top-menu li > a, .header-color #top-social li a {color:white !important}
Then the text in the drop down is correct BUT the text in the top bar is also then black (the background is black.

I want to have it so that the top bar background is black- the text is white (and red on hover) and the drop down menu is white background with black text and red on hover.

Please advise.

[Radu]

Please provide a URL of your website where the top bar it’s visible, in homepage i cannot see it.

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 ?

[nextwave]

This reply has been set as private.

[Radu]

Hi again

You can add the login details securely here if you check set as private reply, but anyway here’s my email radu@seventhqueen.com

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 ?

[nextwave]

This reply has been set as private.

[Radu]

Hi,

Done, I’ve added this code to quick css area

COPY CODE

.top-bar ul.dropdown-menu.sub-menu li a{
    color: black !important;
}

IT should look ok now

Let me know
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 ?

[nextwave]

This reply has been set as private.

[nextwave]

This reply has been set as private.

[Radu]

Hi,

For the footer issue use this css

COPY CODE

.footer-sidebar ul li.current_page_item a{background-color:transparent !important;}

For the button use this css and change red with your color

COPY CODE

ul.nav a.btn.btn-highlight:hover {
    background: red;
}

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 ?

[nextwave]

This reply has been set as private.

[Radu]

Hi,

For those i need to take a closer look at the website, i need the credentials to can look at it, add them in a reply marked as private

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 ?

[nextwave]

This reply has been set as private.

[Radu]

Hi,

I see the next solution for this matter

– Adding the button to the main menu not for the second.

– Enabling “Compact overflowing menu items” -> ON from wp-admin -> theme options -> header options.

Will look like this

So adding the menu item to the second menu always will collapse to the next row if there is no space available.

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 ?

[nextwave]

Hello Radu,

I still have these two issues unresolved:

1) The text is not resizing the line height properly between desktop, tablet and mobile views when I have entered a text size manually. (I did try to add in the controls for responsive text – but it still wouldn’t display properly at certain sizes. I don’t want to have to mess around with this for every manually entered in text size.)

2) I also noticed that when I added in menu items below the DONATE button that when the dropdown showed the button then went white…… how would I stop that from happening with the HIGHLIGHT option chosen?

Thanks,
Danielle

[Radu]

Hi,

Sorry for that, see here the selectors below,

COPY CODE

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

    #main * {font-size:17px;line-height:35px;}
    #main h1 {font-size:17px !important;line-height:35px;}
    #main h2 {font-size:27px !important;line-height:35px;}
    #main h3 {font-size:37px !important;line-height:35px;}
    #main h4 {font-size:47px !important;line-height:35px;}


}

/* Tablet like.. */ 
@media only screen and (max-width : 991px) {

    #main * {font-size:27px;line-height:35px;}
    #main h1 {font-size:37px !important;line-height:35px;}
    #main h2 {font-size:47px !important;line-height:35px;}
    #main h3 {font-size:57px !important;line-height:35px;}
    #main h4 {font-size:67px !important;line-height:35px;}


}

There you have additional breakpoints i’ve done for 480, adapt the font size and line height for the 480 resolution then copy the css for the 991 resolution and adapt it for your needs.

Here’s the css for the button

COPY CODE

a.btn.btn-highlight:hover {
    background: #ba2a2a !important;
}

ul.nav a.btn.btn-highlight {
background: #ba2a2a !important;
border:0 !important;
}

ul.nav a.btn.btn-highlight .caret {line-height:54px;}

You can replace also the button color with your desired

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 ?

[nextwave]

Hello Radu,

Great thank you.

A new concern is that in the top bar, the live messages and live notifications does not display below the item when hovered over – it that how that is meant to display? (I ask as that then covers the other menu items in the top bar)

Thanks,
Danielle

[Radu]

Add also this rule

COPY CODE

.kleo-toggle-menu.open .kleo-toggle-submenu {
    top: 33px;
}

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 ?

[nextwave]

Hello,

I have a few new questions I would like help with please:

1) How can I show selected information that a member has entered into their profile on the member search page? IE Location, School etc (and have that information searchable)

2) How can I have a worldwide map that has location markers or dots that show where each member is located and have that on the Member search page?

3) How can I craft and send an email that will then be sent out to all members registered on the site? (If I use Contact Form 7 to create a signup form then that will go to somewhere external to WordPress) and isn’t updated when the user updates their member account….

4) Can I import a google group?

Hoping you can help. Thank you.

[Radu]

Hi,

1. Follow this article : https://archived.seventhqueen.com/kleo/article/add-extra-profile-fields-show-certain-profile-fields-member-directory

2. Maybe using Geo My Wp plugin https://geomywp.com/extensions/geo-members-directory/

3. Using a third-party plugin like this : https://wordpress.org/plugins/wp-email-users/

4. I don’t know if this it’s possible, you can ask on buddypress forums since it’s more related to the buddypres

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 ?

[nextwave]

Hi Radu,

1) Thank you- but when I put the code into the functions child theme file I now have a white screen displaying 🙁 – can you help with this?

2) Thanks- I might have a different one that I found but I’ll keep this on file.

3) Thank you.

4) Ok.

Thanks,
Danielle

[nextwave]

This reply has been set as private.

[Radu]

HI,

Try to paste the code from here: https://pastebin.com/raw/jM2dz1Ac also make sure to have BuddyPress plugin installed and activated.

This may be cased by the quotes wired encoded

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 ?

[nextwave]

Hi Radu,

That code in the link worked. Thank you!

How do I get the profile pictures to display above the text like in the demo?

[nextwave]

And have the text alignment centered?

– I can see it’s in the code and I tried making them important but it didn’t work…..

[Radu]

For centering the fields just look at the css under the php function in this page : https://archived.seventhqueen.com/kleo/article/add-extra-profile-fields-show-certain-profile-fields-member-directory

What do you mean by this “How do I get the profile pictures to display above the text like in the demo?”
How they are on demo ?

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 ?

[nextwave]

This reply has been set as private.

[Radu]

Hi,

Cannot see your website it says “This site is under developement.”

To can see the members directory please privde an account an link to members directory.

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 ?

[nextwave]

This reply has been set as private.

[nextwave]

Hello?

[Author]

Posts