Override Sharepoint 2010 css with my own custom css - css

I have a Sharepoint 2010 intranet and I am designing the current template with my own css file. I have added my custom css file to the style library and have added this piece of code in a masterpage at the end in my tag:
<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/custom/custom.css%>" runat="server"/>
Now I always need to add the !important tag in my css classess which are also used in the default sharepoint css file. I dont want to have to do that every time. Is there some solution where I can override my own custom css over the default sharepoint css file?

After your page is rendered by SharePoint in the browser, view the source. It is likely that your CSS page is listed before out of the box style sheets like corev4.css.
To rearrange this ordering try:
<SharePoint:CssRegistration
name="<% $SPUrl:~SiteCollection/Style Library/custom/custom.css%>"
after="corev4.css"
runat="server"/>
For more information on the After property, see:
CssRegistration.After Property
SharePoint CSSRegistration or Link?
What is new with the CssRegistration control in SharePoint 2010

This sounds like a CSS specificity problem. This article has lots of helpful explanations of the subject.
If you have written the same rule into your external style sheet
twice, than the lower rule in your style sheet is closer to the
element to be styled, it is deemed to be more specific and therefore
will be applied.
e.g. In the following case, the padding would be set as 10px, not 5px.
#content h1 {
padding: 5px;
}
#content h1 {
padding: 10px;
}
To fix your current problem, either as Dipaks suggested add your css directly in the page (as this would take preference over external css files), or even better, and more simply, just add the reference to your css file after the reference to the Sharepoint css, in which case, if they have equal specificity, your css would be applied.

Related

Bootstrap 4 - CSS without any global styles

I'm developing a small control which is directly embedded in a parent page (without iFrame).
My control is written using react-bootstrap, so the bootstrap4 css is also embedded along with my control.
While developing my app as standalone, everything was fine.
After embedding it however, it turns out that there are some "global" bootstrap styles, such as the so called "list-styles" that don't get applied only on HTML elements having bootstrap classes, but instead on any matching HTML tag.
This causes the parent page's layout to get scrambled once my control is loaded.
Examples for bootstrap classes that are applied globally and which cause problems for me are styles like these which can be found in the bootstrap4 default css:
dl, ol, ul {
margin-top: 0;
margin-bottom: 1rem;
}
or
label {
display: inline-block;
margin-bottom: .5rem;
}
This is very unfortunate for my use case. Is there a way for getting rid of any styles in bootstrap, which are not linked to any proper css bootstrap class? I don't want any styling of HTML tags that are not explicitly linked to a bootstrap class.
Thanks for your help.
I can think of three options, though I'm not sure they will do for you:
Paste Bootstrap's styles into a local file (instead of getting them from a CDN or something) and delete what you don't want (most of the unwanted styles should be at the top of the file)
Look for another, more minimal version of Bootstrap. I don't know if such versions/customizations exist but they very well might
Don't use Bootstrap. You can just as easily write your own css lines (personally I find that Bootstrap makes you lose control over your styling, but that's my opinion)

What is the right way to insert inline server tags on a page's css section?

I'm trying to put some inline server tags on a page so I can get the right path for an image, using Visual Studio 2012.
I'm doing it like this:
<style type="text/css">
.someclass
{
background-image: url(<%=Url.Content("~/Content/Images/messageIcon.gif")%>);
}
</style>
The problem is that once this is written, the whole style section loses the color formatting withing the VS2012 editor. Is tyhere a different way to do this (or an option in VS2012), so that I won't lose the colors and the indentation?
The reason that visual studio is losing its formating is that you are mixing css and server-side code as below.
<style type="text/css">
.someclass
{
background-image: url(<%=Url.Content("~/Content/Images/messageIcon.gif")%>);
}
</style>
You should separate your css from your code.
Image paths are relative to the location of the css file, so css like below is correct, therefore you do not need use a application path worked out by Url.Content(~)
.someclass
{
background-image: url(../Images/messageIcon.gif);
}
That is a Visual Studio Highlight issue or feature for css styles. Try to use server relative URLs, that are known.
If you need to insert a server-side code into css styles, you can use style attribute in html-markup. For example:
<div class="beautiful-button" style="background-image: url('<%=Url.Content("~/Content/Images/messageIcon.gif")%>')">
...
</div>
If you don't like this code or you need to use it more than one time in different places, the best way would be to create your own server-side control with a public property URL (for example). Finally it will be looked like this:
<asp:MyOwnControl runat="server" class="beautiful-button" URL="~/Content/Images/messageIcon.gif" />

Injected CSS from Code-Behind into ASP.NET WebForm

I have a situation where my H3 tags are styled in an external CSS file, but the color attribute is going to dynamically change based on a database value. I would like to inject some CSS into my master page from code-behind to set the color of the H3 tag globally instead of having to specify it on each tag.
How can I do this? Thanks!
try the !important css attribute
I didn't realize I could put controls in the style section. Here's how I resolved the problem:
<style>
h3
{
color:<asp:Literal runat="server" id="ColorLiteral" />;
}
</style>
Now I set the literal from code-behind and it works great.

Skin theming and CSS Class

If I am assigning a paricular css class to a control ,it hnherits the class but if i simultaneously give the skin id to the same control then this skin ID overrides the CSS class.
Why this is happening?
Now if I am using !important in the css stylesheets then css class property is inherited by the control.
.lblUserName1
{
width: 400px;
line-height: 32px;
color: Red !important;
font-weight: bold;
background-color: #669999;
}
Please help me...Its creating a heap of confusion..
You should avoid using !important; were you can. Basically it is recommended that you use it only when you are overriding some pre-loaded styles that you can't really change.
ID is basically superior to class. Check the answer marked as correct here: CSS class priorities
Skin probably uses inline CSS in style attribute of your control this way due to CSS herarchy what you define in skin theme will override what you have defined in class which resides external .css file.
Best way to debug CSS and HTML is viewing the code itself.
There is another solution - Use StyelSheetTheme attribute. When applying your theme in the web.config or (page) file as Theme attribute:
<pages Theme="myTheme">
any local cssClass control will be overridden.
However:
<pages StyleSheetTheme="myTheme">
will be secondary meaning the control will keep its assigned cssClass attribute.
So, unfortunately you can't have both (it would have been nice), but you can at least make the theme the secondary choice instead of having the theme override local cssClass settings.

How to dynamically show/hide a style sheet inside a content control?

I have a master page with a contentplaceholder control inside the head tag so that I can easily add any contents to the head tag (like link tags, styles, scripts .. etc) from the content pages.
Now, on one of the content pages, I have a style sheet (inline, ie. inside a style tag, not linked with a link tag) that I want to show/hide depending on the state of the page (the page works like a wizard using a multiview control on the page). I tried to wrap the stylesheet inside a placeholder control with Visible = false, then set Visible to true in the code but that didn't work, the style tag is not rendered in the html. I removed the placeholder control and added runat="server" directly to the style tag but that didn't work too.
The reason I keep the styles hidden in the first place is that they contain formatting placeholders, ie. {0}, {1} ..etc, which I replace in the code behind before showing the stylesheet. I don't want to send the styles to the client with these placesholders. To make it clearer, the styles look similar to this:
<asp:placeholder ID="_stylesPlaceHolder" runat="server" Visible="false">
<style type="text/css">
#elementid
{
width: {0}px;
height: {0}px;
overflow: hidden;
position: relative;
}
#elementid2
{
position: absolute;
width: {1}px;
height: {2}px;
top: {3}px;
left: {4}px;
}
.. and so on
</style>
</asp:placeholder>
I could try to add the styles dynamically from the code behind page (using Page.Header.StyleSheet.CreateStyleRule for example) but I prefer to keep them in the .aspx file for the sake of separating the html from the code and also to make it easier to change the styles with no dynamic values.
Thanks
OK, now I finally got it. First of all it's nothing wrong with ASP.NET. I was testing with google Chrome when I posted the question. As I indicated in my comment above, I tested with FireFox afterwards and found the style tag was actually there.
I checked again in Chrome but this time I checked in the code inspector instead of the page source, the style tag is also there. Chrome didn't like the style tag with the placeholders (I was testing so I still didn't replace the placeholders) and decided to hide it from the page source view and push it under the rug! Good boy!!

Resources