Styles added to navbar and added favicon

A couple of small tweaks today, I have styled the navbar and also have been able to tweak the wordpress theme to use my favicon.

This stack overflow article provided the information that I needed to set a favicon in a wordpress theme.

https://stackoverflow.com/questions/18074365/changing-favicon-in-wordpress-theme#18074485

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/favicon.675aa949.ico" />

The key part is to use the get_stylesheet_directory_uri

The navbar currently consists of a Home and an Authors link with an Icon using the bootstrap icons to highlight the link.

      <nav className="navbar">
        <ul className="nav">
          <li className="nav-item"><Link to="/"><i className="bi bi-house-door-fill home-icon"></i> Home</Link></li>
          <li className="nav-item authors"><Link to="/users"><i className="bi bi-people authors-icon"></i> Authors</Link></li>
        </ul>
      </nav>

I used flexbox to style the nav bar ul list. This is pretty easy to do and requires only two lines of code: display: flex and flex-direction: column. The icons are styled using a custom class. The colors

.navbar ul {
  display: flex;
  flex-direction: column;
}

.nav-item a {
  color: black;
  text-decoration: none;
}

.nav-item .home-icon {
  color: yellow;
}

.nav-item .authors-icon {
  color: red;
}

The colours will need further refinement but I am happy with this for now.

I am planning for the next tasks to:

  1. Setup a blogroll using google firebase
  2. Setup comments
  3. Capture and display page statistics

Comments