BeyondAdmin

General Markup

The general template structure is the same throughout the template. Here is the general structure.

SideBar Menu

Sidebar menu structure is shown here:

Chatbar

Chatbar enables you to add dynamic chat view to your application.

Navbar

In Navabr area you have controll to configurations, actions and User Settings.

Breadcurmbs

Breadcrumbs is very simple and similar to bootstrap default breadcrumbs. You can add any icons that you want to your pages links.

Page Header

As you can see, Header is consisted of two main parts:

• Page Title
• Header Actions

Color Palette

Here's the color palette of BeyondAdmin.

Skin Colors

These are default skins that are added to BeyondAdmin. You can add or modify this skins as you wish. All skins are places in skin folder in following address:
/assets/css/skins

Stylesheets

Here's a list of the stylesheet files we are using with this template, you can find more information opening each file:

LESS Structure

The app.less file contains all of the specific stylings for the template. The file is separated into sections. Each section contains related LESS files:

1. General Mixins:
   We used LESS Hat 3.0 as our mixin library. For building the LESS files you must include lesshat and other mixins in first section.
2. Helper Classes:
   Helper classes for simpler developement. See what is inside!
3. Page Components:
   Styles for general layout of the BeyondAdmin. Do not remove these LESS files before the build.
4. UI Elements:
   All bootstrap css components are implemented in this section. Feel free to remove each component that you don't need.
5. Forms:
   All Form components are implemented in this section. Feel free to remove each component that you don't need.
6. Pages, Widgets and errors:
   All other components, third party and pages styling are placed in other sections. If you do not use a plugin or don't include a page remove it's LESS and rebuild the app.less. It will reduce the css file size drastically.

How to Build LESS Files

After customizing your LESS files you need to compile app.less to get css files for using in your site. Here are some common ways of compiling LESS files:

Using Visual Studio

1. Install Web Essentials and just save the beyond.less
2. Web Essentials uses NodeJS to run the compiler. It's the fastest and most accurate compiler for LESS available.
3. When a LESS file is compiled, it can now also be minified to produce a much smaller CSS file.

Using node.js

1. Install node.js
2. Install the LESS compiler: npm install -g less
3. Run the LESS compiler on your LESS source to produce CSS: lessc beyond.less > app.css

Using Sublime Text

1. Install node.js
2. Install the LESS compiler: npm install -g less
3. Install Sublime Text package: Open Sublime Text, press Ctrl+Shift+P, select Package Control: Install Package. Then find Less2Css package and press enter.
4. You should now have this plugin installed. To use it, simply open app.less file and resave it. A new file with the same name but with .css extension should appear in your css folder.

How to change the default skin

There are three different ways to change the default skin:

1. Add a reference to your desired skin in page after beyond.css
2. Change default colors set in variables.less and rebuild the beyond.less
3. Add a cookie with your desired skin (e.g. azure).
   Note: This way, you need to refresh the page after setting the cookie.
   Note: The name of cookie must be exactly the name of the file in /assets/css/skins/.

How to create your own skins

1. Add another file with your desired name in /assets/css/skins/.
   Tip: You can copy one of other skins less files and change it as you want.
2. Build the file with your prefered colors.
3. If you want your users to be able to change their skins programmatically, you need to add new skin to setting. The code must be like this:
   

JavaScript Files

Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Install Theme

Here's a brief information about how to install BeyondAdmin from scratch

Install HTML veriosn in IIS

1. Use the Seed Project as your starting point.
2. Remove unnecessary references from app.less and build your LESS file respectively.

3. Open IIS Manager.

   • For Windows Server 2012, on the Start page click the Server Manager tile, and then click OK. In the Server Manager, click the Tools menu, and then click Internet Information Services (IIS) Manager.
     
     
   • For Windows 8, on the Start page type Control Panel, and then click the Control Panel icon in the search results. On the Control Panel screen, click System and Security, click Administrative Tools, and then click Internet Information Services (IIS) Manager.
     
     

4. In the Connections pane, right-click the Sites node in the tree, and then click Add Website.

5. In the Add Website dialog box, enter a friendly name for your website in the Site name box.

6. If you want to select a different application pool than the one listed in the Application Pool box, click Select. In the Select Application Pool dialog box, select an application pool from the Application Pool list and then click OK.

7. In the Physical path box, enter the physical path of the website's folder, or click the browse button (...) to navigate the file system to find the folder.

8. If the physical path that you entered in the previous step is to a remote share, click Connect as to specify credentials that have permission to access the path. If you do not use specific credentials, select the Application user (pass-through authentication) option in the Connect As dialog box.

9. Select the protocol for the website from the Type list.

10. . If you must specify a static IP address for the website (by default, this is set to All Unassigned), enter the IP address in the IP address box.

11. Enter a port number in the Port text box.

12. Optionally, enter a host header name for the website in the Host Header box.

13. If you do not have to make any changes to the site, and you want the website to be immediately available, select the Start Web site immediately check box.

14. Click OK.

Update BeyondAdmin

For updating to the latest BeyondAdmin version do the following:

MVC version

1. Replace "asset" folder of your project (or any plugin of asset folder that you used) with the one in new version of BeyondAdmin.
2. Consider that packages folder of MVC solution is removed in favor of reducing the size of the zip file. Therefor you need to add the packages for first use. Enable your internet connection and just rebuild the solution. Nuget package manager will automatically download all needed packages.
3. If you changed Layouts you must consider comparing the new layouts with your changed ones and just commit the changes in your customized files.
4. If the syntax or usage of one helpers that you previously used are changed (you can find the changes in Changelog: https://wrapbootstrap.com/theme/beyondadmin-adminapp-angularjs-mvc-WB06R48S4#changelog), you can find your usages and simply replace them with new ones. Resharper is a fascinating tool for doing this.
5. If you Updated MvcSiteMapProvider package note that the update process will overwrite the templates in “Views/Shared/DisplayTemplates” Folder. Therefor after updating the package you will not be able to use sidebar menu and breadcrumbs. After updating the package just replace the new templates with original ones in BeyondAdmin source folder.
6. From v 1.5.0 you can use either the source of helpers in your project or use the dll from bin folder of the BeyondThemes.Boostrap project.

---

Asp.Net WebForms Version

1. Replace "asset" folder of your project (or any plugin of asset folder that you used) with the one in new version of BeyondAdmin.
2. Consider that packages folder of WebForms solution is removed in favor of reducing the size of the zip file. Therefor you need to add the packages for first use. Enable your internet connection and just rebuild the solution. Nuget package manager will automatically download all needed packages.
3. If you changed Master Pages you must consider comparing the new master pages with your changed ones and just commit the changes in your customized files.

---

AngularJs Version

1. Replace "asset" folder of your project (or any plugin of asset folder that you used) with the one in new version of BeyondAdmin.

---

Html/JQuery Version

1. Replace "asset" folder of your project (or any plugin of asset folder that you used) with the one in new version of BeyondAdmin.
2. Compare markup of the pages if you see something is not displaying right after update.

---

Landing Pages

1. Consider that Video is removed in favor of reducing pakage size. You can replace the video with any video file that you want.