Drupal Web Design 

Delaware Web Design & Drupal eCommerce Websites

Web Development

Infinitee Web Design has a new URL address!

Infinitee Web Design - - Rehoboth Beach, DE.

Infinitee Web Design - The same website just new URL!

Infinitee Web Design has moved to the Infinitee Designs .com domain for more convenient access and search engine optimization purposes as well. Offering the same professional web design services that we have been known for for the past 20 years and digital graphics to make your websites unique, memorable and pop! Not just another cookie cutter template web design company, Infinitee Web Design custom builds your websites to maximize your businesses unique qualities and stand out from the competition. We leverage search engine optimization with eye catching graphics to give you the best of both worlds and return on investment.

We look forward to continue building only the best websites for our customers and always be there to offer free technical support and personalized tutorials on how to get the most out of your website and Internet advertising ventures.

 

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.

 

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

The Drupal CKEditor Interface

The Drupal CKEditor Interface

Drupal 6= Drupal 6 | Drupal 7= Drupal 7

 

Creating and Editing Content and Blog Posts with the Drupal CKeditor

 

In a nutshell...

  1. Log in
  2. Go to a page and hit "Edit" or, from the very top admin menu (in black) Content > Add Content.
  3. Add your Title, click on and use the "Summary" and add a 150 character Meta Tag description for the search engines.
  4. Add text and images. (To add images... Refer to the tutorial further down.)
  5. On the bottom of the page, hit "Meta tags" and type or, paste in the 65-70 character page title. for the search engines.
  6. DO NOT FORGET TO HIT "SAVE"!!!

 

In detail...

 

"LOGGING 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)

 

"FINDING ALL YOUR CONTENT"

All content, pages, blog posts, articles etc... are listed on the Content page and links to edit these pages are there as well:

Content management > Content

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

Content

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

 

Drupal Website FCKeditor Tutorial Adding Blog Posts Images Web Pages

Drupal website FCKeditor Tutorials - Adding Blog Posts, Images & Web Pages with the FCKeditor module

The Drupal FCK Editor Interface

The Drupal FCK Editor Interface

Creating and Editing Content and Blog Posts with the Drupal FCKeditor

"FINDING ALL YOUR CONTENT"

All content, pages, blog posts, articles etc... are listed on the Content page and links to edit these pages are there as well:

http://www.Your-Infinitee-Website.com/admin/content/node

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

 

"CREATING NEW PAGES, BLOG POST & MENU LINKS"

Note: Microsoft Word and other text editors add a lot of unnecessary and non conforming formatting. It is best to just type out your initial page and blog text in Notepad (All programs> Accessories> Notepad) or Notepad++ (my text editor of choice... Free & open source available at: http://notepad-plus-plus.org/) but, if you already have a word document or are copying content from a website that has it's own HTML and CSS formatting, pasting the text into Notepad then copy that text and past it into the FCK editor text field. The will result will be ideal WWW conforming textual output.

 

1. Go to one of the Add content type pages that best fits the type of addition you want to add. Usually Blog or Page.

Pages