1

I am trying to add custom styles on 404 CMS page. I added html on admin side of CMS 404 page. The html for 404 page is

<h1 class="no-route-section-one-heading heading"> {{trans'Excuse me! Page not found.'}}</h1>
    <div class="no-route-section-one">
    <p class="description"> {{trans'The page you were looking for was not found.'}} </p>
    <ul class="points-list">
    <li> {{trans'Check that you have entered the correct URL'}}</>
    <li> {{trans'If you clicked on a link to get here, the link is incorrect or not working'}}</li>
    </ul>
    </div>

    <h1 class="no-route-section-two-heading heading"> {{trans 'What can I do?'}}  </h1>

    <div class="no-route-section-two">
    <p class="description"> {{trans'There are more ways you can get back on track with the Capital Store.'}} </p>
    <ul class="points-list">
    <li> {{trans'Go back to the previous page'}}</li>
    <li> {{trans'Use the search pages above to find the products you want'}}</li>
    <li> {{trans'Use these links:'}}</li>
    </ul>
    </div>

    <div class="no-route-button-links">
    <a class="home-page-link link" href="{{store url=""}}">{{trans'Go to home page'}} </a>
    <a class="profile-page-link link" href="{{store url="customer/account"}}">{{trans'Go to my profile'}} </a>
    </div>

After that, I have added my styles under app/design/frontend///web/tailwind/theme/pages/no-routes.css. The css styles are below

.heading {
    @apply text-slate;
    @apply text-4xl;
}

.no-route-section-one {
    @apply mt-6;
    @apply pb-8;
    @apply border-b;
    @apply border-grey-lighter;
    @apply border-solid;
}

.points-list {
    @apply mt-6;
}

.no-route-section-two-heading {
    @apply mt-6;
}

.no-route-section-two {
    @apply mt-6;
}

.no-route-button-links {
    @apply mt-8;
    @apply mb-20;
    @apply flex;
}

.home-page-link {
    @apply bg-blue;
    @apply text-white;
}

.profile-page-link {
    @apply bg-grey-light;
    @apply text-blue;
    @apply ml-2.5;
}

.link {
    @apply no-underline;
    @apply text-base;
    @apply align-middle;
    @apply text-center;
    @apply pt-3;
    @apply pb-3.5;
    @apply pr-12;
    @apply pl-12;
}

@media only screen and (max-width: 810px) {
    .no-route-button-links {
        @apply flex-col;
        @apply mb-6;
    }

    .profile-page-link {
        @apply ml-0;
        @apply mt-2;
    }

}

However, I cannot see any styles changes when I navigate to 404 CMS page. I am pretty new to magento2 and still trying to understand how it works. But, this does not work. How can I apply my custom styles on a CMS page?

1 Answer 1

0
  1. You can add the styles on the cms page directly.

    Your Custom Css
  2. You have to import the custom CSS file to the 404 page via XML.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.