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

Fixed subForumsPopup Styling

Discussion in 'Resolved Bug Reports' started by Steve F, Apr 9, 2013.

  1. Steve F

    Steve F Well-Known Member

    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;
    }
     
    Alien and Shelley like this.
  2. Shelley

    Shelley Well-Known Member

    Agreed. Nice spot Steve. (y)

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

    Brogan XenForo Moderator Staff Member

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

    Steve F Well-Known Member

    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
     
  5. CyberAP

    CyberAP Well-Known Member

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

    AlexT Well-Known Member

    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.
     
  7. Shelley

    Shelley Well-Known Member


    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.
     
  8. CyberAP

    CyberAP Well-Known Member

    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.
     
  9. Shelley

    Shelley Well-Known Member

    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.
     
  10. CyberAP

    CyberAP Well-Known Member

    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).
     
  11. Shelley

    Shelley Well-Known Member

    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?
     
  12. CyberAP

    CyberAP Well-Known Member

    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 likes this.
  13. Shelley

    Shelley Well-Known Member

    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.
     
  14. AlexT

    AlexT Well-Known Member

    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.
     
  15. CyberAP

    CyberAP Well-Known Member

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

    Mike XenForo Developer Staff Member

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

Share This Page