Table of Contents

CSS & Java Scripts for website customisation

Ingo Updated by Ingo

This module is an optional offer. MATE enables you to create attractive websites quickly and easily without any programming knowledge, using straightforward steps. However, should you wish to create your own CSS or JavaScript for the website, you can do so here. 

What is CSS & Java Script?

"With Cascading Style Sheets (CSS) you can define the appearance of text and HTML elements".

Further information on the use of CSS can be found here:: CSS/Tutorials/Einstieg

"JavaScript (short JS) is a scripting language originally developed by Netscape in 1995 for dynamic HTML in web browsers to evaluate user interactions, modify, reload or generate content and thus extend the possibilities of HTML and CSS". (Source: https://de.wikipedia.org/wiki/JavaScript)

Further information on the use of Java Script can be found here: JavaScript/Tutorials/Einstieg

How can I view the information (HTML codes & scripts) about my website?

  1. Open web page and click right mouse button.
  2. In the info window, click on "Examine" (applies to Google Chrome & may be named differently depending on the browser)
  3. The "console drawer" opens on the right side.
  4. Activate the function "Select an element in the page to inspect it" at the top left.
  5. Move the mouse cursor to the desired position where the information is required (here: form field Company).

ATTENTION: The use of CSS can impair the responsive design of our web pages (automatic adaptation of the design to different screen sizes or aspect ratios) for mobile viewing. Please ALWAYS check the adapted page(s) on a mobile device.

What can be changed with Javascript and CSS?

Below are a few examples that you can use directly for the MATE registration page (website)

Moves teaser text in the header to the right if no form is used in the header:
@media (min-width: 992px) {
.promo .col-md-6:only-child {
margin-left: 50%;
}
}
Line break in the headings
<br />

Example: Heading: The text is too long for one line / Wrap should be done after the word long.

The text is too long for me <br /> for one line.

Changes the text after you have already agreed

$('#registration_warning_already_accepted').text('Please enter the text here');

Changes the darkening of the header image (RGB value plus transparency):

The background of the header text of a website can be changed by checking the appropriate box. This allows you to select a specific colour (RGB) for darkening and to specify the transparency (RGBA value).

f.e. color #003882 as RGB 0, 56, 130 with transparency 0.2

Link to the "Hex to RGB converter"

.promo .color-correction {
background-color: rgba(0, 56, 130, 0.2);
}

 Changes the font on the website

If the standard font is to be replaced by your own (e.g. belonging to the corporate design) font.

NOTE: If you want to use your own font, make sure that you are the owner of this font.

font xy = define own font

body, .map .popover {
font-family: 'font xy', Lato, Helvetica, Arial, sans-serif;
}

Changes the colour of the selected button in the registration form

backround-color = Button color

border-color = Colour of the border of the button

color = Font color in button

#form_button_1 {
background-color: #5f2d87;
border-color: #5f2d87;
color: #ffffff;
}

Changes the transparency of the button and the duration between color and transparency of the button after selection

background-color 0.15 = the higher the value, the less transparent the button

transition 0.5s = the higher the value the longer the switching time between color and transparency after selection

color = button color

#form_button_1:hover, #form_button_1:active {
background-color: rgba(0,0,0,0.15);
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
color: #5f2d87;
}

Changes the colors of the registration form

Background color

.promo .register {
background-color: rgba(206, 217, 231, 0.8);
}

Font color

.promo .register {
color: rgba(0, 51, 102);
}

Text fields in the registration form

background 0.4 = Transparency of the text field

border-color = Color border of the text field

color = Color of the text in the text field

.promo .register .form-control {
background: rgba(0, 0, 0, 0.4);
border-color: #003366;
color: #003366;
}

Dropdown text fields in the registration form

(commands see text fields)

.dropdown-toggle {
background: rgba(0, 0, 0, 0);
border-color: #003366;
color: #003366;
}

Changes the header text and the layout of the registration form on the website

min-width: 992px = Change size pixel (px), changes the size of the header text

promo .col-md-6 = Change of number, changes the arrangement (left, centre...) of the registration document

width: 100% = Changing the size of the registration document

@media (min-width: 992px) {
.promo .col-md-6 {
width: 100%;
}
}

Changes the brightness/transparency of the header background

background-color 0.4 = the higher the value, the darker the background

.promo .color-correction {
background-color: rgba(0, 0, 0, 0.4)
}

Changes the font (size, thickness and line spacing) within the registration form

.register-form label, .register-form p, .register-form .btn-empty {
font-size: 16px;
font-weight: 300;
line-height: 1.4;
}
Changes the background colour of the complete registration form

.promo .register {background-color: #ff0000}

Removes the white hyphen between headline and text in the header

.promo .promo-text hr {display: none}

Changes the spacing of the logo (partners/sponsors) on the website

.partners .list-inline li {
margin-left: 10px;
margin-right: 10px;
}

Changes the font size of the title in the header

percentage font size

.promo .promo-text h1 {
font-size:220%
}

font-size in pxl

.promo .promo-text h1 {
font-size:31px
}
#home > div.container > div > div.col-md-6 > div > h1 {
font-size: 28px;
}

Changes the font size and colour of the title in the header

.promo .promo-text h1 {
font-weight: semi-bold
}
.promo .promo-text h1 {
color: #49002c
}

border-top-color = Colour of the dividing line under the header heading

.promo .promo-text hr {
border-top-color: #49002c;
}

Changes the orientation of an intermediate text in the registration document
#register_form_group_11_0 {
text-align: center;
margin-bottom: 0px;
}

Changes the size of the sponsor logos (line breaks are more likely to occur)

width: 25% = the smaller the value, the smaller the logo

.partners .list-inline li {
width: 25%;
}

Removes the social media button in the countdown area
.counter-text .list-inline.join-us {
display: none;
}

Changes the colour of the counter (countdown)
.counter {
color: #ffffff;
}

Changes the size of the countdown text (first line)
#about > div > div > div.col-md-4.text-center > h1 {
font-size: 28px;
}

Changes the colours in the programme items area

Background colour of the programme items

.schedule .panel-default .panel-heading {
background-color: #003366;
}

Colour change of the border of the programme items

.schedule .panel-default {
border-color: #efefef;
}

Hide individual programme items (only the white area)

collapse1 = the number must be assigned to the area

#collapse1 .panel-body {
display: none;
}

Changes the colours in the location module

Colour change of the pins (symbols)

.map .popover .fa {
color: #003882;
}

Colour change of the text (next to the pins)

.map .popover a {
color: #003882;
}

Changes the orientation and distance of a possible radio button in the registration form

The HTML ID (marked bold) must be replaced according to the desired radio button.

20px = distance to reference point

#form_anrede .radio {
display: inline;
padding-right: 20px;    
}

As a rule, the hyperlinks (e.g. data protection, general terms and conditions etc.) are displayed in blue. With this command you can adjust the font color/link color.

#register_form p a {
color: #ffffff;
}
Hide registration form completely (also applies to stand-alone form module)
.register-form {
display: none;
}

Hide registration form completely (also applies to stand-alone form module)
.register-form .btn-custom-accept {
display: none;
}

ATTENTION: For the use of CSS and Java Scripts, MATE Development GmbH does not accept any liability for the correct display or function of the adapted web pages and e-mails. We would like to ask you to always check possible adjustments before they are finally saved.

How did we do?

The use of placeholders outside the HTML-Editor

The reduction of the spam probability of my emails

Contact