Highlighting Selected Nodes in Drupal Views

Seeking Help with Drupal:

Is there a way to utilize Views to highlight the current selected node?

For example:

I have a list of articles under a heading:

2009 Articles

Dog Training

Cat Cleaning

Snake Wrangling

The 3 articles are displayed in a view (i.e., the latest articles from 2009). New articles added by users are automatically included in this view based on their title.

Now, I am looking for a solution where when a user clicks on "Cat Cleaning" and that article is displayed, the text "Cat Cleaning" in the view becomes bold or some CSS indication shows it as the current article.

I understand this can be easily done with menus, but I prefer not to require users to add new articles to a menu.

Thank you very much, JD

cssdrupalmenuview

Answer №1

To accomplish this task, follow these steps:

  1. Identify the class of the view list item (for example, Dog training) by using Firebug
  2. Manually add CSS for the view list item in the theme folder or utilize a more convenient method like the css injector module

  3. The CSS code will look similar to this:

    .view-name .view-name-of-field-here a:active {text-decoration: underline; color: red}

By utilizing the "active" CSS pseudo-class, we can style and highlight the link if the URL in the view list item matches the current web page's URL.

Answer №2

To customize the Views template, navigate to the View editing page and click on the Theme: Information link. From there, you can specify that if the link to a particular node matches the current path being viewed, then apply a 'current' class to it.

Answer №3

  1. To start, go to the Context Filters section and add "Global:null". Then, select "Get content ID from URL"
  2. Next, include a NID field and mark it as "Exclude from display"
  3. Now, add a Math field that calculates the difference between both NIDs: "!1-[nid]". Make sure to set it as "Exclude from display"
  4. Finally, apply a class to the field to highlight it as "active[expression]". The class active0 should be assigned to the current node.

If you need further assistance, check out this helpful video tutorial: http://youtu.be/0uSfuVmO6zk

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

Arranging two classes in close proximity

I need help aligning two classes that are stacked on top of each other to be displayed side by side. Below is a screenshot of the two classes: https://i.sstatic.net/V0tLL.png The right class is .testm_boxes1, and the left class is .testm_boxes2. Here is ...

htmlcss

Discover a Bootstrap form input integrated with a badge pill that can display changing data

Is there a way to ensure that the badge appears exactly where I want it to? Can you explain the CSS Class Parameters to me? Here is the current state of my HTML: <input id="<?php echo $this->id; ?>" type="<?php echo $th ...

javascriptphphtmlcssbootstrap-4

Ensure that a distinct cross button is included within the text or search input and positioned to float alongside the text for

Is there a simple method to include a clear button that hovers after the text in an input field when using a search type input? <input type="search"> ...

htmlcss

Issues with custom logo and menu/sidebar toggle on Wordpress

Hello everyone, I am currently facing some difficulties with my new WordPress blog that utilizes the Skilt-Theme. Specifically, I'm having trouble with the custom-logo and sidebar-toggle features. When there is no logo present, you can see the layout ...

csswordpressheadergraphical-logo

Override CSS properties / prevent inheritance

I'm currently facing a challenge in Wordpress where I need to insert a link quickly, but there are intricate styles applied to all the anchor links within a specific section. Here is a snippet of the CSS selector and styles being used: div.content-ro ...

htmlcss

fluid columns gliding from side to side

I'm currently working with Bootstrap to design responsive columns. My goal is to have the next column of content slide in from either the left or right side when the user clicks on the respective arrow button. While I have found solutions for fixed w ...

jquerycsstwitter-bootstrap

How come my div isn't updating its color in Internet Explorer?

Having trouble with the following scenario in IE. Styles: .tabmenu { background-color: #990000; display: inline-block; width: 150px; position: relative; left: 59%; border-top-left-radius: 10em; margin-bottom: -8px; min-wi ...

javascriptjquerycsshtmlinternet-explorer

Inheritance in SASS - excluding the parent class

Can I apply this syntax to inherit a class in SASS? Code .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } Output .message, .success, .error, .warning { border: 1px solid # ...

cssinheritancesass

Adjust HTML table cell height to dynamically match content and align to top

I am currently working on creating a table layout where the left column adjusts its height based on content, while the right column needs to have a fixed height of 300. <table border="1" cellspacing="0" cellpadding="0"> <tr> <td>&a ...

htmlcsshtml-tablecss-tablesstyling

Is it feasible to modify the direction of the bootstrap classes?

I'm currently utilizing Bootstrap 4 library for managing spacing (margins & paddings) on a static website by using bootstrap classes. For example: <p class="mr-3">Lorem ...</p> Now, what if I need to switch the HTML direction from ltr ...

javascripthtmlcsssassbootstrap-4

The issue encountered when trying to load Javascript through PHP

As a beginner, please be patient with me. I am attempting to dynamically load this JavaScript easy slider into a div on my index page using the following code ... switch($_GET['page']) { case '#YELLOW' : $page = ' <div id ...

phpjavascriptcssajax

The CSS zigzag border functionality seems to be malfunctioning on Internet Explorer

On my clients website, I decided to use a zigzag css border instead of an image for speed purposes. I wanted to have different colors and variations, but I encountered a problem. While my version displayed correctly on Chrome and Firefox using Windows, it ...

cssinternet-explorer

Text within the div element causes the displacement of other adjacent div elements

When the text in mondaySpecial extends to a second line, it pushes tuesdaySpecial-saturdaySpecial further down on the page, disrupting the layout of the divs. The same issue occurs with other specials as well. Is there a way to prevent this from happening? ...

htmlcss

How can CSS be used to prevent line breaks between elements in a web page?

div#banner>img { float: left; background-color: #4b634b; height: 265px; width: 80%; } ul { float: left; background-color: #769976; width: 162px; } <body> <div id="wrapper"> <header> <nav> <ul ...

csshtml

Attempting to design a customized tooltip for an SVG element embedded within the HTML code

Recently, I've delved into Js with the goal of creating an interactive pronunciation guide using inline svg. If you're curious to see what I've done so far, check it out here. My current focus is on incorporating basic styled tooltips that ...

javascriptcsssvghovertooltip

Create styles for each component based on their specific props when designing a customized Material-UI theme

I am having trouble styling the notchedOutline of a disabled <OutlinedInput /> in my custom MUI theme. My goal is to make the border color lighter than the default color when the input is disabled. Here is what I have attempted so far: const theme = ...

javascriptcssreactjsmaterial-ui

Tips for enlarging an image element without causing the header to expand

I'm looking to enhance a logo image within a header element by expanding it on hover or creating a pulse effect. I thought of increasing the max-width and adding a transition for simplicity. However, my main concern is how to make only the img element ...

htmlcssbootstrap-4

HTML: Understanding relative pathsIn this guide, we will

Is there a way to link from thispage.html to thatpage.css using a relative path? public_html ├── folder1 | |__subfolder | |__thatpage.css ├── folder2 │ |__subfolder | |__thispage.html I attempted the follo ...

htmlcss

HTML: Align DIV contents next to each other without any overlap

Below are three boxes displayed. Boxes 1 and 3 appear fine, but in box 2 the text content is overlapping. The issue lies with the <div> having the class .vertical_center.grade_info which has a specific margin-left of 100px, causing the overlap. I ne ...

htmlcssuser-interface

Is there a log for keeping track of any CSS errors that occur

When a style is overridden in Google Chrome tools, it gets crossed out and you can check the Computed tab to see which element has taken precedence. Imagine I have CSS code like this: .myClass { position: static; top: 20px; } This is incorrect be ...

css