Skip to main content

3 posts tagged with "CSS"

View All Tags

· One min read
Mattias Sander

Post build events in MadCap Flare can append styles to the skin-specific CSS, enabling customization of elements not available in the Flare skin editor. This is particularly useful for Tripane skin where some elements, like the search bar proxy, lack direct support for modifications.

  1. Create Custom CSS and JavaScript: Prepare your additional CSS and JavaScript files with the desired styles and functionalities.

  2. Configure Post Build Events: In your Flare project, open your target, and looks under the 'Build Events' tab, add the following batch commands as post build events:

    type "$(ProjectDirectory)Content\Skin_CSS_additions.css" >> "$(OutputDirectory)\Skins\Default\Stylesheets\Styles.css"
    type "$(ProjectDirectory)Content\Skin_Javascript_additions.js" >> "$(OutputDirectory)\Resources\Scripts\MadCapAll.js"

    These commands append your custom CSS and JavaScript to Styles.css and MadCapAll.js in the output directory.

  3. Build the Project: Execute a build. The custom styles and scripts will be integrated into the skin files.

Post build events offer a practical solution to extend the customization capabilities of Flare’s Tripane skin, allowing for additional styling and functionality adjustments not provided by the default skin editor.

· One min read
Mattias Sander

Supercharge your tables in MadCap Flare using the DataTables JavaScript plug-in. As a bonus it makes your tables mobile friendly automatically.

Just add these tags to your template page <head> element:

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/2.0.1/css/dataTables.dataTables.min.css">

<script type="text/javascript" src="//cdn.datatables.net/2.0.1/js/dataTables.min.js"></script>

<script type="text/javascript">
   $(document).ready(function() {
       let table = new DataTable('.myTable');
   });
</script>

For more information, see https://datatables.net/.

· One min read
Mattias Sander

Clamp demo

What is CSS clamp()?​

CSS clamp() is a function for responsive font sizing in web design, adjusting font size within specified minimum, preferred, and maximum sizes based on viewport size.

Using clamp() in MadCap Flare​

To use clamp() in MadCap Flare for web outputs, update your CSS with a rule like .dynamic-font { font-size: clamp(1rem, 2vw, 3rem); } and apply this class to elements in Flare.

note

clamp() is not applicable to PDFs generated in Flare; adjust font settings for PDFs separately.

Additional Resources​