CSS advice styling BP Docs

[Michael]

I am trying to make BP Docs page look more like bbPress forum page and also use the space better inside Group page area (see attached image here: http://imgur.com/dNVsZdr)

I have made most of the necessary CSS changes. Trouble is when I make changes to CSS it also affects other pages in Social Learner theme. Do you have any recommendations for making the CSS specific to BP Docs pages?

I have included the code below:

/* make BP Docs look like forum */
#buddypress div#item-body {
    padding-left: 0;
    padding-right: 0;
  }

#buddypress div#subnav.item-list-tabs ul {
      margin: 0px 70px;
}

.site #buddypress div.docs-info-header {
    border-bottom: 0;
    margin-bottom: 0;
    padding: 15px 50px 5px;
}

#buddypress table.doctable thead tr {
    background: #1CA7DA none repeat scroll 0% 0%;
}

.title-cell > a {
    color: #FFF;
}

.site #buddypress table.doctable tr th {
    color: #FFF;  /* THIS IS OVERWRITTEN BY INLINE CSS CODE (LINE 815) INSIDE SOCIAL LEARNER */
}

.site #buddypress table.doctable tr th a {
    color: #FFF;
}

div#bp-docs-pagination {
    margin-left: 30px;
}

p.currently-viewing {
    margin-top: 0;       /* THIS IS OVERWRITTEN BY SCREEN.CSS - A BP DOCS PLUGIN FILE */
    margin-bottom: 15px;
}

[Michael]

Btw I made some CSS changes to the forum as well which was a lot easier since CSS code is specific for bbPress pages.
Here is how it looks like now: http://imgur.com/fZHGHar

[Anonymous]

Hi @mln83, You can use following approach to create dedicated component specific custom css file
you can keep all css codes for Docs inside docs_custom.css

function register_docs_stylesheets() {
    wp_register_style( 'docs_custom', get_stylesheet_directory_uri() . '/docs_custom.css' );
}
function add_docs_stylesheet() {
  global $bp;
    if ( bp_is_current_component( bp_docs_get_docs_slug() ) ) 
    wp_enqueue_style( 'docs_custom' );
}
add_action( 'init', 'register_docs_stylesheets' );
add_action( 'wp_enqueue_scripts', 'add_docs_stylesheet' );

Regards
Varun Dubey

[Michael]

Hi @vapvarun,

I tried your solution but get the following error when accessing front-end:

Fatal error: Call to undefined function bp_docs_get_docs_slug() in /home/isci3309/public_html/wp-content/themes/social-learner/functions.php on line 14

Could you help with solving this? 🙂

Thanks.

[Michael]

I replaced

if ( bp_is_current_component( bp_docs_get_docs_slug() ) )

with

if ( bp_is_current_component( 'bp_docs_get_docs_slug()' ) )

and it seems to fix the fatal error. Not sure if this is correct? Where should I place the file: docs_custom.css?

[Michael]

Advice would be much appreciated 🙂

[Anonymous]

Hi @mln83 sorry for delayed response
you can add function inside the child theme functions.php and one additional css file docs_custom.css inside the child theme where you can add additional css
Regards
Varun Dubey