Changing the theme logo in the Simple Theme

You can change the theme logo to customize your portal site and rebrand it to reflect your business.

About this task

By default, the Simple Theme uses SVG images. You can find the SVG images that are used in the Simple Theme in the sprite file \css\images\sprite.svg. This sprite file is compressed and might be difficult to read. You can use your favorite online XML formatting program to convert the file into a more easily readable XML format.

When you change the theme logo, you add a new SVG image to the sprite file that includes XML and other content. Each SVG image in the sprite file is represented by a symbol tag. Use the following procedure to modify an existing image or add your own.
Note: Other image formats are supported. To use an image in another format as your theme logo, reference your image with an img tag in the theme template.

Procedure

  1. Create a new symbol tag. Then, copy the contents of your SVG tag into the new symbol tag. For example, the contents of your SVG tag for the default Simple Theme logo look like the following block of code: 
    <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"     
   viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g>    
   <path d="M17.6,20h12.7c-1.4-1.8-3.7-3.1-6.4-3.1C21.3,16.9,19,18.1,17.6,20z"/>    
   <path d="M16.4,23c0,0.3,0,0.5,0,0.8v2.3h15.3v-2.3c0-0.3,0-0.5,0-0.8H16.4z"/>    
   <path d="M16.3,31.5c0,0.3,0,0.5,0,0.8h15.2c0-0.3,0.1-0.5,0.1-0.8v-2.3H16.3V31.5z"/>      
   <path d="M24,38.4c2.7,0,5-1.2,6.4-3.1H17.6C19,37.1,21.3,38.4,24,38.4z"/>    
   <path d="M4.4,21.6c-0.7,0.3-1.3,0.7-1.8,1.2s-0.9,1.1-1.2,1.8C1.2,25.3,1,26,1,26.7c0,0.7,0.1,1.4,0.4,2.1c0.3,0.7,0.7,1.3,1.2,1.8       
      c0.5,0.5,1.1,0.9,1.8,1.2c0.7,0.3,1.4,0.4,2.1,0.4c0,0,0,0,0,0s0,0,0,0c0.7,0,1.4-0.1,2.1-0.4c0.7-0.3,1.3-0.7,1.8-1.2       
      c0.5-0.5,0.9-1.1,1.2-1.8l4.7-11.9L4.4,21.6z M10.2,28.2c-0.2,0.5-0.5,0.9-0.9,1.3c-0.4,0.4-0.8,0.7-1.3,0.9       
      c-0.5,0.2-1,0.3-1.5,0.3c-0.5,0-1-0.1-1.5-0.3c-0.5-0.2-0.9-0.5-1.3-0.9c-0.4-0.4-0.7-0.8-0.9-1.3c-0.2-0.5-0.3-1-0.3-1.5       
      c0-0.5,0.1-1,0.3-1.5c0.2-0.5,0.5-0.9,0.9-1.3C4.1,23.5,4.5,23.2,5,23l8.6-3.4L10.2,28.2z"/>   
   <path d="M46.6,24.6c-0.3-0.7-0.7-1.3-1.2-1.8c-0.5-0.5-1.1-0.9-1.8-1.2l-11.9-4.7l4.7,11.9c0.3,0.7,0.7,1.3,1.2,1.8       
      c0.5,0.5,1.1,0.9,1.8,1.2c0.7,0.3,1.4,0.4,2.1,0.4c0,0,0,0,0,0c0,0,0,0,0,0c0.7,0,1.4-0.1,2.1-0.4c0.7-0.3,1.3-0.7,1.8-1.2       
      c0.5-0.5,0.9-1.1,1.2-1.8c0.3-0.7,0.4-1.4,0.4-2.1C47,26,46.8,25.3,46.6,24.6z M45.1,28.2c-0.2,0.5-0.5,0.9-0.9,1.3       
      c-0.4,0.4-0.8,0.7-1.3,0.9c-0.5,0.2-1,0.3-1.5,0.3c-0.5,0-1-0.1-1.5-0.3c-0.5-0.2-0.9-0.5-1.3-0.9c-0.4-0.4-0.7-0.8-0.9-1.3       
      l-3.4-8.6L43,23c0.5,0.2,0.9,0.5,1.3,0.9c0.4,0.4,0.7,0.8,0.9,1.3c0.2,0.5,0.3,1,0.3,1.5C45.5,27.2,45.4,27.7,45.1,28.2z"/>   
   <path d="M20.2,15.4c1.7,0,3.1-1.4,3.1-3.1s-1.4-3.1-3.1-3.1c-1.7,0-3.1,1.4-3.1,3.1S18.5,15.4,20.2,15.4z M20.2,10.8       
      c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5S19.3,10.8,20.2,10.8z"/>   
   <path d="M27.8,15.4c1.7,0,3.1-1.4,3.1-3.1s-1.4-3.1-3.1-3.1c-1.7,0-3.1,1.4-3.1,3.1S26.1,15.4,27.8,15.4z M27.8,10.8       
      c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5S27,10.8,27.8,10.8z"/>
</g>
</svg>
    The symbol tag for the default Simple Theme logo looks like the following block of code in the sprite file: 
    <symbol viewBox="0 0 48 48" id="wpthemeBee">   
   <title>Bee</title>    
   <g>        
      <path d="M17.6,20h12.7c-1.4-1.8-3.7-3.1-6.4-3.1C21.3,16.9,19,18.1,17.6,20z" />       
      <path d="M16.4,23c0,0.3,0,0.5,0,0.8v2.3h15.3v-2.3c0-0.3,0-0.5,0-0.8H16.4z"/>         
      <path d="M16.3,31.5c0,0.3,0,0.5,0,0.8h15.2c0-0.3,0.1-0.5,0.1-0.8v-2.3H16.3V31.5z"/>        
      <path d="M24,38.4c2.7,0,5-1.2,6.4-3.1H17.6C19,37.1,21.3,38.4,24,38.4z"/>        
      <path d="M4.4,21.6c-0.7,0.3-1.3,0.7-1.8,1.2s-0.9,1.1-1.2,1.8C1.2,25.3,1,26,1,26.7c0,0.7,0.1,1.4,0.4,2.1c0.3,0.7,0.7,1.3,1.2,1.8  
         c0.5,0.5,1.1,0.9,1.8,1.2c0.7,0.3,1.4,0.4,2.1,0.4c0,0,0,0,0,0s0,0,0,0c0.7,0,1.4-0.1,2.1-0.4c0.7-0.3,1.3-0.7,1.8-1.2  
         c0.5-0.5,0.9-1.1,1.2-1.8l4.7-11.9L4.4,21.6z M10.2,28.2c-0.2,0.5-0.5,0.9-0.9,1.3c-0.4,0.4-0.8,0.7-1.3,0.9  
         c-0.5,0.2-1,0.3-1.5,0.3c-0.5,0-1-0.1-1.5-0.3c-0.5-0.2-0.9-0.5-1.3-0.9c-0.4-0.4-0.7-0.8-0.9-1.3c-0.2-0.5-0.3-1-0.3-1.5  
         c0-0.5,0.1-1,0.3-1.5c0.2-0.5,0.5-0.9,0.9-1.3C4.1,23.5,4.5,23.2,5,23l8.6-3.4L10.2,28.2z"/>        
      <path d="M46.6,24.6c-0.3-0.7-0.7-1.3-1.2-1.8c-0.5-0.5-1.1-0.9-1.8-1.2l-11.9-4.7l4.7,11.9c0.3,0.7,0.7,1.3,1.2,1.8  
         c0.5,0.5,1.1,0.9,1.8,1.2c0.7,0.3,1.4,0.4,2.1,0.4c0,0,0,0,0,0c0,0,0,0,0,0c0.7,0,1.4-0.1,2.1-0.4c0.7-0.3,1.3-0.7,1.8-1.2  
         c0.5-0.5,0.9-1.1,1.2-1.8c0.3-0.7,0.4-1.4,0.4-2.1C47,26,46.8,25.3,46.6,24.6z M45.1,28.2c-0.2,0.5-0.5,0.9-0.9,1.3  
         c-0.4,0.4-0.8,0.7-1.3,0.9c-0.5,0.2-1,0.3-1.5,0.3c-0.5,0-1-0.1-1.5-0.3c-0.5-0.2-0.9-0.5-1.3-0.9c-0.4-0.4-0.7-0.8-0.9-1.3  
         l-3.4-8.6L43,23c0.5,0.2,0.9,0.5,1.3,0.9c0.4,0.4,0.7,0.8,0.9,1.3c0.2,0.5,0.3,1,0.3,1.5C45.5,27.2,45.4,27.7,45.1,28.2z"/>        
      <path d="M20.2,15.4c1.7,0,3.1-1.4,3.1-3.1s-1.4-3.1-3.1-3.1c-1.7,0-3.1,1.4-3.1,3.1S18.5,15.4,20.2,15.4z M20.2,10.8  
         c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5S19.3,10.8,20.2,10.8z"/>        
      <path d="M27.8,15.4c1.7,0,3.1-1.4,3.1-3.1s-1.4-3.1-3.1-3.1c-1.7,0-3.1,1.4-3.1,3.1S26.1,15.4,27.8,15.4z M27.8,10.8  
         c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5S27,10.8,27.8,10.8z"/>    
   </g>
</symbol>
  2. Add a viewBox attribute that indicates the min-x, min-y, width, and height. If your SVG tag included a viewBox attribute, you can reuse those values.
  3. Add an id attribute. The id attribute is how you refer to the image in your markup.
  4. Add a title tag for accessibility.
  5. Optional: Use your favorite online XML compression tool to compress the sprite file so that it loads more quickly.
  6. Optional: If you added your own logo and named it something else, edit the theme template (theme.html) file to reference the new image.
    Note: Other image formats are supported. To use an image in another format as your theme logo, reference your image with an img tag in the theme template.
    For example, the following code block shows how an SVG logo appears in the theme template: 
    <svg class="stLogo" role="img" aria-label="IBM Digital Experience">    
   <title>IBM Digital Experience</title>    
   <use xlink:href="#stBee"></use>
</svg>
    To replace the SVG with a different type of image, change the markup to look like the following img tag. This img tag uses a JPG file. 
    <img alt="Logo" src="css/images/companyLogo.jpg">