Only conceal the breadcrumb trail on the 404 error page

I have recently created a custom node for my site's 404 page with the path /node/83 in the site information. However, I am facing an issue where I cannot hide the .breadcrumb element using display:none. I attempted to achieve this through CSS injector but I am struggling to apply it only to the 404 page. Upon inspecting the element, I noticed that there is only the .breadcrumb class and no additional classes that indicate a 404 page like page-404. I tried adding a new rule to the CSS injector but I am unsure of the correct path to target only the 404 page: link to the not found page

Alternatively, I thought about utilizing a unique class that only applies to the 404 page, if such a class exists by default: add a class to the not found page

Any assistance on this matter would be greatly appreciated. Thank you.

Answer №1

Avoid concealing it within CSS while also refraining from transmitting the breadcrumb to the viewer's browser.

For more information, visit

Answer №2

To customize the 404 page, first open the webpage where you want to make changes and access the web inspector. Look for a specific class on the body or html tag that corresponds to the 404 page, such as page-404.

Next, add the following code to your custom CSS:

.page-404 .breadcrumb {

    // Insert your styles here

}

Answer №3

When working with Drupal, it may be a bit tricky to perform a PHP check to determine if a page is a 404 error page or if the body tag of the 404 page has a specific CSS class. If there is a CSS class on the body tag that relates to an error page, you can target elements accordingly (e.g., target the breadcrumb by using 'body.error .breadcrumbs {display: none;}'). If this approach is not feasible, you can refer to

The guide provides instructions on creating your custom 404 page.

  • Create two nodes for different types of page errors (403 and 404).

  • Find the ID number of the node you want users to be redirected to. You can locate the node's ID number by checking the number after the last slash in the browser's address bar when visiting the node.

  • Input the paths to your nodes in the relevant fields on your error reporting settings page. For example, if the node ID number for 403 error codes is "83," input "node/83" in the "Default 403 (access denied) page" setting.

  • In Drupal 6, go to mysite.com/admin/settings/error-reporting

  • In Drupal 7, visit mysite.com/admin/config/system/site-information The nodes you create will appear in various blocks like tracker and popular content, just like regular nodes. If this is undesired, consider using a contributed module like Custom Error to address this issue.

    You might also want to explore the Redirect 403 to User Login module for Drupal 7, which allows redirection to the login page and customization of 403 and 404 error messages.

EDIT

To make changes, navigate to sites/all/themes/themename/template.php and modify the file.

Add the following code snippet at the beginning:

function themename_preprocess_page(&$vars) {
 // Adds a Custom 404 page
 $header = drupal_get_http_header("status");
 if($header == "404 Not Found") { ?>
   <style>
    .your-custom-css-here {}
   </style>

 <?php }
}

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

When I try to expand the width of a div, the display property set to inline

Visit my website At the moment, my website features the following code snippet: <div class="main-sale"> <div class="time-left">Sale Ends in: </div> <div class="sale-item"> //Highlighted Sale it ...

Separate sentence to one word per line

Can CSS be used to display each word of a sentence on a separate line? Input: <div>Hello world foo bar</div> Rendered output: Hello world foo bar It is not ideal to set the width to 1px, as specified. ...

Creating a unique look for SELECT (Option) tags using gradients and a personalized arrow design

Feel free to check out my full HTML code here. You can simply copy and paste it into a demo document on your local machine to see exactly what I'm talking about. My goal is to style the boxes to include both a gradient background AND a unique arrow o ...

I am having trouble with my image not resizing properly within the flexbox when using height and max-height properties

In my flexbox setup, I have two columns, each taking up 50% of the width. My goal is to insert a large square image in the right column, with its height being determined by the contents' height in the left column. (Additional content will be added to ...

Unable to choose the specific div element within the container that has an inset shadow applied by utilizing Pseudo

It seems that I am encountering an issue when trying to select the div elements within a container that has a defined shadow using pseudo elements ::before OR ::after. Once the shadow is applied, the div elements become unselectable. Please refer to the c ...

Alignment of a div at the bottom inside a jumbotron using Bootstrap 4

Searching for answers on how to vertically align a div within a jumbotron, I have come across plenty of solutions for middle alignment but none for bottom alignment. <section id="profileHero"> <div class="container"> <d ...

Is it possible to center content with Bootstrap?

Is there a different method to center content with empty space on either side? For instance: <div class="col-md-3"></div> <div class="col-md-6"> <div class="form-group"> .... </div> </div> <div class="col ...

Creating a List with Sublists that are displayed when hovering over the parent List is a key element of effective design

Hovering over 'View Rows' should open up both New Records and Old Records <div> <li>Add Rows</li> <li>DeleteRows</li> <li>View Rows <ul> <li>View New Records</li ...

I am looking for assistance constructing a task management application using vue.js

I am facing an issue with developing a to-do list using Vue.js. The goal is to add tasks to the list by entering them and clicking a button. Once added, the new task should show up under "All Tasks" and "Not finished". Buttons for marking tasks as " ...

Incorporating the FLEX property into my code has been a challenge as it is not functioning properly on iOS 7 and 8 devices. Does anyone have any tips or suggestions on how to

While utilizing FLEX in my code, I noticed that the output is not what I expected on iOS 7/8 devices. <div className="modal-row"> <div className="col1"> <span>{dict.YourServiceNumber}</span> </div> <div ...

css - aligning text below another text in the center

Looking to style a text in a specific color with a message about another text below it? Want the text centered but not sure how to position it correctly? margin: 0px auto; If this code isn't delivering the desired result and is positioning your text ...

"Changing background color, incorporating hover effects, utilizing !important, and manipulating .css properties with

Encountered a dilemma. I devised a "tabs" feature illustrated in the following demo: http://jsfiddle.net/4FLCe/ The original intention was for the tab to change color to A when hovered over, and to color B when clicked on. However, as shown in the demo, ...

Set the class of an element dynamically using ng-class and detect changes with ng-change

I want the input field to initially have the class .form-control-error. When the user clicks on the field and starts typing, I would like it to change to .form-control-success. I attempted the following code but couldn't get it to update. The ng-chan ...

Change the width of the webpage inside the iframe

I am working with an iframe that has a fixed width and height of 400px. I want to load a web page in the iframe, but I need to adjust the width of the source to fit my iframe perfectly. The height is not an issue as I can add a scrollbar if needed. Here ...

Other options for positioning background in SVG or using CSS within SVG could include center center alignment settings

I am currently developing a website where I have a div covered by an SVG. When I use this SVG as a background image and apply background-position: center center, it functions as expected. However, my issue arises when I try to add additional CSS in this ma ...

Creating a navigation bar in React using react-scroll

Is anyone able to assist me with resolving the issue I am facing similar to what was discussed in React bootstrap navbar collapse not working? The problem is that although everything seems to be functioning properly, the navbar does not collapse when cli ...

Angular is throwing error TS2322 stating that the type 'string' cannot be assigned to the type '"canvas" while working with ng-particles

My goal is to incorporate particles.js into the home screen component of my project. I have successfully installed "npm install ng-particles" and "npm install tsparticles." However, even after serving and restarting the application, I am unable to resolve ...

Ways to use jQuery to disable row form elements in the second and third columns

I need a way to deactivate form elements in the second and third columns, starting from the second row until the nth row using a jQuery selector. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> ...

pressing the switch will adjust the size of the container

I am looking to implement a feature where clicking on an icon will resize a div to full screen in the browser. Below is the HTML code I have set up for this functionality, and I am open to suggestions on how to achieve this. <div> <a (click)= ...

Is there a way for me to prioritize the sidebar over the main content on the page

My theme is efficient and visually appealing, but there's one issue with the mobile layout - it displays the sidebar after the content. How can I rearrange this in my theme so that the sidebar appears before the content? Thanks for your help! ...