Buddypress - changing buttons colours

Hi support,

I have just installed Buddypress on Woo themes Canvas, all looks ok, apart from the buddypress buttons themselves, they're overriding the theme's button colour of to a very light silver, I wouldn't mind, but it's near impossible to read.

I've tried to inspect the elements with firebug but can't see the necessary css code to add to my custom.css file.

Can anyone help? You can see the buttons here: http://www.townflo.co.uk/activity

PS. Buddypress is also taking up the whole page on this theme and pushing the sidebars down underneath the activity stream, anyway to constrict the buddypress column width?

  • Kimberly
    • Champion of Loops

    Ben,

    I couldn't resist helping out my favorite member :wink:

    Plus I had to login to see your buttons, they are only visible to buddypress members :smiley:

    plugins/bp-template-pack/bp.css line 646
    will fix up your buttons, I did a quick live fix in firebug to confirm. When you change it seems to pick up the theme, as I changed the Comment button and the others turned red (matching the theme).

    I visited all the pages and couldn't see the sidebar issue, perhaps a link?

    Best,

    Kimberly

  • themarketingcompass
    • Site Builder, Child of Zeus

    Aww thanks!

    I'm in the bp.css file, but can't see the line numbers, what section of the file is that in?

    Regarding the sidebar issue, I'm talking about townflo.co.uk/activity ...it takes up the whole page,
    usually you have room for the sidebar too. I'm currently hiding the sidebars on these pages through the 'widget context' plugin, but when they're not hidden, they appear underneath the activity stream. I was just wondering if the buddypress section itself could be styled so it doesn't take up the whole page..hence allowing for the sidebars to show where they should be?!

    Ben

  • Kimberly
    • Champion of Loops

    Oh the weekend gets my feed reader all messy!

    I really need to look into a new one, or convince myself to learn google reader....but I'm not excited about the latter prospect

    Anywho, I'm attaching a pic of where the line is in the bp.css file. I inspected both buttons and they are the same line so I'm pretty sure that's it.

    As for your sidebar issue, I am not sure how your theme is handling the Activity page. The default buddypress theme php calls the sidebar in /wp-content/plugins/buddypress/bp-themes/bp-default/activity/index.php for the activity page. I don't know if your theme is using this template, as it's not a "buddypress" theme.

    My first try would be to comment out that line at the very end of this file (line 156)

    /* php get_sidebar( 'buddypress' ); ?> */
    <?php get_footer( 'buddypress' ); ?>

  • themarketingcompass
    • Site Builder, Child of Zeus

    When I inspect the element on firebug, it comes up with a different line than your screenshot! I still don't actually understand where I then make the change anyway as I can't see where I'm supposed to edit on the plugins/bp-template-pack/bp.css file.

    I usually would edit this via the Wordpress Plugin's 'Editor' or within my file manager by locating the file and opening up. It doesn't show you line numbers, just like the screenshot below....

    PS commenting out the last line in /wp-content/plugins/buddypress/bp-themes/bp-default/activity/index.php didn't do anything, also I was thinking wouldn't you need to change something globally across all the buddypress pages, for example the members and groups pages too?

  • Kimberly
    • Champion of Loops

    Sorry Sir, thought you would have had this one wrapped up :slight_smile:

    I went ahead and downloaded the bp-template pack and made the appropriate changes to bp.css. Basically I did a text search for background: -moz-linear-gradient and commented it out. It should turn your buttons back to normal.

    You can try this yourself or replace your bp.css with this one. It will be the plugins/bp-template-pack/bp.css

    As for your sidebar...

    I honestly have no idea because I am not sure how the bptemplate pack handles your page display for bpress and I don't have a woo canvas theme to test with....

    The above advice would apply...just comment out the portion calling the sidebar once you figure out which template file it's using: bp-template pack, or bp default, or theme etc.

  • Cpo
    • Site Builder, Child of Zeus

    Ben,

    Not sure if you corrected your sidebar issue. You should be able to control your sidebar width(s) and your content width on your style sheet. You may have to manipulate that wrap variable as well. Just play with it and remember to just make it all add up to your perspective width of the site. I think with that particular theme you have to edit custom.css. Unless you have access via ftp, if so, with a little no how you can really get crazy.

    Hope that helps.

  • themarketingcompass
    • Site Builder, Child of Zeus

    Thanks Chris, you're right the theme has a custom.css file which would override any stylesheet commands. Not too hot on writing CSS myself though so wouldn't really know where to start on effecting only the Buddypress pages widths as it sidebars are fine on all normal pages! :slight_smile:

  • Arun Basil Lal
    • New Recruit

    Hello Ben,

    Kimberly is away and she asked me to take care of this (so nice of her!).

    I see the buttons when I logged in, I think the following CSS fix will make them readable. Add this to the part of the theme's stylesheet, or if you have a stylesheet for custom css:

    button, a.button, input[type="submit"], input[type="button"], input[type="reset"], ul.button-nav li a, div.generic-button a, .comment-reply-link {
    background: none repeat scroll 0 0 #000000 !important;
    }
    
    button:hover, a.button:hover, a.button:focus, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, ul.button-nav li a:hover, ul.button-nav li.current a, div.generic-button a:hover, .comment-reply-link:hover {
        background: none repeat scroll 0 0 #000000 !important;
    }

    That should make them readable. Do let me know how that goes :slight_smile:

    Good luck!

    p.s: I tried reading through the threads, but am confused about the sidebars, have you sorted that out?

  • themarketingcompass
    • Site Builder, Child of Zeus

    Thanks Arun, that worked for when you hover over the buttons, they go black. Any way to make them black or red all of the time?

    Haven't managed to work out the sidebar issue on the buddypress pages. As you can see on any of those pages (e.g. townflo.co.uk/activity) the buddypress activity loop takes up the full width of the page. If you have plugins showing on those pages they get pushed down below the updates. I'm trying to figure out how to make the two sidebars show as normal to the left and right like they do on the non buddypress pages (e.g. townflo.co.uk) Any ideas?

    Kind regards

    Ben

  • Arun Basil Lal
    • New Recruit

    Hey Ben,

    This seems to be the selector for you, am not sure why it isn't showing up:

    button, a.button, input[type="submit"], input[type="button"], input[type="reset"], ul.button-nav li a, div.generic-button a, .comment-reply-link {
    background: none repeat scroll 0 0 #000000 !important;
    }

    Please make sure that this in there.

    Regarding the content / Sidebar. Which theme is this that you are using? There is no width parameter for the container block on the activity page.

  • themarketingcompass
    • Site Builder, Child of Zeus

    Yep that's in there, just seems to work on hover overs though :slight_smile:

    The theme I'm using is Woo Theme's Canvas. Any idea how to set the width parameters for the buddypress pages? Ideally I'd like to set it on the custom.css so when we update the theme I don't have to update this bit manually everytime!

  • Kimberly
    • Champion of Loops

    Hey Ben!

    Guess this one got a bit lost, so sorry

    Visiting the page Firebug tells me that the css file controlling the activity stream wrap size is located in the bp.css file, in the buddypress templates files

    This is what you get changing the width on line 1097

  • aecnu
    • WP Unicorn

    Greetings Ben,

    We have not heard back from you as to the status of this issue.

    If you are still having an issue please let us know so that we may try to get you fixed up as soon as possible by choosing to check mark this ticket as unresolved below and posting any new errors or symptoms you are noticing.

    This action will also bring your ticket up front back in plain view again within the ticket system.

    Thank you for being a WPMU Dev Community Member!

    Cheers, Joe

  • Arturol
    • Design Lord, Child of Thor

    Can anybody help me?
    I have the same problem ND DO NOT KNOW HOW TO FIX IT:

    I have just installed Buddypress on my theme that is Buddypress compatible. Everything works ok, apart from the buddypress buttons themselves, they're overriding the theme's button colour of to a white/ silver coor. It is impossible to read. Apart from that button colors er not showing right either in IE9.
    How do I fix these to issues?
    Thanks,

  • Arturol
    • Design Lord, Child of Thor

    Hi Kimberlyl!
    Can anybody help me?
    I have the same problem AND DO NOT KNOW HOW TO FIX IT:

    I have just installed Buddypress on my theme that is Buddypress compatible. Everything works ok, apart from the buddypress buttons themselves, they're overriding the theme's button colour of to a white/ silver coor. It is impossible to read. Apart from that button colors er not showing right either in IE9.

    As you can see in the attatched file submit button can not be read beacause it's just all white. I would really fix this as well as change all button colors on BuddyPress
    How do I fix these to issues?
    Thanks,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.