Skip to:
Content
Pages
Categories
Search
Top
Bottom

Styling the BP profile tabs


  • mrwassen
    Participant

    @dwl003

    5 years, 10 months ago

    Hi guys,

    After extensive attempts to get this right, I am at a loss and am requesting some guidance on styling the BP profile tabs.

    I am using recent versions of WP (4.9.9) and BP (4.1.0).

    The issue is that I am only able to change some attributes of the tabs but not others. Here is my css (included in the style.css of the child theme) with an indication of what works and what does not – see also image below showing the result of the css:

    #buddypress .bp-personal-tab {
  color: red !important;         /*does not work*/
  background:yellow !important;  /*works*/
  font-size:0.8em !important;    /*works*/
  font-style: italic !important; /*works*/
  }
#buddypress .bp-personal-tab.current.selected {
  color:red !important;          /*does not work*/  
  background:blue !important;    /*does not work*/
  font-size:1.3em !important;    /*works*/
  font-style: italic !important; /*works*/
}

    BP Tab Styling

    Any help would be greatly appreciated.

    Thanks,

    Dennis

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

  • mrwassen
    Participant

    @dwl003

    5 years, 10 months ago

    OK, no replies as of yet but some progress to report:

    I abandoned the idea of making minor style customizations in my WS child theme’s style.css because of the inconsistent results I was getting (see my previous post). Instead, after more hours scouring of the internet, I found a different approach which is to setup folders under my child theme folders like so:

    …/wp-content/themes/mytheme/buddypress/css

    I then created a new file named buddypress.css in the new /css folder, put in a couple of css entries and voila! – it didn’t work. Determined to get this working, I then spent a few more hours of scoouring and through trial and error and finally came up with the following which does work for me:

    1) setup the above mentioned folder structure under the child WP theme
    2) copy buddypress.css from the core buddy press css folder under the chosen template (e.g. nouveau) to the new css folder
    3) rename the new buddypress.css to “buddypress.min.css” (even though it is not “minified”)
    4) changes made to the new buddypress.min.css now take effect (hoorah!)

    Although this approach seems to work, it does raise several questions:

    A) since the custom version of the css file is not “minified”, does this not defeat the purpose of minifying css files in the first place (i.e. presumably performance improvements)?

    B) I would have hoped that the custom css file would only need to contain deviations from the theme’s css – however this does not seem to be the case. It appears that the entire file needs to be copied. The concern here is that when buddypress is upgraded, there may be css changes in the upgrade that are now “masked” by the custom css file which contains the older version of the styling (in cases where no modifications were made) – this seems a bit “messy” to me

    C) I guess my main question really is whether the above approach which I finally settled on is valid and is the best available approach.

    Sorry for the lengthy post, but I am seeking clarity on this so that I end up with a good long term solution.

    Dennis


    Varun Dubey
    Participant

    @vapvarun

    5 years, 10 months ago

    @dwl003 no need to copy buddypress.css or min file inside the child theme.
    You should be able to override the tab specific CSS with !important tags and writing codes inside appearance >> customizer >> additional CSS
    http://prntscr.com/m8dj7t


    mrwassen
    Participant

    @dwl003

    5 years, 10 months ago

    Thanks Varun,

    I will give it a go.

    Dennis

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

Topic Info

Topic Tags

Skip to toolbar