Include a hyperlink beside the title of a section

drupal block heading

I want to include a clickable link beside the header of this block that directs users to more news.

Initially, I tried using CSS pseudo ::after to append text and a logo. However, I encountered difficulty in adding a clickable link to the inserted text. Should I utilize CSS to add a link or resort to JavaScript for this functionality?

Answer №1

To achieve this, you can create a block template. Here is an example using D9/twig:

{% if label %}
  <h2{{ title_attributes.addClass('block--title') }}>{{ label }}</h2> <a href="#">More news </a>
{% endif %}

If you require assistance, enable template suggestions to help locate the appropriate block suggestion.

For those still utilizing D7, simply modify the block template as shown below:

 <div<?php print $attributes; ?>>  
      <div class="block-inner clearfix">
        <?php print render($title_prefix); ?>
        <?php if ($block->subject): ?>
          <h2<?php print $title_attributes; ?>><?php print $block->subject; ?></h2> 
<a href="#">More news </a>
        <?php endif; ?>
        <?php print render($title_suffix); ?>
        
        <div<?php print $content_attributes; ?>><?php print $content ?></div>
      </div>
    </div>

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

Developing a website that utilizes Node.js for browser-based RSS scraping

Although I have some experience with coding, I am fairly new to Javascript and web development. Currently, I'm working on creating a webpage that centers around scraping an RSS feed from the National Weather Service (for example, ) and parsing the in ...

Managing various swipe interactions using HTML and JavaScript/jQuery

I'm in the process of creating a mobile multiplayer game using HTML5 and Javascript. The jQuery Plugin "touchwipe" is utilized to manage swipe events in various divs like this: $('#play1').touchwipe({ wipeLeft: function(){ if ...

What is the best practice for naming variables in JavaScript?

Currently, my API is built using PHP Laravel and MySQL, which uses snake_case for field names. I am considering using the same naming convention in client-side JavaScript to make it easier to transfer field names from PHP code to JavaScript code and when m ...

Commitments do not come with a collections feature

Struggling to implement the collection method, it seems that I can't directly use db.collection as db is calling connectDB, which returns conn, my mongoURI, as a promise. How can I modify this setup to effectively utilize the collection method and sen ...

Troubleshooting deployment problems in Heroku

Having trouble pushing my application to Heroku. I'm encountering error code h10 and can't seem to resolve it. Could the issue be related to the bcrypt library not being compatible with node 0.12.0? 2015-04-01T02:27:39.716767+00:00 app[web.1]: ...

Fast method or tool for generating a detailed CSS element list from deeply nested elements

I have been using Chrome dev tools to work on a code base that was not created by me. There are numerous deeply nested elements scattered throughout the code. I find myself having to manually search through the HTML structure in order to select them with ...

Add the Bootstrap CSS to the <head> section using Wicket

Currently, I am utilizing Wicket to generate the HTML content of an email. Although I prefer using Bootstrap for styling, I encounter issues since link tags are disregarded in emails... I am wondering if there is a convenient method in Wicket to import the ...

having difficulty configuring gwt-button's corners to be rounded

Hey there, I'm having an issue with a button in my GUI that I created using GWT. I'm trying to round the corners of the button, but using border-radius doesn't seem to have any effect on its appearance. The style sheet I'm using is "co ...

Changing the close button icon in highslide popups

Utilizing highslide together with highcharts, I need to customize the functionality of the close button. Specifically, I want to trigger an additional function when a user clicks on the "X" button. Upon inspecting the "X" button, this is what appears in m ...

At the Beginning of the Show Event

Currently, I am utilizing the jQuery UI tabs widget with show and hide animations by setting it up in the following way: $(".tabs").tabs({ show: {effect:"fade", duration:500}, hide: {effect:"fade", duration:500} }) I'm wondering if it's ...

Error: Attempting to access the text content of a null object

I recently followed a tutorial on text reveal animation and attempted to implement it in Next.Js. Unfortunately, I encountered an error message stating "TypeError: Cannot read properties of null (reading 'textContent')". Here is the video tutori ...

Implementing Keycloak Policies to Secure a Node.js API

Hello everyone, this is my first time reaching out for help here so please bear with me if I miss out on any important information or make some mistakes. Apologies in advance for the lengthy text. Summary of My Objective (I might have misunderstood some ...

Swapping out the Close Icon for a Button in Modal Box

Currently, I am utilizing JQuery UI to launch a Modal Window. The existing setup features an X Icon on the right side of the header titlebar for closing the Modal Window. However, I am interested in replacing this X icon with a labeled Button that says C ...

Rendering a dynamic list of asynchronous components in Vue 3, with support for extension

Could you please assist me in resolving this issue? I've spent countless hours searching for a solution, but I can't seem to make it work. Vue is still very new to me. Let me provide some more context. I have an asynchronous component that i ...

Utilizing fullpage.js for seamless class addition and removal on the top portion of a webpage

I've encountered an issue with fullpage.js (https://github.com/alvarotrigo/fullPage.js/) on my website http://vatuvara.com/. Essentially, I am trying to add a class of 'black-nav' to #masthead if the visitor is not in the first section of t ...

Tips for dynamically adding table columns and rows while ensuring the proper number of cells each time

I am currently working on dynamically adding rows and columns to a table using jQuery. My research has led me to successfully add columns with the correct number of rows and remove entire rows. However, I am facing a challenge in adding a row with the corr ...

What is the best method for displaying a radio button as selected based on a variable value?

I have a variable that stores the value of a radio button. After checking certain conditions, I want to dynamically select the radio button based on this value. if(cheque_date == system_date) { cheque_value='Current'; } else { cheque_value ...

Testing a promise with Jasmine unit testing through mocking

I'm struggling with testing my promise unit test. An assertion "expect(scope.test).toBe(12);" has been added to the promise then block in my code. Here is the snippet of code I am attempting to test: $scope.getBudgets = function(){ BudgetServic ...

Having trouble with the Form Submit functionality in Javascript and PHP, need some assistance. Can

I've been struggling to get my form working properly. Could someone please take a look and help me understand why nothing happens when I try it in a live environment? I was able to submit the form by using the "action" attribute in the form tag, with ...

Is there a way to swap out the original text with the ajax response text?

Upon receiving the ajax response, it replaces the initial text if the checkbox is ticked. How can I achieve the opposite? Revert back to the original text when the user unticks the checkbox? $.ajax({ type: 'POST', url: 'index.php?r=re ...