Fixed subForumsPopup Styling

Steve F

Steve F

Well-known member
This has always kinda bugged me but I kept forgetting to post :p

Current subForumsPopup

popup.webp

Looks ok this way

popup2.webp

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

Or

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

popup3.webp

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

Either one of your solutions is good but setting the gradient to bottom would be my choice personally.
 
With the image at the bottom, you'll have the opposite problem when the popup is above the control.
 
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.

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

popup4.webp
 
That's one of the reasons why we should use CSS3 gradients instead of images. Generated gradients are flexible.
 
CyberAP said:
That's one of the reasons why we should use CSS3 gradients instead of images. Generated gradients are flexible.
Click to expand...

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.
 
Brogan said:
With the image at the bottom, you'll have the opposite problem when the popup is above the control.
Click to expand...


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.
 
AlexT said:
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.
Click to expand...
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.
 
CyberAP said:
Such small gradients like in this example absolutely not affect site performance.
Click to expand...

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.
 
Shelley said:
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.
Click to expand...
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).
 
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?
 
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.
 
CyberAP said:
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.
Click to expand...

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.
 
CyberAP said:
Again, gradients don't slow down site performance at all. Box-shadows cause that in most cases.
Click to expand...

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.
 
AlexT said:
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.
Click to expand...
Yep, a box-shadow issue. I already gave a solution to that, disabling the most heavy box-shadows.
 
Top Bottom