[Grackle Design]

I’ve inherited a project, taking over from another developer who built the site. previous guy did extensive customizations, so it’s been somewhat of a challenge reverse engineering how he built and modded the site/files.

I’m in the process of modifying the layout, and in the interest of future updates, i want to do it the right way. so i followed this tutorial for creating a child theme for using custom CSS. (http://codex.buddypress.org/theme-development/building-a-buddypress-child-theme/)

i’ve followed the tutorial exactly, but my mockup for the new homepage layout indicates something is not right. From what i can judge, it appears to me that there is another stylesheet being called by the current site that i have not incorporated into the child theme’s style.css. (i put in only the two in the tutorial).

here is the link to my mockup: http://bit.ly/dErmwJ

here is a link to the a pre-mockup where i only included an image file for the changes (as a preview to the client before going forth with writing any custom code): http://bit.ly/hDeWzi

(sorry didnt want to drop direct links to the site so it doesn’t come up in any search. i hope it is understandable).

so my question is, do you think i am correct in my assumption that there is another style.css that i am supposed to be importing into the child theme, that i missed? or do you think there is another explanation for why the child theme style is ‘off’? (notice the header area is out of whack, and you can see the links colors are different, (light blue instead of red) and the overall page width is much wider)

thanks in advance! i hope this is explained well enough, if there is any clarification needed, please let me know!

[@mercime]

=== do you think i am correct in my assumption that there is another style.css that i am supposed to be importing into the child theme, that i missed? or do you think there is another explanation for why the child theme style is ‘off’? ===

Your mockup style.css is importing from the bp-default theme in BP plugin folder http://electioncandidates.com/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/css/default.css
while the pre-mockup style.css is importing from the bp-default theme in themes folder http://electioncandidates.com/wp-content/themes/bp-default/_inc/css/default.css where the styling has already been revised/customized. Initial scan comparing the stylesheets already shows that min and max width is set to 996px in pre-mockup; while your mockup still has the BP default styling of min width of 960px and max width of 1250px just as an example of the difference.

Copy over the styling of `default.css` and `adminbar.css` from the pre-mockup to your theme’s `/_inc/css/` folder and change the import call
from

/* Inherit the default theme styles */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );
/* Inherit the default theme adminbar styles */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );

to

/* Inherit the default theme styles */
@import url(_inc/css/default.css );
/* Inherit the default theme adminbar styles */
@import url(_inc/css/adminbar.css );


cross fingers

[Grackle Design]

thanks mercime, that was really helpful. but actually, after reading your post, all i did was swap out the URLs in my child theme’s stylesheet, so now i have,

/* Inherit the default theme styles */
@import url( ../../themes/bp-default/_inc/css/default.css );

/* Inherit the default theme adminbar styles */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );

that seems to have done the trick, as now if you visit the mockup2.html page, it looks just like the pre-mockup.

the next thing i’ll need to do is actually throw the switch by activating the theme in the wordpress admin, i think with the above mockup page, all i did was copy the homepage source code and save it as a .html file so i could play around, and linked it to the child theme style.css by changing the link in the head. however to get this live on the site, I’m assuming i have to activate the child theme in the main wordpress dashboard, is this correct? (a little nervous).

[@mercime]

=== I’m assuming i have to activate the child theme in the main wordpress dashboard, is this correct? ===

Yes. Activate the child theme in dashboard of WP site where BuddyPress is installed. So if your BP is in main/primary site, activate child theme in dashboard of main site.