Solved

SharePoint 2010: Problems with custom themable css

Posted on 2011-03-17
7
1,573 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
  • 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
Migrating Your Company's PCs

To keep pace with competitors, businesses must keep employees productive, and that means providing them with the latest technology. This document provides the tips and tricks you need to help you migrate an outdated PC fleet to new desktops, laptops, and tablets.

 

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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

SharePoint Designer 2010 has tools and commands to do everything that can be done with web parts in the browser, and then some – except uploading a web part straight into a page that is edited in SPD. So, can it be done? Scenario For a recent pr…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
Microsoft Active Directory, the widely used IT infrastructure, is known for its high risk of credential theft. The best way to test your Active Directory’s vulnerabilities to pass-the-ticket, pass-the-hash, privilege escalation, and malware attacks …
This video shows how to use Hyena, from SystemTools Software, to bulk import 100 user accounts from an external text file. View in 1080p for best video quality.

805 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