Category Archives: CSS

How-to for CSS

Resizable YouTube Videos for your Site

CSS, HTML5, Javascript, jQuery

Do you have a problem with YouTube videos on your site that don’t resize in your responsive website? This can be a big hassle. You can set up your site using CSS to control the resizing, but, (1) You may have older websites that you don’t want to rewrite, (2) you may be somewhat unfamiliar with CSS or you have other reasons you don’t want to hassle correcting problems of resizing videos on your sites. If you are willing to take just a few minutes to fix the problem, there is a simple solution to your problem. To solve your problem, you’ll add a few lines of code to your file. In the area of all pages that include videos, add the following lines of code:



    <script type="text/javascript" 
       src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <script type="text/javascript" src="/js/videoSizing.js"></script>

Next, download the file “videoSizing.js. Add the file to the directory /js, and you’re done. This will make all your YouTube videos responsive. If you would prefer to place the videoSizing.js in an alternate directory, insert the file where you like, but, adjust the /js/videoSizing.js path to correctly reflect the directory that you chose to store the videoSizing.js file. Also, the addition of the jquery.min.js is only required for those sites that do not already use the jQuery library. As long as you use a src address that correctly accesses the file and the jQuery library library is included, all your YouTube videos will resize responsively.

By the way, if you would like to add a margin around the video, define the variable YOUTUBE_VIDEO_MARGIN and the video margin will be set. Ex.



    YOUTUBE_VIDEO_MARGIN = 10 ;  /* sets margin to 10 pixels */

If you are curious what is contained in the videoSizing.js file, you’ll find the following:



    /*
     * Youtube video auto-resizer script
     * Created by Skipser.com
    */
     
    jQuery(function($) {
      if(typeof YOUTUBE_VIDEO_MARGIN == 'undefined') {
        YOUTUBE_VIDEO_MARGIN=5;
      }
      $('iframe').each(function(index,item) {
        if($(item).attr('src').match(/(https?:)?\/\/www\.youtube\.com/)) {
          var w = $(item).attr('width');
          var h = $(item).attr('height');
          var ar = h/w*100;
          ar = ar.toFixed(2);
          //Style iframe    
          $(item).css('position','absolute');
          $(item).css('top','0');
          $(item).css('left','0');    
          $(item).css('width','100%');
          $(item).css('height','100%');
          $(item).css('max-width',w+'px');
          $(item).css('max-height', h+'px');        
          $(item).wrap('<div style="max-width:' + w + 'px;margin:0 auto; padding:' + YOUTUBE_VIDEO_MARGIN + 'px;" /> ');
          $(item).wrap('<div style="position: relative;padding-bottom: ' +  ar + '%; height: 0; overflow: hidden;" /> ');
        }
      });
    });

Enjoy the new responsiveness of your YouTube videos. By the way, if you would like more on this topic, see Skipser’s article on the jQuery snippet.

Creating a WordPress Child Theme

CSS, PHP, Wordpress

Overview

WordPress LogoSave yourself some heartburn, do not modify WordPress templates directly … create child templates. Creating a child template will allow you to update a theme without having to re-work it to include your change.

To create a child theme, you need to do the following:

  • Create a child theme directory
  • Place a new style.css file in your child theme directory
  • Add a functions.php file to the child theme directory
  • Add copies of files you plan to modify in the new child theme directory

Create a child theme directory

Go tot he themes diretory (wp-content/themes), create a subdirectory with the name othe original theme, but, append “-child’ to the directory name. Example, if you want a child them for the twentyfifteen theme, create a subdirectory twentyfifteen-child.

In the twentyfifteen-child directory, create a file style.css. In the style.css file, you must have the following minimum header.


/*
 Theme Name:   Western Way Realty
 Theme URI:    http://example.com/western-way-realty/
 Description:  This is a Child Theme of twentyfifteen for the Nomad Realty
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

 

When creating the header for the style.css file, include the

  • Them Name: followed by the name of your new child theme
  • Theme URI: followed by the location of updates for the theme
  • Description: followed by the description of the template and remember to reference the name of the parent theme to assure user remembers to include the parent theam.
  • Author: followed by your name (or the name of the developer of the new child template)
  • Author URI: followed by the URI of the authors website.
  • Template: followed by the name of the parent template
  • Version: followed by the version number you want for the child template
  • License: followed by the software license that is used to release this template
  • License URI: followed by the address of a copy of the release license.

Following the style.css header, you may now add any new CSS that will be needed in your theme.

Create a function.php file

In the child theme directory, create a file function.php. The original theme function will provide all functions you need, but, this function.php can be used to override the function.php function or to include new function.php content for the child theme.

At minimum, the functions.php file should include the following:


    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array('parent-style')
    );
}

 

The above code assure that the parent style.css file is loaded, and it assure that the new style.css file is loaded for the new theme.

With the creation of the functions.php file in your child directory, you are ready to go…

Keep Going

Keep going creating your new child theme. Add new child themes functions to the new functions.php. Add the new CSS content to the new style.css file. If you need to modify other files, such as header.php, footer.php, template.php or any other file … copy it to your new child theme directory and make your mods in the new child themes directory.

New Versions of WordPress Abort MORE

CSS, Dreamweaver, Eclipse PDT, PHP, Wordpress

WordPress is getting to be more and more a nuisance to debug in dreamweaver. Loading WordPress in Dreamweaver causes an immediate shutting of Dreamweaver. This was happening in the past because of the inclusion of the files dashicons.css and dashicons.min.css in the includes/css directory. They were not needed for testing and typical development, so, they could simply be deleted. dashicons.css and dashicons.min.css offer simple use CSS icons that are used primarily in the admin area, though they could be used in any of your development. Deleting dashicons.css and dashicons.min.css left the admin area without icons, but, the icon text descriptions remained and you could live with for preliminary testing. However, now we are back to the same crash problem.

More oversize strings have been added to other files in WordPress and they cause Dreamweaver to exhaust its workspace memory and crash. . Now, to do debugging in Dreamweaver, the following files and directories must be deleted from WordPress:

  • wp-includes/css/dashicons.css
  • wp-includes/css/dashicons.min.css
  • wp-content/themestwentyfourteen/genericons (full directory)
  • wp-content/themestwentythirteen/genericons (full directory)
  • uploads/am_assets

Deleting these files/directories allow debugging in Dreamweaver. Again when testing, the situation relates to availabiliity of CSS icons and assets … for the development. These deletions increase the number of items that vanish in your use of wordpress, but, maybe you can live knowing that in preliminary debug icons and assets will be missing, but, available in an integration test. If you understand what you are deleting and what you can expect from these deletions, no problem. When you load a full version of WordPress in a full installation all icon functionality returns, but, the nuisance level of development is increasing. Someday, we will want to upgrade your Dreamweaver or start using NetBeans or Eclipse to avoid the problem.

Personally, I find Eclipse or NetBeans will be a reasonably good replacement for Dreamweaver. They are free and have some very nice features. In some cases, they have nicer features than Dreamweaver, though they do miss a few features I do like in Dreamweaver. Their big problem is they are harder to install and interface with the test server, but, if Dreamweaver continues to be a nuisance, they will be far better alternative.

Dreamweaver Closes as it is Opening

CSS, Dreamweaver, Wordpress

Are you having a problem with Dreamweaver closing down (vanishing) as it starts to open new versions of WordPress?

Recent versions of WordPress have a new CSS file that is causing Dreamweaver no end of trouble. Attempting to load WordPress in Dreamweaver causes a partial load, then suddenly the load crashes and Dreamweaver vanishes from the screen. This is being caused by the recent change in WordPress to update the administration panel.

WordPress has added the CSS file /wp-includes/css/dashicons.min.css. This file is intended to add icons to the administration panel by using Font-face. Unfortunately this font face is enormous. The string incorporated in the font-face declaration is too large to be supported by Dreamweaver, causing Dreamweaver to crash.

Luckily, there is a solution to this problem. The solution is simple. If your version of Dreamweaver has the size limitation that causes crashes, simply delete the files /wp-includes/css/dashicons.min.css and /wp-includes/css/dashicons.css from your WordPress development environment. This will have little impact on your development.

Deleting the dashicons files from your development environment will have minor impact, but, probably none that bother your development. The deletion may cause the absence of font-face created icons in the administration area of your WordPress work environment, But, you will still see the alternate text associated with the icons. You can continue to work conveniently.

Warning: Remember as you load your work on your target website, you have deleted the dashicons files. Remember to include the dashicons files in your official release or your target site will have missing icons in the administration area.

Firefox suddenly loses vertical scroll bar

CSS, Firefox

Warning: add-on extensions can cause Firefox to malfunction. This afternoon and evening I spent hours trying to figure out why some CSS3 commands were not working and the vertical scroll bar was vanishing from websites every time I shrank the Firefox window to the width of 530px. I assumed I was pushing the scroll bar off the screen by use of some combination of CSS directives.

After spending hours trying to decide what CSS3 combinations I might have used to case a problem, I went searching the internet and found multiple users had found similar behavior, but, there did not appear to be a common thread. Each person seemed to have the problem in different combinations or configuration that used Firefox.

Finally, I found a website where a person indicated that she was having the problem and a helpful person indicated she should disable her add-ons and see if the problem went away. She did not respond to the comment. Allow me to answer. In my case, this solved my problem. By process of elimination, I found the culporate to be the extension “PHP Developer ToolBar 3.0.5” by FelipeNMoura.

My comment is not intended to complain about the add-on, Felipe Moura did make an effort to provide a service, and I thank him for the effort. The comment is intended to let all know that it is possible for Firefox to malfunction as the result of add-ons, and you should disable plugins if you appear to have some subtle problems as you debug your website behaviors.