Having difficulties with ordering CSS references while using the CssRegistration class in SharePoint?

Currently, I am working on a web part that requires some custom CSS files. To achieve this, I am utilizing the CssRegistration class to include them in the page header.

The implementation involves registering 4 CSS files that were deployed to the layouts folder through the web part feature. Additionally, a fifth CSS file can be registered based on a specified path in the web part's property AdditionalCss. The requirement is for these CSS files to be appended after all SharePoint CSS files and maintain the order they were added in the code.

Below is the code snippet used for this purpose:

insert unique code here ...

Upon adding the web part to a page, all CSS files are successfully included. However, there seems to be an issue with the ordering of the files.

When there is no custom CSS file involved, the order is as follows: (link attributes removed for clarity)

...
<link href="/_layouts/1033/styles/Themable/corev4.css"/>
<link href="/_layouts/MyWebPart/css/colors.css"/>
<link href="/_layouts/MyWebPart/css/content.css"/>
<link href="/_layouts/MyWebPart/css/cn_custom.css"/>
<link href="/_layouts/MyWebPart/css/styles.css"/>

However, when introducing a custom CSS file, the order changes significantly:

... 
<link href="/_layouts/1033/styles/Themable/corev4.css"/>
<link href="/_layouts/MyWebPart/css/cn_custom.css"/>
<link href="/sites/mysite/Style%2520Library/de-de/test.css"/>
<link href="/_layouts/MyWebPart/css/styles.css"/>
<link href="/_layouts/MyWebPart/css/content.css"/>
<link href="/_layouts/MyWebPart/css/colors.css"/>

The inconsistent ordering of CSS files poses challenges in maintaining design coherence. It appears that the CssRegistration class does not guarantee a consistent sequence, rendering CSS design an arduous task.

csssharepointsharepoint-2010

Answer №1

Have you checked out the "After" attribute of the CssRegistration component? It seems that if you don't specify a particular order using this attribute, the results will default to alphabetical order in your source code. While this may not directly explain the issue you're experiencing, there could be another factor at play causing the inconsistency.

Discover more about the CssRegistration control in SharePoint 2010 here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to customize the footer in Vuetify's list, menu, and combobox components

I've been struggling to add a footer to the Vuetify components like lists, menus, and comboboxes. Despite trying numerous CSS solutions, I haven't found one that works. What I'm aiming for is to have a fixed bottom button visible at all tim ...

htmlcssvue.jsvuejs2vuetify.js

Placeholder disappears when text color is changed

I have been struggling for 3 hours trying to change the placeholder color to graytext, but it's just not working. Here is the code I've been using: <div class="form-group"> <label for="email">Email:</label ...

htmlcssbootstrap-4

Bootstrap breakpoint activated on mobile window

Is there a way I could insert a breakpoint for when the HTML content is displayed in a small window, like xs? <br class="show-when-small-window"> ...

htmlcsstwitter-bootstrapbootstrap-4media-queries

Position the button at the bottom of the card using Bootstrap

While exploring a Bootstrap example utilizing the card-deck and card classes (Pricing example), I pondered over how to align buttons correctly when one list has fewer items than others. https://i.sstatic.net/IGN7K.png I aim to vertically align all button ...

htmlcsstwitter-bootstrapbootstrap-4

Unlock the power of automatic code reloading in Rails with these simple steps

Looking for a way to implement 'hot code reloading' in a development Rails application? Let's say you're working on a Rails project and make changes to a stylesheet. Currently, you have to refresh the page using cmd-r or by clicking th ...

htmlcssruby-on-rails

The color of the Angular md-switch .md-thumb is not showing up properly when switching the toggle

In Safari, the md-switch displays a yellow section on the md-thumb when toggled. However, other browsers handle the switch without any issues. The md-bar appears fine, but the md-thumb is yellow. I have tried setting everything to the blue color I am using ...

htmlcssangularjssafariless

Issue with Fancybox's close button not being displayed when using a different template

On one of my pages, I'm trying to use two different FancyBox styles for different elements. To accomplish this, I have included the tpl option and made adjustments to the stylesheet. Here is what I currently have: $(document).ready(function() { $(".l ...

javascriptcssfancybox

Using .htaccess for rewriting URLs to eliminate action names from the URLs

My website URLs are currently structured like this: domain.com/index.php?id=126&action=Category&name=Vegetables I would like my URLs to appear as follows: domain.com/126/Category/Vegetables I have attempted multiple methods with .htaccess, but ...

phphtmlcss.htaccess

The layout is disrupted due to an input field with a label in Semantic UI

My goal is to create an input field with a right-aligned label in Semantic UI. The documentation provides an example of a cornered label that functions correctly, but when attempting to use a regular label, the layout of the input field gets disrupted. To ...

htmlcsssemantic-ui

Utilizing AnimateCSS within a ReactJs component

After installing Animate.CSS with the command npm install animate.css --save, I noticed it was saved in the directory ./node_modules as a locally packaged module. I went through the Animate.CSS documentation on Github, which mentioned that adding class na ...

cssnode.jsreactjsnpm-install

Step-by-step guide on making a card with one side of the image extending outside the card using CSS

https://i.sstatic.net/Lbc0h.jpg Can you provide instructions on how to achieve the design of this card using css? ...

htmlcssbootstrap-4

What is the proper way to ensure a pull right display appears correctly?

This is the code I am currently using .tag-container.bottom-border.col-middle h1.text-center {{ tag.name }} button.btn.btn-follow.pull-right(ng-hide="hasFollowed" ng-click="tagArticles.followTag()") Follow I am trying to align the tag name in th ...

cssangularjstwitter-bootstrappug

Limit the number input to only allow values between 0 and 100

I am utilizing the Number input component from MUI, which includes Increment and Decrement buttons for adjusting numbers. Is there a method to limit the input to only accept values ranging from 0 to 100 ? Additionally, how can I decrease the width of the ...

javascriptcssreactjsmaterial-ui

Creating an element that remains fixed once it reaches a distance of 50px from the top of the screen

Hey there! I'm working with an html div element that currently scrolls along with the page, but I was wondering how I can make it become fixed once it reaches a distance of 50px from the top of the screen. Any ideas on how to achieve this? Just to pro ...

javascriptjqueryhtmlcss

The jQuery dropdown menu smoothly expands to reveal all hidden submenu options

I'm currently encountering an issue with jQuery. I am trying to create a responsive drop-down menu with sub-menus. The behavior I want is that if the window width is less than 700px, the submenus will trigger onClick. And if the window is wider than 7 ...

javascriptjqueryhtmlcssmenu

Alignment slightly off when trying to vertically center inline elements

I'm struggling with aligning an icon (<img>) vertically next to some text. The icon always appears slightly lower than the text, as shown in the example below. Can someone please suggest a solution to center it vertically with the text? Example: ...

htmlcssflexboxvertical-alignment

Adjust the color of the button upon hovering with CSS

I'm having trouble changing the text color from white to black when hovering over the button. The code seems fine, but the text color isn't changing. Can anyone help me figure out how to make it work? .main__btn { font-size: 1.2rem; back ...

htmlcss

Update the background image of a div smoothly with a fade effect using jQuery

Looking for assistance in adding a fade effect to change the background image of a div element. The background image changes correctly, but I'm struggling with implementing the fade effect. Any help is appreciated! Check out my code here: My JsFid ...

jqueryhtmlcssbackground-image

Double-column design for viewing on both computers and mobile devices

Check out my fiddle: https://jsfiddle.net/b6q7pmkg/ I'm attempting to create a layout with two-column cards that will maintain two-column structure across both mobile and desktop viewports. Here's what I envision: On desktop: https://i.sstatic.ne ...

cssflexboxgrid

Calculate the average color of the outer pixels in an image

I am looking to dynamically set the background color of a div using the average color of the outer pixels in an image. This way, I can avoid manually setting the background color for each image. For example, if the image is 100px x 100px, I would check th ...

javascriptjquerycssimage