search

jason-fox / fox.jason.extend.css

DITA-OT Plug-in to extend HTML processing and allow additional plug-ins to add an extra CSS stylesheet to the <header> of each HTML page.
https://jason-fox.github.io/dita-ot-plugins/extend.css
Apache License 2.0
0 stars 1 forks source link

Customizing the **common-extended.css** file #6

Closed jason-fox closed 1 year ago

jason-fox commented 2 years ago

Related https://github.com/infotexture/dita-bootstrap/issues/57 @Billy-102 wrote:

I want to customize the common-extended.css file in the output dir, but I did not find the source file in the plugin fox.jason.extend.css, could you please give me some clue?

jason-fox commented 2 years ago

common-extended is a generated file. This plugin offers a series of Extension Points to allow plugins to add CSS to it.

Within your own custom plugin, just append extra CSS as shown:

<loadfile property="extra.css" srcFile="/path/to/css"/>
<echo append="true" message="${line.separator}${extra.css}" file="${extend.css.file}"/>
bing-10 commented 2 years ago

I just want to modify some lines in the original common-extended.css, is there any easier way to change the source?

jason-fox commented 2 years ago

Not that easily. Within the dita-bootstrap plugin multiple CSS files may or may not be added depending upon the type of layout required. You could perhaps edit those files directly, but then your plugin would diverge from the main development branch. It would be more sustainable to add your changes as an extra plugin to be called after dita-bootstrap. However, the CSS in common-extended.css is designed to be layout only, not basic look-and-feel.

Of course the dita-bootstrap plug-in already supports the standard DITA-OT parameters to inject additional CSS for look-and-feel which is placed after common-extended.css as described here

dita --input=path/to/your.ditamap --format=html5-bootstrap \
     --args.hdr=path/to/your-header.xml \
     --args.css=<name-of-css>.css \
     --args.copycss=yes \
     --args.csspath=css \
     --args.cssroot=path/to/your/theme

An example can be found in infotexture.github.io where the CSS for the box around each example can be found here

bing-10 commented 2 years ago

Thank you for your advice, I will refer to it later.

---- Replied Message ---- | From | Jason @.> | | Date | 10/25/2022 20:02 | | To | @.> | | Cc | @.**@.> | | Subject | Re: [jason-fox/fox.jason.extend.css] Customizing the common-extended.css file (Issue #6) |

Not that easily. Within the dita-bootstrap plugin multiple CSS files may or may not be added depending upon the type of layout required. You could perhaps edit those files directly, but then your plugin would diverge from the main development branch. It would be more sustainable to add your changes as an extra plugin to be called after dita-bootstrap. However, the CSS in common-extended.css is designed to be layout only, not basic look-and-feel.

Of course the dita-bootstrap plug-in already supports the standard DITA-OT parameters to inject additional CSS for look-and-feel which is placed aftercommon-extended.css as described here

dita --input=path/to/your.ditamap --format=html5-bootstrap \ --args.hdr=path/to/your-header.xml \ --args.css=.css \ --args.copycss=yes \ --args.csspath=css \ --args.cssroot=path/to/your/theme

An example can be found in infotexture.github.io where the CSS for the box around each example can be found here

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

jason-fox commented 1 year ago

Closing