CSS files not loading correctly on github pages

Question

I am making a calculator app with multiple themes and everything works locally but the problem is occuring on the github pages. Each theme for the calculator has its own css file and I am using javascript to change href of the link tag based on the selected theme (theme-1 is selected by default):

HTML:

<link rel="stylesheet" id="themeStyleSheet" href="styles/themes/theme-1.css">

Javascript:

const themeSelector = document.querySelector('#themeSelector');
const themeStyleSheet = document.querySelector('#themeStyleSheet');
let themeValue = 1;

function lastSelectedTheme(){
    themeValue = localStorage.getItem('selectedTheme');
    if(themeValue === '1'){
        themeStyleSheet.href = 'styles/themes/theme-1.css';
        themeSelector.value = localStorage.getItem('toggleValue');
    }
    else if(themeValue === '2'){
        themeStyleSheet.href = 'styles/themes/theme-2.css';
        themeSelector.value = localStorage.getItem('toggleValue');
    }
    else if(themeValue === '3'){
        themeStyleSheet.href = 'styles/themes/theme-3.css';
        themeSelector.value = localStorage.getItem('toggleValue');
    }
}

When I view my page using github it automatically adds '/' in the beginning of the href while there is no '/' in the original javascript code which is causing the problem (if I remove '/' manually from the developer console then it works)

How do I stop / being added to the href?

Github Repo: https://github.com/FaDiiiLeo/calculator

If you want an alternative solution to using multiple stylesheets, IMO a better option is to change a class on BODY, then in your CSS at the beginning of each style add the class so something like: .Theme1 input[type=range], .Theme2 input[type=range] etc.. This will allow the theme switching to also be a little faster as it will only be in one single file that will have already been loaded on page load. — imvain2
– imvain2, Commented May 23, 2022 at 22:20
You just need to create a new deployment on github pages - The one you have active is using an older commit where the slash is still there in the source code. — Michael Horn
– Michael Horn, Commented May 23, 2022 at 22:20

Vija02 · Accepted Answer · 2022-05-23 22:22:12Z

1

Github shouldn't be changing your code at all. Looking at your repo, I assume you're using the main branch for the page?

I imagine something probably happened that stopped your commit from deploying. Since your commit was exactly that change here: https://github.com/FaDiiiLeo/calculator/commit/00e6c0120da611f340657b357605e387b6453a90

I would push another commit and check whether it's fixed.

answered May 23, 2022 at 22:22

Vija02

3083 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fahad Over a year ago

Thank you, pushing another commit worked

Laura Castro · Accepted Answer · 2023-01-26 16:53:53Z

0

To anyone who needs help with the issue:

I linked my css files to my html file by adding a "." (period) before the forward slash in the link href
see below example:

Credit: a study buddy showed me this. https://github.com/ramitaarora/final-project-portfolio/blob/main/index.html

Hope it helps!

answered Jan 26, 2023 at 16:53

Laura Castro

11 bronze badge

1 Comment

dagelf Over a year ago

./ is always implied, so not necessary, unless you are executing a command and . is not in the PATH. . is the current directory, and .. is the parent directory - maybe you've never done an ls or dir in a terminal?

Collectives™ on Stack Overflow

CSS files not loading correctly on github pages

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related