Struggling to connect HTML with CSS in Hugo

I am experimenting with a pre-fabricated theme in Hugo and incorporating some Bootstrap codes. I want to change the color of all links when displayed or hovered over. Despite searching extensively, I have been unable to achieve this through the use of CSS selectors like a:link{...}, a:visited{...}, a:hover{...}, a:active{...}. I've even tried including the following line in my HTML:

<link rel="stylesheet" href="kitab.css">

after someone suggested it, but unfortunately, none of these approaches have worked. The links still appear blueish, and I am struggling to figure out how to properly connect my HTML with the CSS. The HTML snippet includes clickable titles corresponding to pages on the site:

<ul class="list-unstyled ml-1 mb-0 border-top border-warning pt-2">
    {{ range first 4 .Pages }}
    <li>
      <a href="{{ .Permalink }}">
        <p class="mb-1">
          {{ .Title }}
        </p>
      </a>  
    </li>
    {{ end }}
  </ul>

This is the complete CSS code I currently have:

html {
  scroll-behavior: smooth;
}
body {
  font-family: "Roboto", sans-serif;
  background-color: whitesmoke;
  overflow-y: scroll;
  min-width: 250px;
}

nav {
  height: 40px;
}
main {
  min-height: calc(100vh - 100px);
  border-radius: 10px;
}
.side-bar {
  width: 25px;
  position: fixed;
  top: 70px;
}
footer {
  font-size: 0.9em;
  margin-left: 35px;
}
.nav-menu {
 /* color: #007bff !important; */
  font-size: 1.5em;
}
.nav-menu:hover {
 /* color: #0056b3 !important; */
  cursor: pointer;
}
.nav-menu-disabled {
 /* color: #4e4f50 !important; */
  font-size: 1.5em;
}


/* link colors specification */

a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}








.book-cover {
  color: white;
/*  background-color: #24242499; */
}
.bookTitle {
  position: absolute;
  top: 2%;
  left: 5%;
}
.bookAuthor {
  position: absolute;
  bottom: 2%;
  right: 5%;
}
.show {
  transition: all 0.1s;
}
.hanging {
  padding-left: 15px;
  text-indent: -15px;
}

/*
ul.nav li a, ul.nav li a:visited {
    color: orange !important;
}

ul.nav li a:hover, ul.nav li a:active {
    color: orange !important;
}

ul.nav li.active a {
    color: orange !important;
}

*/

#copiedMessage {
  position: fixed;
  display: table-cell;
  line-height: 100px;
  width: 224px;
  height: 100px;
  text-align: center;
  top: calc(50% - 50px);
  left: calc(50% - 112px);
  transition: all 1s;
}

Answer №1

After figuring out what went wrong, I realize that this is important information for Hugo beginners to know. None of the tutorials I followed mentioned this issue.

When using Hugo, you have the option to import a theme. In my case, I mistakenly moved the CSS file from the theme's static folder to the static folder outside of the theme (within my project). This caused a problem with linking the CSS file to the HTML in Hugo, hence the reason for changing the title of my original post. Mixing code from the theme with code outside of the theme can lead to compatibility issues in Hugo.

The solution I found was to relocate the necessary files from the theme to my project directory, remove the remaining theme files altogether, and delete the theme variable from the config.toml file. Alternatively, everything could have been placed within the theme (excluding files from the content folder).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming an HTML document into a C# string representation

I need help creating a basic HTML file and then dynamically loading it as a string in C#. I attempted using File.Open, but the file is located separately from the binary code. Is there an easy way to instruct the build process to load it into a string? ...

Troubleshooting my Xpath query for HTML - where did I make a mistake?

Within the <BODY> tags, there is a piece of HTML that I'm attempting to target using scrapy: <section class="content"> <div class="social clearfix"> <div class="profile profile-nano pull-left"> <a hr ...

Navigational dropdown menu item vanishing upon hover

Utilizing bootstrap for my website, the main navigation employs dropdowns for secondary choices. I am encountering an issue in IE10 only (works fine everywhere else) where the dropdown menu is inconsistently accessible. Additionally, if you manage to acce ...

What is the best method for transforming an HTML file into an ICS (iCal) file?

Hello there! I am interested in converting an HTML file (website) to an iCalendar file (iCal). Is this even possible? If so, how can it be achieved? Does anyone have any ideas or recommendations on how to proceed? Thank you in advance! ...

CKeditor does not accept special characters or diacritics in keywords

Recently, I came across a helpful code snippet for CKeditor that counts and ranks the most used words in a textarea. This feature is invaluable for generating SEO-keywords suggestions while writing articles. However, there is an issue with non-English char ...

What methods could I use to prevent the WYSIWYG buttons from automatically linking?

I've been working on creating an editor but I'm facing a small issue. Every time I click on a button (such as bold or italic), it follows a link instead of performing the desired action. Here's a snippet of what I've tried so far: fu ...

What is the best way to design a div that includes two separate columns for text and an image icon?

Check out this code: <?php foreach ($data as $vacancy) { ?> <div class="vacancy"> <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/vacancy_icon.jpg" /> <div class="name"> < ...

How can CSS animations be implemented on a diagonal path?

I have developed a unique CSS animation that adds a shiny effect to text. Currently, the effect only works horizontally. I am interested in exploring options to change the direction of the animation to create a diagonal shine effect. Below is the code I a ...

The command response.setHeader("Refresh", "0") failed to execute

My webpage needs to be refreshed when the user session has expired or the connection is not active. Despite trying various codes, I have been unsuccessful in achieving this. The last code snippet that I implemented is as follows: if(session.getAttribute(" ...

Issues with CSS z-index in negative values not functioning correctly

Help! I'm encountering a perplexing z-index issue on my website. Check out the problem here: Upon closer inspection of each step's header, you'll see that only step 3 features a ribbon while steps 1 and 2 do not (if this isn't visible, ...

What is the best way to alter the text color based on certain conditions within a table column using PHP

I am faced with multiple conditions involving if-else statements, where the variable "Remark" changes based on these conditions. if($income==($paid + $deduction)){ $remark="Paid"; } else if($paid > 0){ $remark="Have Due"; } else{ $remark="N ...

Is there a way to center a particular flex item horizontally within its parent container?

Having a flex container with two items, I wish to align the first item to flex-start, and the second item to the center of the flex container. I am particularly concerned about maintaining align-items: center to ensure that all flex items are vertically ce ...

The iframe remains unresponsive and fails to resize as needed

I am facing an issue while trying to embed an iframe into one of my websites. It seems that the responsiveness is lost and it does not scale properly on mobile devices. You can see the issue here. Interestingly, when I place the same iframe on a plain HTM ...

Enhancing functionality through interactive buttons: optimizing the performance of this dynamic data code

I am seeking a more efficient way to retrieve names from a database using PHP and MySQL. Currently, I have multiple if isset statements in my code, one for each button that retrieves a specific name. Is there a better approach to achieve the same result ...

Ensure that the columns are consistently displayed on a single row

On larger screens, everything displays correctly. However, when viewing on a phone, the issue arises. I want these two columns to always stay on one row, but currently they stack on mobile devices. How can I ensure that they resize and remain on the same ...

The outcome of the Javascript Calculator is showing as "Undefined"

I've been attempting to create a calculator using JavaScript, but I'm facing an issue where the 'operate' function keeps returning Undefined, and I can't seem to figure out why. I suspect that the problem lies with the switch state ...

Load and execute a dynamically created script in JavaScript at the same time

I am exploring the option to load and evaluate a script from a third-party synchronously. Here is an example that currently works well: <head> <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfe ...

Webster Barron code script

I'm attempting to replicate the concept of this video https://www.superhi.com/video/barron-webster using text, but I am encountering difficulties in achieving the desired effect. The design text is currently overlapping my name and displaying in rev ...

In search of advice on the best web-based database management technology

I'm looking to create a prototype for a web-based database manager, similar to the desktop version in the image below, with specific features in mind. Initially, the schema will be provided through a flat file. Considering HTML5 as an option, I am a ...

Displaying the grid ID outside of a card in Angular while using Bootstrap 4

Utilizing the core ui template in my Angular project with Bootstrap 4. Check out the page <div class="animated fadeIn"> <div class="row"> <div class="col-sm-12"> <div class="ca ...