Styling the 404 page

  • Resolved donmcleman

    (@donmcleman)


    3 years, 10 months ago

    Hi, I would like to use css to style the error page but it does not recognise the body class ‘error404’ which I see in the Fireforx Inspector. Is there another way of targeting the page?

    I can make changes to the php file but I still need to modify some elements using css.

    [The url I have given is on a staging site but that doesn’t stop me using cssbody classes on other pages]

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @donmcleman,

    That should work. I took a look at the site and it did allow me to add CSS that targets body.error404. Here’s what I’m seeing:

    error404

    I would suggest double-checking for any errors in the CSS, especially above the styles in question. That could keep these styles from working properly. Also, make sure the styles that are being added aren’t being overwritten by other styles in the site. It could be a specificity issue.

    Cheers

    Thread Starter donmcleman

    (@donmcleman)

    Thanks for your help. You made me realise that the problem lay not in the styles but in where I was adding the css – I normally add it to style.css via the theme editor but it works fine when I add it to the Customizer.

    Hi @donmcleman,

    Thanks for the update. I’m happy to hear that you figured out how to add the CSS to your site.

    You should be able to add the CSS in your style.css file, which should work. Are you modifiying the Storefront theme’s style.css file directly or are you using a child theme?

    Thread Starter donmcleman

    (@donmcleman)

    Hi, I’m using a child theme and I put most of the css changes into style.css. However on this occasion it only took effect when I added it to the customizer – it seems to add an extra layer of ‘!important’.

    Thank you for your help.

    The customizer styles do load lower than the ones in the theme or child theme so that they can override them. It could be that was all that’s what was necessary to get them to work.

    It might also indicate there is an error in the child theme’s CSS styles. You could try running it through a validator to see if there are any problems.

    https://jigsaw.w3.org/css-validator/

    Thread Starter donmcleman

    (@donmcleman)

    Ok, will do, thanks

    Glad to hear it!

    I’ll mark this thread as resolved now. If you have any further questions, I recommend creating a new thread.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Styling the 404 page’ is closed to new replies.

Tags