Blog Web Application Project Template
- 3 minutes to read
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.
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.
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.
- Launch the DevExpressASP.NET Theme Builder.
Click New Theme in the invoked start-up dialog.
In the New Theme dialog, click the Based on drop-down list and select Moderno.
Next, click the Base Color drop-down palette and select the required base color for your custom theme.
Click OK to create the theme.
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.