• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Fixed subForumsPopup Styling

Steve F

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

Current subForumsPopup

popup.png

Looks ok this way

popup2.png

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

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

popup3.png

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

Shelley

Well-known member
#2
Agreed. Nice spot Steve. (y)

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

Brogan

XenForo moderator
Staff member
#3
With the image at the bottom, you'll have the opposite problem when the popup is above the control.
 

Steve F

Well-known member
#4
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.png
 

CyberAP

Well-known member
#5
That's one of the reasons why we should use CSS3 gradients instead of images. Generated gradients are flexible.
 

AlexT

Well-known member
#6
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

Well-known member
#7
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

Well-known member
#8
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

Well-known member
#9
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

Well-known member
#10
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

Well-known member
#11
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

Well-known member
#12
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

Well-known member
#13
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

Well-known member
#14
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

Well-known member
#15
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.