Radu

[Radu]

Hi,

You can modify the html structure of the header by copying this file : /wp-content/themes/kleo/page-parts/general-header-section.php to wp-content/themes/kleo-child/page-parts/general-header-section.php then you can paste the slider shortcode at this line :

COPY CODE

<?php echo do_shortcode('[SLIDERSHORTCODE]'); ?>

Cheers
R.

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

[Radu]

Hi,

That white space between the slider and the menu it’s generated by the ubermenu and with this CSS you can fix that

COPY CODE

.ubermenu.ubermenu-main {
    padding: 0 !important;
    margin: 0 !important;
}


.header-scrolled .ubermenu.ubermenu-main {
    padding: inherit !important;
    margin: inherit !important;
}

For the slider problem, i think you should set a min height 600 or your desired value also, make sure you have selected standard type of slider

———————

Official revolution slider documentation : https://www.themepunch.com/revslider-doc/slider-revolution-documentation/

Cheers
R.

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

[Radu]

Hi,

Use this method instead please, copy and paste the html code into a text widget and put it where you need in footer and edit the links from our to yours then add the css into wp-admin -> theme options -> general settings -> quick css you will be able to increase or decrease the icons size modifying the font size value.

HTML

COPY CODE

<ul class="footer-kleo-social-icons">
  <li>
    <a target="_blank" href="https://twitter.com/SeventhQueen" rel="nofollow">
      <i class="icon-twitter"></i>
    </a>
  </li>
  <li>
    <a target="_blank" href="https://www.facebook.com/seventhqueen.themes" rel="nofollow">
      <i class="icon-facebook"></i>
    </a>
  </li>
  <li>
    <a target="_blank" href="https://dribbble.com/seventhqueen" rel="nofollow">
      <i class="icon-dribbble"></i>
    </a>
  </li>
  <li>
    <a target="_blank" href="https://plus.google.com/+Seventhqueen" rel="nofollow">
      <i class="icon-gplus"></i>
    </a>
  </li>
</ul>

CSS

COPY CODE

ul.footer-kleo-social-icons li {
    display: inline;
}

ul.footer-kleo-social-icons li a i {
    font-size: 26px;
    margin-right: 10px;
}

Cheers
R.

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

[Radu]

I've commented this code

//add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

so the custom_override_checkout_fields function will not run, I recommend you to start a collaboration with a web developer for such as situations. Cheers R.

[Radu]

Hi,

By adding this css

COPY CODE

li.kleo-user_avatar-nav a img {
    border-radius: 0 !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

[Radu]

Hi,

You can change the max container width using this CSS

COPY CODE

@media (min-width: 1440px) {
.container {
    max-width: 1680px;
}

}

Replace 1680px with your desired value.

Cheers
R.

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

[Radu]

Hi,

Unable to connect….

COPY CODE

Connection timed out after 20 seconds of inactivity
Error:        	Could not connect to server
Status:      	Waiting to retry...
Status:      	Resolving address of sharemit.net
Status:      	Connecting to 104.27.128.129:21...
Status:      	Connection attempt failed with "ETIMEDOUT - Connection attempt timed out", trying next address.
Status:      	Connecting to 104.27.129.129:21...
Error:        	Connection timed out after 20 seconds of inactivity
Error:        	Could not connect to server
Status:      	Disconnected from server
Status:      	Resolving address of sharemit.net
Status:      	Connecting to 104.27.129.129:21...

Please to the next, go to wp-content/themes/ delete KLEO theme and re-upload it again from wp-admin -> appearance -> add new and activate it and check again.

Cheers
R.

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

[Radu]

Hi,

The quick css feature it works….from example if you will add this css to wp-admin -> theme options -> general settings -> quick css

COPY CODE

form.kleo-contact-form button {
    background: red !important;
    color: #fff !important;
}

The quick contact submit button should look like this

Let me know if this works

Cheers
R.

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

[Radu]

Hi,

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

COPY CODE

#mc_embed_signup input#mce-EMAIL { float:left !important; min-width:250px;width:auto !important;}
#mc_embed_signup input#mc-embedded-subscribe { float:none;}

Cheers
R.

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

[Radu]

Hi again,

Please add this code to wp-content/themes/kleo-child/functions.php

COPY CODE

add_filter( 'kleo_theme_options_ajax', '__return_false' );

Note : child theme needs to be installed and active

Then change some settings in theme options and press save and check if the changes apply

The notifications are hidden on mobile because for the desktop has build to work on hover.. and on the mobile devices you don’t have hover because you don’t have mouse.

Cheers
R.

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

[Radu]

Not marked as solution

[Radu]

Using this css

COPY CODE

.top-menu li a {
    border: 0 !important;
}

The css can be added to wp-admin -> theme options -> general settings -> quick css

Cheers
R.

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

[Radu]

Not marked as solution

[Radu]

Use this css

COPY CODE

.kleo-main-header.header-normal {
    background: rgba(0,0,0,0.4) !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

[Radu]

Hi,

It’s a normal behaviour on mobile for notifications item to be hidden you can show the item by using this css

COPY CODE

@media (max-width: 991px) {
.kleo-toggle-menu, .kleo-toggle-menu .kleo-toggle-submenu {
    display: block !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

[Radu]

Not marked as solution

[Radu]

Not marked as solution

[Radu]

Or you can use a text block and in text area put this tag

COPY CODE

<hr>

Cheers
R.

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

[Radu]

Hi,

1. Yes via CSS with this CSS

COPY CODE

.kleo-mobile-switch {
    display: none !important;
}

2. Follow this article : https://archived.seventhqueen.com/general/article/create-facebook-app-get-app-id-facebook-login

3. Use this plugin : https://wordpress.org/plugins/remove-dashboard-access-for-non-admins/

4. Shortcodes list : https://archived.seventhqueen.com/documentation/kleo#shortcodes

5. Our shortcodes are generated by K-elements and if you de-activate the visual composer our shortcodes will run, so.. you can generate the shortcodes with visual composer then copy the code and paste it to text area from your builder.

Cheers
R.

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

[Radu]

Hi,

There are the CSS selectors that control content area and sidebar area

COPY CODE

.template-page.col-sm-9.tpl-right {
    width: 85% !important;
}

.sidebar.sidebar-main.col-sm-3.sidebar-right {
    width: 15% !important;
}

Change the values or replace it with px values to achieve what you need

The css can added to wp-admin -> theme options -> general settings -> quick css

Cheers
R.

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

[Radu]

Hi,

With this css,i’ve already provided in a previews reply

COPY CODE

.header-color .top-menu li > a, .header-color #top-social li a {
    font-family: "Raleway";
}

Cheers
R.

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

[Radu]

Not marked as solution

[Radu]

Hi again, The rest of the css

.post-footer small a,.post-footer small a span {
    color: red !important;
}

Cheers R.

[Radu]

Not marked as solution

[Radu]

Hi,

You can change the font size using this CSS that can be added to wp-admin -> theme options -> general settings -> quick CSS

COPY CODE

.primary-menu .navbar-nav>li>a {
    font-size: 17px;

}

For sticky on mobile follow this link and the inner links : https://archived.seventhqueen.com/forums/topic/sticky-menu-mobile-padding

You can de-activate/activate transparent menu for all pages from the site from wp-admin -> theme options -> header options -> transparent main menu, but you can set only for a page this setting from wp-admin -> pages -> your selected page ->

Cheers
R.

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

[Radu]

Hi, you can change that by using this selector

h1.page-title {
    color: green !important;
}

If you want to change also the post title in category pages use this CSS to

.post-header h3.post-title.entry-title a { color:red !important;}

Cheers R.

[Radu]

Not marked as solution

[Radu]

The avatar div container can be tweaked with this selector

COPY CODE

#buddypress #friend-list li div.item-avatar, #buddypress #member-list li div.item-avatar, #buddypress #members-list li div.item-avatar { width:120px !important; height:120px !important; }

Cheers
R.

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

[Radu]

Not marked as solution

[Radu]

Hi,

1. Yes it should be a separate file for every font but you can create general css file named all_ggl_fonts.css and in that file you can use @import or @font-face rule to import each font family then you will have to include in your head with the function that i have provided to you only that file that contains @import with all your selected fonts.

Example

COPY CODE

function Kleo_hook_font() {

$output=”<link rel=’stylesheet’ href=’http://linktomyfont.com/all_ggl_fonts.css’ type=’text/css’ media=’all’ />”;

echo $output;
}

Then set from css the new font family for every element

Example :

COPY CODE

body,a,b,h1,h2,h3,h4,h5,h5 { font-family : ‘FONT NAME’; }

If you want to have separate font family depends by element or heading 1,2 or 3

Example :

COPY CODE

body,a,b { font-family : ‘FONT NAME’;  } 
h1,h2,h3,h4{ font-family : ‘OTHER FONT NAME’;  } 
h4,h5,h6 {  font-family : ‘OTHER FONT NAME TWO ’;  } 

Reference Links : https://css-tricks.com/snippets/css/using-font-face/

2. Use the above method…

3. Use the above method

Cheers
R.

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

[Radu]

Hi,

Use the css method instead

COPY CODE

.single-post .kleo_framework.breadcrumb span[rel="v:child"] a {display:none !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

[Radu]

Hi I saw that but as you can see there it’s a spacing top and bottom… and the single way it’s to remove padding from top and bottom with this CSS

COPY CODE

body.is-user-profile .bp-full-width-profile div#item-header {
    padding: 10px;
}

Play with 10px value

Cheers
R.

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

[Radu]

Hi,

the condition if single will goes like this

COPY CODE

function kleo_breadcrumb( $args = array() ) {
    if(is_single()) {
        return WPSEO_Breadcrumbs::breadcrumb('<div class="kleo_framework breadcrumb">', $after, '</div>');
    }
}

Cheers
R.

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

[Radu]

Hi,

You can add content before members directory using this function

COPY CODE

function add_content_before_members_directory() {

    echo '<h1>Test</h1>';

}

add_action('bp_before_directory_members_page','add_content_before_members_directory');

Instead of ‘

Test

‘; add your content….

Cheers
R.

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

[Radu]

Hi,

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

COPY CODE

#buddypress div#item-nav ul li a {
    font-size: 13px !important;
}

Play with font size value

Cheers
R.

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

[Radu]

Not marked as solution

[Radu]

Hi,

Use that function to add banned before content and for the after content use this

COPY CODE

function ads_after_content() {

    echo '
    <div style="width:728px;height:90px;background-color:red;display:block;margin:0 auto;">
    728 AD
    </div>
    ';

}
add_action ('kleo_after_main', 'ads_before_content');

these functions should be applied also on the forum pages,

For the middle of the content we don’t have yet a quick solution

Cheers
R.

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

[Radu]

Hi, scroll bar can be removed by rewriting the max-height rule

COPY CODE

.basic-menu>.has-submenu>.submenu {
    max-height: inherit;
}

Cheers
R.

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

[Radu]

Not marked as solution

[Radu]

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

li.kleo-menu.kleo-user_avatar-nav.menu-item ul.pull-left {
    right: 0;
    left: auto;
}

Cheers R.

[Author]

Posts