9
votes
How to Render Javascript per page or component?
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.
...
- 19.6k
6
votes
Images for different breakpoints
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" ...
- 24.7k
5
votes
Accepted
Applying rich text editor custom classes
We encountered the same issue and fixed it in the ToolsFile.xml. Our experience is that the classes section of that file should be empty to have the classes from your attached css file to be imported ...
- 19.7k
5
votes
Accepted
How do I replace css background url with @html.Sitecore().field("Header Image")
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. ...
- 19.6k
4
votes
Sitecore Language wise css changes
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 ...
- 2,910
4
votes
How to Render Javascript per page or component?
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 ...
- 19.7k
4
votes
Sitecore MVC FieldRenderer.Render - Add and persist inline styles & classes to links in the Experience Editor
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, ...
- 219
3
votes
Accepted
Sitecore container with variants to change background color
The Container component is not a Variant component, so you can't create variants for it.
You have 2 options, the best as has already been mentioned, just add a Style option for the Container component ...
- 19.6k
3
votes
SXA custom css priority level
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
{...
- 6,854
3
votes
SXA custom css priority level
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 ...
- 10.3k
3
votes
Accepted
Is there a way to put Sitecore Forms fields side by side without CSS
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 ...
- 146
3
votes
What's an efficient Frontend development process / workflow for Sitecore?
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 ...
- 9,131
3
votes
How to Render Javascript per page or component?
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 ...
- 13k
2
votes
Apply Css class around <p>, Rich Text Editor - Sitecore 8.2u2
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 {
...
- 9,131
2
votes
Sitecore MVC FieldRenderer.Render - Add and persist inline styles & classes to links in the Experience Editor
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 ...
- 5,245
2
votes
WFFM custom toggle switch
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/...
- 13.8k
2
votes
Where to place the CSS file that i want to add for a Sitecore form field
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, ...
- 3,866
2
votes
Rich Text Editor - Apply CSS class around <tr> html tag
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 ...
- 2,320
2
votes
Applying rich text editor custom classes
A method I much prefer for user-friendliness is to create a new paragraph type in the RTE Profile:
It looks like this in the Rich Text Editor window:
This way you can choose the type of DOM element ...
- 1,282
1
vote
Rich Text Editor custom css - how to add classes to the dropdown that aren't displayable in the dropdown?
It seems the css from the custom style is pulled from your custom class and inserted as an inline style on the td element.
I had a play around with this and the only way I could get it to work was as ...
- 777
1
vote
How to add Custom CSS File and why it is not rendering to page
As far as I can see, you have pre-optimized-min item created under the folder to which you try to upload custom styles.
Did you re-generate pre-optimize-min file after adding your custom one? If SXA ...
- 6,854
1
vote
Sitecore container with variants to change background color
If the only difference is the background color I would say follow this guide to handle the styling difference with a checkbox in the properties of a rendering:
Add a style for a rendering
Scriban ...
- 112
1
vote
Checked styles by default
Yes, you can.
The steps to take:
Determine the GUID of the style you want to select: search the style item in $site/Presentation/Styles
Make sure the rendering parameters template of your component ...
- 19.7k
1
vote
Where to place the CSS file that i want to add for a Sitecore form field
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 ...
- 3,371
1
vote
Css not reflecting in sitecore modal window
The way you have the code setup, you are bypassing Sitecore and just rendering an MVC View using @Url.Action in a new window. If you want to take that approach, you would need to add a reference to ...
- 19.6k
1
vote
Accepted
Sitecore Forms CSS Scripts - Dropdown selection
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 ...
- 933
1
vote
Applying rich text editor custom classes
It should pick up automatically, but you can try to add it to ToolsFile.xml
<classes>
<class name="Your Class 1" value="your-class-1" />
<class name="Your Class 2" value="your-class-2" ...
- 181
1
vote
Sitecore MVC FieldRenderer.Render - Add and persist inline styles & classes to links in the Experience Editor
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 ...
- 5,245
1
vote
SXA custom css priority level
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 ...
- 1,164
1
vote
SXA custom component, Is my component correct?
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 ...
- 260
Only top scored, non community-wiki answers of a minimum length are eligible