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:
- Setup a blogroll using google firebase
- Setup comments
- Capture and display page statistics
Leave a Reply