Bootstrap
more_horiz
close

on 17th December 2018 / by akhila.vn
I had a requirement to add a multi-level responsive drop down menu in a Zyxware theme. Please do refer the below reference links to know more about responsive themes and free Drupal themes. So for that I had to edit page.tpl.php, page--front.tpl.php, style.css, template.php etc. First I added the following code to template.php of my theme. The steps that I followed here are, Added the following code to the function themename__preprocess_page(&$vars) to make the menu as a tree. //Setting menu in a tree structure $main_menu_tree = menu_tree(variable_get('menu_main_links_source', 'main-menu')); $vars['main_menu'] = $main_menu_tree; // Get the entire main menu tree $main_menu_tree = menu_tree_all_data('main-menu'); // Add the rendered output to the $main_menu_expanded variable $vars['main_menu_expanded'] = menu_tree_output($main_menu_tree); Added css class to main menu using the function, function themename_menu_tree__main_menu(&$vars) { return '<ul class="nav navbar-nav">' . $vars['tree'] . '</ul>'; } Added css class to inner part of main menu using the function, function themename_menu_tree__main_menu_inner($vars) { return '<ul class="dropdown-menu">' . $vars['tree'] . '</ul>'; } Added the following function to display the links in main menu tree, function themename_menu_link__main_menu($vars) { $element = $vars['element']; $sub_menu = ''; if ($element['#below']) { foreach ($element['#below'] as $key => $val) { if (is_numeric($key)) { $element['#below'][$key]['#theme'] = 'menu_link__main_menu_inner'; // 2 level <li> } } $element['#below']['#theme_wrappers'][0] = 'menu_tree__main_menu_inner'; // 2 level <ul> $sub_menu = drupal_render($element['#below']); } $output = l($element['#title'], $element['#href'], $element['#localized_options']); $element['#localized_options']['attributes']['class'][] = " dropdown-toggle "; $element['#localized_options']['attributes']['role'][] = "menu"; $element['#localized_options']['attributes']['data-toggle'][] = "dropdown"; $element['#localized_options']['attributes']['aria-expanded'][] = "true"; $output = l($element['#title'], $element['#href'], $element['#localized_options']); return '<li class="dropdown">' . $output . $sub_menu . '</li>'; } Added the following code to make inner <li> tag - links function themename_menu_link__main_menu_inner($vars) { $element = $vars['element']; $sub_menu = ''; if ($element['#below']) { $sub_menu = drupal_render($element['#below']); } $output = l($element['#title'], $element['#href'], $element['#localized_options']); return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . '</li>\n'; } Then I added the code ' print render($main_menu); ' to the page.tpl and page--front.tpl for display menu with necessary <div> tag and css styles based on the theme that were downloaded from http://getbootstrap.com/components References : https://www.drupal.org/node/1178784 http://getbootstrap.com/components/ http://www.zymphonies.com/metro-responsive-theme Bootstrap Drupal Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 17th August 2015 / by aby.va
Now all themes are in responsive manner. Bootstrap is the one of the best responsive theme. Its the good starter theme for Drupal 7. It has a lots of specific styles for every designs and we can create a subtheme from Bootstrap theme. It also become a good responsive theme. Steps for create a bootstrap subtheme : Get Bootstrap Theme Download Drupal Bootstrap theme. Then download bootstrap and package extract/upload to your sites/all/themes in drupal 7. We need this to set up the subtheme. There is no need to activate the theme. Download/Enable jQuery Update module. Then extract/upload JQuery Update module to your sites/all/modules. Set the “Default jQuery Version” to 1.9 in current subtheme settings.(jQuery Version” 1.9 or above is supported for bootstrap subtheme). And now set “Alternate jQuery version” to 1.5 in current subtheme settings. (This prevents issues with AJAX heavy modules like Views) Create the subtheme directory and copy files Create a folder for subtheme inside of sites/all/themes. For example, we will call subtheme sample_subtheme, so we should have an empty directory at sites/all/themes/sample_subtheme. Copy all the files to sites/all/themes/sample_subtheme from sites/all/themes/bootstrap/bootstrap_subtheme Configure .info file for new subtheme sample_subtheme. Rename bootstrap_subtheme.info.starterkit to sample_subtheme.info. Remember to replace “sample_subtheme” with the name of new subtheme. Edit sample_subtheme.info with give it a unique name and description: name = Sample bootstrap subtheme description = A Bootstrap Sub-theme for project core = 7.x base theme = bootstrap Uncomment scripts files includes from sample_subtheme.info and include our new custom CSS and JS files for project into sample_subtheme.info After the edit of sample_subtheme.info file add our custom CSS and JS folders in to the sample_subtheme folder. Then create a fresh bootstrap subtheme in your own way. Want to read more about Bootstrap, use this link. Do you want to theme you site, why are you waiting, get a quote now. Drupal Drupal 7 Bootstrap Leave a reply Your email address will not be published. Required fields are marker *
close

on 03rd July 2015 / by sarika.k
Bootstrap, a powerful mobile-first front-end framework which incorporates faster and easier development features to the web development platform. Bootstrap is sleek, intuitive and it uses HTML, CSS and Javascript. We can build responsive Drupal themes using Twitter Bootstrap V3. It gives a basic idea of implementing bootstrap theme. Bootstrap files are available in Github. You can download the required files from there. In order to apply bootstrap theme first of all add the bootstrap.min.css to your themes folder in 'sites/all/themes/yourtheme/css' and bootstrap.min.js to your themes folder in 'sites/all/themes/yourtheme/js'.To modify or apply additional styling to your web page, add the custom style to your custom.css file. No need to edit any of the original Bootstrap styles directly. Bootstrap provides fluid grid system that scales up to 12 columns as the device or viewport size increases. The scaling is more appropriate as it uses predefined classes as well as powerful mixins for generating easy and more semantic layouts. Bootstrap is designed as mobile-first in the sense that the code for Bootstrap initially targets smaller screens like mobile, tablets, and then "expands" components and grids for larger screens such as laptops and desktops. Working of Bootstrap Grid System Grid systems are used for creating web page layouts. It is achieved through a series of rows and columns that holds the content. Here's how the Bootstrap grid system works: Rows must be placed within a .container class for making proper alignment and padding. Now, each row can be used to create horizontal groups of columns. Content is placed within columns, and columns should be immediate children of rows. Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows. Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4. The basic grid structure is <div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> <div class="container">.... </div> Twitter bootstrap Bootstrap Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 21st April 2015 / by alfred.paul
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first websites. This framework is also a popular star in drupal themes. There are a lot of drupal themes based on bootstrap, using bootstrap library or subthemes created from bootstrap base theme. Its mobile ready design and predefined classes makes it easier to create a beautifully customized responsive theme. While working on a project I had a requirement to make permanent hamburger menu (That's right, the button with three lines at the top of any mobile page created using bootstrap) regardless of the viewport resolution. Default behaviour of bootstrap is like this, when the viewport width become less than 768 pixels, the main menu will collapse into hamburger button. I had to change this behaviour. This can be done by customizing the bootstrap library from http://getbootstrap.com/customize/ The break point at which main menu collapses to hamburger menu is defined inside @grid-float-breakpoint variable in the bootstrap customization page. We can set that to any screen width. Main menu will be collapsed to hamburger if viewport width is less than the width specified here. I placed 9999px in that field (Hoping nobody is using such resolution devices for browsing!!). This will change the grid-float-breakpoint and hamburger menu will always show. We can download the customized library and replace our bootstrap library to see the changes. Easy right? Well not that easy, because the bootstrap base theme is getting the bootstrap library (CSS and JS) from bootstrap CDN and here we are using a customized bootstrap library. Bootstrap theme does not allow using custom library for bootstrap. Well, there is a module for everything in drupal. Here I am using a module called bootstrap_library which basically does nothing other than allow us to use custom bootstrap libraries to our bootstrap sub-themes. 1. Disable the Bootstrap CDN from our sub-theme by going to Appearence > Select settings of our subtheme > Advanced and disable the CDN. 2. Copy the extracted custom bootstrap library to sites/all/libraries/bootstrap. The bootstrap.min.js file location must be sites/all/libraries/bootstrap/js/bootstrap.min.js so that it is detected properly by the module. 3. Enable module bootstrap_library and goto "admin/config/development/bootstrap_library" and select bootstrap and our sub-theme from the multi-select box in the "Theme Visibility" fieldset and save. That's it. The above steps will enable us to use any customized version of bootstrap. Happy bootstrapping folks. :) Bootstrap Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 01st April 2015 / by aby.va
Bootstrap twitter is includes a responsive, mobile or tablet first fluid grid system that ... it is styling on small and medium devices but also on large devices if a .col-lg-* class is not present. My company has a lot of free Drupal themes developed. But there is a problem i.e these are not responsive. So we started to change this themes in responsive and For that we suggest the new bootstrap framework for responsive. We success fully converted the plane html code in to bootstrap grid format. So I am testing out Bootstrap 3 responsiveness navbar and we have a demo website. When I resize or decreases the size of the browser on a desktop, it all works correctly including collapsible menu with a small icon on the top with the nav bar which I can click to see more menu buttons. I tried it from a iphone mobile browser and tablets (I tried it on internet browser and chrome on an Android), But I didn't see the responsive design. I could only see very small version of desktop like website. This issue is because of We didn't add the meta tag in html header part. So we add the below tag in header part: < meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> Bootstrap Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 25th March 2015 / by akhila.vn
I had a requirement to add a multi-level responsive drop down menu in a Zyxware theme. Please do refer the below reference links to know more about responsive themes and free Drupal themes. So I need to edit page.tpl.php, page--front.tpl.php, style.css, template.php etc. First I add the following code to template.php of my theme. The steps that I followed here are, Added the following code to the function themename__preprocess_page(&$vars) to make the menu as a tree. //Setting menu in a tree structure $main_menu_tree = menu_tree(variable_get('menu_main_links_source', 'main-menu')); $vars['main_menu'] = $main_menu_tree; // Get the entire main menu tree $main_menu_tree = menu_tree_all_data('main-menu'); // Add the rendered output to the $main_menu_expanded variable $vars['main_menu_expanded'] = menu_tree_output($main_menu_tree); Add css class to main menu using the function, function themename_menu_tree__main_menu(&$vars) { return '<ul class="nav navbar-nav">' . $vars['tree'] . '</ul>'; } Add css class to inner part of main menu using the function, function themename_menu_tree__main_menu_inner($vars) { return '<ul class="dropdown-menu">' . $vars['tree'] . '</ul>'; } Added the following function to display the links in main menu tree, function themename_menu_link__main_menu($vars) { $element = $vars['element']; $sub_menu = ''; if ($element['#below']) { foreach ($element['#below'] as $key => $val) { if (is_numeric($key)) { $element['#below'][$key]['#theme'] = 'menu_link__main_menu_inner'; // 2 level <li> } } $element['#below']['#theme_wrappers'][0] = 'menu_tree__main_menu_inner'; // 2 level <ul> $sub_menu = drupal_render($element['#below']); } $output = l($element['#title'], $element['#href'], $element['#localized_options']); $element['#localized_options']['attributes']['class'][] = " dropdown-toggle "; $element['#localized_options']['attributes']['role'][] = "menu"; $element['#localized_options']['attributes']['data-toggle'][] = "dropdown"; $element['#localized_options']['attributes']['aria-expanded'][] = "true"; $output = l($element['#title'], $element['#href'], $element['#localized_options']); return '<li class="dropdown">' . $output . $sub_menu . '</li>'; } Added the following code to make inner <li> tag - links function themename_menu_link__main_menu_inner($vars) { $element = $vars['element']; $sub_menu = ''; if ($element['#below']) { $sub_menu = drupal_render($element['#below']); } $output = l($element['#title'], $element['#href'], $element['#localized_options']); return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . '</li>\n'; } Then I add the code ' print render($main_menu); ' to the page.tpl and page--front.tpl for display menu with necessary <div> tag and css styles based on the theme that are downloaded from http://getbootstrap.com/components References :https://www.drupal.org/node/1178784, http://getbootstrap.com/components/ , http://www.zymphonies.com/metro-responsive-theme Bootstrap Drupal Leave a reply Your email address will not be published. Required fields are marker * doug (not verified) access_time 22 Apr 2019 - 03:34 Thank you. I was so shocked when I realized that the bootstrap theme did not have more than 2 levels of nav. Wow Your code worked right away. I need to minimally re-work my theme, but it is all good. this - '\n'; should be this - ''; I did not have to add this ' print render($main_menu); ' to the page.tpl and page--front.tpl Add new comment