Editing CSS

Modified on February 13, 2014

In this tutorial I will be teaching you how to edit CSS in your BuddyBoss child theme. We’ll start with a brief intro to child themes, and then I’ll use an example CSS edit to teach you how I would go about implementing it. This tutorial assumes you already have a working knowledge of how to write CSS.

Intro to Child Themes

A child theme is the safest and easiest way to modify the BuddyBoss theme, whether you want to make a few tiny changes or extensive changes. In WordPress a “child theme” is a theme that inherits the functionality of another theme, called the “parent theme”. It allows you to modify, or add to, the functionality of that parent theme. In our case BuddyBoss is the parent theme, and it comes pre-packaged with a starter child theme. We strongly recommend you activate your child theme as the primary theme, and make your CSS edits in the child theme files. The rest of this tutorial assumes you are using a child theme for your CSS edits.

Why use the packaged child theme?

We often release theme updates with bug fixes or new features, and if you’ve only modified your child theme you can safely upgrade BuddyBoss without losing any of your edits. The child theme inherits all of the templates and functionality from the parent theme, but allows you to change the appearance of the parent theme without editing any of its code, because code in the child theme overwrites code in the parent theme. More information can be found in our detailed Introduction to Child Themes.


Tutorial CSS Edit

For the remainder of this tutorial, I will be implementing a dummy CSS edit so you can follow the exact steps I would take, and then apply those same steps to almost any other CSS edit you may want to implement. For this tutorial we will be changing the background color of the desktop primary navigation from the default Blue to Red. You can actually change this color without touching any code with the Customizer, but we’ll do it manually for the purposes of the tutorial.

This is a good example to use, because it’s easy to test, only applies to large screen sizes (requires media queries) and also overrides a Customizer setting. This single example covers most use case scenarios.

Here is the final change we are aiming for:

tutorial-finished

1. Hunt down the styles to edit

The first step in modifying a style found in the parent theme is to figure how and where that style is being generated. To do this, we will use the Web Inspector that comes with the Google Chrome web browser. It is an extremely valuable tool for any web developer, and makes it particularly easy to figure out where CSS styles are being defined in just about any website you visit.

While viewing your website in Google Chrome, right-click on the element you want to edit (the navigation) and click “Inspect Element”.

tutorial-inspect

You will now be presented with a panel in your browser showing you all of the styles for the element you selected. If you accidentally clicked the wrong element, you can navigate through the HTML of the page until you grab the correct element, and you will see the Inspector highlighting elements on the page to let you know what you are about to select.

tutorial-inspected

In the left column you can see the HTML, and in the right column you can see the corresponding CSS for the HTML element you have selected. You can actually click into the right column of the Inspector to play with the CSS and see a live preview of your changes immediately in the browser. This is usually how I experiment with potential CSS changes. For this tutorial, we will be adjusting the CSS selectors defined as .main-navigation, .main-navigation ul.nav-menu to have the attribute of background-color: #be3b2f, which defines the background color as Red using the appropriate HEX color value. Just click into the right column and change the background-color to #be3b2f and you should see the change in your browser. No need to save or refresh.

tutorial-browser-inspect

Keep in mind these edits are only happening in your browser. If you refresh the page, they will be lost. The next step is to make them permanent by adding them into your child theme’s stylesheet.

2. Add your CSS edits into your child theme

We recommend adding all of your CSS edits into your child theme at /themes/buddyboss-child/css/custom.css. Any styles added to this stylesheet will overwrite styles set in the parent theme’s /css/ folder.

child-css-folder

Open your stylesheet in a text editor

custom-cssOpen up custom.css in your favorite text editor. My personal favorite is Sublime Text 2. It’s free to try, powerful, lightweight and available on both Mac and Windows. Some popular alternatives are Coda for Mac (expensive but reliable) and the good old Notepad application that comes with Windows. If you prefer to edit the CSS directly in WordPress (not an ideal method) I suggest installing the WP Editor plugin.  Among other things, it will allow you to navigate through the folder structure of the theme and will give you syntax highlighting.

Add your edits into the correct “media query”

Onward! The next step is to add your CSS edits into custom.css. When you first open up the file, you will notice that it is broken down into sections based on media queries, allowing the theme to be “responsive” for mobile devices. Media queries allow CSS to load based on different screen sizes. We start with global styles that are loaded for all screen sizes. Then we narrow down to sizes below or above certain widths (to approximate which device you are using), targeting each width using specific CSS. In BuddyBoss we generally break it down into phone, tablet, and laptop & desktop as the three primary screen sizes.

Go back to your Inspector for a second. You’ll notice that the color we’ve applied to the navigation is in fact located within a media query! This particular media query specifies that the style is to be applied only when screens are 721px or wider. You will want to add your CSS edit into this same media query in custom.css.

tutorial-media-query

In the Chrome Inspector, you can actually just put your cursor into the inspector and copy the whole code snippet. Then back at custom.css, paste the CSS you copied from the Inspector into the corresponding media query. It should look something like this:

/*--------------------------------------------------------------
2.3 - MINIMUM width of 721 pixels (tablets+)
--------------------------------------------------------------*/
@media screen and (min-width: 721px) {

   .main-navigation, .main-navigation ul.nav-menu {
      background-color: #be3b2f;
   }
}/* don't delete this closing bracket */

Ordinarily this would be the final step. However you will likely see no change in your browser. The reason is that this particular style happens to be defined additionally in the Customizer, which injects styles right into the HTML, thereby overriding stylesheets with all of the custom color selections from the admin options. The inline Customizer styles are taking over. You can tell this by going back to the Chrome Inspector. You will see that this particular style is not coming from a stylesheet, but rather from (index) which just means it’s coming from the HTML file.

tutorial-customizer-override

Override the Customizer

For this particular CSS edit, we will need to override the Customizer’s priority. This is actually very simple. We just need to add an !important declaration to our style attribute. Like so:

/*--------------------------------------------------------------
2.3 - MINIMUM width of 721 pixels (tablets+)
--------------------------------------------------------------*/
@media screen and (min-width: 721px) {

   .main-navigation, .main-navigation ul.nav-menu {
      background-color: #be3b2f !important;
   }
}/* don't delete this closing bracket */

If you did everything correctly, you should now see Red navigation on your site. You can follow these steps for pretty much any CSS edit. And always make sure to add the CSS into the proper media query, or to no media query (the beginning Global section) depending on what screen size you need to target.


Extra Tip: Mobile CSS

Editing mobile CSS is no different from desktop CSS. While using the Chrome Inspector, make your browser window tiny enough that the layout collapses to mobile mode. It helps to dock the Inspector to the right side of the screen in this case, by clicking on the little square icon, to free up room to see everything. Then just follow the same steps and add your edits into the appropriate “small screen” media queries.

tutorial-mobile-css

If you want to see something really cool, check this out. You can plug your Android device into your computer and inspect/edit CSS loading from your Android device within the Chrome browser on your desktop. This is how I test things natively on Android and it saves a ton of time. Make sure to download Chrome beta on your Android device for this to work (as of February 13, 2014).

Comments

  1. I am a newbie to coding. All I want to do is change the “Sitewide Activity” text to “New Posts” or something else. I have followed your instructions above but when I open up the custom.css file I do not see the line of code that I am able to locate in the Chrome browser inspect element tool. I can’t find this line of text anywhere in the child theme code. When I open up the custom.css. I only get 109 lines of code and Global styles and media queries. Any help here would be greatly appreciated. I am sure that I am trying to edit the wrong file.

    1. Hi Scott,

      You will not find this text in the CSS. CSS is used only for layout, meaning colors and placement of content and things of that nature. Text is in the HTML of the page itself. In the BuddyBoss theme, we have every line of text translatable via Language Files.

      See this tutorial for editing language files: https://www.buddyboss.com/tutorials/language-translations/

      However are you just trying to change the title of the main Activity page? If so there is a much easier way. The Activity index is a WordPress page. You can just navigate to that page from the WordPress admin and change the title of the page from “Sitewide Activity” to “New Posts”.

  2. I cannot change the page title in WordPress admin. I am assuming you mean under dashboard where you create new and edit existing pages. None of the pages have the title “Sitewide Activity”. The title changed when I upgraded to new version of Buddy Boss as well as the new version on WordPress and buddypress. I have searched all over where I could edit this without changing code. I never named a page “Sitewide Activity” It seems like a bug of some sort. I will however look at the language files as a work around.

    1. Is it possible that it is the BuddyPress widget named SiteWide Notices? If you can rename this from your dashboard under Appearance>Widgets then find out which widget area it is in and type in a new name.

      If that isn’t it are you able to provide a link to the offending page or share a screenshot of the problem?

  3. It is right above the “What’s new “name” block on left side. Where whatever I used to name the page would appear before. I am not sure if you will see it without being logged in but the site is http://thecarwashowners.com
    I was not able to change it in the language file so any help or work around that you know of would be helpful. Thanks

    1. ok it looks like your landing page is that page which is just the widget from what i can see.
      If you want the home page to be the welcome page shown in the menu try the following

      In your dashboard go to Appearance then Customize.
      In the left hand panel down the bottom there should be a dropdown menu labeled “Static Front Page” click on it then check the radio box next to “A static page” then in the drop down menu under “Front Page” select your “Welcome” page.

      After that hit save and publish then navigate to your website http://thecarwashowners.com and your first page you see should be the Welcome Page.

      If that isnt what you are after then we need to find the current home page and change the name of the title of the Widget that is loaded in the main content there.

  4. Hi there. I am having a real issue with the appearance of the theme’s buddypress pages (wall etc) in RTL.
    This is so strange, cause I used a couple of themes with buddypress, but never seen anything that serious. It messed all the buddypress side menu up and a lot of other margins.
    What should I do? I figured if you have allowed for translation, you have some compatibility with RTL WP.
    I am familiar with firebug, and use it a lot, but I am having a hard time finding these issues and the changes I try in firebug, don’t seem to affect the appearance.

    1. Thanks for telling us about the issue. Please post this in the support forums and TJ will help you out. If it is indeed a result of RTL we may have to fix some things. This is the first I’ve heard of this issue so I’m not sure, as I imagine other customers have been using it with RTL.

  5. hi thanks for the tutorials. i just want to ask if there is a way the post wall of buddypress activity stream can be static. because my post form keeps opening when there is a cursor or typing and update or closes when the cursor is not there. the site is http://www.amdohub.com

    1. The opening/closing is default BuddyPress functionality, so we replicate that. You can add some CSS that will force it to be a certain height.

      #buddypress form#whats-new-form textarea {
      height: 100px !important;
      }

      Make the height to whatever height you want it to be, doesn’t have to be 100px.

  6. am using budypress activity plus and i want to remove the bacground colour. how do i go about it? and how do i make buddypress updat form easily accessible via mobile devices?

  7. Technically you shouldn’t really use !important as it simply means you can find the CSS rule your trying to over ride. The issue with !important is also the fact that once its been used it might also prevent other changes down the line. While the inspection in Chrome is good (i use it myself) there are times where it just does not work.

  8. Please how do I change the footer color to be plain whihte and the test to be black? When I tried it on style page it didn’t work. 2. how do I make the sale color to be red different from the header mobile color? Please help

  9. Hi there,

    Thanks for the theme, awesome 🙂

    However, as much as we like the backend of the theme, we would like the front to look more like the concept we would like to sell (for instance, alter the size of the image in the seller section, modify the search button to make it more fit with our brand, modify the animation underneath the category – the little orange bar – or else)… Is it possible to do it if we have some knowledge of CSS ?

    To sum up, is it possible to keep the backend and the architecture of the theme but to customize everything in the front ?

    Thank you from France guys,
    T.

    1. Youri, Thanks for your feedback.
      You can easily customize the look and feel of the front layout using custom CSS and you can also override the template files inside the child theme to change the frontend structure.

Leave a Reply

Your email address will not be published. Required fields are marked *