BuddyPress.org

At the most straightforward level of theming you shouldn’t really need to get too involved at a PHP level, creating a child theme will simply allow you to start overwritting or adding your own CSS styles via the style.css sheet in your new theme directory while still using the default themes files and styles – but you perhaps realise that

@SuluhuZetu I’m working on a mobile stylesheet that you would add to whatever theme you were using. I do have a mobile theme that deploys automatically (it’s a plugin), BUT it doesn’t work very well for my needs. Calling a separate stylesheet is the way to go, because you have full control and a minimum of problems.

A good place to start is to identify which sections you would not need when viewing in a browser, then set those as display:none; If you’ve created a printer-friendly stylesheet before, this is very similar. You have to add extra rules for the elements you do want and don’t forget to preview it with a mobile phone tester.

http://www.codinghorror.com/blog/2007/01/stylesheets-for-print-and-handheld.html
http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

I see you are using the BuddyPress Template Pack. That just adds the BP templates and files (php). You still need to style your custom theme. Adding the default css would be defeating the purpose behind the BuddyPress Template Pack. The whole idea is that it is for custom styles.

You basically have 3 choices.

1. Manually add the styles you want to your custom theme.

2. Use the default theme and modify it to your liking.

3. Find another theme:
https://buddypress.org/extend/themes/
http://buddydress.com/
http://wpmu.org/three-new-buddypress-themes/
http://www.staenzwebsolutions.com/28-free-buddypress-1-2-compatible-themes/341/
http://speckyboy.com/2010/02/19/12-amazing-buddypress-themes-and-getting-started-guides/

@mercime yes I was aware it had been updated as I downloaded and ran it quickly, the issue is not so much that it has been updated but that it’s technically a styling variant rather than a theme and uses all of bp-default structure along with bp-default default.css and as such adopts the bp-default tabs links (As default does it breaks if one has too many extensions./ plugins adding to these links).

So one would need to get down and dirty with those nav styles to effect a vertical approach, but that may well involve markup refactoring – hopefully it wouldn’t but I haven’t checked the markup with a view to that, but might if I get a moment.

Read this:
https://buddypress.org/community/groups/how-to-and-troubleshooting/forum/topic/members-page-not-aligned#post-52249

Add the CSS snippet to your WP theme’s stylesheet… not the default BP theme’s stylesheet.

If you simply want it sitting to the side of the profile field table then one approach that you could take but which requires a little editing of your profile-loop.php file along with functions.php so is best done as child theme files would be this:

Create a function to wrap that google maps api code in and then add that function to:

add_action(‘bp_before_profile_loop_content’, ‘user_profile_locationMap’);

In your profile-loop.php file find the do_action(‘bp_before_profile_loop_content’) around this function wrap a new div with an ID of say ‘profile-content-sidebar’ it’s this new element that you would float to the right.

As – In my case – the ‘Location’ field is a late addition and for most users it will appear on their edit screens but will remain unused I don’t want the new div rendering to the right or otherwise if empty so a conditional is used to test the ‘Location’ field for data.

The new div is wrapped in:

if( bp_get_profile_field_data( ‘field=Location’)):

both for the opening and closing tags this way if ‘Loction’ is empty then the new div will not render and the do_action will be left to render any actions at the top before the profile data table loop as before, with the ‘Location’ field having data then the div is rendered.

Lastly some styles are required to create the desired visual rendering so create a ruleset for the new element #profile-content-sidebar which would contain properties: float:right; and width:250px the div that hold the profile table ( div class=”bp-widget base” ) now needs to be margined away from the right edge you could do this using a sibling selector which would be the preferred approach as you can in a sense make use of CSS ability to implement pseudo conditional selectors e.g:

#profile-content-sidebar + .base {margin-right:260px;}

This is the preferred approach as this ruleset to margin the table elements parent away is only applied if our new div is rendered if not the table will still stretch 100% as before. Of course this approach doesn’t work in certain older generation browsers so it might be best instead to set a new ID on that table parent element to style on but set that ID with the same conditional query used on the new div element earlier.

There is a certain flaw to the checking for the field ‘Location’ while it works it suits a very particular circumstance and if that area to the right was required for other actions then this ‘Location; check might prove a hindered and doubtless there is a better approach to be worked up in the long run.

Add the following to your theme’s stylesheet:

div#topic-meta h3 {padding-bottom: 1em;}

Did you add a “buddypress” tag to your theme’s stylesheet?

eg.

/*
Theme Name: BuddyPress Dusk
Theme URI: http://example.org/themes/dusk/
Description: Dark theme for BuddyPress.
Version: 1.0
Author: John Doe
Author URI: http://example.org/
Template: bp-default
Tags: buddypress, two-column, grey, dark
*/

Notice the “buddypress” tag.

Do not change the markup directly, likely you have not added your ‘code’ to every instance of the pages that require it, regardless this isn’t the corect approach for many reasons that I won’t labour.
you should add images such as this using the background property but from the primary stylesheet for your theme with the graphic itself uploaded to whatever directory exists for iamges in that theme directory. If you find and open your primary stylesheet you will probably see examples of the background property used to place graphics on other elements so simply copy the example to the body element while replacing the graphics file name to the one you want.

wordpress will load page.php for every page you create so you cant really customize it..

Not necessarily.

Echoing modemlooper, you don’t need any of that code above. If you want Pages you create in WP to have different layouts, create a template file (https://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates), upload it to the root of your theme, and when you add the new page in WP, just select the template you wish to use. Arbitrary PHP, HTML, stylesheets, whatever.

You’ll have to modify the theme’s stylesheet.

Hopefully, you’ve already created a child theme, then you can override the background in your child theme’s style.css with:

eg.

body {background:url(URL TO YOUR IMAGE) no-repeat !important;}

To get rid of the title, go to your stylesheet (.css) and find #header h1

add

display:none

And the title will disappear.

A couple tips:

1. Use Firebug or Google Chrome’s built in developer tools to troubleshoot style issues

2. Use a child theme (search Buddypress Child theme) or you will lose your changes

Might be worth adding this link to the documentation on creating a child theme: https://codex.buddypress.org/how-to-guides/building-a-buddypress-child-theme/ It has the other details for creating the stylesheet and activating the child theme as well. Details a newbie might want to have on top of what you’ve already said. I know since I just changed my registration page as you described this week:-)

Create a child theme (it’s easy — do a search for instructions on how), copy register.php from /plugins/buddypress/bp-themes/bp-default/registration to /registration in your new child theme (which will just be the default theme plus this change and any other changes you make in future). Edit that registration.php.

Now your new registration page will override the default, and you are safe from having your changes overwritten by future version upgrades!

Any time you want to override anything (particularly styles), you can just copy files from bp-default, preserving folder structure, to your child theme and modify them there. It’s a little confusing at first, but is extremely powerful and useful.

The issue is that whatever theme you are working with has a style.css that applies rulesets using descendant selectors and on the elements you mention your style.css describes generic styles for things like ul li elements but as child elements of parent such as #content.

The stylesheet that appears to be created to apply the necessary styles required by buddypress i.e bp.css is styling on the class tokens.

As an example the div.item-list-tabs ul element requires and has a margin:0 applied in bp.css however in styles.css you have #content-body ul applying large margins and this ruleset has a higher specificity or weight due to the use of the ID selector which will override the clas selector described in bp.css.

I’m afraid that you have a little work to do to in getting whatever theme it is to work for BP, perhaps the fastest approach is open up bp.css and where you have :

div.item-list-tabs ul {}

Add to the beginning of the selector statement #content-body

#content-body div.item-list-tabs ul {}

This would enusure that the BP rules carry a higher weight and will win out or overrule.

Requires some CSS knowledge.

You can probably override this setting in your child theme’s stylesheet (I’m assuming you already use a child theme!).

Don’t know what a child theme is?

https://codex.buddypress.org/how-to-guides/building-a-buddypress-child-theme/

When you’ve created a child theme, add this to your child theme’s stylesheet:

#wp-admin-bar {bottom:0 !important;}

#wp-admin-bar ul li ul {bottom:23px !important;}

bp-default child themes usually render something like below in Appearance > Themes

The template files are located in /themes/MyChildTheme. The stylesheet files are located in /themes/MyChildTheme. MyChildTheme uses templates from BuddyPress Default. Changes made to the templates will affect both themes.

Tags: buddypress, multiple columns, fixed width, group blog

Creating BuddyPress Child Themes – https://codex.buddypress.org/how-to-guides/building-a-buddypress-child-theme/

and remember to add “buddypress” to Tags in style.css of custom child theme

Thats because there is no Mystique styles for BuddyPress in tour style.css & Mystique doesn’t recognise the BuddyPress pages.

You could add the styles yourself, or maybe an easier way, create a blank page in your wp-admin, call it activity & see if Mystique page styles are picked by your activity page then.