2.0.10 Style Updates

Discussion in 'News & Announcements' started by Russ, Sep 12, 2018.

  1. Russ

    Russ Designer

    Hello everyone, I'm pushing our 2.0.10 updates out today. Once you receive the email you'll be able to download it immediately with an active license via your license area.

    This is a large style release that brings it up-to-date with XenForo 2.0.10. You must upgrade your forum to at least 2.0.10 to install this update.

    Since this is a rather large release from XenForo and us you may want to consider installing the update as a new style. From there export your current style and import under the new version so you can test everything out prior to officially upgrading.

    BEFORE UPGRADING:
    As always backup your current styles before importing the new version. Export your current styles WITHOUT checking the box "Export as independent style". You should be exporting:
    • Parent Style (this would be the purchased style such as Core, Flat Awesome + etc)
    • Your child style with your edits

    UPGRADING:
    To upgrade simply import your purchased style (e.g Core, Flat Awesome + etc) overwriting your existing version. All changes will trickle down to your child style. DO NOT overwrite your child style.

    COMMON PROBLEMS AND TROUBLESHOOTING:

    If you have problems or questions prior to upgrading please don't hesitate to start a support ticket or post in our customer support forum.


    CHANGES:

    New Features
    • Added option to replace the thread started avatars with:
      • Icon with reply count
      • Icon by itself
      • Remove column completely
    • New web fonts added
      • M PLUS Rounded 1c
      • Poppins
      • Raleway
      • Ubuntu
    • Brand new social icon positions (Style Properties -> Basic Options)
      • Header
      • Breadcrumbs
      • Inside default footer links
      • Below each footer block (loads below your existing footer widget)
      • Above custom footer
      • Below custom footer
        Here's the footer area with all positions enabled:
        View attachment 97
    • Added page variables you can use to add your own CSS/JS scripts on specific pages, this will allow you to easily load JS on a specific page:
      Code:
      Copy Source
      <xf:page option="custom-xbHead">
      <script src="styles/mystyle/owlslider/owl.carousel.min.css') }}"></script>
      </xf:page>
      Code:
      Copy Source
      <xf:page option="custom-xbBody">
      <link rel="stylesheet" href="styles/mystyle/owlslider/owl.carousel.min.js') }}">
      </xf:page>
    • Added options to style all block messages (highlight/important/success/warning/error) and corrected colors for all styles (dark styles were using the default XF colors before)
      • Style properties -> Miscellaneous -> Block message - type
    • Added option to move search into header as a search box
    • Added option to show icons in navigation, either inline or above
    • Added property to control the appearance of just the top/bottom buttons when scrolling
    • Added property to position the default footer (Style Properties -> Footer -> Footer location)
      • Default position
      • Inside content
      • Copyright row
      • Disabled
    • Added very basic set of Page Assets - These are pre-made HTML elements that you can easily copy and create custom static html pages. It will expand in the future but for now there are some basic HTML items included. You can view our Page Assets page on our demo board to view how it's laid out. You just inspect the element you want and paste into your page. I'll post a tutorial on this shortly.
    • Added quick style switcher (just input a style ID to activate it)

    Changes
    • Alternating discussion list background from an option to a CSS style property, now you can set whatever background color you want
    • Discussion List Hover went from an option to a CSS style property, now you can set whatever background color you want
    • Moved our xb.less out of app.less removing one less edit. Moved to an already edited template "app_user_banners.less"
    • We're no longer removing the box-shadows found in the main content area by default
    • Node FA icons now use a smaller font size (set via Node / forum list -> Node icon (Font Awesome main)
    • Various style property descriptions updated with better explanations
    • Toggle Width option is no longer an icon only, uses text as well (phrases: change and width)
    • Sidebar heading CSS uses a higher class selector now

    Fixes
    • Sticky sidebar offset wouldn't work outside initial forum list
    • Mobile logo displayed twice in certain situations
    • Logo is full size now when using "Keep logo block in responsive "
    • Jump to page nav colors fixed
    • Text logo positioning in mobile fixed'
    • Custom footer CSS was loading twice, oops!
    • YouTube share icon missing CSS while blocked/circle type was enabled
    • Header was loading twice in certain setups
    • Sidebar bottom block CSS fixed
    • Certain prefix colors fixed so they display properly
    • Responsive view with Classic fixed, will now respect the edge spacers XF uses by default
    • Sidebar header texts not inheriting the additional typography CSS
    • Welcome block would not load while sidebar set to the left side and set inside the sidebar
    • Cookie notice wasn't adding margin properly
     
    kaieivindm, dethfire, ACL and 2 others like this.
  2. Russ

    Russ Designer

    Style-specific changes

    Core
    • Changed the style property for the sub-navigation, uses "Sub-navigation row (publicSubNav)" to inherit the background color rather than "Sub-navigation row inner (xbSubNavInner)"
    • Boxed mode now uses the main content background instead of the primary content (this was causing the colors to blend far too much)
    • Message header formatted to match other headers
    • Message block has padding around it now
    • Filter Bar styled
    Core Dark
    • Now properly utilizes the "Dark" option on the color palette. You may notice some slight color changes throughout the style
    Edge
    • Filter bar styled to match other headers
    • Global padding increased by 2px on all settings (small/medium/large)
    • Message headers styled to match other headers
    • Various other cosmetic improvements
    Flat Awesome +
    • Adara has been released as a child style for FA+
    • Filter bar styled to match other headers
    • Global padding increased by 2px on all settings (small/medium/large)
    • Message headers styled to match other headers
    Fusion Gamer
    • Now properly utilizes the "Dark" option on the color palette. You may notice some slight color changes throughout the style
    • Global padding increased by 2px on all settings (small/medium/large)
    • Message headers styled to match other headers
    • Various other cosmetic improvements
    Omni
    • Link & main font color adjusted; should help the overall look of the style
    • Buttons now use all the gradient styling
    • Footer colors adjusted
    • Global padding increased by 2px on all settings (small/medium/large)
    • Various other cosmetic improvements
     
    dethfire, Jaidyn and Nirjonadda like this.
  3. Jaidyn

    Jaidyn Customer

    Awesome stuff! Thank you for all the hard work you do, guys!! :notworthy:(y):happy:
     
    Russ likes this.
  4. Redh

    Redh Customer

    Thanks for the quick update today! I've installed this on a new theme on my test forum, re-applied all my changes, and it's looking pretty good! I'll move it over to the live site tomorrow :)

    Ahhhh, my OCD!! :D What problems might I run into by setting this back to the "Light" option as it was before? It does change a few font colours, and rather than go through them all is it OK to just leave it set on Light? Does this just affect how add-ons might select colours in the future?
     
  5. Russ

    Russ Designer

    I did make the change after someone reported a bug with an add-on, it was an add-on that displayed code differently, like bbcodes php/html code. Technically it should be set to dark anyways.

    You can manually adjust the colors though easily, on your style go to: Style Properties -> Basic Colors

    Text color: #919191
    Dimmed text color: #787878
    Muted text color: #6B6B6B
    Link color: #EBEBEB

    Should work fine for you.
     
    Redh likes this.
  6. Redh

    Redh Customer

    Thanks @Russ - I'll make the change then. Much appreciated!

    Edit: Done, it really was that easy! Still would have taken me hours to find it though :p
     
    Russ likes this.
  7. Deepblue

    Deepblue Customer

    Hello,
    When i apply the upgrade it revert my all previous changes and edits, is that normal or there is a way to keep current edits with upgrade?
     
  8. Russ

    Russ Designer

    If you're putting your edits inside a child style as instructed in the installation, you should preserve your edits. Do you have a child style?
     
  9. Deepblue

    Deepblue Customer

    Nope, i dont have child style :(

    Can i install a child style and transfer changes from main style to child style at this point or its too late?
     
    Last edited: Sep 13, 2018
  10. Russ

    Russ Designer

    Unfortunately, there's not really a way to easily split the edits you've done into a child style automatically. I'd suggest installing the update as a brand new style, create a child style and start moving your edits over to that version.

    Two big rules in styles:
    • All edits should go inside child styles
    • Make backups before doing anything big (edits/updates ect)

    We named the style's (Parent DO NOT EDIT) for a reason :D.
     
    Deepblue likes this.
  11. Nirjonadda

    Nirjonadda Customer

    This are not supported overwriting your existing style?
     
  12. Russ

    Russ Designer

    It supports it, but the full statement makes more sense:

    Since this is a rather large release from XenForo and us you may want to consider installing the update as a new style. From there export your current style and import under the new version so you can test everything out prior to officially upgrading.


    It's just a precautionary measure. Never hurts to do it this method, this way you make sure the update works fine before it goes live.
     
  13. Nirjonadda

    Nirjonadda Customer

    Yes but Xenforo are not considered new installing from there large release but style update consider installing new style, very strange.

    Upgrading does complete without any issue and should does not matter if this small or large release?
     
  14. Russ

    Russ Designer

    @Nirjonadda I provided advice, you can take or not, it's fine. Comparing installing a fresh XenForo to a fresh style install isn't the same.

    I'm literally just saying... you can if you want too, install the style as a brand new style. Export your current child style and import it under the new installed style. This way you as an admin can make sure your changes work well with our update and it won't break your current site. It could take an extra 2-3 minutes.

    You can of course just import and overwrite the existing parent style as usual, that's fine as well. Just make backups.
     
    Last edited: Sep 13, 2018
    dgibs and Nirjonadda like this.
  15. goobernacular

    goobernacular Customer

    Merging PAGE_CONTAINER and adding this new code:

    <nav class="p-nav{{ (property('xbLogoPosition') == 'insidenav') ? ' xb-nav-logo' : '' }}">

    Is causing the text logo to show twice.

    Because just below that you find:

    Code:
    Copy Source
    <xf:if is="property('xbLogoPosition') == 'insidenav'">
                                <li><xf:macro name="smallLogo" /></li>
                            </xf:if>
    This is for the "inside nav" option.

    Edit: It seems like I'm having problems doing an actual merge and compare. Is there any way to reload just the PAGE_CONTAINER file and get a proper merge going on? Xenforo isn't showing me code that you removed, just lines where things are different. Or rather it's showing me old things that should be removed in Green as if it's new and should be added. Should I just import the xml again and remerge all templates?
     
    Last edited: Sep 13, 2018
  16. Russ

    Russ Designer

    Merging PAGE_CONTAINER is going to be extremely difficult on this update (and maybe future ones). It's the most heavily customized template we have. What edits did you apply here? I often recommend just copying the template into like notepad++, then reverting the template followed by re-applying whatever edit you made.
     
  17. goobernacular

    goobernacular Customer

    Oh yeah, of course. In my mind I was trying to do a merge like with the xenforo templates. But I realized I can't merge because this is a child theme vs the parent theme. That makes sense. No wonder the option didn't appear. After reviewing, it should be far easier to add my customizations back in than to try to fix yours and mine both. Reverting is definitely the way to go. Thanks for helping me clear this up in my mind.
     
    Russ likes this.
  18. Russ

    Russ Designer

    @goobernacular if you need help with page_container just submit a ticket with an admin login and I can take a look.
     
  19. Russ

    Russ Designer

    Good to hear, also take a look here:
    https://pixelexit.com/threads/outdated-templates.6191/

    It has some tips that may or may not be of use to you. Let me know if you need anything else.
     
    goobernacular likes this.
  20. ACL

    ACL Customer

    Thanks for the update!

    One teeny weeny suggestion: "Change Width" in the footer area would better suit XF 2.0's default phrases if it were "Change width" (drop the subsequent word's use of uppercase characters) :).

    XenForo made the decision to change from Title Case with 1.x to Sentence case with 2.x etc.
     
    Last edited: Sep 13, 2018
    Russ likes this.

Let's work together on your next project

Contact us today to talk about how we can help you

  1. This site uses cookies to help personalise content, 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.