overriding styles defined on production server for DITA XML files - css

Here is scenario I am working in.
Using Eclipse with IXIASoft DITA CMS and Oxygen XML editor.
Retrieve files stored in DITA CMS and edit in oxygen.
Generate pdf output. PDF creation is controlled by antennae house libraries on a production server and I do not have access to xsl stylesheets or css files on production server.
I tried embedding styles in dita file, but it appears that files on production server override whatever I do. Tried linking to local css file, but it too seems to be overridden.
Also limited by what is allowed in the custom DTD. Did find an outputclass attribute for the p element, but not sure how to use it. Any suggestions.

The PDF output generated via the DITA Open Toolkit (used also by Ixiasoft) is not related in any way to CSS styling. The DITA content gets translated to an XSL-FO format which then gets processed to PDF using a PDF processor like the default Apache FOP.
So you need access to the XSLT code on the server side in order to provide any PDF customization.
Usually a PDF customization without directly modifying the XSLT code from the DITA OT is done like this:
http://www.oxygenxml.com/doc/ug-oxygen/#topics/dita_pdf_output_customization.html
Regards,
Radu

If you cannot add a plugin to the DITA-OT image on the server, you're actually out of luck for changing the PDF output. If, however, you can create a plugin for the DITA-OT image used by Ixiasoft, and can run the ant integrator on that image, then you should be able to change those styles.
Keep in mind that overriding PDF is not for the faint of heart and if you have no experience with XSLT and XSL-FO, I suggest you get a consultant to help you.
Julio J. Vazquez
Write Spirit

Related

Style in SVG, not applied on the browser (React)

I'm trying to add a SVG into my webpage, I think the format is a bit odd.
https://gist.github.com/Vadorequest/c329dec26e39a586e96df5f74c1d7d29?short_path=d29c6c9 (you can see the source code and the rendering there)
The style part isn't correctly understood since I'm loading this file using React. If you save the file and open it in a browser, it'll work fine. But if I load it by react using react-svg-loader, it displays a dark image.
import IconBook from "-!react-svg-loader!../assets/couverture-eBook-VF.svg";
...
<IconBook height={250} />
Is it standard to put the style like this? Should I get a new SVG exported differently? I really don't know that format and all its possibilities.
Edit 1:
I found a working workaround for anyone interested: https://github.com/gilbarbara/react-inlinesvg
It basically loads the svg file over network and anything in it will be correctly loaded. (including <styles>)
On the bad side, it makes the app rely on something that must be available via CDN or alike. (you won't have the svg embedded in your app. If you wanted some kind of standalone app that can be built with everything in it, it's not really good)
On the good side, it doesn't require any change in the SVG file, you use it as it, load it over network, and it displays as in the browser.
Since I'm building a standalone app (basically, npm run build will generate a folder with my whole app) this isn't perfect because I need to host that file somewhere on a CDN. So I'll keep looking for another solution.
It is fine to have styles in your svg file, as specification says:
Cascading Style Sheets (CSS) is a stylesheet language used to describe
the presentation of a document written in HTML or XML (including XML
dialects such as SVG or XHTML). CSS describes how elements should be
rendered on screen, on paper, in speech, or on other media.
https://developer.mozilla.org/en-US/docs/Web/CSS

EJS Tags in external css

I'm trying to refactor a nodeJs project and my css is in my .ejs file. I need to put some dynamic data in my css file. I need to have dynamic data in my css, when my css is in my EJS file it's good.
But when I put my css into an external file, nothing happens!
So, how can I inject ejs tag in my external stylesheet file?
This is one of the questions to which one has to ask you - why do you want to do that? You are asking about a solution to a problem that you didn't describe.
By suspicion is that you are trying to use a templating system for something that could be done with a CSS preprocessor like Sass or Less. Particularly Less can be easily used on both the client side and server side. See http://lesscss.org/#client-side-usage
Now, if you really want to use a templating system created for HTML to generate CSS then you will have to take few things into account: You need to store your CSS templates somewhere where your HTML templates are stored, not where you store your static assets like images. Then, your server will have to serve your generated CSS with a correct MIME type. Then, your HTML will have to reference the styles using a URL to your generated CSS that will be generated on every request instead of being served directly from disk.

Style Drupal's Print Module PDF

How would one do this in Drupal 7? I want to add a few small style edits to the way the PDF outputs. I am using TCPDF. I read somewhere that its not posible with TCPDF, but other sources say it is. Should I be switching to dompdf? I've read the documentation but just can't seem to understand which file generates the PDF.
I have the module successfully generating a PDF from a View, so this is the last step in moving on with this project.
For anytime you want to style PDFs use DOMPDF, it will be less painful. Then style your pdf using print.css in the sites/domain.com/themes/yourtheme/css folder.
You can also copy the print.tpl.php file from the module's folder and paste it in sites/domain.com/themes/yourtheme/templates to choose exactly what you want to display in your pdf.

How do you use LESS with BlogEngine.net?

The LESS docs here
http://lesscss.org/#usage
say: "Make sure you include your stylesheets before the script."
However, BlogEngine.net seems to make that impossible by rewriting all the links to *.js file and putting them before the style sheets.
I've tried everything I can think of including putting the files in a subdirectory and using a relative path. I'm very hesitant to mess with the BlogEngine.Net code.
Is there any way to get LESS to work with CSS in BlogEngine.Net? Any way to force the engine to allow me to order the Javascript entry after the *.less reference?
Perhaps you could use the Tracking Script or the "Add custom code to the HTML head section" fields (you can find them in Admin -> Settings -> Custom code).
From what I can see in the code, these fields are rendered in the HEAD section after the stylesheets.
Is there any way to get LESS to work with CSS in BlogEngine.Net?
If you are willing to consider a different approach than using the client side less parser than I recommend trying the design time less parser in either Visual Studio 2012.2 or The Web Essentials Extension in Prior releases of Visual Studio 2012. It allows you to write your less file and have it compiled to css and minified css every time you save. Then you can just reference the output min.css file in your theme.

extension like firebug to actually write on the file system

I'm not a desktop applications developer so I was wondering if someone heard about an extension that actually writes on the file system. it would be great if you open firebug like extension and do some modifications e.g. adding CSS rules and they will be added automatically in the CSS file. how hard would it be to build such an extension?
The closest I've found is XRefresh which actively monitors files for changes, then automatically refreshes Firefox. It feels very similar to editing live with FireBug.
I think an extension like this would be possible, but it would be pretty hard to map DOM changes to a specific stylesheet.
You can could use the Web Developer Toolbar for this.
The changes you make in its CSS editor (CSS > Edit CSS) are applied to the page immediately (without saving to file), but it also has a Save... option, so you can overwrite the existing CSS file with it.
It's a pretty basic text field, though, that just displays the plain CSS file. It doesn't have any syntax highlighting nor organize the CSS rules according to the cascade etc. like Firebug does.
Also see this related question:
Why can’t I save CSS changes in FireBug?
Use Backfire. It's an open source solution I wrote that sends CSS changes back to the server and saves them. It has a working .NET server implementation example that is easily portable to any other platform.
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

Resources