Fixed subForumsPopup Styling

[Steve F]

This has always kinda bugged me but I kept forgetting to post

Current subForumsPopup



Looks ok this way

.subForumsPopup .PopupControl.PopupOpen
{
    background: @primaryLight;
}

Or

Still use the image but move it to the bottom, which looks a bit better imo.

.subForumsPopup .PopupControl.PopupOpen
{
    background: @primaryLight url('@imagePath/xenforo/gradients/tab-unselected-25px-light.png') repeat-x bottom;
}

 

[Shelley]

Agreed. Nice spot Steve.

Either one of your solutions is good but setting the gradient to bottom would be my choice personally.

 

[Paul B]

With the image at the bottom, you'll have the opposite problem when the popup is above the control.

 

[Steve F]

True, although I don't see it as much. The image at the bottom still looks better than the current setting though.

On a side note, some margin-top for the BottomControl would also help that area.

.Menu.BottomControl
{
    margin-top: 2px;
}

 

[CyberAP]

That's one of the reasons why we should use CSS3 gradients instead of images. Generated gradients are flexible.

 

[AlexT]

That's one of the reasons why we should use CSS3 gradients instead of images. Generated gradients are flexible.

I don't have much experience with CSS3, but from what I've seen, care needs to be taken which CSS3 rules to use without affecting a browser's rendering speed. The last thing we want to do is artificially slow down xF by using "slow" CSS style rules.

 

[Shelley]

With the image at the bottom, you'll have the opposite problem when the popup is above the control.

True.


Does the extremely small area warrant having a background image. background-color would suffice since the area is so small anyway. Eitherway, nothing that can't be rectified and alteration we can make already.

 

[CyberAP]

I don't have much experience with CSS3, but from what I've seen, care needs to be taken which CSS3 rules to use without affecting a browser's rendering speed. The last thing we want to do is artificially slow down xF by using "slow" CSS style rules.

Such small gradients like in this example absolutely not affect site performance.

But if you really want to know the slowest CSS property - it is box-shadow. And it is widely used in XF and still it doesn't lag.

 

[Shelley]

Such small gradients like in this example absolutely not affect site performance.

Again, true but does such a small insignificant area warrant it? I'd say not. Eitherway, I see a bigger issue with the subforum dropdown and that is the fact that it's there in the first place (never been a fan of the dropdown of death menus) give me a grid system any day of the week but that is a whole different thread and debate.

 

[CyberAP]

Again, true but does such a small insignificant area warrant it? I'd say not. Eitherway, I see a bigger issue with the subforum dropdown and that is the fact that it's there in the first place (never been a fan of the dropdown of death menus) give me a grid system any day of the week but that is a whole different thread and debate.

I'd say yes because if we replace all the image gradients with their CSS analogues we'll get a huge http request optimisation + scalability and flexibility.
Again, gradients don't slow down site performance at all. Box-shadows cause that in most cases.
I personally see no reason to ingore gradiens, and moreover they are supported by all modern browsers (all of them - unprefixed, oh, except Safari of course).

 

[Shelley]

background-color only? for the subforum wouldn't this be a better solution, if not why not?

I'm not arguing with you with regards to what will slow down a site and what doesn't slow down stuff. I'm just saying does this little area warrant the attention that a background-color wouldn't solve w/o gradient?

 

[CyberAP]

It's up to devs to decide what' s better, I've only expressed my point of view. And technically speaking generated images are better than raster.

 

[Shelley]

It's up to devs to decide what' s better, I've only expressed my point of view. And technically speaking generated images are better than raster.

I was just more curious because a background-color to me seemed like the logical choice since the gradient currently used is better suited for heights of around 25px or more not something that is 10px or thereabouts in height. Same here I'm expressing my point of view but i guess it's upto the devs what route (if they decide to do anything with it) to take and whether they even think it's worth touching.

 

[AlexT]

Again, gradients don't slow down site performance at all. Box-shadows cause that in most cases.

I am not a designer and it goes without saying that you are more experienced with CSS style properties. I remember someone just recently commenting on a XF skin - coincidentally one of yours? - where lagging browser rending was a big issue.

 

[CyberAP]

I am not a designer and it goes without saying that you are more experienced with CSS style properties. I remember someone just recently commenting on a XF skin - coincidentally one of yours? - where lagging browser rending was a big issue.

Yep, a box-shadow issue. I already gave a solution to that, disabling the most heavy box-shadows.

 

[Mike]

I've removed the image there for 1.2, as well as fixing the position bug (2px off) with the "BottomControl" version.