Banner themes (and instructions for customizing them)

theme-component

(Daniela) #1

A good banner:

  • should not be invasive. Scrolling the page over and over again to get to site content is never a good thing.
  • must be clear and explicit, displaying only the essential information. The fewer lines there are to read, the easier it is for even a distracted user to read them! No one likes walls of text.
  • uses colors that recall your brand.
  • gives a clear call-to-action. Add only strictly necessary links and make the most important one a button to click.

Also consider these points:

  • a picture is worth a thousand words. You can also use a gif, as long as it is not psychedelic!
  • do you really need a visible banner even on mobile devices? Often the banners on smartphones are boring, they load with difficulty if they have very heavy images (reduce the weight as much as possible!) and the page must be scrolled over and over again to make it disappear. Consider adding a close button or not putting the banner on mobile devices at all!

If you are not technical follow the Automatic Installation instructions


A three-column Discourse banner

A three column banner that will be responsive and therefore can also be enabled on mobile devices.

Automatic installation: GitHub - discourse/discourse-three-columns-banner: A theme component for Discourse to create a three-column banner

Manual Installation:

Add the following code in the Common > After Header tab
<!--SECTION BANNER BOX-->

<section class="banner-box">

	<!--ADD A "CLOSE BANNER" BUTTON ON THE TOP RIGHT-->
	<!--To disable this button, comment the <button> </button> tag-->
	
	<button type="button" class="close" onclick='$(this).parent().remove();'>
             <i class="fa fa-times d-icon d-icon-times" title="Close."></i>
        </button>

        <div class="container">
	
            <!--SECTION HEADER-->
	        <div class="section-header ">
		
		        <!--TITLE-->
		        <h2 class="x-title"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>

		            <div class="colored-line"></div>

		            <div class="description"><p>
		            Nulla ullamcorper augue vel sodales pellentesque. 
		            Sed vitae sapien sit amet mauris consequat malesuada. Vestibulum vitae iaculis nisl, vel aliquet velit. 
		            Fusce venenatis laoreet diam, non dictum nisl vestibulum non.</p>
		            </div>
		            <div class="colored-line"></div>
	        </div>
	        <!--/END SECTION HEADER-->
	
	            <div class="row">
		

                    <!--SINGLE BOX-->
		            <div class="col3 single-box">
			
			            <!--ICON-->
			            <div class="x-icon"><i class="fa fa-cloud"></i></div>
			
			            <!--HEADING-->
			            <h3>A simple box</h3>
			
			            <!--BOX DESCRIPTION-->
			            <p class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			            Sed id congue eros, sit amet suscipit libero. Nunc vitae placerat est. </p>
			
                	    <!--LIST-->
			            <div>
            		        <ul class="feature-list">
            			        <li><i class="fa fa-coffee"></i><a href="your-url"> Coffee and milk</a> to wake up in the morning</li>
            			        <li><i class="fa fa-heartbeat"></i> One hour of gym</li>
            			        <li><i class="fa fa-book"></i> Rearrange books in the study</li>
            			        <li><i class="fa fa-telegram"></i> Telegram</a></li>
            			        <li><i class="fa fa-subway"></i> Go to work</a> avoiding traffic</li>
            		        </ul>
                        </div>
			
                    </div>
		            <!--/END SINGLE BOX-->
		

                    <!--SINGLE BOX-->
		            <div class="col3 single-box">
			
			            <!--ICON-->
			            <div class="x-icon"><i class="fa fa-rocket"></i></div>
			
			            <!--HEADING-->
			            <h3>Another simple box</h3>
			
			            <!--BOX DESCRIPTION-->
			            <p class="box">Integer velit ante, <a href="www.discourse.org">DISCOURSE</a> amet tristique in, gravida at ligula. 
			            Sed gravida mauris id neque vestibulum semper. Suspendisse potenti. Nam nec maximus ligula. 
			            Ut eget semper est. Sed ornare sit amet justo eu rutrum. Integer sit amet facilisis ipsum. </p>

               		    <!--BUTTON-->
               		    <div class="buttons" id="my-button">
                  	    <a href="enter-a-url" class="btn btn-icon-text ember-view"><i class="fa fa-user-plus d-icon d-icon-user-plus"></i>My new button</a>
                        </div>			
			
		            </div>
		            <!--/END SINGLE BOX-->
		

 
                    <!--SINGLE BOX-->
		            <div class="col3 single-box">
			
			            <!--ICON-->
			            <div class="x-icon"><i class="fa fa-cog"></i></div>
			
			            <!--HEADING-->
			            <h3>Yet another simple box</h3>
			
			            <!--BOX DESCRIPTION-->
			            <p class="box">Pellentesque ut lacinia nunc, eu molestie nulla. 
			            Pellentesque viverra nisi urna, at hendrerit nisl sodales in. 
			            Morbi auctor sodales nisi, eget aliquam justo maximus in. 
			            Suspendisse a felis a massa elementum pellentesque quis eget dolor. 
			            Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
			
		            </div>
		            <!--/END SINGLE BOX-->

	            </div>
	            <!--/END ROW-->
  
        </div>
        <!--/END CONTAINER-->

</section>
<!--/END SECTION BANNER BOX-->
Add the following code in the Common > CSS tab
/*-------------------------------------------------
   VARIABLES: choose the colors of your banner
-------------------------------------------------*/

$main-color: #FF6C00;
$background-color: #FBDE9C;

/*-------------------------------------------------
   SECTION:  BOXES
-------------------------------------------------*/

.section-header {
    padding-bottom: 20px;
    h2 {
        margin-bottom: 20px;
    }
}

.banner-box {
    margin-bottom: 20px;
    background-image: url("https://i.imgur.com/k7SnZth.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: $background-color; /* to be sure that even if the image above will not be loaded there will be at least a colored background */
}

.x-title {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    text-align: center;
    color: $main-color;
}

.description p {
    margin-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
}

.banner-box .single-box {
    padding-bottom: 20px;
        .x-icon {
        font-size: 70px;
    }
}

//COLUMNS MANAGEMENT

.col3 {
    width: 30%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.col2 {
    width: 45%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.col4 {
    width: 22,5%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.container::after, .row::after {
    clear: both;
}

.col2, .col3, .col4 {
    text-align: center;
}

.row::after {
    content: " ";
    display: table;
}

//ICON AND BOX HEADING COLOR

.banner-box .single-box .x-icon, .single-box h3 {
    color: $main-color;
}

//BOX HEADING POSITIONING

.banner-box .single-box h3 {
    margin-top: 20px;
    text-align: center;
}

//COLORED LINE

.colored-line {
    margin: auto;
    width: 165px;
    height: 1px;
    background: $main-color;
}

//SINGLE BOX, TEXT ALIGNMENT

.box p {
    text-align: center;
}

//TEXT ALIGNMENT INSIDE BUTTONS

#my-button {
    text-align: center;
    padding-bottom: 5px;
}

//IMAGE SIZE AS ICON SIZE

.responsive-img {
    border-style: none;
    border-width: 1px;
    height: 70px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

//LIST ALIGNMENT

.feature-list {
    text-align: left;
    list-style-type: none;
}

//BUTTON BACKGROUND

.col2, .col3, .col4 {
    .btn.btn-icon-text.ember-view {
        background: $main-color;
    }
}

//CLOSE BUTTON ON THE TOP RIGHT
.banner-box .close {
    border: none;
    background: transparent;
    padding-top: 5px;
    float: right;
}
Add the following code in the Mobile > CSS tab
//MOBILE DEVICES

@media only screen and (min-device-width: 320px) and (max-device-width: 800px) {
    .col2, .col3, .col4 {
        width: 90%;
    }
}

What you have to change on this banner:

  • After Header tab
    • You will have to edit all the text!
    • Change Font Awesome Icons, use your favorites
    • Remember to change the link of the button
  • Common CSS tab
    • Change the colors of the banner, just change the values within the variables at the beginning of the stylesheet. You can use both the hexodecimal colors (e.g. #FF6C00) and the color name (e.g. red)
    • Change the banner-box background-image URL with the one you prefer

And what you can change:

  • You can delete an item. For example, if the banner closing button is not useful for you, you can comment out or delete it.

  • You can duplicate an item. For example, if you want to add another list or button in another column, copy and paste the relevant code:

    An example of duplication


  • You can change the number and size of the columns.

    • In the CSS, 3 types of columns are specified:
      col2 = 2 columns banner (each column occupies 45% of the available space)
      col3 = 3 column banner (each column occupies 30% of the available space)
      col4 = 4 columns banner (each column occupies 22.5% of available space)
      In the After Header tab all I’ve changed is the name of the columns. Instead of three col3 columns, in every Single Box I changed col3 to a colx, a colx and another colx(where x is the number above). It is possible to change the number of columns, for example using 2 Single Box with col2 (one of the Single Box will be commented), or 4 Single Box with 4 col4 (the missing Single Box will be duplicated). The important thing not to break the banner layout (especially on mobile) is that the sum of the columns must always be of width 90% in total
    An example of a new layout

    All I’ve changed is the name of the columns. Instead of three col3 columns, in every Single Box I changed col3 to a col4, a col2 and another col4.

How it appears:

Desktop view:

Mobile view:


A two-column Discourse banner

This is a responsive two column banner that can be also enabled on mobile devices.

Automatic installation : GitHub - discourse/discourse-two-columns-banner: A theme component for Discourse to create a two-columns banner

Manual Installation:

Add the following code in the Common > After Header tab
<!--SECTION BANNER BOX-->

<section class="banner-box">

	<!--ADD A "CLOSE BANNER" BUTTON ON THE TOP RIGHT-->
	<!--To disable this button, comment the <button> </button> tag-->
	
	<button type="button" class="close" onclick='$(this).parent().remove();'>
             <i class="fa fa-times d-icon d-icon-times" title="Close."></i>
        </button>
    
        <div class="container">
	
            <!--SECTION HEADER-->
	        <div class="section-header ">
		
		        <!--TITLE-->
		        <h2 class="x-title"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>

		        <div class="colored-line"></div>

		        <div class="description"><p>
		        Nulla ullamcorper augue vel sodales pellentesque. 
		        Sed vitae sapien sit amet mauris consequat malesuada. Vestibulum vitae iaculis nisl, vel aliquet velit. 
		        Fusce venenatis laoreet diam, non dictum nisl vestibulum non.</p>
		        </div>
		        <div class="colored-line"></div>
	        </div>
	        <!--/END SECTION HEADER-->
	
	            <div class="row">
		

                    <!--SINGLE BOX-->
		            <div class="col2 single-box">
			
			            <!--IMAGE-->
                        <img src="https://i.imgur.com/oRoO3Ya.png" class="responsive-img">
			
			            <!--HEADING-->
			            <h3>A simple box</h3>
			
			            <!--BOX DESCRIPTION-->
			            <p class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			            Sed id congue eros, sit amet suscipit libero. Nunc vitae placerat est.
			            Sed ornare sit amet justo eu rutrum. Integer sit amet facilisis ipsum.</p>
			
                	    <!--LIST-->
			            <div>
            		        <ul class="feature-list">
            			        <li><i class="fa fa-coffee"></i><a href="your-url"> Coffee and milk</a> to wake up in the morning</li>
            			        <li><i class="fa fa-heartbeat"></i> One hour of gym</li>
            			        <li><i class="fa fa-book"></i> Rearrange books in the study</li>
            		        </ul>
                        </div>			

               		    <!--BUTTON-->
               		    <div class="buttons" id="my-button">
                  	    <a href="enter-a-url" class="btn btn-icon-text ember-view"><i class="fa fa-commenting d-icon d-icon-commenting"></i>My new button</a>
                        </div>
			
		            </div>
		            <!--/END SINGLE BOX-->
		

                    <!--SINGLE BOX-->
		            <div class="col2 single-box" style="float: right">
			
			            <!--IMAGE-->
                        <img src="https://i.imgur.com/ZCXib8B.png" class="responsive-img">

			
			            <!--HEADING-->
			            <h3>Another simple box</h3>
			
			            <!--BOX DESCRIPTION-->
			            <p class="box">Integer velit ante, <a href="www.discourse.org">DISCOURSE</a> amet tristique in, gravida at ligula. 
			            Sed gravida mauris id neque vestibulum semper. Suspendisse potenti. Nam nec maximus ligula. 
			            Ut eget semper est. Sed ornare sit amet justo eu rutrum. Integer sit amet facilisis ipsum.
			            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			            Sed id congue eros, sit amet suscipit libero. Nunc vitae placerat est.</p>

               		    <!--BUTTON-->
               		    <div class="buttons" id="my-button">
                  	    <a href="enter-a-url" class="btn btn-icon-text ember-view"><i class="fa fa-user-plus d-icon d-icon-user-plus"></i>My new button</a>
                        </div>			
			
		            </div>
		            <!--/END SINGLE BOX-->
		
	            </div>
	            <!--/END ROW-->
  
        </div>
        <!--/END CONTAINER-->

</section>
<!--/END BANNER BOX SECTION-->
Add the following code in the Common > CSS tab
/*-------------------------------------------------
   VARIABLES: choose the colors of your banner
-------------------------------------------------*/

$main-color: #5270FE;
$background-color: #BFD7FF;

/*---------------------------------------
   SECTION:  BOXES
-----------------------------------------*/

.section-header {
    padding-bottom: 20px;
    h2 {
        margin-bottom: 20px;
    }
}

.banner-box {
    margin-bottom: 20px;
    background-image: url("https://i.imgur.com/4qwhXM3.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: $background-color; /* to be sure that even if the image above will not be loaded there will be at least a colored background */
}

.x-title {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    text-align: center;
    color: $main-color;
}

.description p {
    margin-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
}

.banner-box .single-box {
    padding-bottom: 20px;
    .x-icon {
        font-size: 70px;
    }
}


//COLUMNS MANAGEMENT

.col3 {
    width: 30%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.col2 {
    width: 45%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.col4 {
    width: 22.5%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.container::after, .row::after {
    clear: both;
}

.col2, .col3, .col4 {
    text-align: center;
}

.row::after {
    content: " ";
    display: table;
}

//ICON AND BOX HEADING COLOR

.banner-box .single-box .x-icon, .single-box h3 {
    color: $main-color;
}

//BOX HEADING POSITIONING

.banner-box .single-box h3 {
    margin-top: 20px;
    text-align: center;
}

//COLORED LINE

.colored-line {
    margin: auto;
    width: 165px;
    height: 1px;
    background: $main-color;
}

//SINGLE BOX, TEXT ALIGNMENT

.box p {
    text-align: center;
}

//TEXT ALIGNMENT INSIDE BUTTONS

#my-button {
    text-align: center;
    padding-bottom: 5px;
}

//IMAGE SIZE AS ICON SIZE

.responsive-img {
    border-style: none;
    border-width: 1px;
    height: 70px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

//LIST ALIGNMENT

.feature-list {
    text-align: center;
    list-style-type: none;
}


//BUTTON BACKGROUND

.col2, .col3, .col4 {
    .btn.btn-icon-text.ember-view {
        background: $main-color;
    }
}

//CLOSE BUTTON ON THE TOP RIGHT

.banner-box .close {
    border: none;
    background: transparent;
    padding-top: 5px;
    float: right;
}
Add the following code in the Mobile > CSS tab
//MOBILE DEVICES

@media only screen and (min-device-width: 320px) and (max-device-width: 800px) {
    .col2, .col3, .col4 {
        width: 90%;
    }
    .feature-list {
        text-align: center;
    }
}

What you have to change on this banner:

  • After Header tab
    • All that is listed in the previous banner and in addition change the image src in the two Single Box
  • Common CSS tab
    • All that is listed in the previous banner

And what you can change:

  • All that is listed in the previous banner, including the number and size of the columns!

How it appears:

Desktop view:

Mobile view:

two-column-mobile2-gif


A full-width Discourse banner

This is a responsive full width banner that can be also enabled on mobile devices.

Automatic installation : GitHub - discourse/discourse-full-width-banner: A theme component for Discourse to create a full-width banner

Manual Installation:

Add the following code in the Common > After Header tab
<!--SECTION BANNER BOX-->

<section class="banner-box">

	<!--ADD A "CLOSE BANNER" BUTTON ON THE TOP RIGHT-->
	<!--To disable this button, comment the <button> </button> tag-->
	
	<button type="button" class="close" onclick='$(this).parent().remove();'>
             <i class="fa fa-times d-icon d-icon-times" title="Close."></i>
        </button>
    
        <div class="container">
	
            <!--SECTION HEADER-->
	        <div class="section-header ">
		
		        <!--TITLE-->
		        <h2 class="x-title"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>

		        <div class="colored-line"></div>

		        <div class="description"><p>
		        Nulla ullamcorper augue vel sodales pellentesque. 
		        Sed vitae sapien sit amet mauris consequat malesuada. Vestibulum vitae iaculis nisl, vel aliquet velit. 
		        Fusce venenatis laoreet diam, non dictum nisl vestibulum non.</p>
		        </div>
		        <div class="colored-line"></div>
	        </div>
	        <!--/END SECTION HEADER-->
	
	            <div class="row">
		

                    <!--SINGLE BOX-->
		            <div class="col2 single-box" style="float: left;">
			
			            <!--IMAGE-->
                        <img src="https://i.imgur.com/oRoO3Ya.png" class="responsive-img">
			
			            <!--HEADING-->
			            <h3>A simple box</h3>
			
			            <!--BOX DESCRIPTION-->
			            <p class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			            Sed id congue eros, sit amet suscipit libero. Nunc vitae placerat est.
			            Sed ornare sit amet justo eu rutrum. Integer sit amet facilisis ipsum.</p>
			
                	    <!--LIST-->
			            <div>
            		        <ul class="feature-list">
            			        <li><i class="fa fa-coffee"></i><a href="your-url"> Coffee and milk</a> to wake up in the morning</li>
            			        <li><i class="fa fa-heartbeat"></i> One hour of gym</li>
            			        <li><i class="fa fa-book"></i> Rearrange books in the study</li>
            		        </ul>
                        </div>			

               		    <!--BUTTON-->
               		    <div class="buttons" id="my-button">
                  	    <a href="enter-a-url" class="btn btn-icon-text ember-view"><i class="fa fa-commenting d-icon d-icon-commenting"></i>My new button</a>
                        </div>
			
		            </div>
		            <!--/END SINGLE BOX-->
		

                    <!--SINGLE BOX-->
		            <div class="col2 single-box" style="float: right;">
			
			            <!--IMAGE-->
                        <img src="https://i.imgur.com/ZCXib8B.png" class="responsive-img">

			
			            <!--HEADING-->
			            <h3>Another simple box</h3>
			
			            <!--BOX DESCRIPTION-->
			            <p class="box">Integer velit ante, <a href="www.discourse.org">DISCOURSE</a> amet tristique in, gravida at ligula. 
			            Sed gravida mauris id neque vestibulum semper. Suspendisse potenti. Nam nec maximus ligula. 
			            Ut eget semper est. Sed ornare sit amet justo eu rutrum. Integer sit amet facilisis ipsum.
			            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			            Sed id congue eros, sit amet suscipit libero. Nunc vitae placerat est.</p>

               		    <!--BUTTON-->
               		    <div class="buttons" id="my-button">
                  	    <a href="enter-a-url" class="btn btn-icon-text ember-view"><i class="fa fa-user-plus d-icon d-icon-user-plus"></i>My new button</a>
                        </div>			
			
		            </div>
		            <!--/END SINGLE BOX-->
		
	            </div>
	            <!--/END ROW-->
  
        </div>
        <!--/END CONTAINER-->

</section>
<!--/END BANNER BOX SECTION-->
Add the following code in the Common > CSS tab
/*-------------------------------------------------
   VARIABLES: choose the colors of your banner
-------------------------------------------------*/

$main-color: #5270FE;
$background-color: #BFD7FF;

/*---------------------------------------
   SECTION:  BOXES
-----------------------------------------*/

.section-header {
    padding-bottom: 20px;
    h2 {
        margin-bottom: 20px;
    }
}

.banner-box {
    margin-top: 18px;
    background-image: url("https://i.imgur.com/4qwhXM3.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: $background-color; /* to be sure that even if the image above will not be loaded there will be at least a colored background */
}

.x-title {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    text-align: center;
    color: $main-color;
}

.description p {
    margin-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
}

.banner-box .single-box {
    padding-bottom: 20px;
    .x-icon {
        font-size: 70px;
    }
}


//COLUMNS MANAGEMENT

.col3 {
    width: 30%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.col2 {
    width: 45%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.col4 {
    width: 22.5%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.container::after, .row::after {
    clear: both;
}

.col2, .col3, .col4 {
    text-align: center;
}

.row::after {
    content: " ";
    display: table;
}

//ICON AND BOX HEADING COLOR

.banner-box .single-box .x-icon, .single-box h3 {
    color: $main-color;
}

//BOX HEADING POSITIONING

.banner-box .single-box h3 {
    margin-top: 20px;
    text-align: center;
}

//COLORED LINE

.colored-line {
    margin: auto;
    width: 165px;
    height: 1px;
    background: $main-color;
}

//SINGLE BOX, TEXT ALIGNMENT

.box p {
    text-align: center;
}

//TEXT ALIGNMENT INSIDE BUTTONS

#my-button {
    text-align: center;
    padding-bottom: 5px;
}

//IMAGE SIZE AS ICON SIZE

.responsive-img {
    border-style: none;
    border-width: 1px;
    height: 70px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

//LIST ALIGNMENT

.feature-list {
    text-align: center;
    list-style-type: none;
}


//BUTTON BACKGROUND

.col2, .col3, .col4 {
    .btn.btn-icon-text.ember-view {
        background: $main-color;
    }
}

//CLOSE BUTTON ON THE TOP RIGHT

.banner-box .close {
    border: none;
    background: transparent;
    padding-top: 5px;
    float: right;
}

//MAKE IT A FULL WIDTH BANNER

.banner-box .container {
    max-width: 70%;
    margin: 0 auto;
}
.banner-box {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    
}
#main-outlet {
    padding-top: 64px; /*this value must be changed if the height of the header has been changed*/
}
.navigation-container, 
.alert.alert-info {
    margin-top: 18px;
    margin-bottom: 0px;
}
Add the following code in the Mobile > CSS tab
//MOBILE DEVICES

@media only screen and (min-device-width: 320px) and (max-device-width: 800px) {
    .col2, .col3, .col4 {
        width: 90%;
    }
    .feature-list {
        text-align: center;
    }
    .banner-box .container {
        max-width: 90%;
    }    
}

What you have to change on this banner:

  • After Header tab
    • All that is listed in the previous banner and in addition change the image src in the two Single Box
  • Common CSS tab
    • All that is listed in the previous banner

And what you can change:

  • All that is listed in the previous banner, including the number and size of the columns!

How it appears:

Desktop view:

Mobile view:
There are no differences compared to two or three columns banners


A Discourse banner that can be expanded and collapsed

This is a responsive banner that can be also enabled on mobile devices.

Automatic installation : GitHub - discourse/discourse-expand-collapse-banner: A theme component for Discourse to create a banner that can be expanded or collapsed

Manual Installation:

Add the following code in the Common > After Header tab
<!--SECTION BANNER BOX-->

<section class="banner-box">
            
    <div class="container">
	            
	   <div class="row">

                
            <!--EXPAND COLLAPSE BANNER-->
                
            <div class="banner-content_toggle_wrapper">
            <a role="button" tabindex="0" id="banner-content_wrap_toggle">Expand Details</a>
            </div> 
               
                <!--SECTION HEADER-->

                <div class="section-header ">
		
		            <!--TITLE-->
 		            <h2 class="x-title"> This title will be always visible</h2>

		            <div class="colored-line"></div>

		            <div class="description"><p>
		                Sed gravida mauris id neque vestibulum semper. Suspendisse potenti. Nam nec maximus ligula. 
			            Ut eget semper est. Sed ornare sit amet justo eu rutrum. Integer sit amet facilisis ipsum.
			            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			            Sed id congue eros, sit amet suscipit libero. Nunc vitae placerat est.      
		            </p>
		            </div>
		            <div class="colored-line"></div>
                </div>
	            <!--/END SECTION HEADER-->
	        
	                <!--BANNER CONTENT WRAP-->
                    <div id="banner-content_wrap" style="display: none;">
                    
                    <!--SINGLE BOX-->
		            <div class="col2 single-box">
			
			            <!--IMAGE-->
                        <img src="https://i.imgur.com/oRoO3Ya.png" class="responsive-img">
			
			            <!--HEADING-->
			            <h3>A simple box</h3>
			
			            <!--BOX DESCRIPTION-->
			            <p class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			            Sed id congue eros, sit amet suscipit libero. Nunc vitae placerat est.
			            Sed ornare sit amet justo eu rutrum. Integer sit amet facilisis ipsum.</p>
			
                	    <!--LIST-->
			            <div>
            		        <ul class="feature-list">
            			        <li><i class="fa fa-coffee"></i><a href="your-url"> Coffee and milk</a> to wake up in the morning</li>
            			        <li><i class="fa fa-heartbeat"></i> One hour of gym</li>
            			        <li><i class="fa fa-book"></i> Rearrange books in the study</li>
            		        </ul>
                        </div>			

               		    <!--BUTTON-->
               		    <div class="buttons" id="my-button">
                  	    <a href="enter-a-url" class="btn btn-icon-text ember-view"><i class="fa fa-commenting d-icon d-icon-commenting"></i>My new button</a>
                        </div>
			
		            </div>
		            <!--/END SINGLE BOX-->
		

                    <!--SINGLE BOX-->
		            <div class="col2 single-box">
			
			            <!--IMAGE-->
                        <img src="https://i.imgur.com/ZCXib8B.png" class="responsive-img">

			
			            <!--HEADING-->
			            <h3>Another simple box</h3>
			
			            <!--BOX DESCRIPTION-->
			            <p class="box">Integer velit ante, <a href="www.discourse.org">DISCOURSE</a> amet tristique in, gravida at ligula. 
			            Sed gravida mauris id neque vestibulum semper. Suspendisse potenti. Nam nec maximus ligula. 
			            Ut eget semper est. Sed ornare sit amet justo eu rutrum. Integer sit amet facilisis ipsum.
			            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			            Sed id congue eros, sit amet suscipit libero. Nunc vitae placerat est.</p>

               		    <!--BUTTON-->
               		    <div class="buttons" id="my-button">
                  	    <a href="enter-a-url" class="btn btn-icon-text ember-view"><i class="fa fa-user-plus d-icon d-icon-user-plus"></i>My new button</a>
                        </div>			
			
		            </div>
		            <!--/END SINGLE BOX-->

                </div>
                <!--/END BANNER CONTENT WRAP-->

        </div>
        <!--/END ROW-->

    </div>
    <!--/END CONTAINER-->

</section>
<!--/END BANNER BOX SECTION-->

Add the following code in the Common > body tab
<script>
$("body").on("click", "#banner-content_wrap_toggle", function() {
  $("#banner-content_wrap").slideToggle();
  let buttonText =
    $(this).text() === "Expand Details"
      ? "Hide Details"
      : "Expand Details";
  $(this).text(buttonText);
});
</script>
Add the following code in the Common > CSS tab
/*-------------------------------------------------
   VARIABLES: choose the colors of your banner
-------------------------------------------------*/

$main-color: #5270FE;
$background-color: #BFD7FF;

/*-------------------------------------------------
   EXPAND-COLLAPSE BANNER
-------------------------------------------------*/
#banner-content_wrap_toggle {
    display: block;
    background: $background-color;
    text-align: center;
    color: $main-color;
    font-weight: bold;
    text-decoration:none;
    padding: 6px 12px;
}

#banner-content_wrap_toggle:hover {
    text-decoration:none;
    color: $background-color;
    background: $main-color;
}

.banner-content_toggle_wrapper {
    float: right;
    border: 2px solid $main-color;
}


/*---------------------------------------
   SECTION:  BOXES
-----------------------------------------*/

.section-header {
    padding-bottom: 20px;
    h2 {
        margin-bottom: 20px;
        margin-top: 35px;
    }
}

.banner-box {
    margin-bottom: 20px;
    background-image: url("https://i.imgur.com/4qwhXM3.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: $background-color; /* to be sure that even if the image above will not be loaded there will be at least a colored background */
}

#banner-content_wrap {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.x-title {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    text-align: center;
    color: $main-color;
}

.description p {
    margin-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
}

.banner-box .single-box {
    padding-bottom: 20px;
    .x-icon {
        font-size: 70px;
    }
}


//COLUMNS MANAGEMENT

.col3 {
    width: 30%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.col2 {
    width: 45%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.col4 {
    width: 22.5%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.container::after, .row::after {
    clear: both;
}

.col2, .col3, .col4 {
    text-align: center;
}

.row::after {
    content: " ";
    display: table;
}

//ICON AND BOX HEADING COLOR

.banner-box .single-box .x-icon, .single-box h3 {
    color: $main-color;
}

//BOX HEADING POSITIONING

.banner-box .single-box h3 {
    margin-top: 20px;
    text-align: center;
}

//COLORED LINE

.colored-line {
    margin: auto;
    width: 165px;
    height: 1px;
    background: $main-color;
}

//SINGLE BOX, TEXT ALIGNMENT

.box p {
    text-align: center;
}

//TEXT ALIGNMENT INSIDE BUTTONS

#my-button {
    text-align: center;
    padding-bottom: 5px;
}

//IMAGE SIZE AS ICON SIZE

.responsive-img {
    border-style: none;
    border-width: 1px;
    height: 70px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

//LIST ALIGNMENT

.feature-list {
    text-align: center;
    list-style-type: none;
}


//BUTTON BACKGROUND

.col2, .col3, .col4 {
    .btn.btn-icon-text.ember-view {
        background: $main-color;
    }
}

//CLOSE BUTTON ON THE TOP RIGHT

.banner-box .close {
    border: none;
    background: transparent;
    padding-top: 5px;
    float: right;
}
Add the following code in the Mobile > CSS tab
//MOBILE DEVICES

@media only screen and (min-device-width: 320px) and (max-device-width: 800px) {
    .col2, .col3, .col4 {
        width: 90%;
    }
    .feature-list {
        text-align: center;
    }
    .banner-content_toggle_wrapper {
    float: none;
    padding-left: 0;
    }
    #banner-content_wrap_toggle {
    height: 35px;
    line-height: 35px;
    }
}

What you have to change on this banner:

  • After Header tab
    • All that is listed in the previous banner and in addition change the image src in the two Single Box
  • Body tab
    • If you change the Expand Details text of the top right button on After Header, remember that you must use the same name in the script in the Body tab
  • Common CSS tab
    • All that is listed in the previous banner

And what you can change:

  • All that is listed in the previous banner, including the number and size of the columns!

How it appears:

Desktop view:

Mobile view:

Coming soon other banners


How do I make a top header like seen here
Custom theme and banners
Display username when login in banner
GDPR countdown and compliance
Discourse 2.0.0.beta5 Release Notes
How do I add a giant header image?
Help to customise my forum
Discourse Category Banners
Adding designs to pages
"New topic or updated" didn't show at the right place
How would I get started with emulating a website's custom CSS
Banner topic formatting
Downsides of the new logo UI in site settings
Banner graphic and intro for home screen
Creating Ad space
(François Douville) #2

Perfect, this is exactly what I needed :smiley:
Simple question, how to display the banner in all the screen?


(Daniela) #3

Can you explain better what do you mean by “all the screen”? (A mock-up is welcome)


(François Douville) #4

100% of the screen and not align with the text. Something like this :

For now, it looks like this :

Also, my column are not in the center, there is more space in the right… it is col2 with 45%. Did not change your code.

Last thing, do you know how to display the username? It would be cool to see your name when you are login and not display when you are log out.

Thanks


(Republic Wireless) #5

What would I need to do if I wanted to give the user the ability to (-)minimize or (+)maximize this banner and not just (x)close it? Like Feverbee does. I am thinking of using this more as a descriptive navigation banner, so removing it completely is less important.


(Daniela) #6

I understand now. It is possible to do that but not with the classes I used in the two banners above. As soon as I have a free moment, I see to write down a “full screen” variant.

The one implemented by Feeverbee is not a simple banner which is the purpose of this guide.
It can be done using a js script. Probably a similar function could be implemented in pure CSS.

PS I forgot to write that I will take a look soon @Sean_R :sweat_smile:


(Daniela) #7

Hey @Sean_R, try this one:

expand-collapse-banner.dcstyle.json (10.1 KB)

It should work on mobile too.
Go to admin > customize > themes and click the Import button.
Add this banner as a theme component as I explained in paragraph Automatic installation of the guide above.
In case I add this banner on github too


(Republic Wireless) #8

Got it working. Looks great!


#9

Would love an easy way to have a rotatable banner :slight_smile:


(Daniela) #10

@Francois_Douville, the 2 columns theme has been updated to fix the alignment to the right of the second box
Unfortunately adding the username to the banner is outside the scope of this guide which must remain as simple as possible to allow everyone to modify it even with minimal CSS skills.

Two new variants have been added to the original post, the full-width banner and the expand-collapse banner.


(Daniela) #11

I’m not very convinced that creating a rotating banner is useful.

I remember seeing some carousel banners here on the forum, have you tried to use those?
I also remember that many of the sites that used a carousel banner have also removed it…


#12

Interesting thank you for that @Dax

May need to look at developing something different using what you have above :slight_smile:


(François Douville) #13

It is perfect thank you!

1- There is something bugging with

#main-outlet {
    padding-top: 64px;
}

Normally is it 82 px? There are no space with different pages/sections… I think normally there is space after the header no?

2- Also, is it possible to not display “#” afther the URL because if I go to a categorie and I want to return back to home by clicking on the logo, it doesn’t work because of the “#”…

<a href="#" id="banner-content_wrap_toggle"></i>Expand Details</a>

3- Last thing, I mixed full-width banner and the expand-collapse banner. Is it possible that the text and the button to have more details be in full-width (and not only the image)?


(Daniela) #14

I will take a look

Remove # without problems, leave only <a href="" id="banner-content_wrap_toggle"></i>Expand Details</a>

Yes, but I have to change the layout a bit, as soon as I can.


(François Douville) #15

Thank you!

It doesn’t work, It only reload the page… do you have another idea?

The bug with “#” is that no matter section I go, the url always stay myurl.com/# and not for example myurl.com/t/banner-themes-and-instructions-for-customizing-them/82368/


(Republic Wireless) #16

I switched it to a “/” and the issue went away. <a href="/" id=“banner-content_wrap_toggle”></i>Expand Details</a>


(Harm van den Heurik) #17

I’ve installed one of the themes and it looks great. But is it normal behaviour that the banner disappears after logging in ?


(Daniela) #18

Nope, which banner did you install? If you can share a link to your site.


(Daniela) #19

Fixed via

The changes were made to the CSS of the full width banner even on the original post above.


(Harm van den Heurik) #20

Thank you for your reply. I’ve installed the two-column banner. It is not possbile to view our site because it’s a test site which is only reachable in our internal network.