Radu

[Radu]

Use this css

COPY CODE

@media(max-width:768px) {
 .contain-to-grid .top-bar { 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

What support service includes ? What not ?

[Radu]

Not marked as solution

[Radu]

Hi,

That it’s a buddypress feature you can try the next

To increase the avatar size make sure that you have next lines added to the file.

COPY CODE

if ( !defined( 'BP_AVATAR_THUMB_WIDTH' ) )
define( 'BP_AVATAR_THUMB_WIDTH', 120 ); //change this with your desired thumb width
 
if ( !defined( 'BP_AVATAR_THUMB_HEIGHT' ) )
define( 'BP_AVATAR_THUMB_HEIGHT', 120 ); //change this with your desired thumb height
 
if ( !defined( 'BP_AVATAR_FULL_WIDTH' ) )
define( 'BP_AVATAR_FULL_WIDTH', 580 ); //change this with your desired full size
 
if ( !defined( 'BP_AVATAR_FULL_HEIGHT' ) )
define( 'BP_AVATAR_FULL_HEIGHT', 580 ); //change this to default height for full avatar

Code can be pasted in this file : “wp-content/plugins/bp-custom.php” or in child theme functions.php wp-content/themes/kleo-child/functions.php

Replace 120 and 580 with your desired values

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]

Replace with this one

COPY CODE

#profile .row .five.columns .two.columns.pull-two {
    float: left;
    display: block !important;
    margin: 0 auto !important;
    position: initial !important;
    padding: 20px 10px;
    width: 100% !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]

Not marked as solution

[Radu]

Hi,

Under 768 px whole site css change by specific rules that’s the form becomes full width also it’s like that cuz it should have enough space on mobile for finger to TAP.

Anyway you can change the form width under 768px using this CSS

COPY CODE

@media(max-width:768px){
    .form-wrapper {
    max-width: 200px;
    }
}

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,
Replace the css that kieran provided here : https://archived.seventhqueen.com/forums/topic/adjust/#post-197557

With this one

COPY CODE

.header-bg {
    position: fixed;
    width: 100%;
    z-index: 99;
}

If you want that only for home use this one

COPY CODE

.home .header-bg {
    position: fixed;
    width: 100%;
    z-index: 99;
}

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,

Check this one instead

COPY CODE

function change_layout_on_register_page() {
    if (is_page('1222')){
        kleo_switch_layout('full');
    }
}
add_action('init', 'change_layout_on_register_page');
//add_action('after_setup_theme', 'change_layout_on_register_page');
//add_action('wp', 'change_layout_on_register_page');

Replace the 1222 with your page id ,if still not take any effect uncomment the lines with // one by one by testing any of the action hooks.

Make also sure to have child theme 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, Just add this css in wp-admin -> theme options -> quick css

.show-login {
    display: none;
}

Cheers R

[Radu]

Try with this php code

COPY CODE

function change_layout_on_register_page() {
    if (is_page('register')){
        kleo_switch_layout('right');
    }
}
add_action('init', 'change_layout_on_register_page');

Add it to child theme functions.php

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,

Replace with this one

COPY CODE

@media only screen and (max-width: 768px) {
.members .four.columns {
    width: 49% !important;
    display: inline-block;
}
}

If it’s the same decrease 49 to 46 values or lower

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]

Hi,

Not sure why like that,

Add this to quick css area it will solve the issue

COPY CODE

body {
    overflow-y: scroll !important;
}

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,

COPY CODE

@media only screen and (max-width: 768px)
.members .four.columns {
    width: 49% !important;
    display: inline-block;
}

For three columns decrease the width

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,

You can change that by using the next code lines

COPY CODE

define ( 'BP_AVATAR_DEFAULT', 'http://example.com/default-avatar.jpg' );
define ( 'BP_AVATAR_DEFAULT_THUMB', 'http://example.com/default-avatar-thumb.jpg' );

They can be added in child theme functions.php or in bp-custom.php

https://codex.buddypress.org/themes/guides/customizing-buddypress-avatars/

Replace the image path with your desired avatar.

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]

For desktop same on mobile

COPY CODE

#profile .row .five.columns .two.columns.pull-two {
    float: left;
    display: inline-table;
    margin: 0 auto !important;
    position: initial;
    padding: 20px 10px;
}

Pulling the change avatar out implies additional time, not have solution for that

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]

Also for the header use this css to make it narrow

COPY CODE

div#header {
    max-width: 980px;
    margin: 0 auto;
}

For main content

COPY CODE

div#main {
    max-width: 980px;
    margin: 0 auto;
}

socket

COPY CODE

 #socket {
    max-width: 980px;
    margin: 0 auto;
}

Or all toghether in one rule

COPY CODE

#header ,#main, #footer, #socket {
    max-width: 980px;
    margin: 0 auto;
}

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,

Use this css

COPY CODE

div#footer {
    max-width: 980px;
    margin: 0 auto;
}

Change the 980px with your value.

On my resolution it’s already boxed but for lower resolution use the css

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]

Hi,

use this one

COPY CODE

.button.dropdown>ul li a[href*="messages"] {
    background: #000; 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

What support service includes ? What not ?

[Radu]

Not marked as solution

[Radu]

Hi,

1. At this moment the header and whole site it’s boxed see the screenshot

2.

You will have to install and activate child theme first then copy this file : wp-content/themes/kleo/page-parts/general-header-section.php to child theme wp-content/themes/kleo-child/page-parts/general-header-section.php

Then open the file in child and see the screenshot

OR if you want to add link instead the top menu comment the echo $top_menu; and add below you links.

3a.

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

COPY CODE

.navbar-nav>li>a {
    font-size: 20px !important;
} 

3b. at this moment no search on the page

3c. It’s like that by default did you had make any changes (css) there ?

3d. hover text color

COPY CODE

.navbar-nav>li>a:hover {
    color:red !important;
}

4. Looks as it should you had solved?

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]

Replace all code with this one

COPY CODE

.form-search input[type="password"] {
    min-width: 90px;
}

.form-search .one.mobile-one.columns {
    display: none !important;
}
.form-search.custom .three.mobile-one.columns {
    height: inherit;
    display: inherit;
    width: 106px;
    float: left;
}
.form-search .three.mobile-one.columns:nth-child(4) {
    padding-left: 0px !important;
    margin: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

What support service includes ? What not ?

[Radu]

Hi,

Use this css

COPY CODE

@media(max-width:768px) {

    #profile div#item-buttons {
        text-align: center;
        margin: 0 auto !important;
        display: inline-block;
    }

    #profile .two.columns.pull-two {
        text-align: center;
    }

    #profile div#item-buttons * {
        min-width:220px !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]

Hi,

No quick solution to change the breakpoint there are to many dependencies in app.css file, it’s not enough to change from a single place.

You will have to search in app.css and app.less where 991px appears and to change with your desired value and to change that.

You can edit directly the app.css file by removing what you don’t need then make a copy and save it in chid theme in this path /wp-content/thems/kleo-child/assets/css/app.css

COPY CODE

function sq7r_app_css_child() {
    wp_deregister_style( 'kleo-app' );
    wp_dequeue_style( 'kleo-app' );
    wp_enqueue_style('kleo-app', get_stylesheet_directory_uri() . '/assets/css/app.css');
}
add_action('wp_enqueue_scripts', 'sq7r_app_css_child', 999);

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

NOTE : Child theme needs to be installed and activated.

Now the app.css file will be pulled from the chid theme.

The less files aren’t generated on every change they are additional so it’s sufficient to make the changes in the css file

Make sure to enable development mode On from wp-admin -> theme options -> miscellaneous.

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,

Do it as you need to the resolution interval

I will add below some breakpoints css rules

COPY CODE

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

And inside your desired rules

.container {
max-width: 1280px !important;
}

The container limit the page width so you can control from there.

After you add the desired css rule to the resolutions that you need add it to wp-admin -> theme 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]

Not marked as solution

[Radu]

Hi,

Just add this css

COPY CODE

.absolute-head #header {
    background: #e65f81;
}

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,

Q1.

Use this code

COPY CODE

add_action( 'wp_footer', 'wpse_262301_wp_footer', 11 );
function wpse_262301_wp_footer() { 
	wp_register_script( 'jquery-tweet');
}

If not works change 11 priority to 10 and still not works set 999

Q2.

If you will have only that icon you can screenshot the icon then crop it, upload it to your server, then use this css and replace the img path with new ones.

COPY CODE

#btnGoUp {
    background: transparent url("../images/up_page.png") no-repeat left top !important;
}

The css will be added in 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]

Hi,

Add this css

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

COPY CODE

@media(max-width:768px) {
    div#item-header-avatar {
    text-align: center;
    display: block; 
    }
}

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,

For the carousel there it should a new member registered, you can create a dummy profile and there will be populated with 3 profiles in carousel and it will looks ok.

COPY CODE

.form-search input[type="password"] {
    min-width: 90px;
}

.form-search .one.mobile-one.columns {
    display: none !important;
}

.form-search .three.mobile-one.columns {
    padding-right: 0 !important;
}
.form-search .three.mobile-one.columns:nth-child(4) {
    padding-left: 0px !important;
    margin:0 !important;
}

For the pass fields use this css

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]

Just add this css to wp-admin -> appearance -> general options -> quick css

COPY CODE

.navbar-header .logo a img {
    padding: 20px !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]

Not marked as solution

[Radu]

Hi,

Use this css

COPY CODE

.has-btn-see-through span.caret:after {
    top:14px !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]

Hi,
Add this css

COPY CODE

#buddypress ul#members-list li * {
    opacity: 1 !important;
}

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 ?

[Author]

Posts