Lyyti

https://lyyti.readme.io/
Admin
Lyyti is an event management platform with a RESTful API for managing events, registrations, and...
Tokens:13,314
Snippets:153
Trust Score:9.9
Update:4 months ago
Show doc for...
Tokens:
Raw
### CNAME DNS Record Example

Source: https://lyyti.readme.io/docs/custom-domain

Example of how to create a CNAME DNS record pointing to Lyyti's custom domain.

```dns
events.example.org IN CNAME custom.lyyti.events.
```

--------------------------------

### HTTP Request Header Example

Source: https://lyyti.readme.io/docs/other-requirements

Example of the Accept and Authorization HTTP headers for an API request.

```http
Accept: application/json; charset=utf-8
Authorization: LYYTI-API-V2 public_key=aabbcc, timestamp=1234567890, signature=xxyyzz123
```

--------------------------------

### PHP Implementation

Source: https://lyyti.readme.io/docs/authentication-and-authorization

Example implementation in PHP for generating the Authorization header and making an API request.

```php
<?php

define('API_ROOT', 'https://api.lyyti.com/v2/');

$public_key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$private_key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$call_string = 'events/<event_id>?query1=value1&query2=value2';
$timestamp_sec = time();

$msg = implode(',', [
    $public_key,
    $timestamp_sec,
    $call_string,
]);

$signature = hash_hmac(
    'sha256',
    base64_encode($msg),
    $private_key
);

$headers = [
    'Accept: application/json; charset=utf-8',
    sprintf('Authorization: LYYTI-API-V2 public_key=%s, timestamp=%s, signature=%s', $public_key, $timestamp_sec, $signature),
];

$ch = curl_init(API_ROOT . $call_string);
c C:
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$data = json_decode(curl_exec($ch));
curl_close($ch);

```

--------------------------------

### Lyyti API Call Function Example

Source: https://lyyti.readme.io/docs/example-api-call-function

This PowerShell script demonstrates how to construct an API call to Lyyti, including generating authentication headers and making the request.

```PowerShell
$script:LyytiPublicKey = "apitesti"
$script:LyytiPrivateKey = "asdasdasd123"
$script:LyytiAPIBaseUrl = "https://api.lyyti.com/v2/"

function Get-UnixTimeStamp{
    param([DateTime]$DateTime)

    $DateTime = $DateTime.ToUniversalTime()
    Get-Date -Date $DateTime -UFormat %s -Millisecond 0
}

function Get-StringFromBytes{
    param([byte[]]$Bytes)

    $sbinary = ""
    for ($i = 0; $i -lt $Bytes.Length; $i++){
        $sbinary += $Bytes[$i].ToString("X2")
    }
    $sbinary
}

function Get-LyytiSignatureHash{

    param(
        [DateTime]$Timestamp,
        [string]$UnixTimeStamp,
        [string]$Callstring
    )

    if ($UnixTimeStamp -eq $null){
        $UnixTimeStamp = Get-UnixTimeStamp -DateTime $Timestamp
    }

    $message = "$LyytiPublicKey,$UnixTimeStamp,$Callstring"
    $secret = $LyytiPrivateKey

    Write-Verbose "Message: $message"

    $hmacsha = New-Object System.Security.Cryptography.HMACSHA256
    $hmacsha.key = [Text.Encoding]::UTF8.GetBytes($secret)
    $MessageBytes = [Text.Encoding]::UTF8.GetBytes($message)
    $MessageBase64 = [Convert]::ToBase64String($MessageBytes)
    $MessageBase64Bytes = [Text.Encoding]::UTF8.GetBytes($MessageBase64)
    $SignatureHash = $hmacsha.ComputeHash($MessageBase64Bytes)
    $Signature = Get-StringFromBytes -Bytes $SignatureHash
    $Signature.ToLower()
}

function Get-LyytiAuthHeader{
    param($CallString)
    $headers = New-Object "System.Collections.Generic.Dictionary[[String],[String]]"
    $UnixTimeStamp = Get-UnixTimeStamp ([DateTime]::Now)
    $SignatureHash = Get-LyytiSignatureHash -UnixTimeStamp $UnixTimeStamp -Callstring $CallString
    $headers.Add("Accept", "application/json; charset=utf-8")
    $AuthHeader = "LYYTI-API-V2 public_key=$LyytiPublicKey, timestamp=$UnixTimeStamp, signature=$SignatureHash"
    Write-Verbose $AuthHeader
    $headers.Add("Authorization", $AuthHeader)
    $headers
}

function Invoke-LyytiApiCall{
    param($CallString, $Body)

    $header = Get-LyytiAuthHeader -CallString $CallString
    
    if ($Body -ne $null){
        Invoke-RestMethod -Method POST -Uri "$LyytiAPIBaseUrl$CallString" -Headers $header -Body $Body
    }
    else{
        Invoke-RestMethod -Method GET -Uri "$LyytiAPIBaseUrl$CallString" -Headers $header
    }
}
```

--------------------------------

### Python 3.5+ Implementation

Source: https://lyyti.readme.io/docs/authentication-and-authorization

Example implementation in Python 3.5+ for generating the Authorization header and making an API request.

```python
#!/usr/bin/env python3

import hashlib
import hmac
import base64
import time
import urllib.request
import json

API_ROOT = 'https://api.lyyti.com/v2/'

public_key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
private_key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
call_string = 'events/<event_id>?query1=value1&query2=value2'
timestamp_sec = int(time.time())

msg = ','.join([
    public_key,
    str(timestamp_sec),
    call_string,
])

signature = hmac.new(
    private_key.encode('utf-8'),
    msg=base64.b64encode(msg.encode('utf-8')),
    digestmod=hashlib.sha256
).hexdigest()

headers = {
    'Accept': 'application/json; charset=utf-8',
    'Authorization': 'LYYTI-API-V2 public_key={}, timestamp={}, signature={}'.format(public_key, timestamp_sec, signature),
}

request = urllib.request.Request(API_ROOT + call_string, headers=headers)
response = urllib.request.urlopen(request)
data = json.loads(response.read())

```

--------------------------------

### Import Font

Source: https://lyyti.readme.io/docs/element-library

Import a font file, for example from Google Fonts, and use it as the default font.

```css
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
	font-family: 'Open Sans', sans-serif;
}
```

--------------------------------

### Requesting a Specific Event

Source: https://lyyti.readme.io/docs

Example of how to form a call for a specific resource, in this case, an event with ID abc123.

```text
https://api.lyyti.com/v2/events/abc123
```

--------------------------------

### PHP API Call Function

Source: https://lyyti.readme.io/docs/example-api-call-function

A PHP function to make API calls to Lyyti, including signature generation and cURL handling.

```php
<?php
	// NOTE: This function requires cURL to be available to PHP.

	function lyyti_apiCall($call_string, $http_method = 'GET', $payload = null)
	{
		// Generate the signature based on the API keys
		$public_key = 'apitesti';
		$private_key = 'asdasdasd123';
		$timestamp = time();
		$signature = hash_hmac(
			'sha256',
			base64_encode($public_key.','.$timestamp.','.$call_string),
			$private_key
		);

		// Set the required HTTP headers
		$http_headers = array(
			'Accept: application/json; charset=utf-8',
			'Authorization: LYYTI-API-V2 public_key='.$public_key.', timestamp='.$timestamp.', signature='.$signature
		);

		// Initialize the cURL connection
		$curl = curl_init('https://api.lyyti.com/v2/'.$call_string);
		curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);

		// Handle HTTP method and payload
		if ($http_method != 'GET' && isset($payload))
		{
			if ($http_method == 'PATCH')
			{
				$http_headers[] = 'Content-Type: application/merge-patch+json';
			}
			else
			{
				$http_headers[] = 'Content-Type: application/json; charset=utf-8';
			}
			if ($http_method == 'POST')
			{
				curl_setopt($curl, CURLOPT_POST, true);
			}
			else
			{
				curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $http_method);
			}
			curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($payload));
		}

		// Set the HTTP headers and execute the call
		curl_setopt($curl, CURLOPT_HTTPHEADER, $http_headers);
		$result_json = curl_exec($curl);

		// Check for errors
		if ($curl_errno = curl_errno($curl))
		{
			return array('curl_error' => array('errno' => $curl_errno, 'message' => curl_strerror($curl_errno)));
		}
		curl_close($curl);

		// Turn the resulting JSON into a PHP associative array and return it
		$result_array = json_decode($result_json, $assoc = true);
		return $result_array;
	}
?>
```

--------------------------------

### Node.js API Call Function

Source: https://lyyti.readme.io/docs/example-api-call-function

A Node.js function to make API calls to Lyyti, including signature generation and HTTPS handling. Requires 'crypto-js' and 'js-base64' npm packages.

```javascript
// Replace this with whatever you need to do with the results
function resultsHandler(input) {
	// If you use the ?as_array=1 parameter in the API call, the resulting
	// object will have an array named "results" as a property
	input.results.forEach(function(oneResult) {
		console.log(oneResult);
		console.log("\n");
	});
}

function lyyti_apiCall(call_string, callbackFunction) {
  // Store these somewhere safe and smart
	var public_key = 'apitesti';
	var private_key = 'asdasdasd123';

	var CryptoJS = require('crypto-js');    	// npm install crypto-js
	var Base64 = require('js-base64').Base64;   // npm install js-base64
	var HTTPS = require('https');

	var timestamp = Math.floor(new Date()/1000);
	var signature = CryptoJS.HmacSHA256(
		Base64.encode(public_key+','+timestamp+','+call_string),
		private_key
	).toString(CryptoJS.enc.Hex);

	var options = {
		hostname: 'api.lyyti.com',
		path: '/v2/'+call_string,
		method: 'GET',
		headers: {
			'Accept': 'application/json; charset=utf-8',
			'Authorization': 'LYYTI-API-V2 public_key='+public_key+', timestamp='+timestamp+', signature='+signature
		}
	};

	var request = HTTPS.get(options, function (response) {
		var buffer = '';

		response.on('data', function (chunk) {
			buffer += chunk;
		});

		response.on('end', function (err) {
			// This is an example, it's probably better to use promises, async/await, or something similar here
			callbackFunction(JSON.parse(buffer));
		});
	});
}

// Use the as_array=1 parameter to get the results as an array rather than object
lyyti_apiCall('events?as_array=1', resultsHandler);

```

--------------------------------

### API v2 Root Address

Source: https://lyyti.readme.io/docs

The base URL for all API v2 requests.

```text
https://api.lyyti.com/v2
```

--------------------------------

### Basic Layout Template

Source: https://lyyti.readme.io/docs/basics-1

This CSS code defines the root variables for primary colors, background, button styles, header text, fonts, and logo dimensions, providing a foundational template for the enrollment page.

```css
:root {
	--primary-color: #05756F; /* Primary color is used for links, navigation background, buttons if not specified separately, radio buttons, checkboxes and input field focus state */
	--primary-button-bg-color: #05756F; /* Button background color for primary button */
	--background: #3EB2B4; /* Background color or image */
	--button-border-radius: 8px; /* Define how much roundness button corners have */
	--header-text-color: #192832; /* Color used for headers (h1, h2, ...) */
	--font-family: Montserrat; /* Text font */
	--font-family-header: var(--font-family); /* Header text font (defaults to --font-family) */
	--logo: url(logo_URL_here);
	--logo-height: 50px; /* This has to be specified only if you add a logo */
	--logo-height-mobile: 40px; /* Specify if you want different height for mobile */
}
```

--------------------------------

### Headings

Source: https://lyyti.readme.io/docs/element-library

Change headings' color and size.

```css
h1, h2, h3, h4, h5, h6 {
	color: #F00;
	font-family: 'Name of your font', sans-serif;
}

h1 {
	font-size: 22px;
}

h2 {
	font-size: 20px;
}

h3 {
	font-size: 18px;
}

h4 {
	font-size: 16px;
}

h5 {
	font-size: 15px;
}

h6 {
	font-size: 14px;
}
```

--------------------------------

### CSS Legacy Styles

Source: https://lyyti.readme.io/docs/basics-1

This CSS code provides legacy styling for various components including progress bars, navigation, content containers, buttons, and forms.

```css CSS (legacy)
/*** PROGRESS ***/
/* The whole progress bar in the background, behind .progress-bar in z-level */
.progress {
}
/* Progress steps that have been done */
.progress-bar {
}

/*** NAVIGATION ***/
/* Inherited definitions for elements in the navbar, e.g. text. */
nav, .navbar-nav {
}
/* Less than divider icon */
.nav li.divider-icon {
}
/* The navbar container background color etc */
.navbar {
}
/* Navbar cells */
.navbar-nav > li > a {
}
/* Style of completed steps */
.navbar-default .navbar-nav > li > a {
}
/* Style of the active step */
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
}
/* Style of inactive steps */
.navbar-default .navbar-nav > .disabled > a, 
.navbar-default .navbar-nav > .disabled > a:hover, 
.navbar-default .navbar-nav > .disabled > a:focus {
}

/*** CONTENT CONTAINERS ***/
/*  Defines the container with all the elements under the navbar. Includes banner, e.g. if part of the banner is transparent, put this container's opacity to 0 to get the transparency effect */
#letter-container-responsive {
    max-width: 800px !important;
}
/* The container for all content under the top banner */
div#common_content {
}
/* Attention by Lyyti link styles */
.top-powered-by > a {
}

/*** BUTTONS ***/
/* Mother selector, e.g. put border radius here, it will be inherited by all buttons */
.btn {
}
/* Style of the forward buttons */ 
.btn-success, .btn-primary {
}
/* General buttons */
.btn-default {
}
/* Buttons on the thank-you page */
#thanks-page-button-0, #thanks-page-button-1, #thanks-page-button-2, #thanks-page-button-3, #thanks-page-button-4, #thanks-page-button-5, #thanks-page-button-6 {

}

/*** FORMS ***/
/* General form text areas */
.form-control {
}
/* General form labels */
.control-label {
}
```

--------------------------------

### Buttons

Source: https://lyyti.readme.io/docs/element-library

Change buttons' backgrounds, borders and text colors. Use relevant selectors for right buttons. Try them out!

```css
.btn-success, .btn-primary {
	background: #000000;
	color: #ffffff;
	border: 1px solid #000000;
}

.btn-success:hover, .btn-success:focus,.btn-success:active, .btn-primary:hover, .btn-primary:focus,  .btn-primary:active {
	background: #ffffff;
	color: #000000;
	border: 1px solid #ffffff;
}


.btn-default {
	background: #000000;
	color: #ffffff;
	border: 1px solid #000000;
}


.btn-default:hover, .btn-default:active, .btn-default:focus {
	background: #ffffff;
	color: #000000;
	border: 1px solid #ffffff;
}
	

#thanks-page-button-0, #thanks-page-button-1, #thanks-page-button-2, #thanks-page-button-3, #thanks-page-button-4, #thanks-page-button-5, #thanks-page-button-6 {
	background: #ffffff;
	color: #000000;
	border: 1px solid #ffffff;
}


#thanks-page-button-0:hover, #thanks-page-button-1:hover, #thanks-page-button-2:hover, #thanks-page-button-3:hover, #thanks-page-button-4:hover, #thanks-page-button-5:hover, #thanks-page-button-6:hover {
	background: #ffffff;
	color: #000000;
	border: 1px solid #ffffff;
}
```

--------------------------------

### Background image

Source: https://lyyti.readme.io/docs/element-library

Add a background image. It is recommended to also add a background color in case the image is inaccessible.

```css
body {
	background: #ffffff url("path to your image");
}
```

--------------------------------

### Static background image

Source: https://lyyti.readme.io/docs/element-library

Set a static background image with specified positions, size, and attachment.

```css
body {
	background: url("path to your image") bottom center;
	background-size: cover;
	background-attachment: fixed;
}
```

--------------------------------

### Button Shadows

Source: https://lyyti.readme.io/docs/element-library

Give a shadow to the buttons.

```css
.btn {
	box-shadow: 0 2px 2px #000000;
}
```

--------------------------------

### Link Style

Source: https://lyyti.readme.io/docs/element-library

Change the style of links.

```css
a {
	color: #0000FF;
	cursor: pointer;
}

a:hover, a:focus {
	color: #0000FF;
	text-decoration: underline;
}
```

--------------------------------

### Flat Text Field

Source: https://lyyti.readme.io/docs/element-library

Change input fields to flat style.

```css
.form-control {
	box-shadow: none;
	border-color: #cccccc;
}
```

--------------------------------

### CSS Template (legacy)

Source: https://lyyti.readme.io/docs/template

This legacy CSS template provides basic definitions for body, links, and headings, with comments indicating where font stacks and specific font sizes can be customized. It also includes styles for progress bars and content wrappers.

```css
/*

Basic template

If the value is empty, it will be reverted to the minimalist definitions.

*/

/* Here goes the root definitions for fonts and background */
body {
  font-family: /*fontstack here*/;
  font-size: 16px;
  line-height: 21px;
  font-weight: 400;
  color: #333;
  background: #f1f1f1 center no-repeat;
  background-attachment: fixed;
  background-size: cover;
  padding: 70px 0 20vh; } /* Top padding for height of navigation bar */

/* links, good to have underline for better accessibility */
a {
  color: #344DA1;
  text-decoration: underline;
}

/* link definitions when hovered or focused */
a:hover, a:focus {
  color: #336699;
  text-decoration: none; }

/* Headings definitions, no need to change these much */
h1, h2, h3, h4, h5, h6 {
  font-family: /*fontstack here*/;
  line-height: 1.42857;
  font-weight: 700;
  margin-top: .8em;
  margin-bottom: .6em;
  color: #222; }

/* If you want to have specific font sizes, you can easily change them here */
h1 {
  font-size: ;
}

h2 {
  font-size: ; }

h3 {
  font-size: ; }

h4 {
  font-size: ; }

h5 {
  font-size: ; }

h6 {
  font-size: ; }

/* Progress bar definitions, hidden because of custom indicators */
.progress {
  display: none; }

.progress-bar {
  display: none; }

/* This is the outer wrapper element that holds banners and content. This can be set as transparent for example */
#letter-container-responsive {
  max-width: 800px !important;
  padding: 0;
  margin: 0 auto 0;
  background: #fff;
  border: none;
  box-shadow: none; }

/* This element holds the all the content */

```

--------------------------------

### Background color

Source: https://lyyti.readme.io/docs/element-library

Change the color of your text

```css
body {
	background: #ffffff
}
```

--------------------------------

### Progress bar colors

Source: https://lyyti.readme.io/docs/element-library

Change progress bar's colors. '.progress' is the whole bar itself and '.progress-bar' displays progress that has been done.

```css
.progress {	
	background: #ffffff;
}

.progress-bar {
	background: #000000;
}
```

--------------------------------

### Content Width

Source: https://lyyti.readme.io/docs/element-library

The width of the content page defaults to 800px. It can be changed, but test it carefully with your intended registration page, as Lyyti does not officially support widths other than 800px.

```css
:root {
  --content-width: 800px;
}
```

--------------------------------

### CSS Styles for Registration Page

Source: https://lyyti.readme.io/docs/template

This snippet contains CSS rules for styling various elements of the registration page, including the main content area, navigation bar, steps, and alert boxes.

```css
div#common_content {
  padding: 20px 40px 40px;
  border: none;
  line-height: 1.5em;
  margin: auto;
  background: #fff; }

/* Navigation bar font definitions */
nav, .navbar-nav {
  font-family: /*fontstack here*/;
  font-size: 1em;
  opacity: 1;
  text-transform: none;
  font-weight: 400; }

/* Navigation bar background, width, box-shadow, opacity etc */
.navbar-default {
  background: #fff;
  box-shadow: none;
  opacity: 1;
  border: none;
  border-bottom: none;
  -webkit-box-shadow: none;
  box-shadow: none; }

/* Navigation bar content, steps inside this, centered by default */
nav .container {
  background: transparent;
  max-width: 800px; }

/* Defined to be 750px wide in bootstrap if viewport between 768px and 800px, overwrite here for consistency */
@media (min-width: 768px) {
  nav .container {
    width: 800px; } }

.navbar {
  margin-bottom: 0;
  color: #333;
  display: inline-block; }

/* Fixed steps width for enrollment, this can be set to be auto if there's width problems */
nav#enrollment-page-menu .navbar-nav {
  table-layout: fixed; }

nav#enrollment-page-menu .navbar-nav > li {
  width: 100%; }

/* Hiding the ">" icon */
li.divider-icon {
  display: none; }

/* Max width for step cell elements */
.navbar-nav > li {
  max-width: 33.33%; }

.navbar-nav > li > a {
  min-height: 0;
  border: none; }

/* Step cell elements, neutral, best place to affect the navbar height */
.navbar-default .navbar-nav > li > a {
  color: #333;
  background: transparent;
  text-decoration: none;
  padding: 25px 10px 25px;
  margin-bottom: 0;
  border-right: none; }

/* Step indicator, neutral */
.navbar-default .navbar-nav > li > a:after {
  content: "";
  display: block;
  position: absolute;
  width: 0%;
  height: 2%;
  right: 0;
  left: 0;
  bottom: 25%;
  border-radius: 0px;
  margin: 0 auto;
  background: #cc3333;
  z-index: -1;
  -webkit-transition: ease-out all 0.15s, ease-in all 0.15s;
  -moz-transition: ease-out all 0.15s, ease-in all 0.15s;
  -ms-transition: ease-out all 0.15s, ease-in all 0.15s;
  -o-transition: ease-out all 0.15s, ease-in all 0.15s;
  transition: ease-out all 0.15s, ease-in all 0.15s; }

/* Step cell, neutral hover */
.navbar-default .navbar-nav > li > a:hover {
  color: #c33;
  text-decoration: none;
  background: transparent; }

/* Step indicator, neutral hover */
.navbar-default .navbar-nav > li > a:hover:after {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 2%;
  right: 0;
  left: 0;
  bottom: 25%;
  border-radius: 0px;
  margin: 0 auto;
  background: #cc3333;
  z-index: -1; }

/* Step cell, active */
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #c33;
  background: transparent;
  text-decoration: none;
  font-weight: 400; }

/* Step indicator, active */
.navbar-default .navbar-nav > .active > a:after, .navbar-default .navbar-nav > .active > a:hover:after, .navbar-default .navbar-nav > .active > a:focus:after {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 2%;
  right: 0;
  left: 0;
  bottom: 25%;
  border-radius: 0px;
  margin: 0 auto;
  background: #cc3333;
  z-index: -1; }

/* Step indicator positioning for mobile */
@media screen and (max-width: 768px) {
  .navbar-default .navbar-nav > li > a:after {
    bottom: 0; }

  .navbar-default .navbar-nav > li > a:hover:after {
    bottom: 0; }

  .navbar-default .navbar-nav > .active > a:after, .navbar-default .navbar-nav > .active > a:hover:after, .navbar-default .navbar-nav > .active > a:focus:after {
    bottom: 0; } }

/* Step cell, disabled */
.navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus {
  color: rgba(51, 51, 51, 0.5);
  background: transparent;
  text-decoration: none; }

/* Step indicator disabled for the disabled step */
.navbar-default .navbar-nav > .disabled > a:after, .navbar-default .navbar-nav > .disabled > a:hover:after, .navbar-default .navbar-nav > .disabled > a:focus:after, .navbar-default .navbar-nav > .disabled > a:before, .navbar-default .navbar-nav > .disabled > a:hover:before, .navbar-default .navbar-nav > .disabled > a:focus:before {
  display: none; }

/* Event title in mobile */
.nav-event-title {
  position: relative;
  color: #333;
  margin-bottom: 0;
  font-weight: 400; }

/* For infoboxes you can have a primary color border and 5% alpha for the background with rgba() for example */
/* Normal infobox */
.alert-info {
  background: ;
  color: ;
  border: none; }

/* Success infobox */
.alert-success {
  background: ;
  color: ;
  border: none; }

/* Warning alert */
.alert-warning {
  background: ;
  color: ;
  border: none; }

/* Critical alert */
.alert-danger {
  background: ;
  color: ;
  border: none; }

/* Form block selector */
.form-group {
  padding-bottom: 15px; }
```

--------------------------------

### Navigation bar background and text color

Source: https://lyyti.readme.io/docs/element-library

Change navigation bar's background and text color.

```css
.navbar-default {
	background: #ffffff;
  color: #000000;
}

.container {
  background: none;
}
```

--------------------------------

### Add Font

Source: https://lyyti.readme.io/docs/element-library

Change font face from your own font file. You can add multiple sources to one font file for better compatibility.

```css
@font-face {
	src: url("Path to your font file");
	font-family: 'Name of your font', sans-serif;
}

body {
	font-family: 'Name of your font';
}
```

--------------------------------

### Content Area Opacity

Source: https://lyyti.readme.io/docs/element-library

Change content area's opacity. #letter-container-responsive contains all the content in the middle, including banners. #common-content is inside #letter-container-responsive and contains all content elements.

```css
#letter-container-responsive {
	background: rgba(255,255,255,0.5);
	}

#common-content {
	background: rgba(255,255,255,0);
}
```

--------------------------------

### Form Font

Source: https://lyyti.readme.io/docs/element-library

Change font for forms.

```css
.form-control {
	font-family: 'Name of your font', sans-serif;
}
```

--------------------------------

### Default Fonts

Source: https://lyyti.readme.io/docs/basics-1

This CSS code lists default font families that can be used in designs without needing to import new font files.

```css Fonts
:root {
	--font-family: Arial;
	--font-family: Barlow;
	--font-family: Carlito;
	--font-family: Courier New;
	--font-family: Droid Serif;
	--font-family: Garamond;
	--font-family: Georgia;
	--font-family: Lato;
	--font-family: Montserrat;
	--font-family: Myriad Pro;
	--font-family: Noto Serif;
	--font-family: Open Sans;
	--font-family: Playfair Display;
	--font-family: PT Serif;
	--font-family: Roboto;
	--font-family: Source Sans Pro;
	--font-family: Tahoma;
	--font-family: Times New Roman;
	--font-family: Trebuchet MS;
	--font-family: Ubuntu;
	--font-family: Verdana;
}
```

--------------------------------

### Inactive navigation step style

Source: https://lyyti.readme.io/docs/element-library

Change style of inactive navigation steps.

```css
.navbar-default .navbar-nav>.disabled>a, .navbar-default .navbar-nav>.disabled>a:hover, .navbar-default .navbar-nav>.disabled>a:focus {
	color: #000000;
	opacity: 0.6;
}
```

--------------------------------

### Active navigation step style

Source: https://lyyti.readme.io/docs/element-library

Change style of the text in navigation bar that is currently active.

```css
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
	color: #000000;
}
```

--------------------------------

### Button Corners

Source: https://lyyti.readme.io/docs/element-library

Change buttons' corners roundness.

```css
.btn {
	border-radius: 20px;
}
```

--------------------------------

### Progress bar height

Source: https://lyyti.readme.io/docs/element-library

Change the height of progress bar.

```css
.progress {
	height: 6px;
}

.progress-bar {
	height: 6px;
}
```

--------------------------------

### CSS Template

Source: https://lyyti.readme.io/docs/template

This CSS template defines custom properties (variables) for styling the registration page, covering colors, fonts, spacing, and component styles.

```css
:root {
	--primary-color: #05756F;
	--primary-color-hover: color-mix(in srgb, var(--primary-color), black 20%);
	--primary-color-highlight: color-mix(in srgb, var(--primary-color), white 90%);
	--primary-color-disabled: rgba(0, 0, 0, 0.36);
	--primary-text-color: #192832;
	--primary-text-color-highlight: color-mix(in srgb, var(--primary-text-color), white 90%);
	--header-text-color: #11302E;
	--label-text-color: #46545B;
	--form-background-color: #FFF;
	--form-border-radius: 0;
	--form-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
	--background: linear-gradient(130deg, rgba(62, 178, 180), rgba(11, 91, 86));
	--box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	--font-family: Montserrat;
	--font-family-header: var(--font-family);
	--nav-bg-color: var(--primary-color);
	--nav-item-active-color: #FFF;
	--nav-item-disabled-color: #F7ECDF;
	--nav-item-hover-color: color-mix(in srgb, var(--nav-bg-color), black 20%);
	--nav-box-shadow: none;
	--input-field-bg-color: var(--form-background-color);
	--input-field-border-color: #D1D5DB;
	--input-field-height: 40px;
	--input-field-border-radius: 8px;
	--input-field-focus-color: var(--primary-color);
	--button-border-radius: 24px;
	--primary-button-bg-color: var(--primary-color);
	--primary-button-border-color: var(--primary-button-bg-color);
	--primary-button-text-color: #FFF;
	--primary-button-bg-color-hover: color-mix(in srgb, var(--primary-button-bg-color), black 20%);
	--primary-button-border-color-hover: var(--primary-button-bg-color-hover);
	--primary-button-text-color-hover: var(--primary-button-text-color);
	--default-button-bg-color: var(--form-background-color);
	--default-button-border-color: var(--primary-button-bg-color);
	--default-button-text-color: var(--default-button-border-color);
	--default-button-bg-color-hover: color-mix(in srgb, var(--default-button-border-color), white 90%);
	--default-button-border-color-hover: var(--default-button-border-color);
	--default-button-text-color-hover: var(--default-button-text-color);
	--error-color: #CF482E;
	--error-color-dark: color-mix(in srgb, var(--error-color), black 20%);
	--error-color-light: color-mix(in srgb, var(--error-color), white 90%);
	--error-color-bg: color-mix(in srgb, var(--error-color), white 80%);
	--error-button-text-color: #FFF;
	--logo: none;
	--logo-height: 0px;
	--logo-height-mobile: var(--logo-height);
	--form-top-padding: 64px;
	--link-color: var(--primary-color);
	--link-color-hover: color-mix(in srgb, var(--link-color), black 20%);
	--link-color-disabled: var(--primary-color-disabled);
	--selection-component-color: var(--primary-color); /* checkbox, radio buttons */
	--font-size-body: 16px;
	--font-size-label: var(--font-size-body);
	--font-size-input-field: var(--font-size-body);
	--font-size-table: var(--font-size-body);
	--font-size-nav: var(--font-size-body);
	--font-size-nav-mobile: 10px;
	--font-size-button-sm: 14px;
	--font-size-button-md: 16px;
	--font-size-button-lg: 18px;
	--font-size-privacypolicy: 14px;
}
```

--------------------------------

### Content Area Background

Source: https://lyyti.readme.io/docs/element-library

Change content area's background color.

```css
#letter-container-responsive {
	background: #ffffff;
}

#common-content {
	background: #ffffff;
}
```

--------------------------------

### Bevel Text Field

Source: https://lyyti.readme.io/docs/element-library

Change input fields to bevel style.

```css
.form-control {
	box-shadow: inset 0 0 1px rgb(128,128,128);
	border-color: #cccccc;
}

.form-control:focus {
	box-shadow: inset 0 0 2px rgb(128,128,128);
	border-color: #cccccc;
}
```

--------------------------------

### Navigation bar bottom border

Source: https://lyyti.readme.io/docs/element-library

Add a border with color to the bottom of the navigation bar.

```css
.navbar-default {
	border-bottom: 2px solid #000000;
}
```

--------------------------------

### CSS for Registration Page Template

Source: https://lyyti.readme.io/docs/template

This CSS code styles various elements of a registration page, including input fields, buttons, and mobile navigation.

```css
.form-control {
  background: transparent;
  padding: 0px 6px;
  color: #333;
  border-radius: 0px;
  border: 1px solid #ccc;
}

/* Focused text box */
.form-control:focus {
  border-color: #000;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(51, 51, 51, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(51, 51, 51, 0.6);
}

/* Text box with error */
.has-error .form-control {
  border: 1px solid #a94442;
}

.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline {
  color: #a94442;
}

/* Text box with error */
.has-error .form-control:focus {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(169, 68, 66, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(169, 68, 66, 0.6);
}

/* Small descriptive texts with from controls */ 
.control-label {
  font-family: /* Fontstack here */;
  font-weight: normal; }

/* Root button defs, mainly fonts and transition times to all buttons. */
.btn {
  font-family: /* Fontstack here */;
  border-radius: 0px;
  font-weight: normal;
  border: none;
  position: relative;
  -webkit-transition: ease-in-out all .2s;
  -moz-transition: ease-in-out all .2s;
  -ms-transition: ease-in-out all .2s;
  -o-transition: ease-in-out all .2s;
  transition: ease-in-out all .2s; }

/* Primary button that takes you forward in the registration process. */
.btn-success, .btn-primary {
  position: relative;
  background: #aaa;
  color: #000;
  border: 1px solid #000;
  box-sizing: content-box; }

/* Hover state of primary buttons. For example, change border, background, box-shadow, size, x/y location */
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: #222;
  color: #fff;
  border: 5px solid #000;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
   }

/* This is for all the other default buttons */
.btn-default {
  background: #aaa;
  color: #000;
  border: none;
  position: relative; }

.btn-default:hover, .btn-default:active, .btn-default:focus {
  background: #555;
  color: #000;
  border: none; }

/* Thank you page buttons, mainly positioning. Can be used to individualise by ID*/
#thanks-page-button-0, #thanks-page-button-1, #thanks-page-button-2, #thanks-page-button-3, #thanks-page-button-4, #thanks-page-button-5, #thanks-page-button-6 {
  margin: 0 auto 10px;
  width: 90%;
  position: relative; }

/* --- Mobile nmenu--- */

#mobile-nav {
  padding: 10px; }

/* Coloring of the burger menu buttons */
#mobile-nav .toggle-button, #mobile-nav .dropdown-toggle {
  background: #fff;
  border: 1px solid #333; }

#mobile-nav .toggle-button .bar, #mobile-nav .dropdown-toggle .bar {
  background: #333; }

/* The side menu that opens on mobile */
#menu-mobile {
  background: #fff;
  color: #333; }

/* Cells on mobile menu */
#menu-mobile > ul > li > a {
  color: #333; }

#menu-mobile > ul > li.active {
  background: rgba(51, 51, 51, 0.3); }

/* Rest from this point on are for the event page dropdown menu, if applicaple. These can be omitted if you want so it will revert to the minimalist definitions. It's good to change the colors to match the design */
ul.dropdown-menu {
  padding: 0; }

ul.dropdown-menu, ul.dropdown-menu.dropdown-menu-right {
  background: #fff; }

/* Borders under the menu item cells */
ul.dropdown-menu > li > a {
  border-bottom: 1px solid #000; }

ul.dropdown-menu > li > a, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  background: transparent;
  color: #000; }

ul.dropdown-menu > li > a:hover {
  background: #333;
  color: #fff; }

ul.dropdown-menu > .active > a, ul.dropdown-menu > .active > a:hover {
  background: #000;
  color: #fff;
  position: relative; }

.dropdown-toggle-bars .bar {
  color: #000; }

.navbar-default .navbar-link {
  color: ; }

.slideout-panel {
  position: relative;
  z-index: auto; }

```

--------------------------------

### Navigation bar height

Source: https://lyyti.readme.io/docs/element-library

Change height of navigation bar, changing values as necessary.

```css
.navbar-nav > li > a {
	margin: 20px 0;					
	}	
```

--------------------------------

### Navigation steps text and hover color

Source: https://lyyti.readme.io/docs/element-library

Change color of the text of steps that have been completed in navigation bar and the color of it while hovering.

```css
.navbar-default .navbar-nav > li > a {
	color: #000000;
}

.navbar-default .navbar-nav > li > a:hover {
	color: #FF0000;
}
```

--------------------------------

### Font Color

Source: https://lyyti.readme.io/docs/element-library

Change the color of the font.

```css
body {
	color: #000000;
}
```

--------------------------------

### Font Size

Source: https://lyyti.readme.io/docs/element-library

Change the size of the font of body text.

```css
body {
	font-family: 'Name of the font', sans-serif;
	font-size: 16px;
}
```

--------------------------------

### Banner Width

Source: https://lyyti.readme.io/docs/element-library

By default, banners don't grow to fill up the entire vertical space. If your banner image is too small, you can make it scale up automatically.

```css
.banner-top {
  width: 100%;
}
.banner-bottom {
  width: 100%;
}
```
Tokens:
Raw