Hello there,

I use WP 4.4.2, bbpress 2.5.8, this is a post in our forums.

To insert a link in my copy, there is this popup window. Apparently, it gets its styling from various sources, including my theme’s settings, where for regular text, I set the font-size to 17px, while line-height of 26px is hard-coded into the theme. As you can see (if you click the link-button in the reply form below the sample post given above), this disturbs the styling of this popup.

Is there any way to a) make this popup draw its styling from the back-end CSS (where the same window is used, and looks fine), which in any case I would like to suggest for future updates of bbpress, or b) style it with custom CSS?

Thank you
Manuel

[@robkk Moderator 8 years, 8 months ago]

Does this custom CSS help any?? This is what I have making a custom theme in twentytwelve.

#bbpress-forums #wp-link {
  font-size: 13px;
}

#bbpress-forums #wp-link .screen-reader-text, .screen-reader-text span,
#bbpress-forums #wp-link .ui-helper-hidden-accessible {
  position: absolute;
  margin: -1px;
  padding: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  word-wrap: normal!important;
}

[@let-me-see Participant 8 years, 8 months ago]

Hi Robkk,

thanks for your suggestion. No, this code does not change anything, not even with !important after the font size.

[@robkk Moderator 8 years, 8 months ago]

@let-me-see

Can you post some login details for a user with the role of participant so I can check out this issue first hand to see if CSS would even help with this.

[@let-me-see Participant 8 years, 8 months ago]

Hej Robkk,

please use *** with password ***. I will delete this data rightaway, so only you will be notified with it via email. Sign in here: ***

Best
Manuel

[@robkk Moderator 8 years, 8 months ago]

@let-me-see

I don’t subscribe to every one of these topics on the forum that I help users in.

i was going to just delete the login information after you posted it, and tell you to delete the user you just created after too.

instead just email me the login info.

https://robkkdev.wordpress.com/contact/

[@robkk Moderator 8 years, 8 months ago]

Try this custom CSS instead.

#wp-link,
#wp-link p {
  font-size: 13px;
  line-height: 1;
}

#wp-link input {
  padding: 6px;
}

#wp-link .screen-reader-text, .screen-reader-text span,
#wp-link .ui-helper-hidden-accessible {
  position: absolute;
  margin: -1px;
  padding: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  word-wrap: normal!important;
}

[@let-me-see Participant 8 years, 8 months ago]

Dear Robkk,

the code is almost perfect. Thank you. Only the button text for the submit button is out of place, would you have another look?

[@robkk Moderator 8 years, 8 months ago]

adjust the padding for the input

#wp-link,
#wp-link p {
  font-size: 13px;
  line-height: 1;
}

#wp-link input {
  padding: 0 5px;
}

#wp-link .screen-reader-text, .screen-reader-text span,
#wp-link .ui-helper-hidden-accessible {
  position: absolute;
  margin: -1px;
  padding: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  word-wrap: normal!important;
}

[@let-me-see Participant 8 years, 8 months ago]

Thank you, I just cancelled the whole padding. It looks good now. Would you confirm this, hope I did not miss something?

#wp-link,
#wp-link p {
  font-size: 15px;
  line-height: normal;
}

#wp-link h1, .h1, .title h1 {
color:#000;
}

#wp-link .screen-reader-text, .screen-reader-text span,
#wp-link .ui-helper-hidden-accessible {
  position: absolute;
  margin: -1px;
  padding: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  word-wrap: normal!important;
}

[@robkk Moderator 8 years, 8 months ago]

It seems fine.