Futurama Logo

Welcome to the Futurama Support Site

The Futurama Support Site is the website where you can find Futurama and Futurama Vision documentation. If you have any questions about the support pages or if you want to provide us feedback please send us an e-mail.




Index Styling your website with CSS
Previous  |  Next

 1      About Futurama
 1.1        Version information
 1.2        Getting Started
 1.2.1          Futurama Website
 1.2.1.1            Behavior of Futurama regarding TimeOuts, Login and Logoff
 1.2.1.2            Replacing an existing Futurama Session
 1.2.2          Futurama Webservice
 1.2.2.1            warmUpDocuments
 1.2.3          Futurama Export
 1.3        Overview - Futurama Modules
 1.3.1          Overview - Futurama Accounts
 1.3.2          Overview - Futurama Server
 1.3.3          Overview - Futurama Monitor
 1.3.4          Overview - Futurama Insight
 1.3.5          Overview - Futurama Console
 1.3.6          Overview - Futurama Webservice
 1.4        Loadbalancing Futurama applications
 1.4.1          Getting the most out of Futurama Web using the Load-Balancer
 1.4.2          Application Request Routing
 1.5        Text management and Multi-language
 2      Installation – Configuration – Testing
 2.1        Installation - Futurama Website Edition
 2.1.1          Installation Futurama HTML
 2.1.2          Installation Futurama Monitor
 2.1.3          Installation Futurama Insight
 2.1.4          Installation Futurama Accounts
 2.1.5          Installation SAML2LoadBalancer
 2.2        Installation - Futurama Export Edition
 2.2.1          Installation Futurama Console
 2.2.2          Installation Futurama Server
 2.3        Installation - Futurama Webservice Edition
 2.3.1          Installation Futurama Webservice
 2.4        Installation Futurama Editor
 2.5        Configuration
 2.5.1          Configuration - Cache
 2.5.2          Configuration - Calculation
 2.5.3          Configuration - Debug
 2.5.4          Configuration - File manager
 2.5.5          Configuration - Fileproviders
 2.5.6          Configuration - Format
 2.5.7          Configuration - History
 2.5.8          Configuration - Identity Provider
 2.5.9          Configuration - Log
 2.5.10           Configuration - Mail
 2.5.11           Configuration - Mapping
 2.5.12           Configuration - Monitor
 2.5.13           Configuration - PlugIns
 2.5.14           Configuration - Rendering
 2.5.15           Configuration - ScenarioRecording
 2.5.16           Configuration - Security
 2.5.17           Configuration - Server
 2.5.18           Configuration - Vision
 2.5.19           Configuration - WebAPI
 2.6        Logging
 2.7        Troubleshooting
 2.8        Security - hardening
 3      Updating and file compatibility
 3.1        Updating Futurama - Compatibility behavior
 3.2        Converting Futurama documents
 3.3        12819 - DataTable file updates
 3.4        12889 - DataTable file updates
 3.5        Conversion web.config to .NET Framework 4
 3.6        Deprecated conversion formulas
 4      Futurama Editor - How to
 4.1        At first glance
 4.2        Developing in the Futurama Editor
 4.2.1          Working with objects
 4.2.2          Evaluating objects
 4.2.3          Finding objects
 4.3        Transferring objects
 4.4        Testing objects
 4.5        Validating objects
 4.6        Troubleshooting objects
 4.7        Advanced/special functionality
 4.8        Checking the layout of objects
 5      Futurama - Formulas
 5.1        Futurama Formulas - Date and time
 5.1.1          Date
 5.1.2          Day
 5.1.3          Days360
 5.1.4          Days360Excel
 5.1.5          DaysInMonth
 5.1.6          DaysInPeriod
 5.1.7          Min
 5.1.8          Max
 5.1.9          Month
 5.1.10           Now
 5.1.11           WeekDay
 5.1.12           Year
 5.2        Futurama Formulas - Math
 5.2.1          Abs
 5.2.2          Add
 5.2.3          Divide
 5.2.4          Floor
 5.2.5          Ln
 5.2.6          Log
 5.2.7          Log10
 5.2.8          Mod
 5.2.9          Multiply
 5.2.10           Pi
 5.2.11           Power
 5.2.12           Rand
 5.2.13           Round
 5.2.14           RoundDown
 5.2.15           RoundUp
 5.2.16           SquareRoot
 5.2.17           Subtract
 5.3        Futurama Formulas - Statistical
 5.3.1          AverageDeviation
 5.3.2          Beta
 5.3.3          Binomial
 5.3.4          Covariance
 5.3.5          Factorial
 5.3.6          Gamma
 5.3.7          GeometricMean
 5.3.8          Lognormal
 5.3.9          Max
 5.3.10           Median
 5.3.11           Min
 5.3.12           Normal
 5.3.13           StandardDeviation
 5.3.14           Uniform
 5.3.15           Variance
 5.4        Futurama Formulas - Text
 5.4.1          CalculateBase64Hashcode
 5.4.2          CalculateXmlHashcode
 5.4.3          Concatenate
 5.4.4          ConcatenateBase64
 5.4.5          ContainsText
 5.4.6          Convert.CSV.2.XML
 5.4.7          ConvertFromBase64
 5.4.8          ConvertToBase64
 5.4.9          ConvertXml
 5.4.10           DecodeURL
 5.4.11           DecryptXml
 5.4.12           EncodeURL
 5.4.13           EncryptXml
 5.4.14           Find
 5.4.15           HashBase64EncodedFile
 5.4.16           HashBase64EncodedFileWithBase64
 5.4.17           HashText
 5.4.18           HashTextWithBase64
 5.4.19           Left
 5.4.20           Len
 5.4.21           Linefeed
 5.4.22           Lower
 5.4.23           Mid
 5.4.24           Proper
 5.4.25           ReadConfigKey
 5.4.26           ReadDirectoryNames
 5.4.27           ReadFile
 5.4.28           ReadFileAsBase64
 5.4.29           ReadFileNames
 5.4.30           ReadFileWithEncoding
 5.4.31           ReadXPathScalar
 5.4.32           ReadXPathVector
 5.4.33           Repeat
 5.4.34           Right
 5.4.35           Substitute
 5.4.36           Trim
 5.4.37           TrimLeft
 5.4.38           TrimRight
 5.4.39           Upper
 5.4.40           ValidatePattern
 5.4.41           XsdMessages
 5.5        Futurama Formulas - Logical
 5.5.1          And
 5.5.2          IsEmpty
 5.5.3          If
 5.5.4          IsEqual
 5.5.5          IsEven
 5.5.6          IsGreater
 5.5.7          IsGreaterEqual
 5.5.8          IsIBANChecksumValid
 5.5.9          IsLess
 5.5.10           IsLessEqual
 5.5.11           IsMemberOfGroup
 5.5.12           IsNotEqual
 5.5.13           IsOdd
 5.5.14           IsValidXml
 5.5.15           Not
 5.5.16           Or
 5.5.17           ValidateNPR
 5.6        Futurama Formulas - Table
 5.6.1          FindNextRow
 5.6.2          FindPreviousRow
 5.6.3          FindRow
 5.6.4          Sort
 5.6.5          VLookUp
 5.7        Futurama Formulas - Document
 5.7.1          CountErrors
 5.7.2          GetPathToDataFiles
 5.7.3          GetPortNumber
 5.7.4          GetRelativePathToDataFiles
 5.7.5          GetSessionID
 5.7.6          IsLicenceAvailable
 5.7.7          ReadError
 5.7.8          ReadIdentityProviderResult
 5.7.9          ReadRequestIP
 5.7.10           ReadRequestParameter
 5.7.11           ReadUserAgent
 5.7.12           ReadVersionNumber
 5.7.13           SessionTimeOut
 5.7.14           URL
 5.7.15           UserName
 5.8        Futurama Formulas - Conversion
 5.8.1          Convert.Excel.to.XML
 5.8.2          ConvertJSONtoXml
 5.8.3          ConvertTextToDate
 5.8.4          ConvertTextToNumber
 5.8.5          ConvertToBoolean
 5.8.6          ConvertToDouble
 5.8.7          ConvertToLong
 5.8.8          ConvertToString
 5.8.9          FormatDate
 5.8.10           FormatNumber
 5.8.11           Value
 5.9        Futurama Formulas - Matrix
 5.9.1          AddMatrices
 5.9.2          AddScalarToMatrix
 5.9.3          Cumulative
 5.9.4          CumulativeProductMatrix
 5.9.5          Distinct
 5.9.6          DivideMatrices
 5.9.7          DivideMatrixScalar
 5.9.8          DivideScalarMatrix
 5.9.9          Exponent
 5.9.10           First
 5.9.11           Floor
 5.9.12           If
 5.9.13           Index
 5.9.14           Inverse
 5.9.15           IsEqual
 5.9.16           IsGreater
 5.9.17           IsGreaterEqual
 5.9.18           IsNotEqual
 5.9.19           IsLess
 5.9.20           IsLessEqual
 5.9.21           Join
 5.9.22           Last
 5.9.23           Length
 5.9.24           MatrixProduct
 5.9.25           Max
 5.9.26           MaxScalarMatrix
 5.9.27           Mean
 5.9.28           Mid
 5.9.29           Min
 5.9.30           MinScalarMatrix
 5.9.31           MultiplyMatrices
 5.9.32           MultiplyMatrixVector
 5.9.33           MultiplyScalarMatrix
 5.9.34           Percentile
 5.9.35           PowerMatrix
 5.9.36           PowerMatrixScalar
 5.9.37           PowerScalarMatrix
 5.9.38           ReadMatrixFromXml
 5.9.39           Repeat
 5.9.40           Replace
 5.9.41           Reshape
 5.9.42           ReverseCumulativeProductMatrix
 5.9.43           ReverseMatrix
 5.9.44           Size
 5.9.45           Split
 5.9.46           SquareRootMatrix
 5.9.47           Step
 5.9.48           SubtractMatrices
 5.9.49           SubtractMatrixScalar
 5.9.50           SubtractScalarMatrix
 5.9.51           Sum
 5.9.52           Transpose
 5.9.53           UnitMatrix
 5.9.54           Vector
 5.10         Creating custom formulas in Futurama
 6      Futurama - Objects
 6.1        Action
 6.2        Aggregation
 6.3        Button
 6.4        ChangeValue
 6.5        CheckBox
 6.6        ClearCache
 6.7        DatabaseField
 6.8        DatabaseView
 6.9        DataTable
 6.10         DateBox
 6.11         DocConverter
 6.12         Document
 6.13         Download
 6.14         DropDownList
 6.15         EmailConverter
 6.16         ExcelConverter
 6.17         FileSaver
 6.18         FileUploader
 6.19         Fixed
 6.20         Formula
 6.21         GraphConverter
 6.22         HTMLInclude
 6.23         InterfacesNode
 6.24         LogMessage
 6.25         Navigator
 6.26         Node
 6.27         RadioButton
 6.28         RadioGroup
 6.29         Range
 6.30         Reference
 6.31         SubDocument
 6.32         TextBox
 6.33         UserTable
 6.34         UserVariable
 6.35         WebLabel
 6.36         WebListBox
 6.37         WebPage
 6.38         WebPanel
 6.39         WebReference
 6.39.1           WebReference - WCF Configuration
 6.40         WebService
 6.41         WebSlider
 6.42         WordConverter
 6.43         XmlBuilder
 6.44         XmlConverter
 6.45         XmlField
 6.46         XmlNode
 7      Futurama - Vision References
 7.1        Data
 7.1.1          ReadData
 7.1.2          WriteMessage
 7.1.3          GetPersonIdentifiers
 7.1.4          CreatePerson
 7.2        DataStore
 7.2.1          DeleteDataItem
 7.2.2          DeleteDataItemHierarchy
 7.2.3          DeleteDataItems
 7.2.4          GetDataItem
 7.2.5          GetDataItemHierarchy
 7.2.6          GetDataItems
 7.2.7          StoreData
 7.3        Accounts
 7.3.1          Activate Account
 7.3.2          Change Account
 7.3.3          Create Account
 7.3.4          GetQuestion
 7.3.5          GetQuestions
 7.3.6          Login
 7.3.7          ReadData
 7.3.8          ReinitializeAccount
 7.4        General
 7.4.1          TestConnection
 8      Futurama Vision
 8.1        Installation Futurama Vision
 8.1.1          Installation Futurama Vision Management Site
 8.1.2          Installation or Upgrade of the Futurama Vision Database
 8.2        Futurama Vision Management Site
 8.2.1          Futurama Vision Management Site - Admin
 8.2.2          Futurama Vision Management Site – Security
 8.2.3          Futurama Vision Management Site – Skinning
 8.2.4          Importing data into Futurama Vision
 8.2.4.1            Importing data by webservice
 8.2.4.2            Importing data from a Zip-file
 8.2.4.3            Importing data with Futurama Vision Batch
 8.2.4.4            Futurama Vision Webservice Security
 8.2.5          Further processing of data into Futurama Vision
 8.3        Futurama Vision File manager
 8.4        Activity overview
 8.5        Storing data in Vision from a Futurama application
 8.6        Futurama Vision – Data
 8.7        Futurama Accounts - Management Site
 8.7.1          Futurama Accounts - Table in Vision Database
 8.8        Futurama Server - Management Site
 8.8.1          Special Futurama Server Jobs
 8.9        Futurama Register - Management Site
 8.9.1          Configuration - Futurama Register
 8.10         Retrieving AppEvents from Futurama Vision
 8.11         Adding CustomPages to Vision
 9      Futurama Intermediate Control Output (FICO)
 9.1        FICO example - Change/Add HTML headers
 9.2        FICO example - Change Graph
 9.3        HTML5 Template
 10       Futurama Web API
 10.1         Postbacks of Futurama webcontrols
 10.2         Retrieving Resources using Web API
 10.3         WebAPI Session management
 11       Tutorials - Overview
 11.1         Tutorials - Examples and Downloads
 11.2         Beginners
 11.2.1           Creating formulas with Futurama
 11.2.1.1             Exercise 1: Pythagorean Theorem (Easy)
 11.2.1.2             Exercise 2: Newspaper stall (Medium)
 11.2.1.3             Exercise 3: Recursive functions (Difficult)
 11.2.1.4             Exercise 4: Leap Year (Difficult)
 11.2.1.5             Exercise 5: The Guessing Game I (Medium)
 11.2.2           Creating a Website Application
 11.2.2.1             Exercise 1: Creating a Website (Easy)
 11.2.3           Styling your website with CSS
 11.2.3.1             Exercise 1: Adding CSS (Easy)
 11.2.4           Adding interactivity to your website
 11.2.4.1             Exercise 1: Summation (Easy)
 11.2.4.2             Exercise 2: The Guessing Game II (Medium)
 11.2.4.3             Exercise 3: Nationality (Medium)
 11.2.4.4             Exercise 4: Nationality - RepeatTarget (Medium)
 11.2.4.5             Exercise 5: Reversed Guessing (Difficult)
 11.2.5           Working with Tables
 11.2.5.1             Exercise 1: Average (Easy)
 11.2.5.2             Exercise 2: Boundary values (Difficult)
 11.2.5.3             Exercise 3: Standard Deviation (Medium)
 11.2.6           Reading and processing XML-data in Futurama
 11.2.6.1             Exercise 1: Shares (Medium)
 11.2.7           Adding Graphs in Futurama
 11.2.7.1             Exercise 1: World Population (Easy)
 11.2.8           Working with Actions in Futurama
 11.2.8.1             Exercise 1: Changing Colors (Easy)
 11.2.8.2             Exercise 2: On and Off (Medium)
 11.2.8.3             Exercise 3: The ChangeValue object (Difficult)
 11.2.8.4             Exercise 4: The Guessing Game III (Medium)
 11.2.8.5             Exercise 5: CheckBox (Medium)
 11.2.9           Multiple Pages and Navigation
 11.2.10            Using XSLT to display data
 11.2.10.1              Exercise 1: Overview Summation (Easy)
 11.2.10.2              Exercise 2: Persons (Medium)
 11.2.10.3              Exercise 3: Leap Year Overview (Difficult)
 11.2.11            Webservices in Futurama
 11.2.11.1              Exercise 1: Example (Easy)
 11.2.12            Creating a Webservice Application
 11.2.12.1              Exercise 1: Add (Easy)
 11.2.12.2              Exercise 2: Webservice Nationality (Medium)
 11.2.13            Creating a Console Application
 11.2.13.1              Exercise 1: Adding extra fields (Easy)
 11.2.14            Generating Documents
 11.2.14.1              Exercise 1: Tax Rate (Medium)
 11.2.14.2              Exercise 2: Tax Rates Table (Difficult)
 11.3         Advanced
 11.3.1           Responsive Design
 11.3.1.1             Exercise 1: Orientation
 11.3.1.2             Exercise 2: Target different screen sizes
 11.4         Older Tutorials (Futurama Version 3.2)
 11.4.1           Futurama Editor Tutorial 1: The first sum
 11.4.2           Futurama Editor Tutorial 2: An annuity
 11.4.3           Futurama Editor Tutorial 3: Working with tables
 11.4.4           Futurama Editor Tutorial 4: Modelling a DB pension plan
 11.4.5           Futurama Editor Tutorial 5: Working with XML
 11.4.6           Futurama Web Tutorial 1: Hello world
 11.4.7           Futurama Web Tutorial 2: Buttons and Actions
 11.4.8           Futurama Web Tutorial 3: Textboxes
 11.4.9           Futurama Web Tutorial 4: DropdownLists
 12       Miscellaneous
 12.1         Responsive website
 12.2         Reducing memory usage for XmlNodes and XmlFields
 12.3         Explaining caching for websites and webservices
 12.4         Certificates - basic information
 12.5         Performance XML operations
 12.6         Creating XSD files and using them in combination with Futurama
 13       Templates
 14       Safe2Save WebAPI Sample
View  |  Print  |  PDF

451 documents found.


Styling your website with CSS

Tutorial

 

Module: Editor

Version: 4.2.1 +

User: Developer / Designer

Level: Beginner

Introduction

In this tutorial we'll show you how to style your website. We will add a stylesheet in which we define what our website must look like. By applying CssClasses to the objects in our application (in the Futurama Editor), we can style the website the way we want it to look. 

 

Prerequisites

- The Futurama Editor must be installed.

- Futurama Runtime must be installed.

- Basic knowledge of CSS is recommended.

- Completing the tutorial Creating a Website Application first, is recommended.

 

Description

In this tutorial we will show you the basics of how to apply CSS (Cascading StyleSheets) in your Futurama-website.

In the previous tutorial we created the website-application, only consisting a number, the result of the savings-formula. In this tutorial we will extend our website with webpanels - the general building 'blocks' for our website - and more content: general content, including graphics and text.
We divide our website into different sections, and give the sections the appropriate content.
By applying CssClasses to the website-objects we created, we can give the object the lay-out we want. Therefore we introduce the stylesheet that we will link to the website. The stylesheet already contains the style-tags we intend to use for our website.

We end up with a website that already shows the basic structure of the website we want to build.

In the next tutorial we will introduce interactivity to the website. We will create input-fields for the interest and cash balance, and the savings account will be calculated based on the values entered.

Video

 
ContentsTime
1) Intro 0 - 1.01
2) Adding structured content 1.01 - 2.35
3) Adding a stylesheet 2.35 - 3.57
4) Styling your website 3.57 - 10.51
image  (rightclick, save as...)
 

Related Topics

- Rendering WebSite objecten: Explains how different Futurama-objects are rendered, and how you can style them with CSS

External Links

- Cascading Style Sheets (CSS) (W3C): Explains what CSS is

- CSS Tutorials (W3Schools): Examples and tutorials that explain how to use CSS

Exercises

  1. Adding CSS (Easy)

Updated: 2013-01-07

 

Previous  |  Next