Featured WoltLab Cloud Radiant 2.2.5

/* Separate Logo and Navigation */
@include screen-lg {
    .pageHeaderContainer {
        padding-top: 110px;
    }
    
    .pageHeaderPanel > .layoutBoundary {
        flex-wrap: wrap;
    }
    
    .pageHeaderLogo {
        flex: 1 1 50%;
        margin: 0;
    }
    
    .mainMenu {
        order: 3;
        
        .boxMenu > li > a {
            border-radius: 3px 3px 0 0;
             height: auto;
            padding: 17px 15px;
        }
    }
    
    .pageHeaderSearchContainer {
        margin: 0;
        order: 4;
        
        > a {
            height: auto;
            padding: 14px 15px 14px 11px;
        }
    }
    
    .userPanel {
        flex: 1 1 50%;
        order: 2;
        padding: 12px 0;
        
        &.userPanelLoggedIn {
            padding: 10px 0;
        }
    }
}

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no" />
{include file='headIncludeRobotsMetaTag'}
{implode from=$__wcf->getMetaTagHandler() item=__metaTag glue="\n"}{@$__metaTag}{/implode}
{event name='metaTags'}

<!-- Stylesheets -->
{if RADIANT_FONT_SOURCE == 'font_source_1'}
    <link rel="preload" as="font" type="font/woff2" href="{@$__wcf->getPath()}font/families/Roboto%20Condensed/roboto-condensed-v19-latin-regular.woff2" crossorigin />
    <link rel="stylesheet" href="{@$__wcf->getPath()}style/ForoStyle/radiantFont.css" />
{elseif RADIANT_FONT_SOURCE == 'font_source_2'}
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&display=swap" />
{/if}
{@$__wcf->getStyleHandler()->getStylesheet()}
{event name='stylesheets'}

{include file='headIncludeJavaScript'}

<script data-relocate="true">
    WCF.Language.addObject({
        {* dummy language item to preserve compatibility with WCF 2.0, move this to headIncludeJavaScript *}
        'wcf.global.error.title': '{jslang}wcf.global.error.title{/jslang}'
        
        {* DEPRECATED -- PLEASE USE javascriptLanguageImport@headIncludeJavaScript *}
        {event name='javascriptLanguageImport'}
    });
</script>

{* DEPRECATED -- PLEASE USE javascriptInclude@headIncludeJavaScript *}
{event name='javascriptInclude'}

<!-- Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="{$__wcf->getStyleHandler()->getStyle()->getFaviconAppleTouchIcon()}" />
<link rel="manifest" href="{@$__wcf->getStyleHandler()->getStyle()->getFaviconManifest()}" />
<link rel="shortcut icon" href="{@$__wcf->getFavicon()}" />
<meta name="msapplication-config" content="{@$__wcf->getStyleHandler()->getStyle()->getFaviconBrowserconfig()}" />
<meta name="theme-color" content="{$__wcf->getStyleHandler()->getStyle()->getVariable('wcfPageThemeColor', true)}" />

<script data-relocate="true">
    $(function() {
        {* DEPRECATED -- PLEASE USE javascriptInit@headIncludeJavaScript *}
        {event name='javascriptInit'}
    });
</script>
{js application='wcf' file='ForoStyle/3rdParty/jPList/jplist.core.5.2.0.287'}
{js application='wcf' file='ForoStyle/3rdParty/jPList/jplist.views.5.2.0.6'}
{* Dirty JS *}
<script data-relocate="true">
    $('.messageList').closest('.section').addClass('sectionMessageList sectionBorderlessNoBg');
    $('.contentItemList').closest('.section').addClass('sectionContentItemList sectionBorderlessNoBg');
    $('.contentItemList').prev('.sectionTitle').addClass('sectionTitleContentItemList');
    $('.contentItemList').parent().prev('.boxTitle').addClass('boxTitleContentItemList');
    $('.filebaseFileList').closest('.section').addClass('sectionFileList sectionBorderlessNoBg');
    $('.filebaseFileList').parent().prev('.boxTitle').addClass('boxTitleFileList');
    $('.messageList, .contentItemList, .filebaseFileList').closest('.box').addClass('boxBorderlessNoBg');
    $('.sectionMessageList').prev('.paginationTop').addClass('paginationTopMessageList');
    $('.sectionContainerList').prev('.paginationTop').addClass('paginationTopContainerList');
    $('.galleryImageGrid, .galleryMasonry, .galleryImagesInMotion, .galleryImageList').closest('.boxContent').addClass('boxContentGalleryImages');
</script>

{@HEAD_CODE}

{if EASYMEDIA_ENABLE_USERPANEL && $__wcf->user->userID && ($__wcf->user->easymediaImageItems || $__wcf->user->userID && $__wcf->user->easymediaVideoItems || $__wcf->user->userID && $__wcf->session->getPermission('user.easymedia.canAddImage') || $__wcf->user->userID && $__wcf->session->getPermission('user.easymedia.canAddVideo'))}
    <li class="interactiveDropdownUserMenuItem interactiveDropdownUserMenuEasyMedia">
        <div class="box48">
            <div><span class="icon icon48 fa-camera-retro"></span></div>
            
            <div class="containerHeadline">
                <h3>{lang}easymedia.index.userMenu{/lang}</h3>
                <ul class="inlineList dotSeparated">
                    {if $__wcf->user->easymediaImageItems}
                        <li><a href="{link application='easymedia' controller='OwnImageList'}{/link}"><span>{lang}easymedia.image.ownItems{/lang}</span></a></li>
                    {/if}
                    {if $__wcf->user->easymediaVideoItems}
                        <li><a href="{link application='easymedia' controller='OwnVideoList'}{/link}"><span>{lang}easymedia.video.ownItems{/lang}</span></a></li>
                    {/if}
                </ul>
                <ul class="inlineList dotSeparated">
                    {if $__wcf->session->getPermission('user.easymedia.canAddImage')}
                        <li><a href="{link application='easymedia' controller='ImageAdd'}{if $controllerName|isset && $controllerName === 'CategoryImageList'}categoryIDs[]={@$category->categoryID}{/if}{/link}"><span>{lang}easymedia.image.button.upload{/lang}</span></a></li>
                    {/if}
                    {if $__wcf->session->getPermission('user.easymedia.canAddVideo')}
                        <li><a href="{link application='easymedia' controller='VideoAdd'}{if $controllerName|isset && $controllerName === 'CategoryVideoList'}categoryIDs[]={@$category->categoryID}{/if}{/link}"><span>{lang}easymedia.video.button.upload{/lang}</span></a></li>
                    {/if}
                    {if $__wcf->session->getPermission('user.easymedia.canUseVideoChannel')}
                        <li><a href="{link application='easymedia' controller='VideoChannels'}{/link}"><span>{lang}easymedia.video.channels{/lang}</span></a></li>
                    {/if}
                </ul>
            </div>
        </div>
    </li>
{/if}

{if EASYMEDIA_ENABLE_USERPANEL && $__wcf->user->userID && ($__wcf->user->easymediaImageItems || $__wcf->user->userID && $__wcf->user->easymediaVideoItems || $__wcf->user->userID && $__wcf->session->getPermission('user.easymedia.canAddImage') || $__wcf->user->userID && $__wcf->session->getPermission('user.easymedia.canAddVideo'))}
    <li class="interactiveDropdownUserMenuItem interactiveDropdownUserMenuEasyMedia">
        <div class="containerHeadline">
            <h3>{lang}easymedia.index.userMenu{/lang}</h3>
            <ul>
                {if $__wcf->user->easymediaImageItems}
                    <li><a href="{link application='easymedia' controller='OwnImageList'}{/link}">{lang}easymedia.image.ownItems{/lang}</a></li>
                {/if}
                {if $__wcf->user->easymediaVideoItems}
                    <li><a href="{link application='easymedia' controller='OwnVideoList'}{/link}">{lang}easymedia.video.ownItems{/lang}</a></li>
                {/if}
                {if $__wcf->session->getPermission('user.easymedia.canAddImage')}
                    <li><a href="{link application='easymedia' controller='ImageAdd'}{if $controllerName|isset && $controllerName === 'CategoryImageList'}categoryIDs[]={@$category->categoryID}{/if}{/link}">{lang}easymedia.image.button.upload{/lang}</a></li>
                {/if}
                {if $__wcf->session->getPermission('user.easymedia.canAddVideo')}
                    <li><a href="{link application='easymedia' controller='VideoAdd'}{if $controllerName|isset && $controllerName === 'CategoryVideoList'}categoryIDs[]={@$category->categoryID}{/if}{/link}">{lang}easymedia.video.button.upload{/lang}</a></li>
                {/if}
                {if $__wcf->session->getPermission('user.easymedia.canUseVideoChannel')}
                    <li><a href="{link application='easymedia' controller='VideoChannels'}{/link}">{lang}easymedia.video.channels{/lang}</a></li>
                {/if}
            </ul>
        </div>
    </li>
{/if}

/* Sticky pageNavigation (Breadcrumb) */
.pageHeaderHero {
    padding-top: 40px;
    
    @include screen-md {
        padding-top: 42px;
    }
    
    @include screen-lg {
        padding-top: 45px;
    }
    
    > .boxesHero,
    > .headerSlides {
        margin-top: -40px;
        
        @include screen-md {
            margin-top: -42px;
        }
        
        @include screen-lg {
            margin-top: -45px;
        }
    }
}

.pageNavigation {
    left: 0;
    position: fixed;
    right: 0;
    top: $headerHeightMdDown;
    z-index: 301;
    
    @include screen-lg {
        top: $headerHeightLg;
    }
}

.boxesHero,
.headerSlides {
    & + .pageNavigation {
        position: relative;
        top: 0;
    }
}

li[data-board-id="126"] > .wbbBoard .fa-folder-open-o::before {
    content: url(https://fiestast.de/images/100ST-HaendlerTest.jpg);
    height: 35px;
    display: flex;
}
li[data-board-id="117"] > .wbbBoard .fa-folder-open-o::before {
    content: url(https://fiestast.de/images/117ST-MotorGrau.png);
    height: 35px;
    display: flex;
}
......................
li[data-board-id="XXXXX"] > .wbbBoard .fa-folder-open-o::before {
    content: url(https://XXXXXXXXXXXXXXX);
    height: 35px;
    display: flex;
}

/* Make sure background images will not overlap the icon container size */
.wbbBoardList .wbbBoard > .icon {
    overflow: hidden;
}

/* Grid View */
@include screen-sm-up {
    .forumViewModeGrid .wbbBoardList .wbbBoard {
        padding: 12px 0 68px;
        
        &.wbbBoardHasLastPost {
            padding: 12px 0 115px;
        }
        
        > .icon {
            border-radius: 3px 3px 0 0;
            height: 120px; /* change this height to whatever size */
            line-height: 120px; /* should be same value with "height" */
            margin: -12px 0 15px !important;
            width: 100%;
        }
    }
}

/*
 * Set the icons to empty for boards that will have a custom image background.
 * Define all the "board-id" here that will have a custom image background.
*/
li[data-board-id="2"],
li[data-board-id="3"],
li[data-board-id="4"],
li[data-board-id="5"],
li[data-board-id="6"] {
    > .wbbBoard > .icon::before {
        background-size: cover !important;
        content: " ";
        display: block;
        height: 100%;
        width: 100%;
    }
}

/* 
 * Individual custom image background for "board-id" defined above.
 * Change the URL of the images to the correct path of your background image.
*/
li[data-board-id="2"] > .wbbBoard > .icon::before {
    background: url("https://picsum.photos/200");
}

li[data-board-id="3"] > .wbbBoard > .icon::before {
    background: url("https://picsum.photos/300");
}

li[data-board-id="4"] > .wbbBoard > .icon::before {
    background: url("https://picsum.photos/200");
}

li[data-board-id="5"] > .wbbBoard > .icon::before {
    background: url("https://picsum.photos/300");
}

li[data-board-id="6"] > .wbbBoard > .icon::before {
    background: url("https://picsum.photos/200");
}

{if $__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.FooterMenu')}
    {hascontent}
        <li class="menuOverlayTitle">{$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.FooterMenu')->getTitle()}</li>
        {content}
            {foreach from=$__wcf->getBoxHandler()->getBoxByIdentifier('com.woltlab.wcf.FooterMenu')->getMenu()->getMenuItemNodeList() item=menuItemNode}
                <li class="menuOverlayItem" data-mobile-identifier="{@$menuItemNode->identifier}">
                    {assign var=__outstandingItems value=$menuItemNode->getOutstandingItems()}
                    <a href="{$menuItemNode->getURL()}" class="menuOverlayItemLink{if $__outstandingItems} menuOverlayItemBadge{/if}{if $menuItemNode->isActiveNode()} active{/if}"{if $menuItemNode->isExternalLink() && EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>
                        <span class="menuOverlayItemTitle">{$menuItemNode->getTitle()}</span>
                        {if $__outstandingItems}<span class="badge badgeUpdate">{#$__outstandingItems}</span>{/if}
                    </a>
                    {if $menuItemNode->hasChildren()}<ol class="menuOverlayItemList">{else}</li>{/if}
                    {if !$menuItemNode->hasChildren() && $menuItemNode->isLastSibling()}
                        {@"</ol></li>"|str_repeat:$menuItemNode->getOpenParentNodes()}
                    {/if}
            {/foreach}
        {/content}
    {/hascontent}
{/if}