本文へ


Released the New theme "newspaper_en" of responsive Web design.

  • 2012/04/02 04:44 JST

To the basic theme "WAIproCSS Ver2.5.1 for Geeklog1.8.1" Create a new theme for Responsive Web design to use Media Queries of CSS3. PC is 2 column、iPad& iPod touch is center block 1 column& left& right block 2 column Layout.


The images were captured of the theme "newspaper_en" PC・iPad・iPod touch.

Advantage of responsive web design the theme "newspaper_en".

  • Liquid layout becomes difficult to read text when viewing on the big screen, Because stretch the width. But, This theme maintains the integrity of the readability, Because has been configured not to spread it over a certain number exceeds the width of the content.
  • There is no doubt that the user does not change image, Because there is no significant difference in design is also seen on any device.
  • There is no lack of that information is also accessed by the iPhone, Because that display information similar to that PC to appear in width in the small size of the iPhone.
  • Work efficiency is good. So, only fix CSS when if change design, because (X)HTML is only one.
  • I can utilize to maximize the resolution by the iPad etc., If I write
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    ,   But By default I no longer can do the (scaled) pinch out pinch open(Can be enlarged if you turn on accessibility features zoom setting), You write dare
    <meta name="viewport" content="width=device-width" />
    for can pinch open the pinch-out in the default.
  • Consider the usability of iPad ・ iPod touch, Button of input(etc.) is easy to touch make the big.

Feature of the theme "newspaper_en".

This theme, and incorporates a "progressive enhancement(Information correctly while providing a wide range of environmental conditions, High performance in a browser on the Web design concept that attempts to provide a rich experience.)" using the CSS3.  So In browsers that do not support CSS3 is an icon that is displayed before the link Will feel that it is not displayed, but, the information has been prepared properly so as to obtain.
IE8 below do not support Media Queries, who want to support, please add a script such as "css3-mediaqueries-js".


The images were captured of the theme "newspaper_en" by the Internet Explorer7.

The site logo fonts are displayed using the Google Font API.

Theme"newspaper_en" is considering the accessibility in the same way "WAIproCSS ".

This site is Geeklog1.7.1. But, I put a theme on this site, newspaper_en of the specification 1.7.1for you see design of the theme "newspaper_en". You can view my theme and choose "newspaper_en" in the trial of the theme, please refer to.

Display confirmation

  • Windows XP / Firefox 10.0.2,Google Chrome 17.0.936.56,Safari 5.1.2,Opera 11.61,Internet Explorer 6, 7, 8
  • Windows 7 / Internet Explorer 9
  • Mac OS X 10.7.2 / Firefox 9.0.1,Safari 5.1.2
  • iPod touch iOS 5.0.1,iPad2 iOS 5.0.1

Read confirmation

  • Windows XP / PC-Talker XP,NVDA
  • Mac OS X 10.7.2,iPod touch iOS 5.0.1,iPad2 iOS 5.0.1 / VoiceOver

For files that were modified and added when you create a theme "newspaper_en".

Modified files when I create a new theme of "WAIproCSS Ver2.5.1 for Geeklog1.8.1" is equal to 7 the following file.

  • header.thtml
  • submit/submitstory_advanced.thtml
  • comment/commentform_advanced.thtml
  • admin/story/storystoryeditor_advanced.thtml
  • admin/story/storystoryeditor_advanced.japanese_utf-8.thtml
  • css/layout.css(Delete min-width: 37.5em of line 40.)
  • custom.css

Additional files, and files will be Javascript2 following four image files.

  • images/custom/bg_main_h2.gif
  • images/custom/bg_side_h2.gif
  • images/custom/blockquote_b.gif
  • images/custom/blockquote_t.gif
  • javascript/jquery-1.4.2.min.js
  • javascript/jquery.flickable-1.0b3.js

What to do when the theme "WAIproCSS" has been upgraded.

Based on the "WAIprCSS" was up version, files other than custom.css is compare the files of the theme "newspaper_en" and the version-up file, please correct where necessary. Save custom.css is, please add an additional file above.
Please note
If the above does not include the file (file modified) Changes to the "WAIprCSS" the version up, Please save the file, fix the "WAIprCSS" theme was upgraded to "newspaper_en".

Notes theme "newspaper_en"

Display confirmation of plug-ins that are packed in an extended version 1.8.1 Geeklog Japanese package has been. But, forum and calendar of plug-ins that are configured on the table because you can not fix the width on the theme, Please note that the size of the iPod touch is not supported. (That layout is broken, that it does not work or there is no lack of information)

Advance editor, it was the right end state is not visible. But, There are advanced part editor toolbar is configured with the nested table was difficult to fix on the theme. The size of the iPod touch has managed to display all the drag and flick in the operation area Advanced Editor by Jquery. But, (X) HTML page is static plugin can't to fix on the theme . Please note here also.(the size of the iPod touch, please post in the post other than the Advanced Editor mode.)

If there is a place that is specified in the value of px (width) of the large width of the site that will be used in this theme, It is very likely that causes the breakdown of layout, please change it to auto or%.

If you do not want to set the style to "last" or "first" pagination, 、Since we set the style to turn off the same design as the numeric portion custom.css, lines, etc. will disappear surround the "last" or "first" and asked to fix as follows: lib-common.php. I has issued a request to Geeklog Bugtracker mark-up and I want you to fix as described below.

         $retval  .= '<span>' . COM_createLink($LANG05[7], $first_url . $last_url ) . '</span> ' . ' | ';
        $pg = '';
        if( ( $curpage - 1 ) > 1 )
        {
            $pg = $sep . $page_str . ( $curpage - 1 );
        }
        $retval .= '<span>' . COM_createLink($LANG05[6], $first_url . $pg . $last_url ) . '</span> ' . ' | ';
    }
    else
    {
        $retval .= '<span>' . $LANG05[7] . '</span> ' . ' | ';
        $retval .= '<span>' . $LANG05[6] . '</span> ' . ' | ';
    }

    for( $pgcount = ( $curpage - 10 ); ( $pgcount <= ( $curpage + 9 )) AND ( $pgcount <= $num_pages ); $pgcount++ )
    {
        if( $pgcount <= 0 )
        {
            $pgcount = 1;
        }

        if( $pgcount == $curpage )
        {
            $retval .= '' . $pgcount . ' ';
        }
        else
        {
            $pg = '';
            if( $pgcount > 1 )
            {
                $pg = $sep . $page_str . $pgcount;
            }
            $retval .= COM_createLink($pgcount, $first_url . $pg . $last_url) . ' ';
        }
    }

    if( !empty( $open_ended ))
    {
        $retval .= '| ' . $open_ended;
    }
    else if( $curpage == $num_pages )
    {
        $retval .= '| ' . '<span>' . $LANG05[5] . '</span> ' . ' ';
        $retval .= '| ' . '<span>' . $LANG05[8] . '</span> ';
    }
    else
    {
        $retval .= '| ' . '<span>' . COM_createLink($LANG05[5], $first_url . $sep
                                         . $page_str . ($curpage + 1) . $last_url) . '</span> ';
        $retval .= ' | ' . '<span>' . COM_createLink($LANG05[8], $first_url . $sep
                                          . $page_str . $num_pages . $last_url) . '</span> ';
    }

    if( !empty( $retval ))
    {
        if( !empty( $msg ))
        {
            $msg .= ' ';
        }
        $retval = '<div class="pagenav">' . $msg . $retval . '</div>';

About the license

License of the theme "newspaper_en", the new license in accordance with the WAIproCSS.WAIproCSS license will be as follows.

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any laterversion.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

For information about downloading the theme "newspaper_en"

Download the theme "newspaper_en", go from the download section White Stage or Geeklog.