Drupal Technical

[Drupal] How to add social media icons in responsive theme?

Uttam.kotekar | | 1 min read

In this section we are going to add social media icons to the responsive theme in Drupal. Before starting we need to upload and install any responsive theme(I used CoperateClean theme of Drupal). We will implement this social media icons by creating a block in Drupal and then setting up the cascading style for that block. Below are the simple steps to add a social media icons:

Step1: Create a block

In Drupal block configuration, add a new block with body as ul and li tags of social icons image wrapped with anchor tag. Below is code to be written in body. Set the body page to FULL HTML and set region to the search region. Remember to change the URLs in the anchor tags to point to your social media profiles.

<ul>
  <li><a href="http://www.facebook.com/?"><img src="sites/all/themes/corporateclean/images/social-media-facebook.png" alt = "facebook"/></a></li>
  <li><a href="http://www.linkedin.com"><img src="sites/all/themes/corporateclean/images/social-media-linkedin.png" alt = "linkedin" ></a></li>
  <li><a href="https://twitter.com/"><img src="sites/all/themes/corporateclean/images/social-media-twitter.png" alt = "twitter" ></a></li>
</ul>

This will create a added block with social media icons.

Step2: Styling the block

Below is the css code for styling the social media icons to the top right area(style.css). The classes must be modified to suit the names of the classes of the regions in your header in your theme.

#header-inside-right .region-search-area {
  float : right;
} 

#block-block-1 li {
  float : left;
  list-style : none;
  padding-left : 5px;
}

The above code will do styling the social media block. Now you'll find your social media icons in the top right corner.

 

 

Related Topics