Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating boostrap version, replacing .load with .on('load',...) and... #31

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Ignore autogenerated files from doxygen
example-site/Docs
46 changes: 26 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,36 +8,42 @@ Customize doxygen (v1.8.9) output to use the twitter bootstrap framework (v3.3.1
This started as work done by CoActionOS and was extended further here.
[Credit](http://coactionos.com/embedded%20design%20tips/2014/01/07/Tips-Integrating-Doxygen-and-Bootstrap/)

# Customizing Doxygen
Doxygen provides a handful of ways to [customize the output](http://www.stack.nl/~dimitri/doxygen/manual/customize.html). The simplest way is to customize the HTML output.

Doxygen allows you to customize the HTML output by modifying a master HTML header, footer and stylesheet. You can then include additional stylesheets and javascript files. The following command will generate the default Doxygen files.

`doxygen -w html header.html footer.html customdoxygen.css`
## Example project

Modifying these files alone is not enough to get good Twitter Bootstrap integration. Bootstrap requires that certain classes be applied within the HTML. For example, a Bootstrap “table” needs to have a class called “table” in order to apply the Bootstrap table formatting. We just need to augment the default HTML with these Bootstrap classes. To do this, we use the provided doxy-boot.js javascript file.
This is a minimal working example to get you started. It can be run by executing `doxygen` from the `example-site` directory. The documentation for this minimal example will be generated in Docs/html.

Also, you can augment doxygen’s default stylesheet with a customdoxygen.css stylesheet. This is where you would place any custom styling such as sticky footers.
## How to integrate with your own Doxygen project

# How to Integrate
This example uses `footer.html` and `header.html` from the `example-site` directory. The following options must be set in your Doxyfile.

To integrate this into your own project tell your doxyfile to use these 4 files in the HTML section (see the example site for an example of each file):

* HTML_HEADER=header.html
* HTML_HEADER=../rel/path/to/header.html
* Adds a Bootstrap navbar
* Wraps the content in a Bootstrap container/row
* HTML_FOOTER=footer.html
* HTML_FOOTER=../rel/path/to/footer.html
* Closes the extra divs opened in the header.html
* HTML\_EXTRA_STYLESHEET=customdoxygen.css
* Adds additional styling such as a sticky footer
* HTML\_EXTRA_FILES=doxy-boot.js
* HTML\_EXTRA_STYLESHEET=../rel/path/to/customdoxygen.css
* Adds additional styling such as a sticky footer
* HTML\_EXTRA_FILES=../rel/path/to/doxy-boot.js
* Where the magic happens to augment the HTML with bootstrap
* HTML_DYNAMIC_MENUS = NO
* GENERATE_TREEVIEW = NO
* Without these two options as NO, the menu looks weird or does not display at all, and makes the whole page really buggy
* GENERATE_HTML = YES

NOTE: The header.html file needs to include the Bootstrap css/javascript for this to work. This is where you can specify your own bootstrap compilation. These files will need to be manually added to the html directory, added as additional files in the doxyfile HTML\_EXTRA_FILES section or referenced externally (see example site header.html).
This will copy the header.html, footer.html, doxy-boot.js and the custom_doxygen.css files to the html output directory. See below for further customisation

NOTE: If you want to use the customdoxygen.css stylesheet from this repository, then you will need to replace the customdoxygen.css style sheet generated by the doxygen command above. If your customdoxygen.css file is in the directory when you run the doxygen command, it will be moved to customdoxygen.css.bak and you can restore it by overwriting the new version with the backup.
# Customizing Doxygen
Doxygen provides a handful of ways to [customize the output](http://www.stack.nl/~dimitri/doxygen/manual/customize.html). The simplest way is to customize the HTML output.

Doxygen allows you to customize the HTML output by modifying a master HTML header, footer and stylesheet. You can then include additional stylesheets and javascript files. The following command will generate the default Doxygen files.

`doxygen -w html header.html footer.html customdoxygen.css`

Modifying these files alone is not enough to get good Twitter Bootstrap integration. Bootstrap requires that certain classes be applied within the HTML. For example, a Bootstrap “table” needs to have a class called “table” in order to apply the Bootstrap table formatting. We just need to augment the default HTML with these Bootstrap classes. To do this, we use the provided doxy-boot.js javascript file.

Also, you can augment doxygen’s default stylesheet with a customdoxygen.css stylesheet. This is where you would place any custom styling such as sticky footers.

See the example-site directory for a minimal working example.
NOTE: Your header.html file needs to include the Bootstrap css/javascript for this to work. This is where you can specify your own bootstrap compilation. These files will need to appear in the html directory. This can be done manually, or added as additional files for HTML_EXTRA_FILES or using a hyperlink (see example-site header.html).

## Todo List
* Menu is not correctly displayed when Doxygen sidebar is enabled.
* Menu is not correctly displayed when Doxygen sidebar is enabled.
Loading