Welcome to PressWork!

Want to ask a question or join the discussion? Great! Join now.

In this Discussion

Can PressWork 1.04 be Updated to The Most Current Responsive Design?
  • I don't know if anybody else has as much interest in this as I do, But:

    I switched back to Twenty Eleven until all of PressWork's bugs are worked out. This is not a complaint but strictly a desire. It may be that I don't have the programming skills of quite a few others here, so I'm just winging it.

    I've been trying to learn how Mobile Responsive Design has evolved, and have installed most of the following WordPress Plugins into my site:

    1.) http://wordpress.org/extend/plugins/enhancejs/
    2.) http://wordpress.org/extend/plugins/fitvids-for-wordpress/
    3.) http://www.ramoonus.nl/wordpress/fittext/
    4.) http://wordpress.org/extend/plugins/respondjs/
    5.) http://wordpress.org/extend/plugins/wp-fluid-images/
    6.) http://wordpress.org/extend/plugins/wp-resolutions/

    Can the Developers of PressWork embed these capabilities, scripts, whatever you want to call them, into the next or following version of PressWork. The most difficult of them seems to be the last one (http://adaptive-images.com/). I had to reduce my PressWork 3-column layout to Twenty-Eleven's 2-column in order to get my site to be presentable on Smart Phones. I disabled the WPtouch plugin http://wordpress.org/extend/plugins/wptouch/ since it's theme didn't present my site the way that I wanted it to be seen.

    Again, this is not a complaint at all.....just a dream & request. I would like to have a great 3-column layout (with multiple Header Images) for Desktop viewing, and then some Responsive capabilities to step it down to 2-column for Tablets, and then 1-column for Smart Phones.

    Instead of a Framework redesign, would it be easier for WordPress Developers to alter their basic WordPress Core? Or, am I expecting too much out of WordPress?

    Anybody care to comment?
    Post edited by Shapeshifter 3 at 2012-01-30 16:11:15
  • cestbibicestbibi
    This answer was Accepted.
    You can get PW final here https://github.com/digibomb/PressWork.

    As it is, PW is built using responsive HTML5 & CSS3. It will fit perfectly on an iPad and iPhone, and has quite good image scaling out of the box. I don't think there's a real need for add-ons and plugins, but of course when you customize the layout you have to bear in mind the fluid layout otherwise you will brake it.
    With PW 1.0.4 it's easier to make modifications for lower resolutions.
    There's a new action that you can modify and hook up so you can exactly control the layout on lower resolutions. It's this one


    /*
    * The Media Queries
    */
    function pw_add_media_queries() {
    global $pw_content_width, $pw_first_sidebar, $pw_second_sidebar, $pw_site;
    $ipad = 720 / $pw_site;
    ?>
    @media only screen and (max-device-width: 768px), only screen and (max-width: 768px) {
    #body-wrapper { width: 720px !important; padding: 0 10px; }
    body.fullwidth #maincontent, #headerbanner, #footer { width: 720px !important; }
    #header_image { background-size: 720px !important; height: <?php echo 720/$pw_site*HEADER_IMAGE_HEIGHT; ?>px !important; }
    #maincontent { width: <?php echo ($pw_content_width * $ipad) - 10; ?>px !important; }
    #firstsidebar { width: <?php echo $pw_first_sidebar * $ipad; ?>px !important; }
    #secondsidebar { width: <?php echo ($pw_second_sidebar * $ipad) - 15; ?>px !important; }
    }
    @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    #body-wrapper { width: 420px !important; padding: 0 10px; }
    body.fullwidth #maincontent, #headerbanner, #footer { width: 420px !important; }
    #maincontent { width: 420px !important; }
    #header_image { background-size: 420px !important; height: <?php echo 420/$pw_site*HEADER_IMAGE_HEIGHT; ?>px !important; }
    .home article { width: 100%; }
    #firstsidebar, #secondsidebar { float: none; width: 100% !important; }
    #main-wrapper > li { margin: 0 !important; }
    #extendedfooter .bottom-widget { width: 100%; margin: 0 0 20px; }
    }
    <?php <br />}
    add_action('pw_media_queries', 'pw_add_media_queries');

    .

    That's not to say that we could not have even better responsiveness (specially for screens in lower resolution than the Iphone, for example like the Nexus 1.)
    If there are some css ninjas out there contributions are most welcome!.
    image PressWork Support Moderator