Topic: New Theme Architecture

New Theme Architecture

@neuromancer2701

Participant

15 years, 3 months ago

I had hacked together a theme with the old architecture and I am trying to import it to the new one.

I have created my own theme and added style.css to the folder. I moved all the changes that I had in custom.css in the old theme to this file.

Some of the changes have taken place but some are getting over written by screen.css in the parent theme(bp-sn-parent). I looked at some of the other themes posted in the forums. They seem to use(style.css) to link to screen.css in the _inc/css folder within the theme.

I tried this architecture as well and it seem that my screen.css is just getting ignored. Has a template theme been released or should we just use the default child theme as a starting point.

How do I make my theme overwrite the parents css settings?

Thanks,

Seth

Viewing 5 replies - 1 through 5 (of 5 total)

@neuromancer2701

Participant

15 years, 3 months ago

Any thoughts on this? To give more info, I want to change the color of buttons on the main page. I have the css block that does this and I have put it in the style.css of my theme.

Some of the changes in the block seem to be taking effect but the main one, the color, is not.

Firebug shows the css and says that the screen.css of the parent theme is overwriting the color in my style.css. How is this possible? Shouldn’t anything in your child theme take highest priority, what am I am missing here?

Thanks,

Seth

@apeatling

Keymaster

15 years, 3 months ago

The style.css file in your child theme should override the bp-sn-default style.css so the screen.css should never be loaded.

Check out this theme as an example:

https://buddypress.org/forums/topic/new-avenue-k9-bp-11-theme-released
@neuromancer2701

Participant

15 years, 3 months ago
Thanks, I started messing around with the default theme. One small issue that I have ran it is with the welcome widget. In the old version, I was able to change the gif for the welcome widget and have a different dif for the left column.

It seem that whatever gif I use for the left column is now used for the welcome widget as well.
```
.bp_core_widget_welcome h2 {

background:transparent url(../images/org_leftcol_header_back.gif) no-repeat scrollleft top !important;

color:#FFFFFF !important;

}
```
doesn’t seem to do anything. Looks like the columns have been broken down into sections now.
@suchaqd

Participant

15 years, 3 months ago

One general tip that I can give you is to use Firefox’s Firebug (and YSlow if you’re really savvy) development tool. That way, you can just click on the “HTML” tab and figure out just exactly, which section or element you need to adjust. It’s exactly how I made my theme

@neuromancer2701

Participant

15 years, 3 months ago

Yeah, I have been using Firebug extensively. From what I can tell with Firebug, it looks like the .bp_core_widget_welcome is not being used at all in the new theme arch. In the old one, I could see the left column being overwritten by the welcome css settings.

Thanks for the input, I will look into Yslow might be useful.