The basics are:
Setup require, this uses a pretty standard require config. The main.js can be:
One option is to use sizes srcset on your <img> element. I've recently been a project where this was the approach.
Set it up like this. Example from a Razor View.
<img src="@Model.ImageUrl" sizes="(max-width: 764px) 50vw, 25vw" srcset="@Model.ImageSrcSet" />
While this technically does not give you options for mobile devices, it does give you ...
The code @Html.Sitecore().Field("Header Image") will render a full image tag like:
<img src="~/media/imageid.ashx" alt="" />
For the background image, you need to get the Url of the image. For that you can use the MediaManager to generate the media asset url:
ImageField backgroundImage = (ImageField)Sitecore.Context.Item["Header Image"];
Better to add class to body tag:
In code it will be look like:
public static HtmlString GetBodyCssClass(this SitecoreHelper helper)
var cssClass = string.Empty;
if (Context.Language != null && Context.Language.CultureInfo != ...
You can add a new CSS class in the Rich Text Editor dropdown and apply it to the selected row table.
There are two steps to add CSS class in RTE:
Add element inWebsite\sitecore\shell\Controls\Rich Text Editor\ToolsFile.xml file.
Now add the definition of that CSS class (eg. arrowlink) in Website\default.css file.
You can see newly added arrowlink CSS ...
Why don't you try to have all styles in the cshtml file instead of having them inline?
color: white !important;
font-family: Helvetica, Arial, sans-serif;
line-height: 1 !important;
margin: 0; padding: 0;
In case if you are using SXA AssetService pipeline to programmatically include the whole theme, then there is an SortOrder property which you can use:
public class AddCustomTheme: AddAssetsProcessor
public override void Process(AssetsArgs args)
Item theme = ...;
Files get concatenated in an order taken from Sitecore tree and then minified, so you can control it using standard sort order field.
I am not sure if an order will help you in any way.
The standard approach to creating custom class is to either define more specific CSS selector or use !important or overwrite standard class.
Unfortunately, it is ...
No, there is no other way, you can do that through CSS only. You can make use of the bootstrap components and create a good UI. For the two columns, you need to make use of the section field.
Make sure you have bootstrap CSS in the head section.
1) In the form settings [for the form] – provide the CSS class: row
2) Add Section – In the section CSS Class ...
This might be an opinion based question.. but I'll give the approach I usually take.
Why this ...
I'll outline what we do as it's working quite well for us:
Create a Style Guide which is a simple page in Sitecore that lists all components available to content editors.
Sitecore Habitat solution might have what you are looking for.
For each rendering you specify a js/css asset or a line of script. In the mvc.getPageRendering pipeline it gathers up all the necessary js/cs for all the renderings on the page.
You should be able to do this fairly easily.
Go to the root of your site and open up default.css (this comes by default with Sitecore).
Add the following at the bottom of the file:
Go to \sitecore\shell\Controls\Rich Text Editor\ToolsFile.xml. Find the 'classes' element (or add one if it doesn't exist) and add ...
This may be beyond the scope of what you want to do to accomplish this, but I would recommend using an ORM like Glass Mapper to strongly-type your models, and then this kind of thing is handled much more simply:
public class Header
public virtual Glass.Mapper.Sc.Fields.Link CtaUrl ...
You're rendering the HTML markup directly in your cshtml file, but you need to use the Html Helpers. I suggest you take a look at the default Checkbox field markup located in /Website/Views/Form/EditorTemplates/CheckboxField.cshtml, your markup is almost exactly the same as the default view:
If you don't want to use Glass, judging by this answer on Stack Overflow, it looks like you could do this by incorporating the user-defined styles into the permanent ones you want to add.
However, it may work better (and allow your permanent class to persist better during editing in Experience Editor) to simply pass your item to your view so that you can ...
To get the priority your files should be at the very last.
This is so basic, The files are optimized in the sort order of the files in the folder, just place your custom.css at the very last in the folder.
You can do it by using the top options from the Home Nav.
Looks like you are trying to make a menu. There are some out of box controls for menu items like 'Navigation' or 'Link List', you can use them and then apply rendering variants to achieve your navigation layout. I would suggest to use controller renderings if you code behind contains some business or domain logic. If your components are only for querying ...
I found some time ago a solution for this (In my case it was webforms). Instead of adding the references to css and js in the "view" the trick was to put this on a pipeline which is always executed.
The solution involves creating new "decoration attributes" where you can set the css and js required. Add those attribute in your "views" and then hook into ...