Hot answers tagged

7

An alternative to @Gatogordo's option is to use a modular approach to JavaScript using something like requirejs. I wrote a post about using requirejs to organize your js with Sitecore a while a go. The basics are: Setup RequireJS Setup require, this uses a pretty standard require config. The main.js can be: require.config({ baseUrl: "/assets/js", ...


6

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 ...


5

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 ...


5

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"]; var ...


4

Better to add class to body tag: <body class="ar"> In code it will be look like: <body class="@Html.Sitecore().GetBodyCssClass()"> public static HtmlString GetBodyCssClass(this SitecoreHelper helper) { var cssClass = string.Empty; if (Context.Language != null && Context.Language.CultureInfo != ...


4

Why don't you try to have all styles in the cshtml file instead of having them inline? <style> my-cta-class { Margin: 0; color: white !important; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1 !important; margin: 0; padding: 0; text-align: left; text-decoration: none; } </style&...


3

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 = ...; args.AssetsList.Add(new ThemeInclude { ...


3

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 ...


3

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 ...


3

This might be an opinion based question.. but I'll give the approach I usually take. In general I would keep all css and javascript bundled and minified together. This means visitors will load some extra (and maybe unneeded) bytes at the first request, but each following request can use the cached version as it will be the same for all pages. Why this ...


3

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. Use Gulp with Yarn (avoids issues with versions you get with NPM) SASS (BEM Style), JavaScript and then HTML in our components (MVC views). Gulp handles pre-processing of the SASS and ...


3

Sitecore Habitat solution might have what you are looking for. Pipeline: 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. https://github.com/Sitecore/Habitat/blob/master/src/Foundation/Assets/code/Pipelines/GetPageRendering/...


2

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: p.blue { background-color:blue; } Go to \sitecore\shell\Controls\Rich Text Editor\ToolsFile.xml. Find the 'classes' element (or add one if it doesn't exist) and add ...


2

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 { [Glass.Mapper.Sc.Configuration.Attributes.SitecoreField("CTA Url")] public virtual Glass.Mapper.Sc.Fields....


2

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: @using Sitecore.WFFM.Abstractions.Data.Enums @using Sitecore.Forms....


2

To start using custom styles and scripts in your forms: In the Content Editor, navigate to sitecore/Forms, click the form that you want to add a script or style to and, in the Scripts or Styles field, add the name of your custom script or style file. Add your custom style or script file to one of the following folders: Scripts : /sitecore modules/Web/...


1

You can below link for Sitecore Form styling - https://doc.sitecore.com/developers/90/sitecore-experience-manager/en/add-styles-and-scripts-to-sitecore-forms.html Sitecore Forms uses css and script files located in: <siteroot>/sitecore modules/Web/ExperienceForms So for css you can go to path - <siteroot>/sitecore modules/Web/ExperienceForms/css


1

This can be achieved! If you want to change the text field type of "CSS Class" to dropdown, then you can change the change the "Type" (field type) from single-line text to droplink as marked in the first screenshot. Next, give a parent folder item ID in the "Source" that has child items where each item has a "Class" field stored with different CSS class ...


1

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 ...


1

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. Same goes for your Javascript files, you should make sure that your custom.js file which ...


1

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 ...


1

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 ...


Only top voted, non community-wiki answers of a minimum length are eligible