Antora top navigation bar customization - documentation-generation

My question is quite simple though I cannot find anything that points to it in the documentation.
I am generating documentation for a project with the default generator in Antora but I cannot figure out how to customize the top navigation bar, items on the right side, which have some defaults.
Since the site is generated, where should I change, or how, those items? I do not want to list such items there.

There is an additional approach that does not require you to create a standalone UI: supplemental_files
In your playbook file, you can specify:
...
ui:
supplemental_files: <path to supplemental UI folder>
...
The supplemental UI folder provides replacement files for the UI, provided that they appear in the same structure as the UI that is in use.
So, to replace header-content.hbs for the default UI, you would create this folder structure:
supplemental-ui/
partials/
header-content.hbs
You can see how this facility is used by exploring the repo for the Antora docs: https://gitlab.com/antora/docs.antora.org
You can replace any file used by the UI in this fashion, and add new files. You cannot remove files, but you can make their content empty. Altogether, this means that you can change any CSS, Javascript, partials, layouts, and provide any additional global UI assets as required.

Yep, you need to build your own UI. The docs for that are available here: https://docs.antora.org/antora-ui-default/
Like Matt said, you'll need to check your header-content.hbs handlebars.

Related

Hugo theme submodule marked as dirty, doesn't update

I'm using the Hugo Whiteplain theme for a personal site hosted through Netlify. I am following tutorial. When I push/publish on GitHub Desktop, I am told that my git submodule is dirty. As a result, I cannot change the theme's background color.
[submodule "themes/whiteplain"]
path = themes/whiteplain
url = https://github.com/taikii/whiteplain.git
What do I do to regain control of my theme? Can I change the color without dependence on this dirty submodule?
There are many ways to customize a Hugo theme. For instance, you can:
edit the theme directly and let it drift from the original project,
create a fork and use it as the theme to be able to pull updates
from the original theme while developing your own version,
edit the theme inside the website itself.
This last option means that you do not touch at the theme itself, but instead make a copy of any file you want to edit inside the tree of your website, following the same path structure, and edit that file.
For any element of any of the customization files (layout, css, scss, etc.) that exists both under the tree of your website and under the tree of the theme, Hugo will prioritize the element in the file under the tree of the website.
For any element not present in the tree of your site, Hugo will use what is in the theme tree instead. This means that you do not have to copy the entire theme or even entire files in your site, but only the elements that you want to customize.
If you choose this method and if you set your theme as a submodule following the Git submodule manual, you will never get into a dirty submodule situation.
Example
Let's say you want to edit the background color of your theme and that the variable is defined in a scss file under:
your_site
+ themes
+ theme_name
+ assets
+ scss
_content.scss
You need to keep the tree architecture and create a file under:
your_site
+ assets
+ scss
_content.scss
You can create a file from scratch, but an easier option is to copy the file from the theme and paste it there. In that file, you can customize the background color (or any other setting) however you like.
Note
I have found this way of customizing a theme (which is actually the way advised in the Hugo documentation) to be the simplest.
One situation where this method is not optimal is if you plan to use the same customized version of a theme for several websites. In that case, creating a fork of the original theme makes more sense as you can add your customized theme (your fork) as a submodule of all those websites and your customization is thus portable.

How can I customize Docfx documentation (themes or templates)?

I just started using Docfx and set up some basic conceptual documentation. Now I want to make some adjustments to the theme (company logo, perhaps some font changes, etc.) Minor stuff.
The official documentation only gives a high-level description of how to create a new template. I've never used a templating language before, so I'd like to avoid that for now if possible.
My question is: how can I make small adjustments to the default theme, like some CSS changes and perhaps adding external resources (like font awesome)?
Do I have to create an entire template (or a part of it) or can I include a CSS file somehow? The documentation mentions a theme option but so far I've found no examples or existing themes to learn from.
A mere link to a project that uses a custom theme or template would already be very helpful. The docfx repo has a docfx.website.themes folder and the default template is also in there I believe, but I couldn't really figure out which files I would have to provide to roll my own.
Export template:
Run docfx template export default, then you'll see default template in _exported_templates\default
Change themes in default template, e.g:
Adding external resource: modify styles\head.tmpl.partial
CSS change: modify styles\docfx.css or styles\main.css
Use customized template:
Run docfx -t _exported_templates\default, which will use your customized template!
NOTE: It is possible that DocFX updates its embedded templates when releasing new version. So please make sure to re-export the template if you overwrite or dependent on that template in your custom template.

Have your custom theme exported in SemanticUI

Following documentation, I downloaded Semantic UI with:
npm install semantic-ui
then, I customised few variables per site, also few on element level, button for example.
This is all well, and I haven't had any problem changing those.
Then in theme.config file, I could specify:
#button: 'mytheme';
to pickup those custom style overrides
For my theme to be separate from Semantic UI core, I crated directory in the following path,
src/themes/mytheme
,and after running gulp build, I expected to have that mytheme exported over to dist/themes/mytheme along with basic and default which were already there. But that was not the case. So to be able to use my new button styles, I had to move manually newly generated button.css from dist/components after that gulp build task.
Am I doing this wrong? How to have all override files in one place like packaged theme? So I could then add <link> declaration after semantic.min.css to use my overrides.

How to use hooks in CS-Cart for overriding footer.tpl file

I am new to cs-cart and
I am trying to use hooks in cs-cart. I had gone through some cs-cart website but not getting proper answer. Suppose if i want to override footer.tpl file with new content then how can i do it using hooks. Just tell me the steps what code to write in index.tpl file and where to keep new footer.tpl file.
I'd suggest you to check this brief guide: http://docs.cs-cart.com/hooks.
Assuming you're on a version 4.x.x:
You don't need to edit anything in index.tpl, just take note of the name of the hook you want to use (I suppose you want to use this one {hook name="index:footer"})
Write your new template and give it the name footer.[override/pre/post].tpl
Save this new .tpl file in themes/[your_theme_name]/templates/addons/my_changes/hooks/index (maybe you need to create such directories in your folders tree)
Make sure you have the "my changes" addon installed and active. You can check it through your admin area of the store.
And that's it, it should work.
Notes:
I've seen no standard "footer.tpl" file in version 4.x.x., so the above instructions work, but they only append content at the end of the page. Customization of such page area can be done via the layout and theme editor on the admin area of the store.
The naming algorithm mentioned on the documentation of cs-cart is for
version 3.x.x. Since version 4.x.x. the folders names have varied.
You should replace skins/[skin name]/[admin|customer] for
design/themes/[your_theme_name]/templates

What buttons have changed labels from fckeditor to ckeditor 4?

It appears that some of the button names have been changed in ckeditor version 4.
Is there a complete list of these changes?
There is a partial list here.
I'm pretty sure that names haven't been changed. If something is not working check if plugin you need is included in your build (most likely it is a standard preset) and if not:
download a full preset (which in fact does not include all plugins too, but most of them) or
add required plugins to your custom CKEditor build.
[EDIT] another useful resource is the toolbar sample shipped with CKEditor package. E.g. here's one for a standard package.

Resources