Drupal Theming
more_horiz
close

on 10th April 2018 / by jithin.prabhakaran
Patternlab is a dynamic organizational and prototyping tool for Drupal theming. By theming with pattern lab, your custom theme allows us to manage and build components in accordance with the required workflow using atomic design concepts1. Using Pattern Lab for Drupal 8 Theming Instead of rendering default Drupal templates, we can introduce pattern lab to include twig files using atomic concepts. It allows us to include external twig files by overriding the specific templates. Steps for Installing Pattern Lab Install Node and NPM versions using NVM Initially we need to get the software packages from our Ubuntu repositories that will allow us to build source packages. sudo apt-get update sudo apt-get install build-essential libssl-devOnce these packages are installed, we can download NVM installation scripts from project’s github page. curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh-o install_nvm.shNow inspect the installation script with nano nano install_nvm.shRun the script with bash bash install_nvm.shIt will install the software into a subdirectory of your home directory at ~/.nvm. It will also add the necessary lines to your ~/.profile file to use the file. To gain access to the nvm functionality, we have to run the following command: source ~/.profileNow we have installed NVM, our next step is to install isolated Node.js versions. To find out the available version you can type nvm ls-remoteIn the output window, we can see the latest version as v8.9.4.We can install that by typing nvm install 8.9.4Usually NVM will be switched to latest installed version or you can tell NVM to use the just downloaded version by typing nvm use 8.9.4The current version of Node can be checked by running the code node -vIf you have multiplied Node-js version, you can see what is installed by typing nvm lsIf you wish to set one of the version as default, you can type nvm alias default Create Custom Theme (my_theme) NOTE: It is recommended to refer Emulsify (serves as a starter kit for Drupal 8 theme) for getting the exact folder structure and architecture of the Drupal 8 theme. Emulsify Drupal 8 It is necessary to include the JS, CSS and the fonts of the dist folder into the libraries file in the custom theme. NPM Install Output: NPM- Start Output: When NPM start is completed, node packages will be installed to the custom theme and compiles the SASS files to CSS and JS added in the patterns, which is required for the generation of theme will be saved in the dist folder. Get in touch with us for your Drupal 8 Theming requirements! References: 1. Atomic Web Design by Brad Frost Pattern Lab Drupal 8 Drupal Theming Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 09th July 2015 / by fazeela.ma
Drupal provides a handy of global variables. Thanks for the tiring efforts. You might know about the interfaces in drupal, it has a use interface and an admin interface. Suppose we are using bartik as our user theme and seven for admin interface. My requirement was a bit quirky. In the admin configuration, I have to get the path of user theme. First thing came into my mind was the global variables. And it was, global $theme_path But the output of the variable was a bit surprising, I thought it would return bartik, but it was returning 'themes/seven'. As code executes only in the admin side, the variable was returning the path of the active theme on the admin side. I have played with many other global variables related to theme, but all has to offer something related to seven theme. So what next? Isn't there any clue that would point to bartik. Yes, there is. Drupal provides an ample number of variable's for this purpose. One of the variables that would get through our requirement is, variable_get('theme_default'); This will return the current and active theme. If we changes the theme on user side, it is going to give the theme to which the it has been switched. To get the path of the theme, you might know, drupal_get_path $active_theme = variable_get('theme_default'); $active_theme_path = drupal_get_path('theme', $active_theme); Now the variable $active_theme_path has the path to the bartik theme. There are pretty much variables are set by the drupal maintainers and builders to make the platform more handy and tolerable. Drupal Drupal 7 Drupal Theming Leave a reply Your email address will not be published. Required fields are marker *
close

on 20th March 2015 / by aby.va
Responsive web design is a new technique for building websites that work on tablets, desktop screens and mobile devices. websites were typically designed for desktop and laptop screen resolutions. This worked well until the advent of web supported tablets and smart phones. Responsive Web Design is a new concept which leads to design an application or website in such a way that the same design can be rendered in various devices of different orientations and screen sizes providing the users with the super possible user experience, if not similar. Responsive themeing involves three main principles that come together to form the whole that is responsive design. Fluid Grids Fluid Images Media Queries 1.Fluid Grids Normally, websites have been defined in terms of pixels. For find the transition to using percentages there’s a simple math formula that looks like this: target / context = result From this, we can say that you have a website that has a wrapper containing the site to a width of 960 pixels, and you’re looking at this site in a maximized browser window on a screen that’s 1920 pixels wide. 960px / 1920px = 50% 2.Fluid Images There is many advances in responsive images , but the main idea is that images should be able to shrink within the confines of a fluid grid. This is done very simply with a single line of CSS code: img { max-width: 100%; } 3.Media Queries Take original two column layout and try to shrink it down to a mobile phone, it’s a challenging one. Typically smartphones are used in the screen is taller than it is wide like portrait mode. This tends itself to websites that scroll vertically, but it is not good for wide layouts with several columns. That’s where media queries come in. Media queries are a CSS technology that have been available in browsers for several years now, and they’re a core component of responsive design. Media queries allow CSS to only be applied when specific conditions are met. The trick of responsive design is CSS3 media query. It is same as if conditions to tell the browser how to render the page for specified viewport width. For example, If the browser reaches a specific width and write a media query that will only applies CSS. That means that when a design is too small or too large , a media query used for detect the site width and serve CSS that appropriately Correct the site’s content. @media screen and (min-width: 600px) { /* ...tablet styles here... */ } @media screen and (min-width: 900px) { /* ...desktop styles here... */ } The main purpose of the media queries of for specified viewport width is to apply different CSS rules to achieve different layouts. The media queries can be in a separate file or in the same stylesheet. Reference:drupal.org/project/media_responsive_theme Responsive Design Drupal Theming Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 10th February 2015 / by rohith.pv
This is an article about how you can create a custom color switching theme with the help of Drupal 7 color module. Color module is a Drupal core module comes with Drupal and you can use this module to colorize your theme. Garland is a Drupal theme which uses color module to colorize its various content. If you want to know more about how to create a colorized theme by using Drupal 7 color module read on. Before you start using the color module, you need to create a custom theme for your Drupal installation. After you create a custom theme follow the steps. Create a directory called "color" inside your custom theme directory. Create a file called color.inc inside your color directory. Add an image file called base.png. Drupal color module requires this file so we have to create one. You can use this link to create a base.png file. Next create a CSS file, which you can create inside your theme/color directories. Only thing you have to specify is the correct path in .info file, because all color styles will be in a separate file. Now you can start editing your color.inc file. In color.inc file you have to specify an array with some settings. This array contains all settings that you want to give to color module. Creating a color.inc file. First thing you have to write is items and labels. For example see the code below. <?php $info = array(); $info['fields'] = array( 'bg' => t('Background'), 'text' => t('Text'), 'titles' => t('Titles'), );Next thing you have to do is to define color schemes for the theme. You can use the above array to create a color scheme. Here you have to give color code for each color so that color module will replace color from our CSS. One more thing here you have to use lowercase letters for colors otherwise color module get the color you specify. Here you can create as many schemes you want and you can separate them with names. Now I will show you how to create color schemes. You can add this code in the same color.inc file $info['schemes'] = array( 'default' => array( 'title' => t('Default'), 'colors' => array( 'bg' => '#ffffff', 'text' => '#777777', 'titles' => '#333333', ), ), 'orange' => array( 'title' => t('Orange'), 'colors' => array( 'bg' => '#008CFF', 'text' => '#ffffff', 'titles' => '#ffffff', ), ), ); Now you have to tell which style sheet you are going to use. You have to create a CSS file called colors.css inside your theme directory. Once you specify this file inside your color.inc, this file will be called by Drupal color module. $info['css'] = array( 'colors.css', ); You must also define this style sheet in your theme.info file. So add stylesheets[all][] = colors.cssNow lets look into CSS styles. Here I am going to show you only a few color changes in body and titles. In colors.css you have to specify the colors those we already defined in "default" scheme. See a sample colors.css below. body { background-color: #ffffff; color: #777777; } h1, h2 { color: #333333; } Next you have to alter some function which is specified in Drupal color module. For this use the following code in your theme template.php file. function YOURTHEME_process_html(&$variables) { if (module_exists('color')) { _color_html_alter($variables); } } function YOURTHEME_process_page(&$variables, $hook) { if (module_exists('color')) { _color_page_alter($variables); } }Replace "YOURTHEME" with name of your theme. Now you are created a color.inc file but there are some other advanced settings you can write. But now I am not going to write all that because it cannot be covered in this small article. Now clear your Drupal cache and enable color module if you have not. After enabling your custom theme, go to your theme settings page and there you can see colorizing options for your theme. just play with the color picker and choose a nice color combination. If you have some error related to preview just clear the Drupal cache. That's it! you are created a theme with colorizing settings and you can change your site heading/background color whenever you like :) Drupal Drupal Theming Drupal 7 Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 20th January 2015 / by tintu.manuel
In Drupal themes, the Typography styles are important. We know that there are many classes and different tags are generating while making a Drupal theme. And it will display with the default Drupal CSS styles. Sometimes it wont be matching with our design. So its necessery to make a CSS Typography for those tags/classes. Here am explaing to override the the default Drupal styles with the Typography styles. The main Typography elements are shown below. To check the Typography, make a new page and add these tags in to your page and check how it display. You can make the css for the elements in the stylesheet. This is a Heading 1 This is a Heading 1 title class This is a Heading 2 This is a Heading 2 Block title This is a linked Heading 2 title class This is a Heading 3 This is a Heading 4 This is a Heading 5 This is a Heading 6 Drupal's messages Sample help message. Modules are plugins that extend Drupal's core functionality. Enable modules by selecting the Enabled checkboxes below and clicking the Save configuration button. Once a module is enabled, new permissions may be available. Sample status message. Page Typography has been updated. Sample error message. There is a security update available for your version of Drupal. To ensure the security of your server, you should update immediately! See the available updates page for more information. Sample warning message. There are updates available for one or more of your modules or themes. To ensure the proper functioning of your site, you should update as soon as possible. See the available updates page for more information. Code tags #header h1 a { display: block; height: 80px; width: 300px; } Strong Text This is a test of strong text so it should appear bold. Italic Text This is a test of italic text so it should appear in italics. Blockquote Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Paragraph With Links Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Ordered List This is a sample Ordered List. Lorem ipsum dolor sit amet consectetuer. Condimentum quis. Congue Quisque augue elit dolor. Something goes here. And another here Then one more Congue Quisque augue elit dolor nibh. Unordered List This is a sample Unordered List. Condimentum quis. Congue Quisque augue elit dolor. Something goes here. And another here Something here as well Something here as well Something here as well Then one more Nunc cursus sem et pretium sapien eget. Fieldset Account information Form elements Text field label: * This is the description for the form element above. Text area: * Label for a checkbox. Table Forum Topics Posts Last post Row 1 News and announcements For news and announcements to the Drupal community at large. 1763 18 new 18926 8 hours 19 min agoby Chris Charlton Row 2 General discussion For less technical discussions about the Drupal project. Not for support questions! 25704 292 new 98651 5 min 9 sec agoby polluxmr2 Row 3 Drupal showcase Showcase your site to others, maybe share a little about it - modules, theme, why you used Drupal. 4660 52 new 22819 9 hours 20 min agoby Thomasr976 Row 4 Events For events, conferences and other Drupal happenings. 337 1 new 1554 3 weeks 13 hours agoby greggles These are the Typography for the main elements in Drupal. By styling these elements appropreate to the design, we can save the bug fixing time and we can make theme clean and unique look. Drupal Drupal Theming Typography Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 11th December 2014 / by rohith.pv
Theming with Drupal is extremely simple. You can build a simple theme from scratch. When you are developing a new theme, you have to follow certain methods i.e. creating a .info file and template files. If you want to create a custom Drupal 7 theme for your site, read the following tips. Let us see how to create a basic Drupal 7 theme. Read Drupal.org to learn more about theming. Create a new directory inside Drupal sites/all/themes and rename it as YOURTHEME. This is nothing but your theme name. Inside this directory, create .info and other files. Creating .info file This file is important for any theme you create. You must name this file as YOURTHEME.info. This file tells Drupal the name of your theme. Also, if you are using style sheets or JavaScript, you must define them in this file. You can also define many other properties like region same file. However, these are optional . A sample .info file. name = YOURTHEME core = 7.x description = A simple theme with three column layout. regions[header] = 'Header' stylesheets[all][] = css/main.css scripts[] = js/script.js The region you create will have a machine name and a human readable name. This region name will appear in the block settings if you want to assign blocks in a region. Creating .tpl.php files For your theme, you can create many .tpl.php files, which contain php variables and XHTML for your theme. Create a directory inside your theme directory and rename it to "templates". Inside the templates directory, you can start with page.tpl.php and node.tpl.php Creating a page.tpl.php In this file, you can create a custom design for all your Drupal pages. Create an html page with div's. You can give id's and classes for each div's. Next is rendering regions with variable. For example, you can render a region with <?php print render($page['header']); ?>Here the region name should match with the machine name that you have specified in .info file. In my example, "header" is the name of region. You can also theme specific pages for your site. For example, for front page, you can create a file with name "page--front.tpl.php" Like you create page.tpl.php, you can also create a node.tpl.php but here you are going to theme all the node inside your Drupal site. So, you can start a div with node id. For example <div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>> /*-----theme your node here--------*/ </div>You can use node variables to theme any node with node.tpl.php file. To theme a specific node, you can create another file with its name. For example, blogs can be themed with "node--blog.tpl.php" file. Create a style sheet and script files for your theme. With CSS, you can style your theme with colors and images. You can also create a file called template.php inside your theme directory. In this file, you can override theme functions to fit according to your theme. You can read more about creating a template.php here. If you do this much, a basic theme is ready for your site. You can style your theme with CSS, tpl.php files and JS files. I hope you found this article helpful. So what are you waiting for? Start building your own theme! Thanks. :) Drupal Drupal Theming Drupal 7 Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 12th May 2014 / by rohith.pv
Fusion is a base theme, with different layout and Drupal UI configuration. This theme includes a "starter" subtheme for CSS theming. If you are also looking to start a subtheme using fusion base theme, continue reading... Creating your fusion subtheme. Download the fusion theme, copy the fusion_starter folder and rename to any name you like. Look for .info file inside the same folder and rename to same name you just given to the folder. Open the .info file and here you can give theme name and description. So that you can easily find your theme in theme list. Now in the same .info file look for stylesheets[all][] = css/fusion-starter-style.css and replace the "fusion-starter" part with your theme's name Also rename the fusion-starter-style.css file in the css/ folder to match. Enable your theme in admin/appearance You can also add template files to your subtheme. If you are not creating any template files it inherits the template files from Fusion core. Now make changes in css and configuration to create a better theme. Drupal Drupal Theming Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 20th March 2014 / by jiby.john
If you are a web developer then in some point of time some client may have asked you to develop sites one for desktop and one for mobile, (probably in iPhone) with almost same contents. If you meet that client again after 2 or 3 years he will ask you to develop more than 5 sites to view it in different popular devices. I don't think it is a good solution to have bespoke designs for each device, since our device landscape is rapidly progressing. So we developers should start thinking radically to meet with this issue. Its high time to move toward a future friendly web. A future web where nobody is really not interested in window width,resolution, devices portrait and landscape modes.Yes i am talking about Responsive web design. Since I am now exclusively dealing with Drupal, my search for a responsive theme ended at Omega.Responsiveness was the main feature that attracted me to omega, but later I found that Omega had got some really cool staff beyond responsiveness, that make Drupal theming more easy. As the theme contributor Jake Strawn says Omega is is a highly configurable HTML5/960 grid base theme that is 100% configurable.If you are the one who always searches for the shortest path to do somthing with out compromising to quality, then omega is the best choice.It helps you to write less and do more. Theming using Omega is different from normal drupal theming.The main difference is that it contains Section, Zones, Regions instead of only 'Regions' that make it highly configurable.Omega is more powerfull when you use following modules along with it Omega Tools, Delta and Context. Configuring Omega. Lets assume you had installed and enabled above mentioned modules.Then Install and enable Omega theme, ohoo I forgot to say Omega is a base theme, so never set it as your default theme.Instead create a subtheme of Omega. The Omega Tools module will help you to create a sub theme of Omega. Omega is coming with two starterkits. Select your required one, finish your setup and download or install the subtheme directly.Now make this subtheme as your default theme. The most important feature of Omega theme is its large number of setting to customize it.So lets look into the Settings of Omega theme. In the Grid settings we can choose between 960gs or fluid system. Also we have the right to enable or disable responsive feature of the theme. If you had enabled the responsive feature, then Omega gives you 3 layouts ie, Narrow, Normal, Wide.This layouts help to make omega responsive.There are corresponding css files which loads for each layout.You can find the default media queries for each layout which determines when to load the css files.The basic css loading format is like this 0px to 740px wide - global.css 741px to 979px wide - global.css + default.css + narrow.css 980px to 1219px wide - global.css + default.css + normal.css 1220px and wider - global.css + default.css + wide.cssOne more thing I forgot to say Omega is developed according to the “Mobile first approach”. Thats why global.css is loaded in all layouts. The Zone and Region configuration helps us customize the layout of the theme.Almost everything in our theme is configurable through this setting. As I already told you Omega has got Sections, Zones, Regions. Sections contains zones and zones contains regions There are 3 sections in Omega theme; Header, Content, Footer. shows the default zones of Omega theme.It also possible to add our own zones and regions to Omega.It is done with the help of the .info file. Just add the following code to anywhere in info file and flush the cache and see the zones loaded to settings pages.Same with Regions. zones[zone_name] = 'Zone Name' regions[region_name] = 'Region Name'You can add or remove any number of zones to any section.Same with Regions; ie any number of regions can be added to zones. Then the question may be how you can style each zone and region; the answer is also simple, with the help of .tpl files.Suppose we want to style the User zone in header section, then just create zone—user.tpl.php in your templates folder. And add your styles, the contents in that zone is available in the variable $content. Same with Regions just replace zone with region, interesting isn't it? What to do if you need some regions disabled or added in some specific pages like Home page, contact page etc.Here comes the use of Delta and Context Module. We can add template in the Delta module and configure it.The configuration helps to customize our Omega settings to that context only.So you can remove or add regions or zones in this template that will reflect in that template only. Then you have to use the Context module where to use this template based on the context condition. Delta will be available in the reaction section of context. By this way we can have customized design in different pages with little effort.Sounds great? So in my experience Omega is Fluid, Responsive and Highly Configurable.One thing you have to remember is that Omega only supplies the base requirements for the design to be Responsive and Fluid.It will not be fully Responsive and Fluid until you don't know how to make fluid grids and flexible images in your custom CSS. Anyway Omega is the best base theme choice for the future-oriented web design. Drupal Drupal Theming Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 05th March 2014 / by tintu.manuel
Drupal is an extremely flexible framework that you can manipulate in multiple ways. In Drupal, the theming is the final phase in the process of generation of dynamic web pages. It converts the data from PHP objects and arrays into HTML markup and CSS styles. Read on to know how to convert a PSD/HTML design to a standard Drupal theme This is the HTML design we are going to convert to a Drupal theme using 960 grid system To convert this template to a Drupal theme we have to create a .info file which will include all the styles, JS and regions of the theme and the page.tpl.php file for the pages of the template and page--front.tpl.php for the front page of the template. There are two options to enable the 960 grid system in our theme: 1, Download the 960 basetheme from http://drupal.org/project/ninesixty and add it as basetheme in .info file, also make sure to enable it in Drupal. 2, In the second option, there is no need to to add 'ninesixty' as the basetheme. You just have to copy the css files and add the css links in .info file. This option would be more comfortable, since there is no need of downloading and enabling any theme as basetheme. Here is a sample info file name = Business blog description = A flexible, recolorable theme with many regions. screenshot = screenshot.png package = Core core = 7.x base theme = ninesixty regions[header] = Header regions[primarynav] = Primarynav regions[search] = Search regions[featured-thumbs] = Featured-thumbs regions[footer] = Footer regions[copyright] = Copyright ...Then we have to add the regions of the sections. You can see that we have added six regions for my theme. We can add different blocks/contents to these regions. After specifying the regions we can start to make the tpl files for our Drupal theme. If you need a customized index page we have to create page--front.tpl.php and for all the pages we have to create a single page.tpl.php. We can also design specifically for each section in the page.The description is shown below. These are the .tpl files handles different sections of the theme. page.tpl.php – Common for all page front-page.tpl.php – Only for front page block.tpl.php - Blocks of the pages comment.tpl.php - Comments forum.tpl.php – Forums Pages page-node-edit.tpl.php page-node.tpl.php page.tpl.php Boxes box.tpl.php Nodes node-type.tpl.php node.tpl.php Comments comment.tpl.php comment-wrapper.tpl.php Blocks block-module-delta.tpl.php block-module.tpl.php block-region.tpl.php block.tpl.php The Drupal theme directory path is sites/all/themes/themename. Notes Definitions, including regions and style sheet file names are placed into a .info file. The logic and "decision making" are placed into a template.php file. HTML markup is placed into template files ending with .tpl.php extension. Styles are placed into Cascading Style Sheet files. STEP-I In the page--front.tpl.php we add the same HTML and CSS but without the contents or menu. We can add that in Drupal. We have to <?php print render($page['content']); ?&gt add this code where we want to print the required content and we have to use the PHP if condition, if you want to enable or disable the content. Have a look at the code. <?php if ($page ['content']): ?> <?php print render($page['content']); ?> <?php endif; ?>To make this header section we have to print the logo and login section on top. So the code for logo will is as folows, <?php if ($site_name): ?> <a href="<?php print check_url($front_page); ?>" title="<?php print t('Home'); ?>"> <img src="<?php print $logo; ?>" alt="<?php print $site_name; ?>" /> </a> <?php endif; ?> and the login area in a specified area as shown below. So the login region will be printed inside the nested class called 'grid-8' <?php if ($page ['login']): ?> <?php print render($page['login']); ?> <?php endif; ?>STEP-II The primary navigation and search regions are nested in grid-12. <div class="grid-12 main_nav"> <?php if ($page ['primarynav']): ?> <?php print render($page['primarynav']); ?> <?php endif; ?> </div>The search region code look will like this, <div class="grid-12 main_nav"> <?php if ($page ['search']): ?> <div class="grid-5"> <?php print render($page['search']); ?> </div> <?php endif; ?> </div> STEP-III To theme this area we have a region called featured-thumbs. We can add four blocks and images in this region <div class="grid-12 alpha omega"> <?php if ($page ['featured-thumbs']): ?> <?php print render($page['featured-thumbs']); ?> <?php endif; ?> </div>STEP-IV We can see six articles in the above section. We have a content region to place these articles. Now we have to modify the styles to get the articles aligned similar to the theme. For example: <?php if ($page ['content']): ?> <?php print render($page['content']); ?> <?php endif; ?> STEP-V Finally, we have a footer section. In the footer section we have 2 regions. That is the footer region and copyright region. In the footer region we can add three blocks like the design. To get a styled form inputs like the design, you have to style the footer section form inputs. <div class="grid-12 footer_top"> <?php if ($page ['footer']): ?> <?php print render($page['footer']); ?> <?php endif; ?> <?php if ($page ['copyright']): ?> <?php print render($page['copyright']); ?> <?php endif; ?> </div>When developing your page design and layout in Drupal you may choose to start with a downloaded Drupal theme in the beginning. You can get Free Drupal themes from site. http://freedrupalthemes.net/ If you are new to Drupal, the easiest approach is to start with a Drupal theme and customize it as needed. Drupal Theming Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 07th October 2013 / by binny.thomas
One of our Drupal clients wanted to us to enable members of her site to bookmark their favorite nodes. We went to work immediately as we knew that this task could be accomplished by the Drupal Flag module. The flag module did enable us to implement that feature easily. Nevertheless we needed to add text near to the flag button/link on a specific node without affecting its display in a view. Read on to know how to dd text to a flag in a node when working with the Drupal Flag module. We reviewed the documentation of the Drupal Flag module and it provided us with a mine of information. Here is what we found out. To modify the display of the flags supplied by the Flag module we need two things. 1. The Flag template file & 2. Flag preprocess hook The Flag template can be obtained from within the flag module. sits/all/modules/flag/theme/flag.tpl.phpTo make it work you need to copy and paste this template file into your theme file along with the rest of the template files. Remember to clear the cache after you do so so that Drupal recognizes the new template file. Editing the template file is sufficient but it is not a good coding practice and there is a better way with its corresponding hook. The hook in question is hook_preprocess_flag()I am listing out the code level implementation of the hook. It is a very simple hook. All the information you need is in the template variable - $vars. In the example below I have set the link text for a flagged as well as unflagged node. /** * Implements hook_preprocess_flag() */ function MYTHEME_theme_preprocess_flag(&$vars) { // Adding text to the flag specific to a node if (arg(0) == 'node' && is_numeric(arg(1))) { // We need to check if the node is already in the favorites list if ($vars['status'] == 'flagged') { $vars['link_text'] = "Click on the star to remove this node from your personal list of Favorites"; } else { $vars['link_text'] = "Click on the star to add this node to your personal list of Favorites"; } } }This system can be used for theming the flag and not limited to adding text. Reuse it as required by replacing the MYTHEME with your own theme. Hope we were able to help you out if you were facing an issue with the flag module. If you have any questions regarding any Drupal specific issues then feel free to get in touch with us. Drupal Drupal Theming Drupal 7 Leave a reply Your email address will not be published. Required fields are marker *