Issue with loading CSS format in blogger due to Javascript error

I recently updated a script that creates an archive of all my posts. With some assistance, we were able to get it working again after switching domain names and migrating from HTTP to HTTPS. You can find more information about this issue here.

However, the current problem is that the script is not displaying the text format correctly, making it look unformatted and messy.

I attempted to include the CSS as a separate script, but it did not make any difference (nor does it seem to make sense).

You can view the page where the script is located here:

The styling component of the script can be found at the end below:

<script>
  // Script code goes here
</script>

// Additional scripts included here

<!-- CUSTOMIZATION -->
<style type="text/css">
  // Custom styles for date and day display
</style>

The goal is to have the formatted text displayed with the Trebuchet MS font, using bold for months and dates, and arranging items in single lines rather than two.

javascriptcssformatblogger

Answer №1

Upon closer inspection, it appears that the issue does not lie within your CSS declarations as initially suspected. The problem actually stems from how your feed script calls are structured. Rather than utilizing /> at the conclusion of each call, you should opt for ></script> instead, as demonstrated in the code snippet below.

Incorrectly calling these scripts also resulted in your CSS failing to function correctly since it was defined below the scripts. 

<script>
  var LoadTheArchive = function(TotalFeed) {
    // Code block here
  }

  var DisplaytheTOC = function(PostTitles, PostURLs, PostYears, PostMonths, PostDays) {
    // Code block here
  }
</script>

// Additional script calls here

<!--CUSTOMIZATION-->
<style type="text/css">
  .dateStyle {
    color: #000;
    font-weight: bold;
    font-size: 15px;
    font-family: Trebuchet MS, sans-serif;
    margin: 0;
  }

  .dayStyle {
    color: #000;
    font-weight: bold;
    font-family: Trebuchet MS, sans-serif;
    display: inline-block;
  }
</style>

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

Modifying the color of elements within a picture

I am in search of the perfect web technology or JavaScript library that can help me achieve a specific functionality. My aim is to change the colors of particular objects within an image. I am looking to create a tool where users can select a color, and th ...

javascriptphpjqueryhtml

Is there a way to individually invoke a function on every element within a webpage?

Every element in my database is accompanied by a distinct thumbnail for display purposes. To cater to user preferences, I have included a dropdown menu that triggers the display of different forms based on their selection through a function. However, my cu ...

javascriptjqueryhtmlnode.jshandlebars.js

Navigating between different route groups using redirection: a step-by-step guide

My project folder structure is organized like this: app (app) dashboard page.tsx page.tsx layout.tsx (auth) login ...

javascriptnext.js

Javascript-generated HTML elements are invisible

I am attempting to create a "circle of fifths" using html, css, and javascript. I am following this tutorial: https://blog.logrocket.com/interactive-svg-circle-of-fifths/ Although I am using the astro framework, I don't believe my issue is related to ...

javascripthtmlcssastrojs

experiencing difficulties when trying to connect with node using snowflake-sdk due to asn

Looking to create a node/express endpoint that can connect to my Snowflake instance. I have tried the following code snippet in a basic node file, and it works fine. However, when I integrate it into my app, it breaks: import snowflake from 'snowflak ...

javascriptnode.jssnowflake-cloud-data-platformasn.1

What could be causing the issue with lodash throttle not functioning correctly in the useWindowSize custom hook?

I'm attempting to implement a resize event with throttle, but I'm encountering an issue. To troubleshoot, I have tried the following: import {throttle} from 'lodash' export function useWindowSize() { const [windowSize, setWindowSize] ...

javascriptreactjslodash

Identifying the class name of SVGAnimatedString

While working on creating an SVG map, I encountered an issue where the functions triggered by hovering over 'g' elements were not functioning as expected. In order to troubleshoot this problem, I decided to check for any issues with the class nam ...

javascriptjquerysvg

Could not locate module: The package path ./react is not exported from the package in E:NextAppportfolio_website-mainportfolio_website-main ode_modules ext-auth

I am encountering an issue while trying to import SessionProvider from Next-Auth. The error message that is being displayed is: "Module not found: Package path ./react is not exported from package E:\NextApp\portfolio_website-main\port ...

javascriptnext.jsnext-auth

Is it possible to implement pagination using 'useSWR' in combination with the contentful-client?

I am currently working on implementing pagination in a Next.js project using the useSWR hook. My approach seems to be functioning correctly, but I have a concern about caching due to the key parameter not being a unique string as recommended in the documen ...

javascriptcachingnext.jscontentfulswr

Issue: Troubleshooting data serialization process using getStaticProps in Next.js

I attempted to retrieve data from an API, but unfortunately encountered the following error: Server Error Error: Issue with serializing .results returned from getServerSideProps in "/". Reason: JSON serialization does not support undefin ...

javascriptreactjstypescriptnext.jsfrontend

Why is this component not functioning properly?

I am struggling with making a function to add a component dynamically when I click a button, similar to the code below. However, my attempt at creating a separate method for adding the component instead of using an inline expression is not working. Can som ...

javascriptvue.js

`Issues encountered with AJAX POST request in Flask-based web application`

Having issues with an AJAX POST request on my Flask web application. Specifically, I'm working on a signup page and when I click the submit button, nothing happens. There are no XHR entries in the network tab or console entries in the browser's d ...

javascriptpythonjqueryajaxflask

What is the reason behind the non-exportation of actions in Redux Toolkit for ReactJS?

Currently, I am utilizing @reduxjs/toolkit along with reactjs to create a shopping cart feature. However, I am encountering an issue when attempting to export actions from Cart.js and import them into other files like cart.jsx and header.jsx. The error mes ...

javascriptreactjsreduxredux-toolkit

"Error in Three.js: The object being added must be an instance of THREE.Object3D, not a Vector3. Where is this error coming from and

I've been struggling with this code, attempting to create a spinning cube but encountering numerous errors. Here is my code from camera.js and scene.js: import * as THREE from "three"; export function createCamera(gameWindow) { // Camera ...

javascriptthree.js

Updating a specific field in a document using Node.js and MongoDB

Hey, I'm a beginner in nodeJS and I could use some help. I've been able to update an entire document easily but I'm struggling to update just a single value. Here's my code: router.patch("/:id", async (req, res) => { console.log(re ...

javascriptnode.jsmongodbexpress

Button cannot be activated upon selecting a row

The goal is to activate a button when a row is selected. However, the button remains disabled even after selecting a row. Below is a snippet of the code as well as a screenshot showing the issue [error_1]: onInit: function () { var oViewMode ...

javascriptbuttonodatasapui5

Angular directive failed to correctly retrieve object

I have a person object loaded from the backend that is structured as follows: { "PersonId":"19894711-2eb9-4edf-92c6-85de2b33d1bb", "Firstname":"Jacky", "Lastname":"Chan", "DateOfBirth":"1963-09-18T00:00:00", "CreateDate":"2015-12-11T09 ...

javascriptjqueryhtmlangularjsasp.net-web-api2

Why does ajax transmit only the initial input value and not the rest of them?

I recently developed a school website where teachers can input students' marks. Currently, I have organized the project into three main files: The first file is designed to showcase every student's name based on their subject and course. <ta ...

c#javascriptajax

I am interested in having the push notification feature function specifically for registered users

In an attempt to register the device for push notification using the PhoneGap plugin, I am encountering an issue. After the AJAX success action is called, the registration action does not alert the registration ID. Can someone help figure out what's g ...

javascriptjqueryajaxcordovaphonegap-build

Tips for preventing the line through effect on a span element when it is checked

I am working on a project that involves a list of items labeled as li. For example: <ul class="list"> <li class="checked">Groceries <span>&#215;</span></li> <li>Medicine <span>& ...

htmlcssresponsive-design