Drupal Web Design 

Delaware Web Design & Drupal eCommerce Websites

Drupal Web Design Tutorials

Drupal Web Design Tutorials eCommerce shopping website development for large scale websites with thousands of products to import during construction

Drupal 7 Adding Custom CSS for Targeting Mobile Devices

Drupal 7 Adding Custom CSS for iPhones iPads & Mobile Devices

Updated: October 10th, 2017

This tutorial has been completely redone to do it the right way and "The Drupal Way" Although the old tutorial worked for iPhones, using the aspect ratios also effected other devices of similar screen ratios. These methods will also work on Drupal 6 sites.

October 10th, 2017 Removed: -webkit-min-device-pixel-ratios to pass CSS validation and added Google Nexus media queries.

Drupal websites tutorial to specifically target mobile devices with CSS media queries for iPhones, iPads and Galaxy S5. This includes all iPhones 4 through iPhone 7 Plus in both landscape and portrait views. It is best implemented on Drupal themes that are not 100% mobile device friendly and or, you have created custom themes, regions within your theme or, added custom blocks that to not quite display as you would like them to on all mobile devices and in both portrait and landscape modes.

 

This CSS tutorial is geared towards moderate to advanced Drupal developers, themers and CSS editors. You should have a good knowledge of Drupal and a good vocabulary of CSS to take advantage of this tutorial.

*Note: These techniques can be used on other CMS's and static websites but, you will have to put the code that links your CSS file (<link media="only screen and... ) in between the <head> and </head> section of your pages.

Making themes Responsive using CSS by targeting each device's specific screen size, and aspect ratios individually!

Enjoy and have fun!

How to make thumbnails from an image on a page or, in a post

Drupal CKeditor and FCKeditor tutorial on how to make thumbnails directly from an image that you have added to a page or, post. Also, while you are uploading images.

Small ThumbnailMedium ThumbnailLarge Thumbnail

Thumbnails are smaller versions of a larger image that can be used as is or, as a link to any content. Standard sizes for the CKeditor are 90x90, 120x120 and 180x180. You can make thumbnails of an image in various sizes and then use the thumbnails in other posts "Body" or, the "Summery". The "Summery" is what gets displayed on the front page if your site is set up that way. When haking thumbnails, your original file will be re-sized and re-named with a prefix that describes the size... small_original-file-name.jpg, medium_original-file-name.jpg and large_original-file-name.jpg.

 

Once you have added an image to a post via the CKedtors advanced image upload system. "Uploading images from your computer with the File Browser" you can make thumbnails directly from within the file Browser editor.

Note: You can create thumbnails while you are uploading your images... Check mark the thumbnail sizes that you would like to create before you hit "Upload".

 

Commerce Kickstart How to create free shipping flat rate service

Updated: 11/22/2015!

Tutorial Concept:

Add a new Flat Rate service

To create a "Free Shipping for the Holidays" service for a limited time and offer free shipping from one time period to another like Thanksgiving to New Years Eve. We start by adding a new flat Rate shipping service and add rules to apply to all orders and that ends at a pre determined time. Of course, you can adjust these parameters to fit your needs.

This tutorial utilizes the flat rate shipping module that is already installed and configured for the Drupal Commerce Kickstart profile.

 

Work flow:

  • Add a new Flat Rate service.
  • Configure component by adding conditions set to commerce_order and Data comparison for time and date.
  • Hack commerce_kickstart_product.features.inc to force new shipping rule to be selected and appear on top of shipping services lists.
  • Implement hooks in theme template.
  • Spread joy with free shipping!

Go to tutorial >

 

Commerce Kickstart Temporary Free Shipping Flat Rate Service

How to create a Commerce Kickstart free shipping flat rate service for a certain time period

How to create a custom Commerce Kickstart free shipping flat rate service for a certain designated time period

 

Concept:

To create a "Free Shipping for the Holidays" service for a limited time and offer free shipping from one time period to another like Thanksgiving to New Years Eve. We start by adding a new flat Rate shipping service and add rules to apply to all orders and for a select time period. Of course, you can adjust these parameters to fit your needs.

 

Work flow:

  • Add a new Flat Rate service.
  • Configure component by adding conditions set to commerce_order and Data comparison for time and date.
  • Hack commerce_kickstart_product.features.inc to force new shipping rule to be selected and appear on top of shipping services lists.
  • Implement hooks in theme template.
  • Spread joy with free shipping!

 

Let's get started... Updated: 11/22/2015!

 

Add a new Flat Rate service:Add a new Flat Rate service

admin/commerce/config/shipping/services/flat-rate/add

Settings:

How to add and embed YouTube videos into your Drupal websites

Simply copy and paste YouTube video embed code directly into pages and blog posts.

How to add and embed YouTube videos into your Drupal websites

A fast and simple tutorial on how to add and embed YouTube videos into your Drupal websites via WISIWIG HTML source code editor. Two basic steps with detailed breakdown of each.

 

Adding and Embedding YouTube Videos into your Drupal Websites

Embedding YouTube Videos into your Drupal Websites

 

How to add and embed YouTube videos into your Drupal websites via WISIWIG HTML source code editor. Simply copy and paste video directly into pages and blog posts.

For you wild guitar lovers out there... Joe Satriani - Satch Boogie (G3 Live In Denver)

 

LOG IN

You must log in before you can edit or add content to your site. You can log in at:

http://www.Your-Infinitee-Website.com/user
(Replace "http://www.Your-Infinitee-Website.com" with your website's URL address)

 

ADD YOUTUBE VIDEO TO EXISTING POST OR CREATE A NEW ONE?

Start off by going to the page in which you would like to add a YouTube video to and click the "Edit" tab or, create a new page, article or blog post.

Content > Add content >

http://www.Your-Infinitee-Website.com/node/add

Add a Title and Summery.

 

FIND YOUTUBE VIDEO PAGE AND ACQUIRE EMBED CODE

Go to YouTube.com and find the video that you want to add to your web page and then;

1. Click "Share"

2. Click "Embed"

3. Un-check "Show suggested videos when the video finishes"

4. Select and copy Embed code and past it into a post on your website.

 

Capturing YouTube Embed Codes
Capturing YouTube Embed Codes

 

PASTE VIDEO EMBED CODE INTO YOUR WEBSITES POST

Creating and Editing Block Content and Adding to Page Regions

The Drupal CKEditor Interface

The Drupal 6 block list and edit region administration page.
Click here for Drupal 6 blocks tutorial.

The Drupal CKEditor Interface

The Drupal 7 block list and edit region administration page.
Click here for Drupal 7 blocks tutorial.

Drupal 6= Drupal 6  |  Drupal 7= Drupal 7

 

Creating and Editing Block Content in Page Regions

 

"LOG IN"

You must log in before you can edit or add content to your site. You can log in at:

http://www.Your-Infinitee-Website.com/user

(Replace "

http://www.Your-Infinitee-Website.com

" with your websites URL address)

 

Drupal CKeditor and FCKeditor tutorials have been updated

Drupal Website Tutorials - Adding Blog Post & Pages with the Drupal CKEditor

The Drupal CKeditor and FCKeditor tutorials have been updated!

A simple update but, with an invaluable tip for our clients and friends on spotting, initiating and using the Contextual links trigger on Drupal 7 website made by Infinitee Web Design. The tip is on the bottom of each tutorial page and well worth having a quick look at. It's easy, quick and will make your Drupal content editing a much more enjoyable experience than it already is!

 

The Drupal CKeditor tutorial >

The Drupal FCKeditor tutorial >

Pages