Tutorials Drupal Web Design Flash and Search Engine Optimization

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.

Aug., 2018 - Added iPhone 10

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 and iPhone 10 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!

Commerce Kickstart Temporary Free Shipping Flat Rate Service

How to create a Drupal Commerce Kickstart free shipping flat rate service for a certain 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:

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

Settings:

How to add and embed YouTube videos into your Drupal websites

Wed, 07/02/2014 - 13:56 | Infinitee

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

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.

Tags:

Tutorials

Web Design Tutorials

Drupal Web Design Tutorials

Drupal Tutorials

Web Development

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

PASTE VIDEO EMBED CODE INTO YOUR WEBSITES POST

Drupal CKeditor and FCKeditor tutorials have been updated

Mon, 02/24/2014 - 17:02 | Infinitee

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 >

Tags:

Tutorials

Web Design Tutorials

Drupal Web Design Tutorials

Drupal Tutorials

Ubercart 2 Product Attributes & Options Tutorial

Ubercart product attributes and options

Workflow:

Create an attribute.

Add options to the attribute.

Add the attribute to products.

This tutorial assumes that you have already installed and implemented all your settings for Drupal and Ubercart.

Creating attributes & adding options to your Ubercart products

"FINDING ALL YOUR ATTRIBUTES"

You can find the complete list of all your stores attributes as well as links to edit and add options to the individual attributes at:

http://www.Your-Infinitee-Website.com/admin/store/attributes

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

Ubercart attributes list

"CREATING NEW ATTRIBUTES"

1. Go to one of the Add attributes admin page.

http://www.Your-Infinitee-Website.com/admin/store/attributes/add

This attribute will be for my t-shirts sizes. You can create additional attributes for your needs such as colors, styles, name brands etc.

Drupal 6/Ubercart 2/Node Import - Updating Products & Prices Via CSV Import Tutorial

With step by step instructions and helpful hints, this Drupal 6/Ubercart 2/Node Import tutorial will help you understand the workflow of bulk importing a large number products into your Drupal Ubercart shopping system with the capability to update prices and attribute option prices via a CSV import. This tutorial is for intermediate to advanced users and you will need a basic understanding of Drupal 6, Ubercart 2, installing modules and applying patches. It is assumed that you already have Drupal & Ubercart installed and have administered your settings for a working store.

First, Drupal & list of modules and applications needed:

Download and install modules in the usual manner and appropriate place for your installation. Usually, sites/all/modules.

Drupal Website CKeditor Tutorials - Adding Blog Posts, Images & Web Pages with the CKeditor module

Sun, 06/19/2011 - 10:33 | Infinitee

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

Drupal Website Tutorials - This tutorial was created for our clients and anyone with a Drupal website using the CKEditor and the Meta Tag and Nodeword modules. It includes step by step detailed instructions on how to create a blog post and add pages to your Drupal CMS website correctly and easily. It also, has detailed instructions on using the Meta Tags input fields to better your search engine optimization capabilities with the search engines.

The CKEditor is a customizable text editor module for Drupal that also, has a quick "Switch to plain text editor" for adding HTML or plain text to your Drupal websites content as web pages, blog posts, articles and stories. Here at Infinitee we use every tool in the book to make your website as easy to use and edit yourself as humanly possible. The CKEditor is just one of them.

Go to Tutorial Drupal CKEditor Tutorial >

Tags: