DAY Communications LLC Design & Function for Web & Print

Combining WrapBootstrap Theme with BE 3

A search for DotNetBlotEngine themes may not turn up as many free offerings as it once did, but some may be found. For a very small amount you can also buy a nice theme from WrapBootstrap.com/

These themes can be easily integrated with DNBE since the app is configured to use Bootstrap.

An example of using the Unify theme with DNBE 3.3 may be viewed at: DayCom.co

Here is how I integrated DNBE with WrapBootstrap's Unify theme.

  1. Start by downloading the BlogEngine3.3 (web) app. I put it in Visual Studio 2013 Projects folder.
  2. Purchase the Unify theme and download it. I left the original version intact so that I could go back to it in case I broke something in my development site. I left it in my Documents folder, but I open it as a website with VS2013 to view the html pages and understand how it should look and function.
  3. Add a folder in the DNBE /Custom/Themes folder and name it "Unify."
  4. Add the css folder with the styles.css and rtl.css files that are in the /Custom/Themes/Standard folder, and likewise add the fonts and images folders as they are in Standard. You may not need these, but you might.
  5. Add the .ascx, html, site.master and other files that are in the /Custom/Themes/Standard folder. Your theme.xml file should reflect the authorship of Unify. You might want to add the site.master from Standard-2015, but I found the code that enables the login which is found at the top of the Standard site.master very helpful.
  6. Add the Unify assets folder (that is inside Unify's HTML folder) and all the folders and files in the Assets folder if you want to experiment with everything. Or, be selective and only add what you plan to actually use.
  7. I also put the css code from the Standard-2015 css Main.css file in a custom.css file in the assets/css folder and adjusted it. You cannot include the body nor h1-6 code if you want to use Unify's theme colors etc.
  8. After this, I published the site to Azure on a practice url to see if it would work. To make it work, you need to adjust your links to stylesheets and scripts in your site.master so that they attach to Unify's files. For example, in the Standard-2015 theme folder, the link to bootstrap.min.css is:
    <link href="css/bootstrap.min.css" rel="stylesheet">
    but in your Unify site, the link in the site.master file will be:
    <link rel="stylesheet" href="/Custom/Themes/Unify/assets/plugins/bootstrap/css/bootstrap.min.css"> This will be true for all the css and script files that you use.
  9. To decide which Unify plugins (etc) you want to use, you can view the html pages in its HTML folder in your development environment. Of course, you will not want to publish these to your server but use whatever code from them that is helpful.

I hope I have remembered everything, but probably haven't so send me an email through the DayCom.co contact form if you have a question.

Comments are closed