Radu

[Radu]

Hi,

For the video shortcode that’s the correct shortcode, there it’s an extra [kleo_button_video] tag in front of initial shortcode

COPY CODE

[kleo_button_video url="https://www.youtube.com/embed/Luyk-hgcfmw" style="alert" size="large" round="radius" icon="film,after"] Motivational Video [/kleo_button_video]

1. The search form that you show me broken isn’t on our demo
2. REplace this file content : /wp-content/themes/sweetdate/buddypress/common/search/dir-search-form.php
width content of this one : https://pastebin.com/raw/Rp6X2dsB

3. The search button will show differitely now after this change and 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 ?

[Radu]

Hi,

Yes

Useing the next function you will add the font to head

COPY CODE

add_action('wp_head','Kleo_hook_font');

function Kleo_hook_font() {

$output="<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto+Slab:700' type='text/css' media='all' />";

	echo $output;
}

Then in child theme/ style.css

add the css

COPY CODE

b,strong {
font-weight: 700 !important;
}

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 ?

[Radu]

Hi,

Just add a custom class for the main row named <b>custom-cols-order</b>

Then for the first column (left one) add a custom class named <b>float-left-flip</b> and for the second (the right one) add this class name <b>float-right-flip</b>

Then add the css to wp-admin -> theme options -> General settings -> Quick CSS

COPY CODE

@media(max-width:991px){
    .custom-cols-order .vc_row {display: grid;}
    .float-left-flip {order: 2 !important;}
    .float-right-flip {order: 1 !important;}
}

That’s 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 ?

[Radu]

Hi,

Just add this CSS to wp-admin -> theme options -> general settings- > quick css

COPY CODE

#buddypress div#item-nav ul li a {
    padding: 15px 15px;
}

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 ?

[Radu]

Not marked as solution

[Radu]

Hi,

Using the next css you will be able to choose equal height for the product title area

COPY CODE

@media(min-width:991px){
.woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {min-height:110px;}
}

To have all products at line also the images should have the same ratio, play with the 110px value and set as you need.

The css will 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

What support service includes ? What not ?

[Radu]

Hi,
YES!

So the code should look like this and it should works, just play with the font size

COPY CODE

/*------Specific style for IE11---------*/
 _:-ms-fullscreen, :root 
 #buddypress div#item-nav ul li a:before
{ 
  font-size:27px !important; 
}

/*------END Specific style for IE11---------*/

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 ?

[Radu]

Not marked as solution

[Radu]

Not marked as solution

[Radu]

Hi,
That’s odd but anyway use this css

COPY CODE

.kleo-posts-custom-only-first-post-image article.post:first-of-type .article-media img {display:none !important;}

I’ve added .kleo-posts-custom-only-first-post-image class to the element.

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 ?

[Radu]

Not marked as solution

[Radu]

Hi,

Use this css instead

COPY CODE

.single-product.woocommerce span.posted_in {
    display:block !important;
}

.woocommerce-demo-store span.posted_in {
    display:none !important;
}

Let me know
Cheers
R.

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

What support service includes ? What not ?

[Radu]

Not marked as solution

[Radu]

TRy with this css

COPY CODE

.edit .field_birthday .custom.dropdown {
    max-width: 100px !important;
    display: inline-block;
}

Or

COPY CODE

.field_birthday .custom.dropdown {
    max-width: 100px !important;
    display: inline-block;
}

OR

COPY CODE

.field_birthday .dropdown {
    max-width: 100px !important;
    display: inline-block;
}

The CSS will be added to Wp-admin -> theme options -> Styling Options -> 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

What support service includes ? What not ?

[Radu]

Ok then change the inherit property value with 19px or your desired value.

COPY CODE

font-size:inherit !important; 

COPY CODE

font-size:19px !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 ?

[Radu]

Add this css and let me know

COPY CODE

#buddypress div.activity-comments ul li, #buddypress #item-body #pag-bottom {
    border:none;
}

The css will 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

What support service includes ? What not ?

[Radu]

Not marked as solution

[Radu]

Not marked as solution

[Radu]

Hi,

Try this css and let me know if this solved the large icons on ie11

COPY CODE

/*------Specific style for IE11---------*/
 _:-ms-fullscreen, :root 
 #buddypress div#item-nav ul li a:before
{ 
  font-size:inherit !important; 
}

/*------END Specific style for IE11---------*/

The css will be added to wp-admin -> theme options -> General settings -> Quick CSS

Let me know
Cheers
R

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

What support service includes ? What not ?

[Radu]

Hi,

Those are css selectors

COPY CODE

ul.portfolio-items li .portfolio-header h3 a {color: #f7f7f7 !important;}
.kleo-carousel-container.kleo-carousel-style-overlay h4.post-title.entry-title a {color:red !important;}

.vc_custom_1502368807247 .post-title.entry-title a {
    display: none !important;
}

The css will be added to wp-admin -> theme options -> General settings -> Quick CSS

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 ?

[Radu]

Not marked as solution

[Radu]

Not marked as solution

[Radu]

Not marked as solution

[Radu]

Not marked as solution

[Radu]

Hi,

I’ve removed css that modifies the header at this matter and i’ve added this one

COPY CODE

/*RADU SQ7 CSS START*/
@media(min-width:991px) {
    img#logo_img {
    margin-top:5px;
}

.navbar-header {
    height: auto !important;
}

}

@media(max-width:991px) {
    img#logo_img {
    width: 100% !important;
    float:left !important;
    }
    .logo a {float:left !important;}

    .navbar-header {
        height: auto !important;
    }
    .navbar-header .logo {
    float: left !important;
    width: 80%;
    padding: 20px 0;
    }
}

/*RADU SQ7 CSS END*/

So now on mobile it looks like this :

On desktop like this :

So the views are how I’ve suggested in my previous post with the video.

So hope all good now, let me know if is ok to can close this ticket.

Also there it’s the original css that I’ve found in quick css area https://pastebin.com/raw/7t3anxjh

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 ?

[Radu]

Hi,

Take a look at the screenshot

The rule it’s added directly in the page or by some plugin or from theme option quick css, maybe it’s added by that one-page plugin, you can ask the plugin author about a solution for that also i have a css solution that you can try

COPY CODE

a.kleo-go-top.on .icon-up-open-big:before { 
content: '\e975' !important;
}

Add the css to quick css area if this will not work add this code instead

COPY CODE

function force_css_overwide_go_up_icon() {

    echo'
<style>

a.kleo-go-top.on .icon-up-open-big:before { 
content: \'\e975\' !important;
}

</style>

';

}

add_action( 'wp_footer', 'force_css_overwide_go_up_icon', 999 );

The function needs to be pasted in wp-content/themes/kleo-child/functions.php

NOTE : Child theme needs to be installed and activated.

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 ?

[Radu]

Hi, I know that it's caused on Media tab prom profile not in all components but using this CSS

.bp-overlay-menu #buddypress div#item-header ul span.count {
  display: block;
  color:#333333;
}

IT should fix that. so it's possible rtmedia to be a problem anyway in next theme update this will be fixed Cheers R.

[Radu]

Not marked as solution

[Radu]

Not marked as solution

[Radu]

Hi,

That isn’t possible, but use this CSS will make the favorite button to be hidden in new article activities updates

COPY CODE

ul#activity-stream li.new_blog_post .activity-meta a.fav {
    display: 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

What support service includes ? What not ?

[Radu]

Hi, I see, wired, I know that is' happens when you have overwritten the child theme templates, can you please provide the FTP + Wp admin credentials to take a closer look at that? For the counter that not displaying use the next CSS

.bp-overlay-menu #buddypress div#item-header ul span.count {
  display: block;
  color:#333333;
}

Icons can be changed using some cusom CSS selectors

a#user-activity:before {
    content: " " !important; 
    background-image: url('http://www.laconexioncreadora.com/wp-content/uploads/icons/actividades.jpg');
    width: 40px;
    height: 40px;
    color: transparent !important;
    background-size: cover;
}
a#user-xprofile:before {
    content: " " !important; 
    background-image: url('http://www.laconexioncreadora.com/wp-content/uploads/icons/perfil.jpg');
    width: 40px;
    height: 40px;
    color: transparent !important;
    background-size: cover;
}
a#user-friends:before {
    content: " " !important; 
    background-image: url('http://www.laconexioncreadora.com/wp-content/uploads/icons/amigos.jpg');
    width: 40px;
    height: 40px;
    color: transparent !important;
    background-size: cover;
}
a#user-settings:before {
    content: " " !important; 
    background-image: url('http://www.laconexioncreadora.com/wp-content/uploads/icons/configuracion.jpg');
    width: 40px;
    height: 40px;
    color: transparent !important;
    background-size: cover;
}
a#user-courses:before {
    background-image: url('http://www.laconexioncreadora.com/wp-content/uploads/icons/cursos.jpg');
    width: 40px;
    height: 40px;
    color: transparent !important;
    background-size: cover;
}
a#user-forums:before {
    background-image: url('http://www.laconexioncreadora.com/wp-content/uploads/icons/foros.jpg');
    width: 40px;
    height: 40px;
    color: transparent !important;
    background-size: cover;
}
a#user-groups:before {
    content: " " !important; 
    background-image: url('http://www.laconexioncreadora.com/wp-content/uploads/icons/grupos.jpg');
    width: 40px;
    height: 40px;
    color: transparent !important;
    background-size: cover;
}
a#user-messages:before {
    content: " " !important; 
    background-image: url('http://www.laconexioncreadora.com/wp-content/uploads/icons/mensajes.jpg');
    width: 40px;
    height: 40px;
    color: transparent !important;
    background-size: cover;
}
a#user-notifications:before {
    content: " " !important;  
    background-image: url('http://www.laconexioncreadora.com/wp-content/uploads/icons/notificaciones.jpg');
    width: 40px;
    height: 40px;
    color: transparent !important;
    background-size: cover;
}

Cheers R.

[Radu]

Hi,

Just add this css

COPY CODE

.message-box .message-content p iframe.wp-embedded-content {
    display: none;
}

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 ?

[Radu]

Not marked as solution

[Radu]

Not marked as solution

[Radu]

Not marked as solution

[Radu]

Not marked as solution

[Radu]

Not marked as solution

[Radu]

Hi,

Sorry I’ve made a mistake those are correct css selectors

COPY CODE

@media (max-width: 1199px) and (min-width: 992px) {
	.responsive-cols.kleo-masonry.dailybites article {
	    width: 100% !important;
	}
}
Or this one, test both, see what’s ok for you.

—

COPY CODE

@media (min-width: 992px) {
	.responsive-cols.kleo-masonry.dailybites article {
	    width: 100% !important;
	}
}

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 ?

[Radu]

Hi,

This is how it looks for me by default

But if you still need to adapt the size on kleo posts but only there, you will have to add a specific class to the row that contains or directly to the Kleo Posts element from visual composer backednd(see screenhsot)

Then you will have this css rule

COPY CODE

@media (max-width: 1199px) and (min-width: 992px) {
    .responsive-cols.kleo-masonry.mycustomclassname {
        width: 50% !important;
    }
}

Or this one, test both, see what’s ok for you.

COPY CODE

@media (min-width: 992px) {
    .responsive-cols.kleo-masonry.mycustomclassname {
        width: 50% !important;
    }

}

Change the width as you need.

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 ?

[Radu]

Not marked as solution

[Author]

Posts