• Register
    • Help

    striker  0 Items
    Currently Supporting
    • Home
    • News
    • Forum
    • Wiki
    • Support
      • Manage Subscriptions
      • FAQ
      • Support For
        • VaultWiki 4.x Series
        • VaultWiki.org Site
    • What's New?
    • Buy Now
    • Manual
    • 
    • Support
    • VaultWiki 4.x Series
    • Feature
    • Replace icons with Font Awesome

    1. Welcome to VaultWiki.org, home of the wiki add-on for vBulletin and XenForo!

      VaultWiki allows your existing forum users to collaborate on creating and managing a site's content pages. VaultWiki is a fully-featured and fully-supported wiki solution for vBulletin and XenForo.

      The VaultWiki Team encourages you to join our community of forum administrators and check out VaultWiki for yourself.

    Issue: Replace icons with Font Awesome

    • Issue Tools
      • View Changes
    1. issueid=3718 April 27, 2014 10:20 AM
      Alfa1 Alfa1 is offline
      Distinguished Member
      Replace icons with Font Awesome

      VW is already using font awesome. Replacing the current icons with font awesome will make VW load faster and enhance its design. These icons will also make the use of VW more intuitive. Currently some of the icons used are confusing. As FA are used around the web, people will recognize their meaning.

      Here are the replacements that I suggest for the vault/resources/images/icons folder:

      - Change vw-area-icon for fa-folder-o in blue
      - Change vw-area-icon-new for fa-folder-o in blue
      - Change vw-area-icon-mod for fa-folder-o in red
      - Change vw-area-icon-old for fa-folder-o in grey

      - Change vw-page-icon-ltr for fa-file-text-o in blue
      - Change vw-page-icon-ltr-new for fa-file-text-o in blue
      - Change vw-page-icon-ltr-mod for fa-file-text-o in red
      - Change vw-page-icon-ltr-old for fa-file-text-o in grey

      - Change vw-attach-icon-ltr to fa fa-paperclip in blue
      - Change vw-attach-icon-ltr-mod to fa fa-paperclip in red
      - Change vw-attach-icon-ltr-new to fa fa-paperclip in blue
      - Change vw-attach-icon-ltr-old to fa fa-paperclip in grey

      - Change vw-book-icon-ltr to fa-book in blue
      - Change vw-book-icon-ltr-mod to fa-book in red
      - Change vw-book-icon-ltr-new to fa-book in blue
      - Change vw-book-icon-ltrold to fa-book in grey

      - Change vw-category-icon-ltr to fa-sitemap in blue
      - Change vw-category-icon-ltr-mod to fa-sitemap in red
      - Change vw-category-icon-ltr-new to fa-sitemap in blue
      - Change vw-category-icon-ltr-old to fa-sitemap in grey

      - Change vw-chapter-icon-ltr to fa-list-alt in blue
      - Change vw-chapter-icon-ltr-mod to fa-list-alt in red
      - Change vw-chapter-icon-ltr-new to fa-list-alt in blue
      - Change vw-chapter-icon-ltr-old to fa-list-alt in grey

      - Change vw-comment-icon-ltr to fa-comment in blue
      - Change vw-comment-icon-ltr-mod to fa-comment in red
      - Change vw-comment-icon-ltr-new to fa-comment in blue
      - Change vw-comment-icon-ltr-old to fa-comment in grey

      - Change vw-discussion-icon-ltr to fa-comments in blue
      - Change vw-discussion-icon-ltr-mod to fa-comments in red
      - Change vw-discussion-icon-ltr-new to fa-comments in blue
      - Change vw-discussion-icon-ltr-old to fa-comments in grey

      - Change vw-index-icon-ltr to fa-home in blue
      - Change vw-index-icon-ltr-mod to fa-home in red
      - Change vw-index-icon-ltr-new to fa-home in blue
      - Change vw-index-icon-ltr-old to fa-home in grey

      - Change vw-island-icon-ltr to fa-retweet in blue
      - Change vw-island-icon-ltr-mod to fa-retweet in red
      - Change vw-island-icon-ltr-new to fa-retweet in blue
      - Change vw-island-icon-ltr-old to fa-retweet in grey

      - Change vw-redirect-icon-ltr to fa-share in blue
      - Change vw-redirect-icon-ltr-mod to fa-share in red
      - Change vw-redirect-icon-ltr-new to fa-share in blue
      - Change vw-redirect-icon-ltr-old to fa-share in grey

      - Change vw-revision-icon-ltr to fa-edit in blue
      - Change vw-revision-icon-ltr-mod to fa-edit in red
      - Change vw-revision-icon-ltr-new to fa-edit in blue
      - Change vw-revision-icon-ltr-old to fa-edit in grey

      - Change vw-template-icon-ltr to fa-list-alt in blue
      - Change vw-template-icon-ltr-mod to fa-list-alt in red
      - Change vw-template-icon-ltr-new to fa-list-alt in blue
      - Change vw-template-icon-ltr-old to fa-list-alt in grey

      Of course the icons in blue could also be yellow.
    Issue Details
    Issue Number 3718
    Issue Type Feature
    Project VaultWiki 4.x Series
    Category Images / Icons
    Status Implemented
    Priority 7 - Minor Features / Enhancements
    Suggested Version 4.0.0 Gamma 5
    Implemented Version 4.0.0 Gamma 6
    Milestone VaultWiki 4 Gamma X
    Software DependencyAny
    License TypePaid
    Votes for this feature 0
    Votes against this feature 0
    Attachments 0
    Assigned Users (none)
    Tags (none)


    Page 1 of 2 12 Next LastLast


    1. April 30, 2014 5:52 PM
      Alfa1 Alfa1 is offline
      Distinguished Member
      Will you implement this?
      Otherwise I will start modification of my VW install.
      Reply Reply  
    2. May 1, 2014 10:43 AM
      pegasus pegasus is offline
      VaultWiki Team
      We spent a lot of time mulling over what the icons for each content type should look like so that they could convey the proper meaning. We do not want to change any icons to Font-Awesome or something else unless they would BOTH look better than the current icons AND serve the meaning of the icon better. Naturally, we don't want to change only some of the icons over, because then lists that include both old and new icons would be even more confusing. So unfortunately this is not going to be a quick change.

      That being said, the current design is not even optimal for user modification. Currently, to change an icon, you must modify your wiki stylevar path, and upload your custom icons to it. More, images are loaded as HTML img tags, which is slower loading than setting background-images in CSS. Even if you wanted to modify VaultWiki's icons to FA icons yourself, I don't think it would be easy right now without a lot of work on your part, due to this reason. I will see if we can at least get this part resolved for the immediate future.
      Reply Reply  
    3. May 2, 2014 12:19 PM
      Alfa1 Alfa1 is offline
      Distinguished Member
      Thank you!!!
      Reply Reply  
    4. June 2, 2014 7:10 PM
      pegasus pegasus is offline
      VaultWiki Team
      Completed in vBulletin 4.

      Still have to update templates for XenForo and vB3, and add the highlight colors as stylevars.
      Should be able to improve the look a bit with CSS gradients or inner shadows. Right now it looks a bit flat compared to the rest of the page elements.
      Reply Reply  
    5. June 3, 2014 2:12 PM
      pegasus pegasus is offline
      VaultWiki Team
      Marking this as implemented in the next release.

      Currently the nice gradients/outlines only work in Chrome, Safari, and other Webkit browsers. Other browsers do not support the required "background-clip: text" property. The accepted workaround throughout the web is to use SVG for these cases. We attempted SVG for a while on this, but it didn't seem possible to use SVG without creating specialized SVGs for every possible icon combination. This eliminated much of the benefit of using text-based icons over images, in terms of overhead, customization, and clutter, so after much hesitation, we just let these nice effects die in non-Webkit browsers. Hopefully in the future background-clip: text will be added to the CSS3 spec and implemented across the board.

      The forum integration icons are still image-based, since they should reflect the icon design of the rest of the forum index.

      Every other wiki status icon is now a span that uses FontAwesome. Each span consists of a string of CSS classes:
      Code:
      vw-status-icon vw-icon-(...CONTENTTYPE...) [vw-icon-(large|small)] vw-icon-(new|mod|old) vw-icon-(area|page|talk)-(...ID...)
      vw-status-icon designates that it is a status icon with FontAwesome as its font.
      vw-icon-(CONTENTTYPE) designates which FontAwesome character should be used for this type of content.
      vw-icon-(large|small) is optional, and specifies that size of the icon. These sizes are generally based on other icon sizes in the platform. Thus they may or may not look different from the default size.
      vw-icon-(new|mod|old) designates the status of the icon. Whether there is a new update, moderated content, or no updates. Most platforms show these differences via color.
      vw-icon-(area|page|talk)-(ID) is a unique identifier for the icons used by a specific content item. You can use it to change the FontAwesome character for a specific area, page, or discussion, if necessary.

      As of Gamma 6, the /vault/images/icon folder will have most of the previous icon images removed, leaving only images that are still required for other integrations.
      Reply Reply  
    6. June 12, 2014 8:17 AM
      Alfa1 Alfa1 is offline
      Distinguished Member
      pages load much faster now. This is a nice improvement.
      How can I adjust the colors and gradient? I want blue instead of yellow icons.
      The gradient does not work in firefox?
      Reply Reply  
    7. June 12, 2014 8:39 AM
      pegasus pegasus is offline
      VaultWiki Team
      In order for the gradient to work properly "background-clip: text" is required. Firefox does not support this property. Without it, the icon just looks like a square gradient. The only ways around this are either to use SVG or images. We moved away from images, and the SVG solution is extremely verbose.

      We have not added stylevars/props for the icon colors yet. Those will be forthcoming, once we decide on a the way to handle the gradient/border math automatically for a wider range of setting values and across all supported platforms.

      Otherwise, you can simply override the color with your custom CSS:
      Code:
      .vw-icon-new:before {
      	color: #ffcc00; /* change this to blue */
      	background: -webkit-linear-gradient(top, #fff 30%, #fc0 100%); /* change #fco to blue or a close variant */
      	-webkit-text-fill-color: rgba(255, 204, 0, 0.5); /* change to the "rgb" for your blue color, with 0.5 "a" */
      	-webkit-text-stroke: 1px #fc8; /* change to a slightly darker blue for a subtle border */
      }
      Reply Reply  
    8. June 12, 2014 12:09 PM
      Alfa1 Alfa1 is offline
      Distinguished Member
      Thanks!
      Reply Reply  
    9. July 2, 2014 3:53 PM
      Alfa1 Alfa1 is offline
      Distinguished Member
      The border does not display in G7. Setting it to 2px still doesnt make it visible.
      Reply Reply  
    10. July 2, 2014 4:03 PM
      pegasus pegasus is offline
      VaultWiki Team
      If you customized vw.css in the last release, please note that vw.css no longer exists. The icon CSS was moved to vw_icon.css and any changes should be applied by directly modifying vw_additional.css instead.
      Reply Reply  
    11. July 2, 2014 4:26 PM
      Alfa1 Alfa1 is offline
      Distinguished Member
      Yes, I found out. I re-added it to additional CSS like this:
      .vw-icon-new:before {
      color: #6290c4; /* change this to blue */
      background: -webkit-linear-gradient(top, #fff 30%, #fco 100%); /* change #fco to blue or a close variant */
      -webkit-text-fill-color: rgba(98, 144, 196, 0.5); /* change to the "rgb" for your blue color, with 0.5 "a" */
      -webkit-text-stroke: 2px #032a46; /* change to a slightly darker blue for a subtle border */
      }

      btw: the admin panel doesnt show that the template was modified.
      Reply Reply  
    12. August 9, 2014 10:53 AM
      Alfa1 Alfa1 is offline
      Distinguished Member
      With the latest upgrade additional.css is emptied again. Was this intentional or is this a bug?
      Reply Reply  
    13. August 9, 2014 11:11 AM
      pegasus pegasus is offline
      VaultWiki Team
      Make sure you did not edit vw_additional.css in the Master Style. The Master Style always reverts to default during upgrades.
      Reply Reply  
    14. August 9, 2014 11:17 AM
      Alfa1 Alfa1 is offline
      Distinguished Member
      I did not edit the master style, but a child style.
      But why does it revert during upgrades?
      Reply Reply  
    15. August 9, 2014 11:40 AM
      pegasus pegasus is offline
      VaultWiki Team
      XenForo assumes that the template XML imported is always the current public version of the Master Style. If you edit a template in the Master Style, it will always be overwritten by upgrades (similar to file edits being overwritten by upgrades). This is the way XenForo has always worked, and the way vBulletin has always worked.

      However, if your customizations were made in a custom style, then this should not have been affected by any upgrade.

      Have you noticed a similar problem when upgrading VaultWiki in the past on XenForo, where customized templates were reverted?
      If not, did you upgrade VaultWiki before or after upgrading XenForo to 1.4? It is possible that the behaviors of some delete methods were changed (specifically the one intended to remove templates that no longer exist), and VaultWiki's upgrade script may need to use a different method now.

      EDIT: I think I got a handle on what has happened. See: https://www.vaultwiki.org/issues/3909/
      Reply Reply  
    Page 1 of 2 12 Next LastLast
    + Reply

    Assigned Users
    Loading Please Wait
    Tags
    Loading Please Wait
    • Contact Us
    • License Agreement
    • Privacy
    • Terms
    • Top
    All times are GMT -4. The time now is 11:39 PM.
    This site uses cookies to help personalize content, to tailor your experience, and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Learn more… Accept Remind me later
  • striker
    Powered by vBulletin® Version 4.2.5 Beta 2
    Copyright © 2023 vBulletin Solutions Inc. All rights reserved.
    Search Engine Optimisation provided by DragonByte SEO (Pro) - vBulletin Mods & Addons Copyright © 2023 DragonByte Technologies Ltd.
    Copyright © 2008 - 2013 VaultWiki Team, Cracked Egg Studios, LLC.