This section we will add our required CSS from external sources. Please make a note to right click on each downloaded zip and press the unblock button before you extract. This will save you some heartache.
For our MetroUI tiles we use code from MetroUI.org.ua. Please go to the site and download the latest from their github location. Once downloaded extract their source, we’ll work with the files shortly. I know they have a Package Manager install, but we’ll be using a small subset of the included code.
Next, we also use a very small jQuery plugin for picking colors. Its called Spectrum. I’ve tested a ton of these pickers lately and this one is the most robust and theme capable of any. It is also the only one I found, except for commercial, that played nicely with LightSwitch out of the box. You can go to their github location, download the code and extract.
Finally, go to our own github and download this project, LsCoreProject, and extract it.
- Now.. Back in Visual Studio
- In the LSCoreProject.App
- Right click on the Content folder
- Add, Existing item
- From the spectrum-master you downloaded add spectrum.css
- Right click on the Content folder
- Add, Existing item
- From our project you downloaded, LsCoreProject-master
- Add the sp-msls-light-theme.css file
- Right click on the Content folder again
- Add, New folder, name it MetroUICss
- Right click on your new MetroUICss folder
- Add, Existing item
- From the Metro-UI-CSS-master folder you downloaded, add the following
colors.less
icons.less
icons-content.less
layout.less
mixins.less
tiles.less
transform.less
typography.less
variables.less - Add another folder in the Content folder, name it Fonts
- Right click on the Fonts folder
- Add, Existing item
- Add all the files from the Metro-UI-CSS-master fonts folder
- Right click on the MetroUICss folder
- Add, New item
- Select Style Sheet, name it LightSwitchTiles.less
- Delete the defaults that Visual Studio adds to this file
- Add the following code into LightSwitchTiles.less
/* * Metro Bootstrap v 1.0.0 * * Copyright 2012-2013 Sergey Pimenov * Licensed under the MIT License (MIT) * http://opensource.org/licenses/mit-license.php */ // Core variables @import "variables.less"; // Our Tiles .metro { @import "colors.less"; @import "mixins.less"; @import "transform.less"; @import "typography.less"; @import "layout.less"; @import "tiles.less"; @import "icons.less"; @import "icons-content.less"; }
- Save the file, Visual Studio will generate the CSS
- Final little piece to get MetroUICss to play nicely
- Open the user-customization.css file in the Content folder
- Add the following code to the end of the file
.metro-container * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
- That should do it…
- Go ahead and save the entire project
Next… Add External Scripts
Here are the topics and their logical order:
- Create the project
- — You
- Add external scripts
- Update the default.htm
- Add LogIn/LogOut/Register/ChangePassword
- Create the security data source
- Screens for permissions
- Screens for role management
- Screens for user management
- Tables for tile menus
- Screens for icon management
- Screens for menu management
- Create a tile menu screen
- Create a database project
- How to deploy successfully
- Wrap up
I truly love уour website.. Very nice coloprs &
theme. Ɗіd y᧐u maкe this web ste yourself?
Please reply back as Ι’m looking to creɑte my own personal
blog and ԝant to learn wherе you got this from or whаt thhe themee iѕ cɑlled.
Тhanks!
After looking over a handful of the blog posts on your weeb page,
I really like your techmique oof blogging. I saved it to my bookmark site
list and will be checking back soon. Please visit my
web site too and tell me yourr opinion.
Hello to all, as I am actually eager of reading this blog’s post to be updated daily.
It consists of good stuff.
In the last download of Metro I found the following less-files:
metro-icons.less instead of icons.less
metro-icons-content.less instead of icons-content.less
metro-icons-mixins.less instead of mixins.less.
I know later this has to be corrected in some code-lines.
When I save the file LightSwitchTiles.less Visual Studio doesn´t create the css automatically (Is it normal??), so I copy the css from your code Project.