[Reposting original response here in the hopes that it will show for you.]
Can you make public the code you use for your “join” page on the demo Frisco installation? It looks amazing, and I’d like to model mine off of that.
I’m using the default Frisco theme to power the demo site. And I used a custom stylesheet along with a custom functions file to extend the theme and add a couple small features.
If you have BuddyPress installed and the Frisco theme activated, go to “Appearance > Theme Options”. You should see two checkboxes on the options page. The first checkbox enables a custom.css file. And the second checkbox enables a functions-custom.php file. These two files should be used to customize the theme wherever possible and will ensure that upgrades are easy in the future because those files shouldn’t be affected when you upgrade the theme.
So, generally, to customize the CSS of the theme, create a file called custom.css in the theme folder, add your custom CSS, and then check the box in the theme options to enable it. To add or remove functionality, create a file called functions-custom.php in the theme folder, add your custom code, and then check the box in theme options to enable it.
Back to your original question. To insert the HTML used for the “Welcome to the Demo” section, I used a hook to add a function called add_register_page_alert() to bp_before_register_page (hook on the bp-defaut register page).
Here’s sample code. This could be added to the functions-custom.php referenced above.
// Add alert to initial register page
function add_register_page_alert() {
// If on on the initial register page, show HTML block
if ( 'request-details' == bp_get_current_signup_step() ) :
?>
<p>Hello world!</p>
<?php
endif;
}
add_action ( 'bp_before_register_page', 'add_register_page_alert' );
Then add any custom CSS to the custom.css file reference above. To see the HTML and custom.css used on the demo register page, use Firebug for Firefox.
2. I know you’re limiting the amount of colors available so far, but where in the CSS file is that option if I’d like to change it myself? i.e. what field changes the header color (and I assume the footer text as well)?
You should use the custom.css file for this. Go into any of the files within the “css” directory (ex. default.css, green.css, etc.) and copy the CSS in any one of those files, then paste that CSS into your custom.css file. Use the CSS you just pasted in custom.css to customize the colors however you’d like. Custom.css, if enabled properly, will override the color choice selected in the backend.
3. Is there any way to add a custom logo to the header? If so, how would I do that?
Create the custom.css file if you haven’t already. Upload your logo to the server – I’d create a folder in the theme for this, something like “custom-images” or whatever. Then use a CSS image replacement technique referencing that logo/image in your CSS.
https://css-tricks.com/630-css-image-replacement/
