Skip to:
Content
Pages
Categories
Search
Top
Bottom

custom ‘bbp-forum-link’ css code


  • denrocs
    Participant

    @denrocs

    Hi all

    I’m using the ‘Kleo’ WordPress theme on WordPress 4.7.5 and BBPress 2.5.13, and am trying to change the standard links to forums in BBPress as they are too difficult to read currently, specifically the ‘bbp-forum-link’ class.

    What I’m trying to achieve is a background highlight on each link, with rounded corners, plus a little extra space between them using the following code:

    color: #e4e4e4;
        background: #232323;
        padding: 1px 2px;
        margin: 2px 2px;
        line-height: 1.7;
        border-radius: 3px;

    I have also put this image together of what I’m trying – https://imgur.com/OKO9pZ8

    How would I put this code into the custom style.css file of Kleo to stylise these links, please?

    No link to site as it is on my local host (MAMP PRO 4 if that helps)

    Many thanks

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

  • Robin W
    Moderator

    @robin-w

    since I don’t have the Kleo theme and your site is local, it’s a bit hard to tell you want to alter


    denrocs
    Participant

    @denrocs

    Apologies, I realised this would help after posting 🙂
    I’ve set up a temporary WP site on a personal server with the same theme, WP 4.7.5 and BBPress 2.5.13 at http://wp.createlabs.co.uk/forums/

    At the moment, the links to Child Forum 1 and Child Forum 2 are just plain blue links with a comma after Child Forum 1 which separates them.
    What I’d like to achieve is what I have put in the image link above? The bottom image is what I’m trying to get the links to look like (https://imgur.com/OKO9pZ8)

    Instead of a plain blue link, alter the CSS to highlight each link so they look more like flat rounded buttons rather than standard links.

    I hope that helps, please let me know if I can do anything else 🙂


    Robin W
    Moderator

    @robin-w

    Try this

    a.bbp-fourm-link {
    color: #e4e4e4;
        background: #232323;
        padding: 1px 2px;
        margin: 2px 2px;
        line-height: 1.7;
        border-radius: 3px;
    }

    denrocs
    Participant

    @denrocs

    Perfect! Thank you very much! I was missing the a. tag
    Had to clear my cache but now working exactly as needed 🙂


    Robin W
    Moderator

    @robin-w

    great – glad you’re fixed

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.
Skip to toolbar