Skip to:
Content

BuddyPress.org

Opened 15 years ago

Closed 14 years ago

#948 closed defect (bug) (wontfix)

CSS improvements for BP 1.1

Reported by: oriste's profile oriste Owned by:
Milestone: 1.2 Priority: minor
Severity: Version:
Component: Keywords: css fluid width
Cc: oriste

Description

This is the first time I use the Trac system, so pardon me if this is not the correct way to do this. DJPaul at the BP forum suggested to enter this as an enhancement ticket. In my humble opinion it should be filed as a defect, albeit a minor one, given the fact that perhaps not so many users will experience it. Please feel free to set me straight if I made any mistakes.

I'm working with the latest version from trunk (1696) on a WPMU 2.8.4 base. I like the new default theme very much, especially the fluid width aspect of it, but I noticed a few shortcomings which are only visible in wide monitors (1920 x 1200). When you resize the browser window to max window width, the backgrounds of the header titles do not extend all the way as they should. That's because they use a fixed width background picture. To remedy that I created 4 new background pictures (based on the current ones) and added a few CSS statements to my custom.css file as follows:

#third-section .widget,
#content .page,
#content .directory-widget,
#content .directory-listing {
background: url(../images/el_leftcol_header_bg.gif) top left repeat-x !important;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

#third-section .widget h2,
.page h2.pagetitle,
.page h3 {
background: url(../images/el_leftcol_header_left.gif) top left no-repeat !important;
}

#third-section .widget_bp_core_welcome_widget {
background: url(../images/el_welcome_header_bg.gif) top left repeat-x !important;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.widget_bp_core_welcome_widget h2 {
background: url(../images/el-welcome_header_left.gif) top left no-repeat !important;
color: #fff !important;
}

I haven't developed a full fledged site yet, so I don't know if I have covered all the eventualities, but the same style overrides could be applied to other occurrences where these fixed-width background pictures are currently used. You can get the images from the directories mentioned above at http://eigenlife.com/wp-content/themes/bp-default/_inc/. Ultimately it would be more appropriate (I think) if these changes were incorporated in the screen.css file.

Change History (8)

#1 @oriste
15 years ago

  • Cc oriste added

In the second CSS block ".page h3" should be ".page > h3"

#2 @r-a-y
15 years ago

Since the title of this ticket is "CSS improvements for BP 1.1", I'd like to see most of the external CSS files (all widget CSS files) consolidated into one CSS stylesheet.

Most of these external CSS files are only a couple of lines anyway, consolidating them into one will help minimize server requests.

I'd also like to see consolidation for external JS files as well.

#3 @apeatling
15 years ago

  • Milestone changed from 1.1 to 1.2

I can't access the files, moving this to 1.2 as I don't think it is immediately urgent and can be fixed by the user if they notice anything.

#4 @plrk
15 years ago

oriste:

".page h3" works just as fine as ".page > h3".

#5 @oriste
15 years ago

@plrk

Not in all cases, I can't remember now where it went wrong, you will find out for yourself when you choose the first variant.

@apeatling

Directory listing doesn't work obviously, you were supposed to append the URIs used in the CSS to that domain URL. They are here:

Please note that what I suggest here is just a hack, within the constraints of the current document structure and CSS , I would do it differently if I had to incorporate this in the BP core. Using a fixed width background for a flexible width page element appears to me as a design flaw. I cannot judge its urgency however, all I know is that according to w3schools.com, 57% of users have a higher resolution than 1024 x 768. That doesn't necessarily mean that they will run into this of course, so I will let you be the judge.

#6 @plrk
15 years ago

@oriste

They are supposed to be exactly the same. If not, you've stumbled across an obscure bug in your HTML renderer.

#7 @oriste
15 years ago

@plrk

I'm sorry, but they are not.

A ".page h3" refers to an H3 element SOMEWHERE in the hierarchy below an element of class ".page". A ".page > h3" refers to an H3 element whose DIRECT PARENT has class ".page". As I said, you can find out for yourself by sticking to the first variant. If you were to do this you would notice that the titles of Blog posts would have a grey background; they're not supposed to.

I suggest we herewith close this off-topic discussion.

#8 @johnjamesjacoby
14 years ago

  • Resolution set to wontfix
  • Status changed from new to closed

Those kinds of advanced CSS selectors are part of CSS2.1 which isn't as widely supported in older browsers. The core theme needs to continue to support older technology as much as possible.

I've been wrong before so please reopen if there is an immediate need for this kind of behavior.

Note: See TracTickets for help on using tickets.