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
  │   ├── font-awesome.min.css
  │   ├── fiware.css
  │   ├── sticky-footer-navbar.css
  │   └── fonts/
  │     ├── font-awesome-webfont formats
  │     └── fonts.css 
  │   
  ├── images/
  │   ├── favicon.ico
  │   ├── header-logo.svg
  │   └── jquery.min.js
  │
  ├── library/
  │   ├── css/
  │   ├── images/
  │   ├── js/
  │   └── less/
  │
  ├── php pages/
  │
  └── style.css/

Download the FI-WARE wordpress template wordpress-bootstrap.

Css

To include new css rules we will include a new file format css and call this file in head´s lines. For better scalability in future updates, do not write in fiware.css

Rewrite

FI-WARE style guide's overrides Wordpress Bootstrap and include new addons. You need download the Wordpress template and included inside:


wordpress-bootstrap/
  ├── admin/
  │
  └── css/
     ├── bootstrap-rewrite.css
     ├── font-awesome.min.css
     ├── fiware.css
     ├── sticky-footer-navbar.css
     └── fonts/
       ├── font-awesome-webfont formats
       └── fonts.css

Install

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."

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.

Headers

We have two options for FI-WARE and FI-Lab.

FI-WARE header.

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <div class="logo-header">
        <a href="index.html" src="img/logos/FI-WARE/FI-WARE_logo-c.svg"><a>   
      <div>    
    <div>
    ...
  </div><!-- /.container-fluid -->
</nav>

FI-Lab header.

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <div class="logo-header">
        <a href="index.html" src="img/logos/Lab/FI-Lab_logo-c.svg"><a>   
      <div>    
    <div>
    ...
  </div><!-- /.container-fluid -->
</nav>

Posts

Rules for a visual unity.

Web font in Firefox

For a correct visualization we will need to make in head´s lines: < link > rel="stylesheet" type="text/css" href="http://"site"/wp-content/themes/wordpress-bootstrap .../fonts.css" Wordpress souport.

Twitter timeline

You need generate a code from Twitter account.

How to make it? wordpress support

<a class="twitter-timeline" data-tweet-limit="2" href="https://twitter.com/FIware" data-data-widget-id="378538709693382657">
  Tweets by @FIware 
<a>
<script> 
  !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");
</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