WoltLab Cloud Disasters: Sandstorm 5.5.0

Professional gaming style that can also be perfectly adapted to all other themes and enhance your community with its advanced layout features.

Features

• First class modern design
• Dark backgrounds
• Easily customizable colors
• Compatible with all official WoltLab extensions
• Special info and image boxes for a customized experience (instructions below)

Additional boxes/features

Flexible image list with linking: ideal for portfolios and product presentation

How to create the box?

1. Go to Control Center > Administration > Boxes > + Add box > Box-type "HTML"
2. General data: Enter the name of the box, specify the box position and linking
3. Content: Copy the following example source code into the content area and repeat the <div>...</div> part as many times as you want

<div class="flexContainer">
    <div>
        <a href="https://www.bliqpunkt.de/">
            <img src="{{ media="128" size="original" }}" />
        </a>
    </div>
    <div>
        <a href="https://www.bliqpunkt.de/">
            <img src="{{ media="129" size="original" }}" />
        </a>
    </div>
</div>

1. Enter link: Find <a href="https://www.bliqpunkt.de/"> and replace https://www.bliqpunkt.de/ with the desired link
2. Insert image: Find {{ media="128" size="original" }} and replace "128" with the ID of a custom media file (or image URL)

Present information with buttons, icons, images and links

With the "bliqpunkt Info Box" container, short descriptions with matching icons can be written for apps, among other things. Using the buttons, the user can get to the respective download area for the apps. A screenshot on the right side gives the user another overview. This box container is also ideally suited for product and service presentations as well as advertising/self-promotion.

1. Go to Control Center > Administration > Boxes > + Add box > Box-type "HTML"
2. General data: Enter the name of the box, specify the box position and linking
3. Content: Copy the following example source code into the content area and repeat the <div>...</div> part as many

<div class="infoContainer">
  <h1>bliqpunkt Info Box</h1>
  
  <ul class="listContainer">
    <li class="listItem">
      <span class="icon icon32 fa-fire"></span>
      <span class="listItemTitle">Labore et dolore magna</span>
    </li>
    
    <li class="listItem">
      <span class="icon icon32 fa-bomb"></span>
      <span class="listItemTitle">Aliquyam erat sed diam voluptua</span>
    </li>
    
    <li class="listItem">
      <span class="icon icon32 fa-sun-o"></span>
      <span class="listItemTitle">At vero eos et accusam et justo ipsum dolor</span>
    </li>
  </ul>    
  
  <div class="buttonContainer">
    <a class="button buttonPrimary" href="https://www.bliqpunkt.de/">
      Download für Mac <span class="icon icon32 fa-apple"></span>
    </a>
    
    <a class="button" href="https://www.bliqpunkt.de/">
      Duo dolores
    </a>
  </div>
  
  <p>Et ea rebum <a href="https://www.bliqpunkt.de/">Stet clita gubergrene</a> takimata</p>
</div>

<div class="imageContainer">
    <img src="{{ media="136" size="medium" }}" />
</div>

1. Enter heading: Find <h1>bliqpunkt Info Box</h1> and replace bliqpunkt info box with the desired heading
2. Enumeration with icons:
   1. Find <span class="icon icon32 fa-fire"></span> and replace fa-bolt with the name of the selected icon
   2. Find <span class="listItemTitle">Labore et dolore magna</span> and replace Labore et dolore magna with any text
3. Buttons
   1. With icons and linking:
      1. Find <a class="button buttonPrimary" href="https://www.bliqpunkt.de/"> and replace https://www.bliqpunkt.de/ with the desired link
      2. Next to the closed tag enter any text
      3. Find <span class="icon icon32 fa-apple"></span> and replace fa-apple with the name of the selected icon
   2. Without icons, only linking:
      1. Find <a class="button" href="https://www.bliqpunkt.de/"> and replace https://www.bliqpunkt.de/ with the desired link
      2. Next to the closed tag any text is entered
4. Text with link: Find <p>Et ea rebum <a href="https://www.bliqpunkt.de/"</p> and replace the text with any other text and the link href="https://www.bliqpunkt.de/"
5. Image: Find <div class="imageContainer"> <img src="{{ media="136" size="medium" }}" /> </div> and replace "136" with the ID of an own media file (or image URL)

_____________________________________________________________

Images are sample content and not included in the style!