• Resolved Chuckie

    (@ajtruckle)


    Please see this screen grab for context:

    I have used CSS to style the Favourite / Unsubscribe buttons to make them consistent with the rest of my site.

    But there is some hardcoded HTML  |  that I would like to omit because it is out of place with the buttons. I am not sure if BSP can help with this? Can it control how that vertical bar is displayed? Ideally it should be in it’s own element with a class so we can hide it.

    • This topic was modified 1 year, 7 months ago by Chuckie.
Viewing 15 replies - 1 through 15 (of 15 total)
  • I am currently pool-side, but I will reply with a thorough solution in a little bit.

    There is a way to do it with CSS using the :before or :after pseudo classes and I will post a code snippet later today for you…. however, it would seem to make more sense to add an input option for “button separator” to allow you to use any characters you want (or none in your case). I’m releasing an update within the next few days and will include this new option.

    The code snippet I will post later today will hold you over, until the next release which will have a permanent solution for you.

    Thread Starter Chuckie

    (@ajtruckle)

    @codejp3 Thanks for speedy response and I look forward to both the CSS requirement and updated plug-in. ????

    Bad News – After inspection of the actual code, the only element that could be targeted uses a unique ID PER TOPIC (eg – “subscribe-11395” where 11395 is the ID of a single topic). In order to use a pure CSS solution to hide the | pipe, every single topic ID for every single topic within your forum would have to be targeted individually. You’d need to know the ID’s for every topic, add CSS for each current topic, and would have to manually add CSS for any new topic IDs as topics are created. Basically not realistically do-able or manageable. Looks like I can’t give you a temporary solution to hold you over for now after-all ??

    Good News – You will only have to wait a few days until the permanent solution is available in the next release.

    FOLLOW-UP

    The “ | ” in question is actually built into bbPress as the default prefix to show before the topic subscribe button.

    I’ve added the custom functionality you requested to the next upcoming release of Style Pack….but here is a simplified version of the new changes that will hold you over until the next release:

    // temporary function to remove the | pipe character from before the subscribe button
    function chuckie_topic_subscribe_filter( $html ) {
            $pattern = '/ \| /';
            $replace = ' ';
            $html = preg_replace( $pattern, $replace, $html );
    
            // return the customized button html
            return $html;
    
    }    
    add_filter( 'bbp_get_topic_subscribe_link', 'chuckie_topic_subscribe_filter', 10, 1 );

    Add that to your theme’s function.php file, or with the Code Snippets plugin.

    The code will replace the “space | space” before the subscribe button with just a single space ( ), which should you give you the desired visual appeal.

    A pure CSS solution wasn’t realistic, but this simple PHP code snippet is.

    You can keep this even after the next Style Pack release, or delete it and just use the new options I’ve added within Style Pack. They won’t conflict….but the above is hard-coded, while the next release of Style Pack will give you an input box to update/change this in the future easily.

    Thread Starter Chuckie

    (@ajtruckle)

    @codejp3 Awesome! ??Works very well. And, I look forward to the update, at which point I will remove the PHP snippet.

    @ajtruckle – Robin is releasing the next version within the next 24-48 hours. This “topic subscribe button prefix” addition will be included.

    You can access it in the “Forum Buttons” tab > “2. Activate Subscribe Button” > “Topic Subscribe Prefix”

    Check the box to enable a customized prefix, and then fill in the text area with that you want the prefix to be. If you’re happy with the spacing of a single space like the temporary hold-over code snippet above, you will want to put in that text area:

     

    which is the ASCII code for a single space.

    I’m going to mark this topic as resolved, but feel free to follow-up if you have any questions or issues with this new feature.

    Thread Starter Chuckie

    (@ajtruckle)

    Hi @codejp3

    I upgraded to the latest plugin and activated that setting. Then, I commented out my php code. The vertical bar re-appeared. I have reverted to the php snippet.

    Plugin Author Robin W

    (@robin-w)

    @codejp3 & @ajtruckle – I’m looking at this, I added code for block widgets in this area which might be affecting

    Plugin Author Robin W

    (@robin-w)

    yes it is me causing issues, I’m fixing now

    Thread Starter Chuckie

    (@ajtruckle)

    Thanks for update.

    Plugin Author Robin W

    (@robin-w)

    @ajtruckle – should be fixed in 5.5.1, can you confirm?

    Thread Starter Chuckie

    (@ajtruckle)

    @robin-w – yes, I think it is good now. Thank you.

    … testing 5.5.1 myself right now and reviewing the conflict/changes …

    @robin-w – confirming, it is working as expected.

    Just soaking in all the block widget changes now. Quite a bit!

    Plugin Author Robin W

    (@robin-w)

    that’ll keep you busy – try an FSE theme to blow your mind !

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Can we wemove the vertical bar?’ is closed to new replies.