I would like UA header on website, and official UA logo

[dlebauer]

For header: See https://digital.arizona.edu/ua-bootstrap/interior-example.html

I think adding something like

  <!--   ++++++++++++++ Place inside body tag ++++++++++++++   -->
  <header id="region_header_ua" class="l-arizona-header bg-red">
    <section class="container l-container">
      <div class="row">
        <a href="http://www.arizona.edu" title="The University of Arizona homepage" class="arizona-logo">
           <img alt="The University of Arizona Wordmark Line Logo White" src="https://cdn.uadigital.arizona.edu/logos/v1.0.0/ua_wordmark_line_logo_white_rgb.min.svg" class="arizona-line-logo">
        </a>
       </div>
     </section>
  </header>

will be a good start.

For logo, we can use this one

[KristinaRiemer]

Wait, how does this look? There's an easy automated way to do this with Hugo.

[dlebauer]

roughly like but without all the weird shadows

[Chris-Schnaufer]

@dlebauer @KristinaRiemer What is the status of this issue?

[dlebauer]

• [ ] need top red banner bar
• [ ] logo needs improvement - currently in https://github.com/az-digitalag/group-website/pull/21 it looks like this:

[KristinaRiemer]

@dlebauer what exactly is wrong with that logo?

[dlebauer]

it appears to have a 'drop shadow' effect (grey line around it ... see image below) even though the logo in https://github.com/az-digitalag/organization/issues/273#issue-680472780 doesn't

[KristinaRiemer]

@Chris-Schnaufer if you're able to attempt this, or also @julianpistorius & @MagicMilly?

[Chris-Schnaufer]

@KristinaRiemer I can take a look.

[Chris-Schnaufer]

The issue is that the image was captured (or exported, or ...) with the drop shadow. Attaching new image & also sending to Kristina.

[Chris-Schnaufer]

The URLs for the CSS files are as follows:

• https://digital.arizona.edu/ua-bootstrap/lib/ua-bootstrap.css
• https://cdn.uadigital.arizona.edu/lib/ua-brand-icons/v1.1.0/ua-brand-icons.min.css

The easiest way to incorporate the HTML that you want is to copy the navbar.html file from "themes/hugo_academic/layputs/partials" to "layouts/partials" and make your changes to the copied file (perhaps add before the <nav... element?)

One way to add the CSS files is to download them and put them in the "assets" folder & and add a line like customCSS = ["ua-bootstrap.css","ua-brand-icons.min.css"] to the config.toml file

[dlebauer]

@Chris-Schnaufer have you done this or should this stay open until this is implemented?

[Chris-Schnaufer]

@dlebauer I have not done this. The approach I'm suggesting may be simplistic in that there may end up being conflicting CSS between what UA has and what the website uses. A more detailed approach may be needed where only the UA CSS used by the elements are brought over - this involves tracking down what's used and updating the website CSS. I did a preliminary look and this more detailed approach appears to avoid conflicts and should be workable.

[dlebauer]

@Chris-Schnaufer I have done what you said

• put 2 css files in assets
• move navbar.html to layouts/partials
• added in code chunk from OP above

but nothing happened. You can see these changes w/ code chunk commented out in the 'header' branch https://github.com/az-digitalag/group-website/compare/header?expand=1

the code chunk is supposed to go between body tags, but there are none in navbar.html, and it doesn't help if I add them

also, getting this error using chrome developer tools:

Failed to find a valid digest in the 'integrity' attribute for resource 'https://cdn.digital.arizona.edu/lib/arizona-bootstrap/latest/css/arizona-bootstrap.min.css' with computed SHA-256 integrity 'bZZyI4xL26zyA/luH09sU2EFskkWGmqCUd1iY592hp8='. The resource has been blocked.

[Chris-Schnaufer]

I have tried to add the suggested HTML for the red bar containing the white "University of Arizona" and have run into problems with the theme conflicting with the HTML.

A different approach will be needed to display this bar. The bar and text needs to break out from the Navigation control since the control uses the flex-box layout scheme. An undesirable approach would be to modify the theme code which would make upgrades much more difficult.

[Chris-Schnaufer]

Was able to get the banner displayed by adding a top margin to the nav wrapper and adding the background with text as an absolutely positioned element.

PR: https://github.com/az-digitalag/group-website/pull/23