FI-WARE

LAB & TESTBED

An open source blogging tool bassed on Bootstrap Wordpress with Twitter timeline.

Template

Structure

You'll find the following file structure and contents.

  wordpress-bootstrap/
  ├── admin/
  ├── css/
  │   ├── bootstrap-rewrite.css
  │   ├── new_rules.css
  │   └── icon_and_fonts
  │      └── fonts
  │         ├── fonts.css 
  │         └── format fonts.ttf, woff, svg  
  ├── images/
  │   ├── favicon.ico
  │   ├── header-logo.png 


  └── library/
  ├── css/
  ├── images/
  ├── img/
  ├── js/
  └── less/
  └── Php pages...
  └── style.css

Download the FI-WARE wordpress template wordpress-bootstrap.

Css

Customize

FI-WARE style guide's overrides Wordpress Bootstrap and include new addons.

You need download and included in: 
  wordpress-bootstrap/
├── css/
│   ├── bootstrap-rewrite.css   
│   ├── new-rules.css
│   ├── icon_and_fonts
│      └── fonts
│         └── fonts.css
Donwload: bootstrap-rewrite.css and new-rules.css

Install

1. First step to install FI-WARE theme.

Before you can upload a FI-WARE theme, Next you must upload the .ZIP file you just downloaded to your website via the WordPress Dashboard. Log in to wp-admin and click the Appearances > Themes tab. Next click the "Install Themes" button and then click the "Upload" link. Click "Choose File" and locate the .ZIP file you just downloaded and click "Install Now."

2. Installation on a local server.

If you are an avanced developer you´ll like install WP on a local server for a powerfull control.Wordpress souport.

Posts

Rules for a visual unity.

Lead

FI-WARE style guide's is immersed in sub-world in this tutorial. Keep calm!

Read more

FI-WARE style guide's is immersed in sub-world in this tutorial. Keep calm!

Twitter timeline

You need generate a code from Twitter account.

How to make it? wordpress support

  1. <div class="twitter">
  2.   <a class="twitter-timeline" data-tweet-limit="2" href="https://twitter.com/FIware"="2" data-widget-id="378538709693382657">Tweets by @FIware
  3. </a>
  4. <script>
  5.   !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs")
  6. </script>

Heads up! Any wordpress widget of Twitter time line is more slow. This is a better solution at the moment.

Examples >>>>> Go to this site

  • Index of FI-LAB
    @crispinh2o

    We have created here a Youtube video galery with Jquery.js

    download See

  • Comments by Admin of FI-LAB
    @crispinh2o

    Clean and simple

    download See

  • Post with comment of FI-LAB
    @crispinh2o

    with especial highlight comment

    download See