Netgate Discussion Forum
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Search
    • Register
    • Login

    Optical illusion

    Scheduled Pinned Locked Moved 2.3-RC Snapshot Feedback and Issues - ARCHIVED
    15 Posts 5 Posters 3.8k Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • BBcan177B
      BBcan177 Moderator
      last edited by

      Edit  /usr/local/www/widgets/widgets/system_information.widget.php

      @ Line 129    add the part in red    ( icon-success ):

      Refresh the dashboard, you will notice the Firmware cog wheel spinning off center ;)

      "Experience is something you don't get until just after you need it."

      Website: http://pfBlockerNG.com
      Twitter: @BBcan177  #pfBlockerNG
      Reddit: https://www.reddit.com/r/pfBlockerNG/new/

      1 Reply Last reply Reply Quote 0
      • J
        jwt Netgate
        last edited by

        https://redmine.pfsense.org/issues/5620

        1 Reply Last reply Reply Quote 0
        • S
          Steve_B Netgate
          last edited by

          I believe that is because font-awesome icons are not technically icons in the HTML sense, they are characters. The correct class would, therefore, be "text-succcess" and this works as expected, changing the icon color but without making it eccentric.

          Als ik kan

          1 Reply Last reply Reply Quote 0
          • H
            heper
            last edited by

            @steve_b

            the icon-success/error/warning are custom css we've / i've added.
            https://github.com/pfsense/pfsense/blob/master/src/usr/local/www/bootstrap/css/pfSense.css#L475-L497

            perhaps changing the pfsense.css file would solve this everywhere as the icon-* classes are used in multiple places

            1 Reply Last reply Reply Quote 0
            • BBcan177B
              BBcan177 Moderator
              last edited by

              Thanks heper,

              Also is it ok to use the class "icon pointer" with fa icons? or is there another alternative?

              I have changed the code to use "text-success" but I am also noticing that the CSS color is a different shade of green than "icon-success". Could this be fixed?

              I had an issue today with a tester who had UBlock enabled in his browser that was blocking one of the font awesome icons from being displayed in the widget. I think it might be best to provide a warning, or atleast some documentation in the help section about this issue…

              The icon that was blocked was "fa-arrow-circle-o-up"

              http://fortawesome.github.io/Font-Awesome/icons/#brand

              "Experience is something you don't get until just after you need it."

              Website: http://pfBlockerNG.com
              Twitter: @BBcan177  #pfBlockerNG
              Reddit: https://www.reddit.com/r/pfBlockerNG/new/

              1 Reply Last reply Reply Quote 0
              • S
                Steve_B Netgate
                last edited by

                Yes, you can use icon-pointer wherever you need to. Its purpose is just to change the curor to a pointer so that the user knows it is clickable. That happens automatically with anchor tags of course, but not necessarily when the click is handled by jQuery/Javascript

                The CSS file overrides Bootstrap colors so that we can implement different schemes (dark, bright, scary, default etc) @JDillard is working on making all of the colors consistent, so that will get better soon.

                The font blocking thing is a pain. I suppose we should a) Avoid branded fonts, b) Modify the class names c) Display a warning somewhere (where?) and/or d) make sure our support team is aware.

                Sigh

                Als ik kan

                1 Reply Last reply Reply Quote 0
                • BBcan177B
                  BBcan177 Moderator
                  last edited by

                  Thanks Steve,

                  The fa icon that was blocked wasn't even a 'Branded' icon. :)

                  "fa-arrow-circle-o-up"

                  With font awesome you can do a stacked icon, maybe a workaround could be to have a smaller icon in the background? or some jQuery magic to warn the user that an fa icon was deleted?

                  Its just a matter of time before people get hit by this and see missing Icons :)

                  "Experience is something you don't get until just after you need it."

                  Website: http://pfBlockerNG.com
                  Twitter: @BBcan177  #pfBlockerNG
                  Reddit: https://www.reddit.com/r/pfBlockerNG/new/

                  1 Reply Last reply Reply Quote 0
                  • jdillardJ
                    jdillard
                    last edited by

                    uBlock is open source so you can open an issue, but this is the only thing that shows up when I searched:

                    https://github.com/chrisaljoudi/uBlock/search?utf8=%E2%9C%93&q=fa-arrow-circle-o-up

                    1 Reply Last reply Reply Quote 0
                    • BBcan177B
                      BBcan177 Moderator
                      last edited by

                      The tester that had UBlock enabled, found that particular 'fa icon' in his 'Fanboy's Annoyance List' and 'Fanboy's+EasyList Merged Ultimate List'.

                      I don't use UBlock, so I am just letting you guys know about the issue. I believe the tester submitted a False positive report to the maintainer of that list.

                      The Link page to Font Awesome website also mentions that ADBlockers can cause issues with these icons. Its just a matter of time that others will hit a similar issue in the future. So this was just an FYI.

                      "Experience is something you don't get until just after you need it."

                      Website: http://pfBlockerNG.com
                      Twitter: @BBcan177  #pfBlockerNG
                      Reddit: https://www.reddit.com/r/pfBlockerNG/new/

                      1 Reply Last reply Reply Quote 0
                      • jdillardJ
                        jdillard
                        last edited by

                        Thanks for testing reporting and double thanks for being so thorough!

                        An enduser (and I speak as one) that uses a tool that breaks the experience (I use uBlock as well) has to take some responsibility. It is hard to design a perfect experience for third party plugins to third party plugins.

                        1 Reply Last reply Reply Quote 0
                        • BBcan177B
                          BBcan177 Moderator
                          last edited by

                          @jdillard:

                          Thanks for testing reporting and double thanks for being so thorough!

                          An enduser (and I speak as one) that uses a tool that breaks the experience (I use uBlock as well) has to take some responsibility. It is hard to design a perfect experience for third party plugins to third party plugins.

                          I agree… I think it should just be noted in the pfSense Docs somewhere... not that anyone reads the documentation anyways :)

                          I use uBlock as well

                          Maybe… just maybe... try pfBlockerNG DNSBL :)

                          "Experience is something you don't get until just after you need it."

                          Website: http://pfBlockerNG.com
                          Twitter: @BBcan177  #pfBlockerNG
                          Reddit: https://www.reddit.com/r/pfBlockerNG/new/

                          1 Reply Last reply Reply Quote 0
                          • jdillardJ
                            jdillard
                            last edited by

                            I'm not sure where to put that, probably best to wait until 2.3 hits the masses and see how much it hits the fan. I agree there should be a comment in the design docs not to use the branded icons though.

                            @BBcan177:

                            Maybe… just maybe... try pfBlockerNG DNSBL :)

                            I'm working on it…I'm still a n00b :)

                            1 Reply Last reply Reply Quote 0
                            • jdillardJ
                              jdillard
                              last edited by

                              I just pushed the changes from icon-* to text-* and added the text-* classes to pfSense.css

                              p.s. this is the cheatsheet I use for picking colors: https://www.google.com/design/spec/style/color.html#color-color-palette

                              don't tell anyone ;)

                              1 Reply Last reply Reply Quote 0
                              • BBcan177B
                                BBcan177 Moderator
                                last edited by

                                @jdillard:

                                p.s. this is the cheatsheet I use for picking colors: https://www.google.com/design/spec/style/color.html#color-color-palette

                                don't tell anyone ;)

                                I saw this post from user: rcfa:
                                https://forum.pfsense.org/index.php?topic=100213.msg579186#msg579186

                                Would be nice to have a selection of 'Primary colors' to choose from in the GUI, and then pfSense could use the appropriate css color palette settings according to that google link for the 'title bars, title bar text, regular text, heading, page background, highlight color,' etc….

                                Great link btw ... I was using this:
                                http://www.w3schools.com/tags/ref_colorpicker.asp

                                "Experience is something you don't get until just after you need it."

                                Website: http://pfBlockerNG.com
                                Twitter: @BBcan177  #pfBlockerNG
                                Reddit: https://www.reddit.com/r/pfBlockerNG/new/

                                1 Reply Last reply Reply Quote 0
                                • jdillardJ
                                  jdillard
                                  last edited by

                                  I responded to the other comment.

                                  the primary colors are intended to be success, warning, info, etc classes. it is a WIP.

                                  1 Reply Last reply Reply Quote 0
                                  • First post
                                    Last post
                                  Copyright 2025 Rubicon Communications LLC (Netgate). All rights reserved.