Category Archives: CSS

How-to for CSS

Google Maps: Missing Zoom Controls

CSS, Google Maps

Previously, I entered a blog about an error with zoom controls for the Google Map. In that articles, the zoom controls were distorted when used in WordPress. Today, I found a second problem with the zoom control for Google Maps.

Today, I experienced the complete absence of the zoom control on a Google Map. The Google Map code was configured correctly to display the zoom controls. If you hovered your mouse over the location the zoom controls should appear, the cursor changed, implying that there were zoom buttons under the cursor. However, there were no buttons displayed.

Researching the problem, I found there was a very simple solution the problem. Add the following to the CSS:


  .gmnoprint img {
      max-width: none; 
  }

Add this simple CSS and voila, the buttons suddenly appear.

Drupal 7; How to assign custom CSS and JS by node

CSS, Drupal, Javascript, jQuery

If you need to have custom CSS or JS for a node, it is easy to set up.   This can be setup via the template.php file.   To customize available CSS or JS via template.php, modify the THEME_preprocess_node.  For example, if you have a special node type called “directory” in a theme called “boulder,” add the following code to your boulder_preprocess_node function.



  function boulder_preprocess_node(&$variables) {
    if ($variables['view_mode'] == 'full') {
      $node =& $variables['node'];
      if ($node->type == 'directory') {
        $path = drupal_get_path('theme', 'boulder');
        drupal_add_css($path . '/CSS/directory.css');
        drupal_add_js($path . '/js/directory.js', 
            array('type' => 'file', 'scope' => 'header'));
      }
    }
  }

I love this. It’s quick, easy and very useful.

Using SilverStripe – Part 2

CSS, Javascript, SilverStripe

How to Find the Administration Panel

SilverStripeFirst things first. Eventually, you will want to get to the SilverStripe administration panel. You might expect to see an admin directory in the root directory, as done on Joomla, Drupal and WordPress, but you will be surprised to see no corresponding directory in SilverStripe. The SilverStripe administration is virtual, no obvious login or index file for it in particular. To get to administration, enter

  • /admin

Voila, you have the login access to the administration area. If you are looking for the actual admin files, they are available in the /framework/admin directory.

Where to Load Add-ons

Curiously, unlike Drupal, Joomla or WordPress, SilverStripe likes to clutter the Document Root directory with all add-ons folders. Retrieve your add-on from Git and the add-on folder will be stored in the site’s root directory.

If you use a ZIP file retrieved from the GIT directory for the add-on:

  • Unpack the zip file, leaving content in their add-on directory
  • Rename the add-on directory. If the add-on directory name has “silverstripe” prepended, or “-master” incorporated in the directory name, remove the “silverstripe” and “-master,” leaving only the application name as the directory name.
  • Replace “-” with “_” if a dash has been used in the naming of the directory.
  • Copy the add-on to the site’s root directory.

If you fail to remove the prepended or appended labels, the loading of the files will fail.

If you fail to replace “-” with “_”, the content will load, but, will load incorrectly and fail to function.

How to Rebuild the CMS Control Database

If you load an add-on or make changes to the database, you must rebuild the SilverStipe site. To rebuild, enter:

  • /dev/build

How to Clear Cache

To speed site display, SilverStripe caches page content. Anytime you make changes to template files and data base, clear the cache. Clear the cache every time you add a new add-on, anytime you create a new page type (explained later), or make any change affecting database or available php or ss files. Clear cache by entering:

  • /index.php?flush=1

Where to Load Images

SilverStripe design suggests that specific content belongs in specific directories. Templates will be placed in /themes subdirectory, you images belong in the /assets. As you load content via SilverStripe, images will be loaded to /assets/upload and subdirectories you request. You may want to arrange to use /assets as the area to store all files you ftp onto your site for consistency. Expect your images stored in subdirectories of:

  • /assets/upload

Summary

  • /admin – access to the administration panel
  • / – location to store add-on directories
  • /dev/build – command to rebuild the site database
  • /index.php?flush=1 – command to flush the cache
  • /assets/upload – appropriate directory for storage of images

The next article will discuss creation of a template

 

 

Hiding iframe Scrollbars in Chrome and Safari

CSS

This is a really short one. I know we should minimize or eliminate the use of iframes. However, from time to time we use iframes. IE and FF allow the use of overflow: hidden to hide iframes, but, this does not work in Safari or Chrome. Be aware, the following does work:


   /* take care of IE and FF */ 
   iframe { overflow: hidden ;  }

   /* take care of Chrome & Safari */ 
   iframe::-webkit-scrollbar { display: none ;   }

Hope that helps you in the future.

🙂

Warning about Google Maps and WordPress

CSS, Google Map, Wordpress

Warning. As I was working on my previous post, I notices an interesting incompatibility between the WordPress template I was using and Google Maps. The template in use has a CSS configuration of:

.entry_content img { max-width: 100% ; }

The previous css seems minor enough, but, this declaration affected the Google Map on the page. The result is a map that shows no zoom controls. Instead, where the controls should be, they display as small white marks. In the event that you happen upon a template that does not seem to be compatible with Google Maps (because the zoom controls are missing) check to see if there is a CSS declaration defining “img {max-width: 100% }” in a manner it might be affecting the map. If so, you will need to create a CSS declaration that will override this command. It appears that img max-width must be configured to “none,” or the controls will be incorrectly displayed.