removing rounded corner on topics

[RBOWES]

I'm using HTML5 output with an HTML5 skin. I would like to remove the radius from the upper left corner of the topic container (see screenshot). I can't figure out how to do this in the skin editor or in the stylesheet. In searching the forum, I saw a reference to changing a style in style.css, but I can't find the style.css file anywhere. I'm using Flare 10. Any help would be appreciated!

Rebecca

[RBOWES]

corner.png

Ooops meant to upload this screenshot.

[kmorrison]

I don't know if there's a way that you can do this in flare, but you can do it by directly editing one of the stylesheets in your output.
Go into your HTML5 output folder, then skins>default>stylesheets
Open styles

Find the place where it says

html.left-layout #contentBody
{
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
border-radius: 4px 0 0 0;
left: 305px;
right: 0;
}

Change the 4's to 0's.

Reload the page. The corner turns square.
I don't understand this stuff well enough to promise that this is the best way. It's just a way.

[RBOWES]

Thanks SO much; that did the trick! I really appreciate your help!!

And so THAT'S where the styles.css file is located

Rebecca

[kmorrison]

You're welcome. I bet there's a way to change something somewhere so you don't have to keep making the corner pointy every time you compile. (I assume the file I edited will get overwritten next time I compile, anyway, since it's in the output folder.)
I just don't know what it would be off the top of my head.

[Nita Beck]

Rebecca, bear in mind that, because the suggestion is to edit the styles in OUTPUT, you will need to do this each time you build the HTML5 Help. Therefore, you might want to copy that edited stylesheet someplace so that, in future, you can simply overwrite the newly generated one in the output with the saved one.

[RBOWES]

That's a great suggestion, Nita. I made a note to update the stylesheet with my final release output, but having the modified stylesheet available to copy over the old one will be MUCH easier.

Thanks!
Rebecca

[NorthEast]

The best way to do this is to add a stylesheet to the skin, using a toolbar script.
This means you don't have to manually change the output, or change files in Flare's installation folder.

To do this for a HTML5 target, you can use the skin's toolbar script to add a link to a new stylesheet (CSS) file, which contains the skin modifications.

In the skin editor Toolbar tab, you can enter your own custom javascript (on the right).

I use the following jQuery script to add a stylesheet link to my own stylesheet (skin.css). Note the CSS file could be anywhere inside the Content folder. (*jQuery is already used by HTML5 help, you don't need to include it.)

Code: Select all

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

Then create the stylesheet Content/Resources/Stylesheets/skin.css in your project, in which you include any modifications you require for the skin.

[RBOWES]

Sorry for the delay in responding. Thanks so much for this suggestion Dave! I will definitely give it a try. Having to remember to update an output is always risky; this would be a much better solution.

[RBOWES]

Worked like a charm. I created a file called StylesCorner.css containing just this text:

html.left-layout #contentBody
{
-webkit-border-radius: 0px 0 0 0;
-moz-border-radius: 0px 0 0 0;
border-radius: 0px 0 0 0;
float: right;
left: 275px;
right: 0;
}

I saved it in my project in /Content/Resources/Stylesheets.
I then added your script to the skin, modifying the file name to point to StylesCorner.css.
Built the output and it looks just right.

Thanks!!