Introduce yourself here! In order to avoid spam, new users must first comment on the discussion in the 'Introductions' before they become 'full members'
A New Official FlatPress Style Available: Leggero v2
  • I'm pleased to announce that NoWhereMan approved my new take on the classic FlatPress theme. Leggero v2 is part of the FlatPress source code, as an available style for the Leggero theme. 

    I present you, Leggero v2: 

    image

    Some quick details about it: 
    • It's 100% responsive
    • It works properly with Internet Explorer, as well as with any modern web browsers
    • It uses web fonts with shadows, has a transparent sidebar and a fixed background image
    • It looks modern and actual, while still having the "FlatPress / Leggero" feel it should have
    Hope you like it! 

    As I said, it's already part of the FlatPress sources on GitHub (https://github.com/evacchi/flatpress), so you can download the latest source code right away and grab Leggero v2 from the themes folder and test it out. It's a style, within the Leggero theme (like Flatmaas). In case of a new install using the latest sources, simply go to the themes section of the admin CP and select Leggero v2 in the styles option. 

    Click here to download Leggero-v2 from the official FlatPress GitHub repository:

    Thanks! :)
  • There you go, sorry for that: 

    If you want, you can just grab the leggero-v2 style folder inside the Leggero theme. 

    Added the link to the original post. 
  • Hey that's an excellent theme Marc, good work.

    I was just asked to put a new site together for my football club and used yours - with a few interesting tweaks... I added new widget positions to a few of the tpl files so I've got not only a top menu and a bottom widget area, but I also added a lot of conditional statements to widgets.tpl so I now have different column content showing for different pages... I just left the standard "right" widget as a fallback column for any pages where I haven't createed a customised one.

    It works great and looks superb.

    On the CSS side I removed the background colour from the heading, increased the right column width to 23% (from 22% - it looks slightly better and haven't noticed that change causing any sort of problem), and the only real snag I had was to give IE a couple of extra instructions because my version didn't pick up a couple of things in the media queries.

    On a couple of devices I tried it on the column text did look quite small so I increased that a little, and also made the headings there H3 instead of H4 - they really stand out now.

    As far as plugins go I have it running with a few custom plugins alongside the standard ones with no problems. My custom plugins are all on the wiki apart from a couple of new ones - one of them simply displays a PayPal donation button, but another displays events from a Google calendar. I didn't want those showing in every side bar (and it's the same story with a list of news feed titles pulled in with the SimplePie plugin) which is why I ended up having fully customisable ones for specific pages but, now I've done that, I just couldn't imagine going back to being stuck with the same side bar on every page.

  • Thank you for the feedback, I'm glad you like it!  

    I'm really excited to know that you went ahead and improved quite a few things here and there. Any chances you share the code with us when you are done? :)  

    Woot! 
  • Yes, no problem sharing the code - the site is still under wraps until they discuss it at the next Board meeting, but you can see how the Google Calendar plugin looks near the top of the sidebar here...

    http://www.backtodarlo.co.uk/ (N.B. this link will redirect to the new website soon).

    This site doesn't actually use the plugin (I hard-coded the tpl file to get this to work) but the plugin's nice... I can drop it on whichever pages I want.

    Because the Board insisted on having all of their email addresses on the new site (and because I didn't want to do that) I wrote a new plugin last night to convert email addresses to images which works really well.

    You can read more about that one and find your way to the download link via my other forum post...

    http://flatpress.org/vanilla2/discussion/3042/text-to-image-plugin

    I'm going to try and link those images to a contact form so people can just click on any email address to send a message to that person. I'm not sure whether to use the standard FP contact.php or use a pop-up version I've used with FP before.

    I'll add these plugins to the Wiki once I've developed them a bit more. Google calendar seems to work in most browsers... apart from my main browser (I use an old version of Opera... 11.64) but it doesn't really do any damage there... it just doesn't display any items, but I'm probably the only visitor to the site who can't see the events. In any Opera desktop version after that and in most other browsers it works just great.

    Other plugins of note which I'm using on the forthcoming site are the Static Entry plugin (see the wiki) and also another new one which I wrote to display the league table in a widget.

  • Here's the code I have in widgets.tpl to give me the customised side bars. It's not so clean and tidy code because I made it up and added to it as I went along, but it shows how it works.

    //begin widgets.tpl code//


    		
    <div id="column">

    {php}if(basename($_SERVER['REQUEST_URI']) == '?page=aboutus'){ {/php}


    {widgets pos=BOXaboutus}

    <div id="sticky-{counter}" class="sticky entry">
    <h3>{$subject}</h3>
    {$content}
    </div>

    {/widgets}

    {php}} else {{/php}

    {php}if(basename($_SERVER['REQUEST_URI']) == '?page=membership'){ {/php}


    {widgets pos=BOXmembership}

    <div id="sticky-{counter}" class="sticky entry">
    <h3>{$subject}</h3>
    {$content}
    </div>

    {/widgets}

    {php}} else {{/php}

    {php}if(basename($_SERVER['REQUEST_URI']) == '?page=lottery'){ {/php}


    {widgets pos=BOXlottery}

    <div id="sticky-{counter}" class="sticky entry">
    <h3>{$subject}</h3>
    {$content}
    </div>

    {/widgets}

    {php}} else {{/php}

    {php}if(basename($_SERVER['REQUEST_URI']) == '?page=events'){ {/php}

    {widgets pos=BOXevents}

    <div id="sticky-{counter}" class="sticky entry">
    <h3>{$subject}</h3>
    {$content}
    </div>

    {/widgets}

    {php}} else {{/php}

    {php}if(basename($_SERVER['REQUEST_URI']) == 'index.php?x=cat:100'){ {/php}


    {widgets pos=BOXb2d}

    <div id="sticky-{counter}" class="sticky entry">
    <h3>{$subject}</h3>
    {$content}
    </div>

    {/widgets}

    {php}} else {{/php}

    {php}if(basename($_SERVER['REQUEST_URI']) == '?page=fanstravel'){ {/php}


    {widgets pos=BOXfanstravel}

    <div id="sticky-{counter}" class="sticky entry">
    <h3>{$subject}</h3>
    {$content}
    </div>

    {/widgets}

    {php}} else {{/php}

    {php}if(basename($_SERVER['REQUEST_URI']) == '?page=officiallinks'){ {/php}


    {widgets pos=BOXofficiallinks}

    <div id="sticky-{counter}" class="sticky entry">
    <h3>{$subject}</h3>
    {$content}
    </div>

    {/widgets}

    {php}} else {{/php}

    {php}if(basename($_SERVER['REQUEST_URI']) == ''){ {/php}

    {widgets pos=BOXright}
    <div id="sticky-{counter}" class="sticky entry">
    <h3>{$subject}</h3>
    {$content}
    </div>
    {/widgets}

    {php}} else {{/php}

    {php}if(substr(basename($_SERVER['REQUEST_URI']), 0, 4) == '?x=e'){ {/php}

    {widgets pos=BOXleft}
    <div id="sticky-{counter}" class="sticky entry">
    <h3>{$subject}</h3>
    {$content}
    </div>
    {/widgets}

    {php}} else {{/php}

    {php}if(substr(basename($_SERVER['REQUEST_URI']), 0, 4) == 'cont'){ {/php}


    {widgets pos=BOXcontactpage}

    <div id="sticky-{counter}" class="sticky entry">
    <h3>{$subject}</h3>
    {$content}
    </div>

    {/widgets}

    {php}} else {{/php}

    {php}if(substr(basename($_SERVER['REQUEST_URI']), 0, 4) == 'sear'){ {/php}


    {widgets pos=BOXsearchpage}

    <div id="sticky-{counter}" class="sticky entry">
    <h3>{$subject}</h3>
    {$content}
    </div>

    {/widgets}

    {php}} else {{/php}

    {php}if(substr(basename($_SERVER['REQUEST_URI']), 0, 10) == '?page=info'){ {/php}

    {widgets pos=BOXgeneralstaticpage}
    <div id="{$id}">
    <h3>{$subject}</h3>
    {$content}
    </div>
    {/widgets}

    {php}} else {{/php}

    {widgets pos=BOXanyotherpage}

    <div id="sticky-{counter}" class="sticky entry">
    <h3>{$subject}</h3>
    {$content}
    </div>

    {/widgets}

    {php}
    }
    }
    }
    }
    }
    }
    }
    }
    }
    }
    }
    }
    {/php}




    //end widgets.tpl code// 


    You also need to register the widgetsets in theme.conf.php for it all to work, like so:

    // register widgetsets
    register_widgetset('top');
    register_widgetset('sticky');
    register_widgetset('left');
    register_widgetset('right');
    register_widgetset('BOXleft');
    register_widgetset('BOXright');
    register_widgetset('fblike');
    register_widgetset('contentfollower');
    register_widgetset('bottom');
    register_widgetset('BOXaboutus');
    register_widgetset('BOXmembership');
    register_widgetset('BOXlottery');
    register_widgetset('BOXevents');
    register_widgetset('BOXb2d');
    register_widgetset('BOXfanstravel');
    register_widgetset('BOXofficiallinks');
    register_widgetset('BOXgeneralstaticpage');
    register_widgetset('BOXcontactpage');
    register_widgetset('BOXsearchpage');
    register_widgetset('BOXanyotherpage'); 
     
     





  • To add the top menu I added a new widget position in header.tpl, like this:


    <div id="outer-container">

    <div id="menu">
    {widgets pos=top}
    <div id="{$id}" class="topw">
    {$content}
    </div>
    {/widgets}
    </div>

    and styled it like this:


    /* MENU*/
    #menu {
    color:#fff;
    font-size:14px;
    font-weight:bold;
    margin: 0px auto;
    padding: 10px;
    text-align: center;
    width: 960px;
    font-size:16px;
    line-height:20px;
    }
    #menu ul{
    height: 11px;
    list-style: none;
    margin: -10px auto;
    padding: 5px 0 10px 0 !important;
    }
    #menu li{
    padding: 0px 20px;
    display: inline;
    border-left: 1px solid rgb(128,128,128);
    border-right: 1px solid rgb(192,192,192);
    border:none;
    }
    #menu a {}
    #menu a:hover{text-decoration: underline;color: #fff;}
  • This is my revised index.tpl. You can see there I've added both a sticky post position which only shows for a particular category, and another widget position to show some content at the end of the blog index page, or at the end of each individual post you look at:


    {include file=header.tpl}

    <div id="main">

    {php}if(basename($_SERVER['REQUEST_URI']) == '?x=cat:100'){ {/php}


    {widgets pos=sticky}

    <div id="sticky-{counter}" class="sticky entry" style="margin-bottom:20px;">
    <h3>{$subject}</h3>
    {$content}
    </div>

    {/widgets}

    {php}}{/php}

    {entry_block}

    {entry}
    {include file='entry-default.tpl'}
    {/entry}

    <div class="navigation">
    {nextpage}{prevpage}
    </div>

    {/entry_block}

    {widgets pos=contentfollower}

    <div id="contentfollower-{counter}" class="contentfollower entry" style="clear:both; padding-top:20px;">
    <h3>{$subject}</h3>
    {$content}
    </div>

    {/widgets}

    </div>


    {include file=widgets.tpl}

    {include file=footer.tpl}
  • The beginning of my footer.tpl now looks like this:


    </div>

    <div id="bottombar">
    {widgets pos=bottom}
    <div id="{$id}" class="bottombar">
    <h4>{$subject}</h4>
    {$content}
    </div>
    {/widgets}
    </div>

    <div id="footer">
    {action hook=wp_footer}


    The styling for the bottom bar lets you put a row of up 4 blockparser widgets above the page footer...




    /* BOTTOM BAR*/
    #bottombar {
    /* background:#fff; */
    clear: both;
    padding: 10px;
    text-align:center;
    font-size: 80%;
    margin: 0px auto;
    }
    #bottombar ul {
    list-style-type: none;
    list-style-position: inside;
    text-align:left;
    color:#6699CC;
    font-size:130%;
    }
    #bottombar p {
    text-align:left;
    color:#fff;
    font-size:130%;
    }
    #bottombar h4{
    /* Titles of the sections */
    border-bottom:6px solid #353E44;
    background-color:#303031;
    color: #fff;
    margin-bottom: .7em;
    height:20px;
    padding:7px;
    font-weight:bold;
    text-align:center;
    font-size:150%;
    text-transform: uppercase;
    }
    #bottombar div{
    width:180px;
    width:230px !important;
    margin:2px;
    display:inline-block;
    vertical-align:top;
    }
  • Using the same idea as I had for the custom side bars I decided to add an include to a new widgets template file I've created to give me a very customisable content area below each static page. It's a little bit unmanageable now, to be honest, because my widget panel is now about 10x longer than the standard one, but it provides me with a kind of sandwich of content which can be displayed either on all static pages, or just that one, so I can display relevant additional information to the bottom of a page as well as a position to broadcast information or ads across the whole site, either above or below the page-specific information I may have already added below the main content area.

    It works really well - hopefully my site will be given the all clear before next weekend, so you can take a look and see what all of the above gobbledigook means in reality :D 

Start a New Discussion

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion