?
Solved

SharePoint 2010: Problems with custom themable css

Posted on 2011-03-17
7
Medium Priority
?
1,628 Views
Last Modified: 2012-05-11
I am trying to create a custom themable CSS file and it doesnt seem to be working. Here is where I got so far:

I created a customstyle.css in the root of my site collection: /Style Library/Themable/customstyle.css
I added the sample style definitions in the following format: body{ /* [ReplaceColor(themeColor:"Dark2-Darker")] */ color:#676767; /* [ReplaceColor(themeColor:"Accent2")] */ background-color:#fff; }
On a subsite in that site collection I created a custom master page and attached that css file in the following format:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/Themable/customstyle.css %>" After="corev4.css" runat="server"/>
When I check the source of that site after refresh I see the following:
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/portal.css?rev=0gSit0FmDdWuMu7kF0JZ9g%3D%3D"/> <link rel="stylesheet" type="text/css" href="/sites/projects/_catalogs/theme/Themed/67B9FADD/search-7E1AFF02.css?ctag=4"/> <link rel="stylesheet" type="text/css" href="/sites/projects/_catalogs/theme/Themed/67B9FADD/corev4-8A0ABD2F.css?ctag=4"/> <link rel="stylesheet" type="text/css" href="/sites/projects/_catalogs/theme/Themed/67B9FADD/customstyle-75F18201.css?ctag=4"/>
From the above I see the reference to the customstyle.css but I am not sure if it is a correct format and there are no changes on the site.

What am I doing wrong or what is missing here?

One more thing: I don't have publishing features enabled on this site collection. Does it matter?

Thanks!
0
Comment
Question by:MisUszatek
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 51

Expert Comment

by:Ted Bouskill
ID: 35166254
Everything appears to be correct, however, you didn't applying the master page or are you changing the default one?

Publishing shouldn't matter.

Use the IE Developer Toolbar (installed by default in IE8+) to analyze the CSS inheritance.
0
 

Author Comment

by:MisUszatek
ID: 35167745
I found another issue. When I try to go to this location:
/sites/projects/_catalogs/theme/Themed/67B9FADD/customstyle-75F18201.css
where that custom css is referenced I get 404 Not Found message.

It works for other css files, for example:
/sites/projects/_catalogs/theme/Themed/67B9FADD/corev4-8A0ABD2F.css

Any idea how to fix it?

And yes I am using a custom master.
0
 
LVL 51

Expert Comment

by:Ted Bouskill
ID: 35170150
Hmm, I wonder if the problem is the fact that you are trying to use a themed link.

As it happens just today I was working on a custom master page but I did it like this:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/override_corev4.css %>" After="corev4.css" runat="server"/>

It works perfectly.

As far as I know if you want to use themed CSS you have to deploy them to these LAYOUTs folder
c:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\LAYOUTS\1033\styles\
c:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\LAYOUTS\1033\styles\Themable\

For example corev4.css is located in both those folders.

Try my technique and see if that works.
0
Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

 

Author Comment

by:MisUszatek
ID: 35170221
Do you use ReplaceColor in your override_corev4.css? I was able to make it work with regular css in that location but not with themable. I will try to experiment with Layouts folder.
0
 
LVL 51

Accepted Solution

by:
Ted Bouskill earned 1000 total points
ID: 35170348
I've copied some properties from the corev4.css and left that tag in it, but of course it doesn't change the color unless I move them to the LAYOUTS folder.  So, I'm going to write a custom feature to deploy my custom master page and special CSS files to the LAYOUTS folder.  I don't like manually deploying anything because the changes can disappear when I upgrade and will not automatically deploy to new servers.
0
 

Author Closing Comment

by:MisUszatek
ID: 35337526
I was not able to test it yet and EE is forcing me to close this question. Thanks for helping!
0
 
LVL 51

Expert Comment

by:Ted Bouskill
ID: 35337720
As it happens I implemented the feature yesterday and the theming worked perfectly as I described.
0

Featured Post

Get your Conversational Ransomware Defense e‑book

This e-book gives you an insight into the ransomware threat and reviews the fundamentals of top-notch ransomware preparedness and recovery. To help you protect yourself and your organization. The initial infection may be inevitable, so the best protection is to be fully prepared.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In case you ever have to remove a faulty web part from a page , add the following to the end of the page url ?contents=1
A recent project that involved parsing Tableau Desktop and Server log files to extract reusable user queries for use in other systems. I chose to use PowerShell to gather the data, and SharePoint to present it...
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question