Solved

SharePoint 2010: Problems with custom themable css

Posted on 2011-03-17
7
1,592 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
Office 365 Training for Admins

Learn how to provision tenants, synchronize on-premise Active Directory, and implement Single Sign-On with these master level course.  Only from Platform Scholar

 

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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Note:  There are two main ways to deploy InfoPath forms:  Server-side and directly through the SharePoint site.  Deploying a server-side InfoPath form means the form is approved by the Administrator, thus allowing greater functionality in the form. …
Last week I faced a strange issue recently, i have deployed SharePoint 2003 servers for one project and one of the requirements was to open SharePoint site from same server. when i was trying to open site from the same server i was getting authentic…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
This video shows how to use Hyena, from SystemTools Software, to update 100 user accounts from an external text file. View in 1080p for best video quality.

739 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