Information developers should know regarding the Oxygen theme
Thank you for purchasing the Oxygen theme. We hope this theme will help you build spectacular Weebly websites for your clients. Here are a few notes our developers have compiled to help you in efforts relating to editing the theme:
Oxygen is built using LESS (a CSS preprocessor). The syntax is identical to CSS with a few extra features such as variables and cascading styles. You can write normal CSS in the LESS stylesheets and everything should work. HTML is written in standard HTML.
The theme uses jQuery, though for compatibility and performance reasons we minimized the usage of jQuery as much as possible. Since Weebly also uses jQuery for certain functions, we added no-conflict scripts. In addition, it is important to avoid importing jQuery as Weebly already imports it. Importing a different version will yield incompatibility errors.
The vast majority of interactions in the theme were written in vanilla Javascript to make the theme as lightweight and high performance as possible. The PureSlider and Parallax effects use vanilla Javascript, so does the ScrolliPage.
The theme's styles are organized in multiple LESS stylesheets, located under "Styles" in the HTML/CSS editor, while the theme's header types (aka page types) are under the "header type" section in the HTML/CSS editor.
We wrote the theme in LESS to let the users edit styles from their editor (accomplished via variables). Most of Weebly's default Weebly themes are being re-written in LESS as well. Throughout our development process, we noticed a few quirks in the Weebly editor and the way it handles LESS stylesheets, which we will describe below.
The HTML/CSS Editor Preview window that is located within the editor is unreliable when working with LESS stylesheets. While Weebly supports multiple stylesheets, only changes in the "main.less" stylesheet will reflect in the live preview window. If you make a change to an "accessory" LESS stylesheet (i.e _sidebar.less), you will have to go back to main.less, change something there (to trigger an auto-update) and then you'll see the changes reflect in the live preview. Unless you make a change in the main.less file (even if its a quick semicolin deletion and re-placement), the live preview won't update with your changes.
The theme offers the user the ability to edit various branding and styles from the "theme options" panel in the editor, eliminating the need for manual code adjustment to make changes to certain styles previous unaccessible in the Weebly builder environment. We do this by leveraging Mustache templates in the manifest.json files, and paring the "name" property of each object with a LESS variable in the stylesheet.
PureSlider is the name for the header slider in the theme. Developing in Weebly carries significant challenges especially as it relates to user-events. To mitigate this, we created two different "layers" of the PureSlider, one for in-editor edits (letting the user edit the background and add content) and one for the published version. This ensures a smoother editing experience and less lag for the end-user.
To do this, we wrote the slider in pure vanilla Javascript. The PureSlider is also mobile-friendly and swipe-enabled. On mobile devices, the slider automatically adapts to the mobile viewport and runs performance enhancement scripts that reduce lag and improve performance. This means you can have a set of high definition background images running in the header slider with minimal performance loss, though image optimization is encouraged for SEO reasons.
PureSlider is also hardware accelerated, for performance reasons. We designed it to utilize the full extent of the user's hardware. We focused on mobile optimization by making it swipe-enabled on mobile, to resemble the "application" user interface feel. We did this by leveraging proprietary user events and Javascript modules.
Like PureSlider, TrueParallax is another hardware-accelerated mobile-friendly UI feature in Oxygen. While Weebly does support fixed parallax by default with their sections app, it is simply a background image with position:fixed. "True" parallax at which the background and foreground move at different relative speeds is not offered by Weebly, nor is it offered by any existing application.
We designed TrueParallax to offer an identical experience for both mobile and desktop users. Unlike many other parallax frameworks, our TrueParallax feature actually works on mobile devices with the same 3D effect. We did this by implementing hardware acceleration (like with the aforementioned PureSlider) to take advantage of recent advantages in mobile computing.
If a mobile device is outdated and cannot run TrueParallax (this mainly involves smartphones built before 2012), our system will automatically change the background image to absolute positioning for better performance.
As a Oxygen Developer License holder, your support package entails complete help with Oxygen. If you have any questions tailoring the theme to your or your client's specifications, please let us know and we will do our best to help. We appreciate that you've chosen us as a provider for Weebly themes. Contact us through our "support" page on our website.
We were founded in 2015 on a mission to empower Weebly users with premium Weebly themes and templates. Our products have helped thousands of Weebly users improve the quality of their sites. Join us in our mission to make the web a more aesthetic place.
© 2024 Luminous Themes | All Rights Reserved | We are not affiliated with Weebly, Inc. | Thanks for visiting :)