Resizeable comment text box on media pop-up screen breaks the layout

[jerryd]

Resizeable comment text box breaks the layout, and also how can I make the comment list item to be same as the size of comment text box?

Attachments:

You must be logged in to view attached files.

[jerryd]

The background colour is also different to original rtMedia, How can I make those background colour to be same as original colour?

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, it may be because of some custom css, could you share admin credentials? 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

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

Always happy to help you 🙂

[jerryd]

Hi Laura,

currently I installed this theme locally, I haven’t actually released my site yet, so I don’t have that, sorry.

Do you mean this theme customized the rtMedia css? I have updated rtMedia to the latest version (3.8.10) yestoday. Will that cause problem?

[jerryd]

The attachment is another issue had in the theme, the toolbar on the photo becomes extremely long when resizing the browser window to mobile device’s size(480*800, 640*960, 768*1280, etc)

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, will assign the ticket to a higher support lever who can help and advise you in your query.
Thanks! 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

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

Always happy to help you 🙂

[jerryd]

Hopefully, it will be answered soon enough

[jerryd]

any updates?

[Andrei]

Hi @jerryd,

I have tried to replicate your issues but unfortunately I couldn’t, can you please confirm that you have the latest version of our theme ( 3.0.4 ) ?

I have noticed the difference between the comments list and the reply box and I’ll see how we can tweak it in the next update, but I couldn’t replicate the overlapping reply box, and the edit media issue with the photo not filling the entire space ( as the edit toolbar does ).

I have tested on my MacBook but I’ll also run a test tomorrow on a windows machine, as yours.

Looking forward.
Cheers

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

[jerryd]

Hi Andrei,

Thanks for quick responding, I have attached the screenshot, it is the latest version of theme(3.0.4).

My OS is ubuntu 14.04
I use Google chrome Version 39.0.2171.95 (64-bit)

I have just tried on your demo site, it appeared exactly as what I had on my machine, see the 2nd screenshot.

Attachments:

You must be logged in to view attached files.

[jerryd]

the following is the custom css in quick css

COPY CODE

//fix comment list overlaps reply box if image is too small
.rtm-comment-list.rtm-comment-list {
  list-style: none;
  padding-bottom: 20px;
}

//fix post-in is not aligned with others next to it
#buddypress #whats-new-options > div {
padding-top: 0px;
}

// hide "SITES" button on member profile
#blogs-personal-li {
display: none;
}

the following code is in bp-custom.php for adding placeholder to each customized xprofile field

COPY CODE

<?php
function bp_xprofile_field_add_placeholder($elements) {
    $attributes = [
        "field_1" => ["placeholder" => "名字"],                 // qq
        "field_69" => ["placeholder" => "QQ号"],                 // qq
        "field_6" => ["placeholder" => "微信号"],                // webchat
        "field_7" => ["placeholder" => "Facebook"],             // Facebook
        "field_39" => ["placeholder" => "Twitter"],             // Twitter
        "field_8" => ["placeholder" => "如：0123456789"],         // mobile
        "field_64" => ["placeholder" => "如：123 Swanstone Street"], // address
        "field_66" => ["placeholder" => "如：墨尔本"],       // city
        "field_65" => ["placeholder" => "如：VIC"],          // state
        "field_67" => ["placeholder" => "如：澳大利亚"]          // nation
    ];

    foreach($attributes as $key => $value) {
        if ($elements["id"] === $key) {
            $elements['placeholder'] = $value["placeholder"];
        }
    }

    return $elements;
}

add_action(‘bp_xprofile_field_edit_html_elements’,’bp_xprofile_field_add_placeholder’);

The following code is in kleo-child/functions.php for re-arrange the order of buttons on member profile page

COPY CODE

add_action( 'admin_bar_menu', 'remove_wp_logo', 999 );

function remove_wp_logo( $wp_admin_bar ) {
    $wp_admin_bar->remove_node( 'wp-logo' );
}

/**
 * rearrange menu buttons
 */
function my_change_profile_tab_order() {
    global $bp;
    
    $bp->bp_nav['activity']['position'] = 10;
    $bp->bp_nav['friends']['position'] = 11;
    /**
     * wp follower plugin
     */
    if( isset ($bp->bp_nav['following'])){
        $bp->bp_nav['following']['position'] = 12;
    }

    if( isset ($bp->bp_nav['followers'])){
        $bp->bp_nav['followers']['position'] = 13;
    }
    $bp->bp_nav['messages']['position'] = 14;
    $bp->bp_nav['notifications']['position'] = 15;
    // rtMedia = 16
    $bp->bp_nav['groups']['position'] = 17;
    /**
     * social-article plugin
     */
    if( isset ($bp->bp_nav['articles'])){
        $bp->bp_nav['articles']['position'] = 18;
    }

    //$bp->bp_nav['blogs']['position'] = 70;
    $bp->bp_nav['profile']['position'] = 19;
    $bp->bp_nav['settings']['position'] = 20;
}
add_action( 'bp_setup_nav', 'my_change_profile_tab_order', 999 );

// re-order the rtmedia button
add_action('bp_init','change_media_tab_position', 12);
function change_media_tab_position(){
    global $bp;
    if( isset ($bp->bp_nav['media'])){
        $bp->bp_nav['media']['position'] = 16;
    }
}

/* my members landing tab */
define('BP_DEFAULT_COMPONENT', 'profile' );

apart from those, I didn’t customize any others.

[jerryd]

the rtMedia I am using now is 3.8.10

[jerryd]

The most important now is to have both comment list and comment reply box in same width. How can I achieve that?

[Andrei]

For the comments list padding you can use this css rule:

COPY CODE

.mfp-content #buddypress .rtm-lightbox-container .rtmedia-single-meta .rtm-single-meta-contents { padding: 0 !important; }

For the other issues I’ll have to find a Ubuntu machine to test it and I’ll get back with a fix.

Cheers

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

[Andrei]

I managed to test it on a ubuntu machine, we’ll remove the comment box resizable behavior but unfortunately I couldn’t replicate the issue with the media pictures.
Try to update your browser maybe it’s just an isolated issue from your side.

Cheers

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

[jerryd]

your css rules works perfectly. Thanks Andrei.
As to the meida one, I will update my browser to the latest version and try it again, see how it goes.

[jerryd]

I have tried again about the media picture with the latest google chrome (Version 44.0.2403.89 (64-bit)), same issue was still there.

[jerryd]

I have found this class ‘rtmedia-item-thumbnail’, when I tick off the max-width and max-height in browser, the media picture is just displayed as it should, but I don’t know which way is correct to fix it

COPY CODE

<div class="rtmedia-item-thumbnail">
            <img src="http://wp-demo/wp-content/uploads/rtMedia/users/1/2015/07/screenshot-1-150x150.png" alt="screenshot-1">
        </div>

[Author]

Posts