How to override/change Styles.css

[jayeshpatel19]

I am using tri-pan skin. I see that Styles.css is generated thourgh flare everytime you build the project. I want to override my own styles.css which is generated by flare. How can i do that?

Styles.css is in /Skins/Default/Stylesheets/styles.css ( it's generated by flare) I want to do it my own way to skin Styles.css When i view the soucre here is the link in head section
<link rel="Stylesheet" href="Skins/Default/Stylesheets/Styles.css" /> When i build it, i see the Styles.css and modifying it. I published Styles.css it through FTP server and i can see my change. but when content is published thourgh flare my Styles.css is overwrite with new build by flare system. Is there any way i can keep my Styles.css and not override it.

Thanks

[Mike Kelley]

I recommend you try using the legendary Customising the Flare HTML5 tripane skin solution, developed by the equally legendary Dave Lee. His forum post is here, and his blog where he covers the solution is here.

With Dave's method you can modify Flare's default skin styles or create your own for a totally customized look.

[kwag_myers]

There is another, less favorable option of making the changes in a copy of the CSS and overwriting the output file. I've done this with a few of my first projects (before finding Dave's solution) and use a batch file. The disadvantage is you have to trigger the batch file every time you build a new output. With Dave's method, it's a one-time setup. The advantage is if the project is well underway and you really don't want to start over with the skin development.

[jayeshpatel19]

>> There is another, less favorable option of making the changes in a copy of the CSS and overwriting the output file.

Where is the output file? Can you please explain the steps? how can we overwriting the output file. If we overwrite that means every time flare builds the output, it is using this overwrite file. If i replace my own Styles.css with output file of Styles.css, will it work. Will it uses everytime when flare builds is generated?

[Dave Lee]

If you look at the links that Mike suggested, that will show you how to add a link to your own 'skin stylesheet'.
You can use the skin stylesheet to overwrite any skin styles that are set in Styles.css.

(I wouldn't advise overwriting the Styles.css file manually, and definitely wouldn't recommend changing it in the program files folder.)

[kwag_myers]

Where is the output file?

In the project folder: Output > WebHelp > Content > Resources > Stylesheets

Can you please explain the steps?

1. In Content Explorer, right-click on Styles.css and select Open with Notepad.
2. Make your changes and Save As to the project folder (or where ever you like, just not in the Output folder).
3. In Windows Explorer, copy the new Styles.css to the aforementioned directory.

If i replace my own Styles.css with output file of Styles.css, will it work. Will it uses everytime when flare builds is generated?

No, and this is why Dave and I are both advising you, if at all possible, to use Mike's method (actually, Dave's method - sorry Dave). Flare overwrites the Output file with each build.

I'm only offering this option because I think it might be an easier/quicker short-term fix, albeit not as efficient in the long run. If you need to get the project out the door, use my method. If you have the time, make a new project and on the second page of the Start New Project Wizard, select New from existing and select your project. Append the name with Dev and see if you can use Mike's method. If you're not sure what to do at any point, post the question in Dave's thread (that Mike put the link to) so we can keep it all together. Once you get the bugs worked out, apply the procedure to the original project.

[lcarver]

Hi all,

I know this is an old thread, but I thought I would add some info about a post-build command that I created to import my own skin styles into my side-nav HTML5 output.

**this might not be the best way to do this, but it works...

I designed my own skin stylesheet, which I use to override the default Styles.css and Tablet.css files in the target's OUTPUT folder (not the original MadCap source Styles.css/Tablet.css - I don't touch that).

This command copies my skin stylesheets (from their locations in my project directory) and replaces the files in the output (Skins\Fluid\Stylesheets directory). It also copies three images I use in my skin into the output (Skins\Fluid\Stylesheets\Images folder).

for %I in ($(ProjectDirectory)Content\Resources\SideNav-Layout\Styles.css $(ProjectDirectory)Content\Resources\SideNav-Layout\Tablet.css) do xcopy %I "$(OutputDirectory)Skins\Fluid\Stylesheets" /y

for %I in ($(ProjectDirectory)Content\Resources\SideNav-Layout\Image1.png $(ProjectDirectory)Content\Resources\SideNav-Layout\TabletImage1.png $(ProjectDirectory)Content\Resources\SideNav-Layout\Image2.png) do copy %I "$(OutputDirectory)Skins\Fluid\Stylesheets\Images"

The /y is very important - with the help of MC support, I discovered that there's a backend "permission" needed in order to override the files of these names, since they are core source files from MC.

The build variables $(ProjectDirectory) and $(OutputDirectory) are available from the Insert Build Variable button in the Build Events tab in the HTML target, so this is adaptable for other targets.