[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Collapse]What's Installed
   Control Demos
  [Expand]Real-World Sample Applications
  [Collapse]Visual Studio Integration
    Menu Entries
    Project Wizard
   [Collapse]Template Gallery
     Blog Web Application Project Template
     Responsive Web Application Template
    Insert DevExpress MVC Extension Wizard
    NuGet Packages
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Blog Web Application Project Template

The Blog Web Application project template allows you to create a web application powered by both DevExpress ASP.NET AJAX controls (or ASP.NET MVC extensions) and client-side visual components provided by the Bootstrap framework. By default, an application created with this template implements the functionality of a blog with an integrated full-text search. See the Template Gallery document to learn more about the DevExpress Template Gallery and available project templates.

This document provides an overview of the Blog Web Application project template’s default structure and functionality, and describes how to adjust the appearance of DevExpress ASP.NET controls to achieve better integration with third-party Bootstrap themes.

The document consists of the following sections.

Expanded Overview

The Blog Web Application project template serves as a starting point to develop a blog-style web application using both ASP.NET Ajax controls and the Bootstrap framework. Initially, the web application's page layouts are built on the Bootstrap Grid system, which provides a foundation for a responsive, mobile-friendly web user interface.

By default, the web application includes the following pages.

  • Home - Displays an image slider and basic information about the template.
  • Blog - Provides blog post navigation functionality.
  • Contact us - Displays a contact form and contact information.
  • Search - Displays search results.

Expanded Adjust the Visual Theme

Client-side DevExpress controls do not use Bootstrap styles internally. Instead, their appearance relies on predefined themes. By default, a project created from the Blog Web Application template uses the Moderno visual theme, which provides a color scheme that matches the default look of Bootstrap visual components. However, if you are using a third-party visual theme for Bootstrap components in your web application, the appearance of visual elements on the application's pages may become inconsistent. This section describes how to adjust the look of DevExpress controls to overcome this limitation.

Manually create a custom theme based on the Moderno theme with the base color replaced by an appropriate color to achieve visual consistency – as described below.

  1. Launch the DevExpressASP.NET Theme Builder.
  2. Click New Theme in the invoked start-up dialog.

  3. In the New Theme dialog, click the Based on drop-down list and select Moderno.

  4. Next, click the Base Color drop-down palette and select the required base color for your custom theme.

    Click OK to create the theme.

  5. You can now preview the appearance of various controls and, if required, fine-tune appearance settings of individual visual elements.

    Once the adjustments are complete, generate the theme assembly, include it in your project and apply the custom theme to the web application - as described in Generating a Custom Theme Assembly and Using a Custom Theme Assembly.

Is this topic helpful?​​​​​​​