# Publicize upcoming events to your web page

You can add a code snippet to the web page of your choice to publicize upcoming events.


:::tip
Please only use this if you are comfortable with CSS. If you need assistance, please open a support ticket.

:::

This is one way you can customize the built-in snippet Sidebar Upcoming Events Block. Here's an example of how it would look.


:::tip
Although the code snippet is called Sidebar Upcoming Events Block, it does not have to be placed as a sidebar and can be placed anywhere on the page.

:::


 ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/6e4c604f-a2ff-4094-b3d9-f738e18d09cf/sidebar-events-small-calendar.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=404ebaa539ea47326e2aa292b2dab58474d5c17dc8d7186c2d65b35fcee09cb5&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =324x149")

Follow these instructions to add the sidebar:


1. Upload this image  
     
   ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/472f8ac9-79e3-4a29-a972-4f80c7f20eee/small-calendar.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=2d661c784c0449dfea73eabe108bd32dc3f000d7e1acf4e0ccfc93f3a749b4b6&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =16x16")
2. Add the code below to your CSS
3. ```none
   .sidebarBox .heading {
       font-size: 16px;
       padding-bottom: 5px;
       padding-left: 5px;
       padding-top: 5px;
   display:none;
    text-shadow: 1px 1px 0 #FFFFFF;
   }
   .sidebarBox .event {
       font-size: 11px;
       line-height: 3.1;
   margin-left: 2px;
   text-indent:20px;
    background-image: url(http://location of the image );
   background-position: left;
   background-repeat: no-repeat;
   }
   ```
4. Add the code snippet **Sidebar Upcoming Events Block** to any of your web pages. See [Code Snippets](/doc/639f19c7-9084-4e4d-8858-314c37ab04da) for more information.  

   ![](https://outline-production-attachments.s3-accelerate.amazonaws.com/uploads/48da3d2a-9a3a-434b-824b-a6018154f31c/398b3161-b9b9-46b9-961b-27cc09f8c138/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA4EOUDTOVUICLPZ4P%2F20261023%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20261023T193000Z&X-Amz-Expires=86400&X-Amz-Signature=62804f3da69163af2e4836977f26af54c8a1a057e50d93a0fb5c71bb738c7a6c&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject " =683x469")