Problem with modifying Skin Styles

[ghillerson]

I read Dave Lee's posts about creating a skin.css and linking it to enable skin modifications. It all makes sense, but I can't get it to work, and could use some help. Here's what I did (I'm working on a tripane project):

1. Opened my stylesheet (Content/Resources/Stylesheets/SpliceTriPaneStyles.css) and added this directive near the top of the file:

Code: Select all

@import url('skin.css')

2. Created stylesheet Content/Resources/Stylesheets/skin.css) with this style (I'm trying to stop the Contents/Index nav tab buttons from shifting up/down):

Code: Select all

.tabs-nav li
	{
		margin-top: 0;
	}

3. In Flare, opened the skin editor on my tripane skin and added this javascript in my toolbar page:

Code: Select all

$('<link>')
	  .appendTo($('head'))
	  .attr({type : 'text/css', rel : 'stylesheet'})
	  .attr('href', 'Content/Resources/Stylesheets/skin.css');

4. Built the project, but still seeing the nav tab buttons shift, so apparently the style override in my skin.css didn't apply.

Interestingly, if I open my Output folder and modify the tabs-nav li margin setting in Skins\Default\Stylesheets\Styles.css, everything works as I hope, so I know that the css itself is correct..

I'm clearly missing something; any help appreciated.

- Gary

[ghillerson]

I just figured this out. The problem I ran into is that the target I'm building has the 'Do Not Use "Content" folder in output' flag enabled.

The Toolbar javascript references "Content/Resources/Stylesheets/skin.css", which exists in the project itself, but doesn't exist in the output. In other words, the @import statement references the local directory structure, but the javascript references the output directory structure.

The fix: change the javascript to reference 'Resources/Stylesheets/skin.css' instead.