Skip to:
Content
Pages
Categories
Search
Top
Bottom

Where to access CSS to change link, button, horizontal rule color, etc.

  • @aventurine_geode

    Participant

    9 years, 6 months ago

    WP Version: 4.2.2
    BP Version: 2.3.1

    Hey all!

    I’ve recently installed BP and so far the functionality is great, but unfortunately it didn’t integrate perfectly with my theme. I would like to go in and alter a few things, specifically:

    * Customize the search bar on the Members and Groups pages
    * Change the thickness and color of the horizontal rules used throughout
    * Change the color of the buttons used throughout (‘Post Update’, ‘Comment’, ‘Delete’, ‘Favorite’ etc.)
    * Remove the white circles behind the counters for Notifications, Messages, Friends etc. on user pages, as well as on the counters for Members and Group Members on those respective pages, and throughout
    * Remove the text highlight on the selected “section” of the various pages
    * Change the background color of the input fields throughout

    I am comfortable enough with CSS to do this and I’m sure it’s a simple matter, but I understand Buddypress’ CSS is integrated into its PHP files and I’m having a little trouble navigating, as I’m not familiar with PHP.

    Can anyone point me in the right direction as to where to access the style elements of the default BP theme to make these minor changes?

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

  • @danbp

    Participant

    9 years, 6 months ago

    hi @aventurine_geode,

    BuddyPress use templates and CSS which are all stored in bp-templates/bp-legacy/buddypress/

    To modify them, you have to create first a child-theme and copy into it any of the files you want to modify, by respecting /path/file structure of the original /buddypress/ folder.

    In brief, wp-content/themes/child-theme/buddypress/file

    Most of your questions are related to CSS. You make these changes in /child-theme/style.css
    To alter the searchbar, but depending of what you exactly want to do, see bp-templates/bp-legacy/buddypress/groups/index.php (similar path for members) or creating a custom function if more in-depth modification. In that case you put this function into bp-custom.php (wp-content/plugins/bp-custom.php) or into child-theme’s functions.php

    More details can bee found on Codex

    BuddyPress Theme Development

    @aventurine_geode

    Participant

    9 years, 6 months ago

    Hi Dan,

    Would it be possible to use a plugin like Simple Custom CSS to achieve what I want? It seems like overkill to create a whole child theme to make a few small changes to things like colors and fonts, especially since I’m not a theme developer. I have no problem monkeying with basic matters of CSS, but anything much more complicated than that is beyond me.

    @danbp

    Participant

    9 years, 6 months ago

    Hi @aventurine_geode,

    It seems like overkill to create a whole child theme to make a few small changes to things like colors and fonts

    It seems because you are beginner. But it is the reicipe of this cooking.
    Making a child theme is shorter, faster and much more handy as a plugin.

    What is a an overkill ?
    Taking a hammer to kill a fly….

    What is a child-theme ?
    – create a folder in theme directory (5 seconds)
    – adding an empty files to this folder: style.css (5 seconds)

    Once done, you open style.css with a text editor and you add a header as explained here (copy/pasting: 5 seconds) and modifying that text (15 seconds).

    Once done, you activate the child as your site theme. And the “big” overkill is now a simple water drop whipe.

    Now you can add, remove, modify any CSS rule from within your child theme. Without thinking about plugin updates or struggling with issues reliable to that plugin.

    Doing this depends of your CSS knowledge and your handling of that style.css file

    Hopefully, you will understand that in this case, installing a plugin or doing it yourself, has no difference in matter of time, but a big one in matter of usability (direct vs. indirect handling) and last but not least, in both case, it’s you who have to enter CSS rules.

    If you know how, it’s ok. If you don’t, it’s only your fault. 😉

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Where to access CSS to change link, button, horizontal rule color, etc.’ is closed to new replies.

Topic Info

Topic Tags

Skip to toolbar