Topic: CSS styling query

CSS styling query

Chuckie
Participant

@ajtruckle

4 years, 6 months ago
Hi

I have some queries and I wonder if you can help me get to the bottom of them. I would be grateful for your guidance. Here is the background.

I am using the latest bbPress plugin and I notice that the bbpress.css file is 1702 lines long.

I am using a premium theme (seos-video-premium) and even though I am using a child theme, I have noticed that my Support forum is actually using:

wp-content/themes/seos-video-premium/seos-video-premium/css/bbpress.css

I assume this is because there is no bbpress.css in my child theme css folder so it uses the themes one instead of the bbPress plugin’s one?

So I have two specific questions here.

1/ the bbpress.css file in the premium theme folder is actually 1408 lines of code. So it is 300+ lines shorter than the plugin version. To be honest, I was not expecting to find a bbpress.css file inside the theme. So what am I supposed to do? Simply replace the theme version with your plugin version?

2/ I have been trying to use a beta version of EnlighterJS Plugin (it is their beta that uses EnlighterJS v3. There was an issue with these styles:
```
#bbpress-forums div.bbp-topic-content pre,
#bbpress-forums div.bbp-reply-content pre {
	display: block;
	line-height: 18px;
	margin: 0 0 24px;
	padding: 5px 10px;
	white-space: pre;
	overflow: auto;
}
```
In their classes they have this styling:
```
.enlighter-default .enlighter-raw {
    display: none;
    min-width: 100%;
    line-height: inherit;
    font-size: 12px;
    font-family: inherit;
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    border: none;
    box-shadow: none;
}
```
The HTML is:
```
<pre class="enlighter-raw">.textMaterial {
  /* Uncomment to hide the material */
  /* display:none;*/
  font-size: 10pt;
  font-style: italic;
  font-weight: 700;
  background-color: yellow;
}
.textMethod {
  /* Uncomment to hide the method */
  /* display:none;*/
  font-size: 10pt;
  font-style: italic;
  font-weight: 700;
  background-color: cyan;
}</pre>
```
Notice that ttheir CSS style uses display: none;? The bbpress CSS file pre class has a display:block;. This causes a problem with the plugin I am trying to use.

The author does not want to use !important because he says it is bad design. So how do we fix this? How can we allow bbpress to do what it wants with pre and EnlighterJS do what it wants?

Viewing 10 replies - 1 through 10 (of 10 total)

Chuckie
Participant

@ajtruckle

4 years, 6 months ago

In fact there are several style conflicts. The related issue is here:

https://github.com/EnlighterJS/Plugin.WordPress/issues/234

#confused #wanttofix

Robin W
Moderator

@robin-w

4 years, 6 months ago

ok, a long post from you, let me deal with q1 first.

bbpress has a style sheet. Theme authors may want to change that sheet to improve how bbpress works with their theme, so correctly they put a changed version in their theme and bbpress will use that. But that will be a css file that related to a specific version of bbpress – say 2.5.14. When bbpress releases version 2.6.x, your theme will still use the version that your theme author changed unless eh cares to update it. The 2.6.x version will be a different length and have changes to the style sheet, hence why you might well see 1048 lines in then theme versiin – it is most likely a css sheet amended from a previous version of bbpress.

so it is unreasonable to expect bbpress to never change their style sheet, and equally unreasonable to expect every theme author to update their css versions everytime bbporess acres to issue a new version. So unless your theme is a paid theme that guarenhtees to keep bbpress style updated, you have to make a call on what you do.

I’d suggest you stick with the theme version, and use custom css to fix any issues you find between the newest version of bbpress and your theme version css file.

Chuckie
Participant

@ajtruckle

4 years, 6 months ago

let me deal with q1 first. — I’d suggest you stick with the theme version, and use custom css to fix any issues you find between the newest version of bbpress and your theme version css file.

Understood.
Chuckie
Participant

@ajtruckle

4 years, 6 months ago
For the other issue, the only thing I can come up with is Additional CSS:
```
.enlighter-default .enlighter-raw {
	display:none !important;
}
```
But is there a more robust solution that avoids the need for this?
Chuckie
Participant

@ajtruckle

4 years, 6 months ago

Turns out @robin-w that my additional css is not the solution. When the user clicks “Raw” on the code block it is supposed to toggle the raw code block to be visible. And since I added that css style it has forced it to never display.

so I need another way for bbpress to do what it wants with pre blocks that does not conflict with enlighterjs.

Robin W
Moderator

@robin-w

4 years, 6 months ago

not used the enlighter js plugin, so can’t really help further – sorry 🙂

Chuckie
Participant

@ajtruckle

4 years, 6 months ago

Well, the issue here is that bbPress is using a catch all for pre when it should be applying a class to the pre objects that it creates. Then we wouldn’t have this issue would we? Because they would just be classes that are used by either application with their own pre code usage.

The issue is that I don’t know how or where bbPress makes use of the pre tag so that the logic can be adjusted to use a class to indicate the styling rather than that global pre catch all.

Robin W
Moderator

@robin-w

4 years, 6 months ago

the only place I can find <pre> is in

includes/common/formatting.php line 120 onwards

Chuckie
Participant

@ajtruckle

4 years, 6 months ago

Thanks.

I see line 218: $content = "\n<pre>" . $content . "</pre>\n";

I suppose that could become:

$content = "\n<pre class=\"suitable-class-name\">" . $content . "</pre>\n";

And that styling be moved into that class. But:

Line 133: $content = preg_replace_callback( "!(<pre><code>|<code>)(.*?)(</code></pre>|</code>)!s", 'bbp_decode_callback', $content );

I have no clue about what that code is doing.
Robin W
Moderator

@robin-w

4 years, 6 months ago
nor have I.

The function is called by core/filters.php
```
Line 203: add_filter( 'bbp_get_form_forum_content', 'bbp_code_trick_reverse' );
Line 206: add_filter( 'bbp_get_form_topic_content', 'bbp_code_trick_reverse' );
Line 209: add_filter( 'bbp_get_form_reply_content', 'bbp_code_trick_reverse' );
```
so you could try

remove_filter ('bbp_get_form_forum_content', 'bbp_code_trick_reverse' );

etc.
in your child theme and see what removing it does

Viewing 10 replies - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

bbPress.org

CSS styling query

Topic Info

Topic Tags

bbPress.org

CSS styling query

Topic Info

Topic Tags

Reply Search