Deliver superior customer experiences with an AI-driven platform for creating and deploying cognitive chatbots
Deliver Awesome UI with the most complete toolboxes for .NET, Web and Mobile development
Automate UI, load and performance testing for web, desktop and mobile
A complete cloud platform for an app or your entire digital business
Detect and predict anomalies by automating machine learning to achieve higher asset uptime and maximized yield
Automate decision processes with a no-code business rules engine
Optimize data integration with high-performance connectivity
Connect to any cloud or on-premises data source using a standard interface
Build engaging multi-channel web and digital experiences with intuitive web content management
Personalize and optimize the customer experience across digital touchpoints
Build, protect and deploy apps across any platform and mobile device
Rapidly develop, manage and deploy business apps, delivered as SaaS in the cloud
The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
That is why we made designing a Sitefinity website a task you already know how to do quickly, as it is based on familiar concepts. A few examples:
This blog post will give you a few tips for best practices when creating a Sitefinity template and quick and powerful ways to control the appearance of page elements.
Sitefinity Designer’s guide gives a detailed walk-through on how to create a new template based on a Master page and CSS themes. What I want to emphasize on is the number of content placeholders you include in there:
Sitefinity 3.x’s legacy was to create as many of the above <asp:contentplaceholder /> ‘s as you need to have editable regions in your page. This approach is obsolete as of Sitefinity 4.0 + because of the Layout Builder, which you can use to drag and drop layout widgets throughout your page.
Our recommendation when building a new page template using a Master page is – keep the number of hardcoded content placeholders to as few as possible; using layout blocks on top of these to create new regions where you can drag and drop widgets has a number of benefits:
Sitefinity’s responsive mobile support serves to rearrange the content blocks, so that they fit on the screens of various devices;
If you have the Responsive & Mobile design feature enabled, Sitefinity generates CSS3 media queries, which, according to your preferences in the Responsive Design settings screen, rearrange the layout blocks on your page:
The content blocks are actually being controlled by these rules via the class names that are automatically applied to them:
You can use that pattern to style not only plain text, but contents of various widgets. An important thing to remember is that all widgets in Sitefinity are .NET controls, which can be set to use customized templates:
As can be seen here, the templates of the widgets within Sitefinity can be completely customized and your preferred CSS classes can be added to the markup.
Some widgets don’t have their templates exposed like this, but it’s possible to create custom ones as .ascx files and map them where needed. A complete set of .ascx templates that can be modified and mapped to the respective Sitefinity widgets can be found in the Sitefinity SDK.
An alternative for that is to simply inspect the markup that the widgets generate and apply CSS rules to restyle them, as explained by the end of this blog post.
Most of the above concepts are perfectly visualized in Gabe's video, called "Introduction to Sitefinity Design". I encourage you to take 10 minutes to check it out, as it will help you hit the ground running with styling your Sitefinity website.
View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Copyright © 2018 Progress Software Corporation and/or its subsidiaries or affiliates.
All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.