Customize the logo

Questions about XML that are not covered by the other forums should go here.
daryl
Posts: 12
Joined: Thu Feb 11, 2021 9:22 pm

Customize the logo

Post by daryl » Fri Jun 11, 2021 8:14 pm

Hi,

I would like to customize the header nav area and move the logo so that the logo and navbar aren't on the same line. How can I do that? Which fragment can I edit to achieve this?

Should I edit this area in the page template?

Code: Select all

<whc:include_html href="${args.hdr}">
            <!-- @Deprecated: use webhelp.fragment.before.body -->
            <!-- EXM-36950 - Expand the args.hdr parameter here -->
        </whc:include_html>
Or is it better to do it in CSS?

Also, what does {args.hdr} refer to?

Thanks!
Attachments
Screen Shot 2021-06-11 at 10.08.20 AM.png
Screen Shot 2021-06-11 at 10.08.20 AM.png (232.33 KiB) Viewed 132 times

alin
Site Admin
Posts: 201
Joined: Thu Dec 24, 2009 11:21 am

Re: Customize the logo

Post by alin » Tue Jun 15, 2021 4:34 pm

Hello,

You could achieve this by customizing the HTML Page Layout files, but we do not recommend this approach. A complete explanation is available in our User Guide (see the Warning note): https://www.oxygenxml.com/doc/versions/ ... lates.html

The easiest way to display the logo above the menu is by using a custom CSS. For example using the following CSS sample you can move the Logo and the Publication title on separate line above the menu:

Code: Select all

.wh_header_flex_container {
    flex-direction: column;
}
.wh_header_flex_container > * {
    width: 100%;
}
@media only screen and (min-width : 768px) {
    .wh_top_menu_and_indexterms_link.navbar-collapse {
        display: flex !important;
    }
}

.wh_logo_and_publication_title_container {
    display: flex;
    justify-content: flex-start;
}

.wh_logo, .wh_publication_title {
    padding-right: 10px;
}
Here is how the output would look like:
Image

The complete Publishing Template sample is available here: https://github.com/oxygenxml/oxygen-pub ... above-menu

However, if you want only the Logo component to be displayed on a separate line, leaving the title on the same line with the Menu component you need to use a custom XSLT Extension file.
Using XSLT you can customize the HTML structure of the Header section of each output page by changing the location where the Logo component is generated.
We have a similar Publishing Template sample that moves the logo component before the search input. You can use the XSLT customization available in this template as a starting point.

{args.hdr} represents a placeholder for the parameter with the same name: https://www.dita-ot.org/dev/parameters/ ... __args.hdr

Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

Post Reply