Lightbox how to get the original facebook look


#1

Hi my lightbox looks weird- how can i get rid of the black bars behind the comments ?

How can I change the color that i looks more like facebook ?

this is how it looks at the moment .


#2

Hi @KAWAII_DOT_COM,

I have checked your site. rtMedia by default doesn’t make it of black color, it’s your theme. You need to add following CSS in rtMedia admin > Settings > Custom CSS

.rtmedia-container ul#rtmedia_comment_ul li{
	background-color: transparent;
}
.rtm-top-notch, .rtmedia-container.rtmedia-single-container .row .rtmedia-item-comments .rtm-like-comments-info:before{
	border-color: transparent;
}

#3

thank you ! works fine !

  • any idea how I can get rid of the black round line around the avatar picture ?

appreciate your help


#4

@riteshpatel it is very weird after some hours of use my light box is again black, altough i added the code in the custome .css section of rtMedia in my backend.

can you please help me again - please check: http://www.kawaii.com/member-activity


#5

Add following CSS code also, I forgot to add earlier.

.mfp-content #buddypress .rtm-lightbox-container .rtmedia-single-meta .rtm-media-single-comments, #buddypress #rt_media_comment_form, .mfp-content #buddypress .rtm-lightbox-container .rtmedia-single-meta .rtm-media-single-comments textarea {
	background-color: transparent !important;
}

#6

@riteshpatel I added all the .css code that you provided. still my light box is completely black. any idea ? it is weird. http://www.kawaii.com/member-activity


#7

It’s because your theme is overriding rtMedia styles.

Add following code.

.mfp-content #buddypress .rtm-lightbox-container .rtmedia-single-meta{
	background-color: #FFF !important;
}
.mfp-content #rtmedia-single-media-container .rtmedia-media {
	background-color: #333 !important;
}

#8

You are right ! Now it works. Thank you !!


#9

just to finish this. do you also have a hint how to change the color that is surrounding the Avatar Picture in the lightbox ? In my case the Avatar is round showing the user picture but around it it has a 2-3 point thick black outline- in a perfect world this would bright grey. appreciate


#10

Hello @KAWAII_DOT_COM,

Try adding below css code to Custom Css tab under rtMedia settings :

.rtmedia-single-container .userprofile img.avatar {
border: 4px solid #EEE;
}

Let us know if it helps you or not.

Thank you.


#11

@pranalipatel PERFECT ! i works. thanks a lot. you guys are doing an amazing job.


#12

Hello @KAWAII_DOT_COM,

We are glad to know that your issue has been solved.

Thanks for the nice words!

You are welcome. :slight_smile:


#13

@pranalipatel I just overlooked a small detail, that I haven’t noticed before.

When I type in a new text as comment the characters are bright grey aswell. It means I can read it well against the white background. Once I wrote the comment and pressed enter it appears as dark grey text under the other comments in the lightbox. So my question is: is there a way to switch the character font in the comment window of the light box to darkgrey ?


#14

Hello @KAWAII_DOT_COM,

Try adding below css code to change color of font in comment window :

#buddypress .rtm-lightbox-container .rtmedia-single-meta .rtm-media-single-comments textarea {
color: #808080;
}

Let us know if it helps you or not.

Thank you.


#15

@pranalipatel . Unfortunately the code does not have an effect. The comment characters are still bright grey and hard to read.


#16

@pranalipatel hi pranali ! good news I found the mistake !! -> after the color we have to insert !important like you did on the other lines ! So for everyone who has the same issue, please use the code like this:

.rtmedia-single-container .userprofile img.avatar { border: 4px solid #EEE !important; }

#buddypress .rtm-lightbox-container .rtmedia-single-meta .rtm-media-single-comments textarea { color: #808080 !important; }


#17

Hello @KAWAII_DOT_COM,

We are glad to know that you figured out the way and your issue is solved.

Thank you.


#18

hi guys,

this discussion has been very helpful so far… however i just noticed that the “like” and "comment texts are too bright to read and when a user likes the post, the background of the “You like this” text is black.

And can the “Comment Button” color be changed from blue to this color #BE1E2D ?


#19

Hello @mesmaquel.

I am suggesting some custom CSS for your queries. Please, find the snippet below:

1 To change text color for Like and Comment link:

.rtmedia-actions-before-comments .rtmedia-like span, .rtmedia-actions-before-comments .rtmedia-comment-link { color:green; }

2 To change the background color for You like this text:

.rtmedia-like-info {
    background: grey;
}

3 To change the background color for the button Comment:

body #buddypress input[type=submit], #buddypress input[type=submit]:hover{
    background: #BE1E2D;
}

I hope this will help you.

Thanks.


#20