CSS advice

Structure

The wall is split into three sections, and laid out by default as:

1. Top left: #schedule
2. Bottom left: #notices
3. Right: #twitterwall

These three sections are laid out using flexbox each containing a class of .area.

The default layout uses the following flexbox rules:

/* Makes all containers the height of viewport */
html, body, .areas {
  height: 100%;
}

/* Enable flexbox system for areas,
   column layout, wrapping */
.areas {
  display: flex;
  flex-flow: column wrap;
}

/* Note: 50% is the width of the left column */
.area {
  flex: 1 50%;
  width: 50%;
}

You can customise the layout of your confwall by adding CSS on the appearance tab of your wall.

Showing only the tweets

It's simply to hide the schedule and the notices and make the tweets expand to fill the space:

.area {
  flex: 1 100%;
  width: 100%;
}

#schedule,
#notices {
  display: none;
}

Notices: image fill, vertical & horizontal alignment

In the notices markup, you can use a class of center-vh that will vertically and horizontally align text elements, and make images fill the available space in the notice area.

For example:

<div class="center-vh">
  <h1>Our amazing sponsors</h1>
  <img src="http://myevent.com/img/sponsor1.jpg"><br>
  <img src="http://myevent.com/img/sponsor2.jpg">
</div>

Note that if you apply the center-vh class to an image that you don't want to stretch to the height of it's container, then instead of applying the class directly to the <img> tag, use the following code in the notice field:

<div class="center-vh">
  <img src="http://myevent.com/img/sponsor1.jpg">
</div>

Cross fading the notices

If you prefer to cross fade (in this example over 200 milliseconds) the notices you need to include the following CSS:

#notices > div {
  transition: opacity 200ms ease-in-out !important;
  display: block;
  opacity: 0;
}

Hiding the mouse cursor

If you're using the confwall in a full screen browser, you might also want to hide the mouse cursor. In this case, you might find it useful to make use of a mouse parking space, such as putting the mouse in the notices area hides the mouse:

#notices {
  cursor: none;
}

Adding custom text to your wall

Currently there's no method to insert text around the segments of the wall, such as a heading for the tweets. However, this is possible using CSS content:

#twitterwall::before {
  content: 'Your Tweets';
  font-size: 24px;
  display: block;

  /* ensure the heading is in front of the actual tweets */
  position: relative;
  z-index: 10;
  background: white;
}

Using custom fonts

You can use custom fonts, but you will either need to use an @import or install your custom font on the machine that will run the confwall, so it's available as if it's a system font.