The Slides template comes with a default logo which you should change to fit your brand. This article will show you how to change the logo on the Slides template as well as customize its styling.
Slides uses an SVG Library where the SVG graphics used for the site are defined. You can see this in the HTML file that comes with the downloaded template (something similar to the below markup).
<svg xmlns="http://www.w3.org/2000/svg" style="display:none" id="customSvgLibrary">
<symbol><path /></symbol>
<symbol><path /></symbol>
<symbol><path /></symbol>
<symbol><path /></symbol>
<symbol><path /></symbol>
</svg>The SVG <symbol> element is used to define reusable symbols. The shapes nested inside a <symbol> aren’t displayed unless referenced by a <use> element, as shown below:
<svg style="width:82px;height:24px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg>The <symbol> element needs an id attribute so that it can be referenced later by a <use> element.
In the SVG Library, we’ve defined a symbol which we use as the logo for the site. Whenever we display the logo, we use the same vector graphic. To change the logo, we’ll change this symbol.
We recommend using an SVG image for your logo since SVGs scale well and look good no matter the size, but if you don’t have a vector image of your logo and would rather use a raster image, you can. We’ll see how to do so towards the end of the article.
Changing the Logo Defined in the SVG Library
To change the logo used on the Slides website, change its symbol defined in the SVG Library and then you can further customize the individual logos displayed on the page by changing their size or styling.
To change the logo symbol, first make sure you have your SVG ready. Creating SVG graphics is out of the scope of this tutorial, you can check online for tutorials on how to do so. We have a video that shows how to create a simple SVG logo with Adobe Illustrator, that you might find useful, and if you want to create a logo from text, you try out this free tool.
When you have your SVG code ready, find the logo symbol in your Slides HTML file. Look for the symbol with an id of logo.
<svg xmlns="http://www.w3.org/2000/svg" style="display:none" id="customSvgLibrary">
<symbol id="logo" viewBox="0 0 106 31"><title>Slides Framework</title><path d="M17.413 14.04c-.56-5.84-5.6-7-8.52-7-4.6 0-8.6 2.92-8.6 7.52 0 3 2.4 4.88 5.28 5.8 4.24 1.64 5.88 1.84 5.88 3.36 0 1.08-1.2 1.72-2.32 1.72-.28 0-2.24 0-2.52-2.04h-6.6c.6 5.84 5.68 7.36 9.04 7.36 4.92 0 9.04-2.88 9.04-7.76 0-4.8-4-5.92-7.76-6.96-1.76-.52-3.4-1.2-3.4-2.2 0-.6.48-1.48 1.88-1.48 1.96 0 2.04 1.2 2.08 1.68h6.52zm2.222 15.96h6.64v-29.6h-6.64v29.6zm9.662-24.56h6.64v-5.04h-6.64v5.04zm0 24.56h6.64v-22.2h-6.64v22.2zm32.782-29.6h-6.64v9.28c-.72-.72-2.6-2.64-6.52-2.64-5.64 0-11 4.28-11 11.8 0 6.68 4.4 11.88 11.12 11.88 4.48 0 6.08-2.2 6.72-3.12v2.4h6.32v-29.6zm-17.52 18.4c0-2.56 1.8-5.56 5.64-5.56 1.56 0 2.96.56 3.96 1.56 1 .96 1.64 2.32 1.64 3.92.08 1.64-.52 3.08-1.56 4.12s-2.52 1.68-4.12 1.68c-3.12 0-5.56-2.28-5.56-5.68v-.04zm42.502 2.4c.52-4.08-.32-7.64-3.12-10.64-2.08-2.2-5-3.52-8.4-3.52-6.76 0-11.64 5.72-11.64 11.92 0 6.6 5.4 11.76 11.76 11.76 2.28 0 4.48-.68 6.32-2 1.88-1.28 3.44-3.2 4.52-5.68h-6.8c-.8 1.16-1.92 2.08-4.04 2.08-2.6 0-4.84-1.56-5.12-3.92h16.52zm-16.44-5.04c.16-1.04 1.52-3.52 4.96-3.52s4.8 2.48 4.96 3.52h-9.92zm34.502-2.12c-.56-5.84-5.6-7-8.52-7-4.6 0-8.6 2.92-8.6 7.52 0 3 2.4 4.88 5.28 5.8 4.24 1.64 5.88 1.84 5.88 3.36 0 1.08-1.2 1.72-2.32 1.72-.28 0-2.24 0-2.52-2.04h-6.6c.6 5.84 5.68 7.36 9.04 7.36 4.92 0 9.04-2.88 9.04-7.76 0-4.8-4-5.92-7.76-6.96-1.76-.52-3.4-1.2-3.4-2.2 0-.6.48-1.48 1.88-1.48 1.96 0 2.04 1.2 2.08 1.68h6.52z"/></symbol>
...
</svg>Replace the symbol’s code (except its id) with your SVG’s code.
<symbol id="logo" [PLACE YOUR CODE HERE] /></symbol>For example:
<symbol id="logo" viewBox="0 0 106 31"><title>Slides Framework</title><path d="M0 19.29l1.56-1.74a6.604 6.604 0 002.068 1.566 6.37 6.37 0 00.437.189q1.425.555 2.955.555 1.049 0 1.803-.262a3.266 3.266 0 00.522-.233 1.761 1.761 0 00.565-.482q.259-.349.308-.828a2.28 2.28 0 00.012-.235 1.603 1.603 0 00-.171-.749q-.222-.427-.729-.706-.752-.413-2.131-.9a34.582 34.582 0 00-.569-.195 15.619 15.619 0 01-1.308-.509q-1.266-.566-2.002-1.23a4.508 4.508 0 01-.05-.046 3.323 3.323 0 01-1.078-2.42 4.397 4.397 0 01-.002-.145q0-1.08.45-1.89.45-.81 1.23-1.35t1.8-.81a8.193 8.193 0 011.597-.252A9.661 9.661 0 017.86 6.6a10.536 10.536 0 011.688.128q.938.152 1.721.486a6.264 6.264 0 01.236.106 10.499 10.499 0 011.293.725A7.596 7.596 0 0113.98 9l-1.53 1.68a8.753 8.753 0 00-1.323-.94 10.782 10.782 0 00-.807-.425Q9.09 8.73 7.56 8.73a5.435 5.435 0 00-.787.053q-.407.06-.739.187a2.451 2.451 0 00-.499.255 1.73 1.73 0 00-.472.459q-.245.359-.262.834a2.005 2.005 0 00-.001.072 1.533 1.533 0 00.562 1.213 2.271 2.271 0 00.293.212 6.853 6.853 0 00.588.318q.607.295 1.478.611a27.807 27.807 0 00.559.196 27.716 27.716 0 011.091.41 21.722 21.722 0 01.769.325 6.64 6.64 0 01.847.451 5.254 5.254 0 01.593.434 3.918 3.918 0 01.697.765 3.51 3.51 0 01.233.39 2.905 2.905 0 01.265.794q.063.339.065.726a4.873 4.873 0 010 .025 4.863 4.863 0 01-.095.984 3.556 3.556 0 01-.4 1.071q-.495.855-1.35 1.41a5.662 5.662 0 01-1.278.61 7.051 7.051 0 01-.717.2 10.614 10.614 0 01-1.633.229 12.811 12.811 0 01-.827.026q-1.98 0-3.72-.72a8.092 8.092 0 01-1.662-.917A6.678 6.678 0 010 19.29zm90 0l1.56-1.74a6.604 6.604 0 002.068 1.566 6.37 6.37 0 00.437.189q1.425.555 2.955.555 1.049 0 1.803-.262a3.266 3.266 0 00.522-.233 1.761 1.761 0 00.565-.482q.259-.349.308-.828a2.28 2.28 0 00.012-.235 1.603 1.603 0 00-.171-.749q-.222-.427-.729-.706-.752-.413-2.131-.9a34.582 34.582 0 00-.569-.195 15.619 15.619 0 01-1.308-.509q-1.266-.566-2.002-1.23a4.508 4.508 0 01-.05-.046 3.323 3.323 0 01-1.078-2.42 4.397 4.397 0 01-.002-.145q0-1.08.45-1.89.45-.81 1.23-1.35t1.8-.81a8.193 8.193 0 011.597-.252 9.661 9.661 0 01.593-.018 10.536 10.536 0 011.688.128q.938.152 1.721.486a6.264 6.264 0 01.236.106 10.499 10.499 0 011.293.725A7.596 7.596 0 01103.98 9l-1.53 1.68a8.753 8.753 0 00-1.323-.94 10.782 10.782 0 00-.807-.425q-1.23-.585-2.76-.585a5.435 5.435 0 00-.787.053q-.407.06-.739.187a2.451 2.451 0 00-.499.255 1.73 1.73 0 00-.472.459q-.245.359-.262.834a2.005 2.005 0 00-.001.072 1.533 1.533 0 00.562 1.213 2.271 2.271 0 00.293.212 6.853 6.853 0 00.588.318q.607.295 1.478.611a27.807 27.807 0 00.559.196 27.716 27.716 0 011.091.41 21.722 21.722 0 01.769.325 6.64 6.64 0 01.847.451 5.254 5.254 0 01.593.434 3.918 3.918 0 01.697.765 3.51 3.51 0 01.233.39 2.905 2.905 0 01.265.794q.063.339.065.726a4.873 4.873 0 010 .025 4.863 4.863 0 01-.095.984 3.556 3.556 0 01-.4 1.071q-.495.855-1.35 1.41a5.662 5.662 0 01-1.278.61 7.051 7.051 0 01-.717.2 10.614 10.614 0 01-1.633.229 12.811 12.811 0 01-.827.026q-1.98 0-3.72-.72a8.092 8.092 0 01-1.662-.917A6.678 6.678 0 0190 19.29zM66.18 8.67h.09l.45-2.85L67.8.36h2.79l-4.32 21.27h-2.25l.18-2.16h-.12a9.971 9.971 0 01-2.156 1.651 9.291 9.291 0 01-.334.179q-1.35.69-2.73.69a5.685 5.685 0 01-1.62-.22 4.367 4.367 0 01-1.98-1.22q-1.134-1.209-1.315-3.35a10.064 10.064 0 01-.035-.85 11.111 11.111 0 01.61-3.695 10.637 10.637 0 01.02-.055 10.664 10.664 0 011.146-2.32 9.523 9.523 0 01.579-.785q1.095-1.335 2.55-2.115 1.455-.78 3.105-.78a7.038 7.038 0 011.166.092q.797.134 1.429.463a4.323 4.323 0 011.291 1.007 4.101 4.101 0 01.374.508zm19.71 6.36H74.97v.45q0 1.528.578 2.523a3.256 3.256 0 00.577.732 3.928 3.928 0 002.116 1.024 5.507 5.507 0 00.899.071 6.648 6.648 0 001.918-.271 6.075 6.075 0 00.692-.254q1.2-.525 2.22-1.305l.99 1.86q-1.14.9-2.805 1.515a10.048 10.048 0 01-2.835.59 11.845 11.845 0 01-.78.025 8.534 8.534 0 01-1.57-.139 7.036 7.036 0 01-1.01-.266 5.399 5.399 0 01-1.547-.824 5.005 5.005 0 01-.448-.391 5.322 5.322 0 01-1.093-1.564 6.342 6.342 0 01-.182-.431q-.435-1.145-.449-2.667a11.09 11.09 0 01-.001-.108 9.902 9.902 0 01.27-2.346 8.57 8.57 0 01.42-1.284 9.376 9.376 0 011.346-2.283 8.606 8.606 0 01.499-.567q1.155-1.2 2.67-1.86 1.515-.66 3.195-.66 1.35 0 2.415.42a5.092 5.092 0 011.249.7 4.544 4.544 0 01.536.485q.72.765 1.095 1.8a6.311 6.311 0 01.349 1.625 7.592 7.592 0 01.026.64q0 .81-.15 1.62t-.27 1.14zm-63.51 1.2l2.91-13.68h-4.71l.48-2.19h7.41l-3.39 16.08q-.15.66-.15 1.26a3.042 3.042 0 00.048.558q.117.626.522.957a1.988 1.988 0 00.801.388q.319.077.699.077a5.159 5.159 0 001.12-.119 4.687 4.687 0 00.245-.061 6.475 6.475 0 00.59-.198q.297-.114.618-.266a11.326 11.326 0 00.217-.106l.63 2.1q-1.95.96-4.2.96a5.041 5.041 0 01-1.303-.16 3.758 3.758 0 01-1.622-.89q-1.068-.997-1.122-2.833a6.728 6.728 0 01-.003-.197q0-.81.21-1.68zm18.57.3l1.68-7.35h-5.22l.45-2.22h7.98l-2.19 9.78q-.06.24-.09.465a3.365 3.365 0 00-.029.356 3 3 0 00-.001.079 3.306 3.306 0 00.045.566q.117.673.54 1.009a2.044 2.044 0 00.777.376q.299.077.651.087a3.824 3.824 0 00.117.002q.66 0 1.275-.195a12.838 12.838 0 00.57-.196q.386-.143.825-.329l.63 2.1a13.76 13.76 0 01-1.665.608 12.47 12.47 0 01-.24.067q-.945.255-2.205.255-1.86 0-3-.975a3.14 3.14 0 01-1.017-1.71 4.852 4.852 0 01-.123-1.125q0-.69.24-1.65zm23.49.48l1.26-6.12q-.66-1.05-1.56-1.515-.9-.465-1.83-.465-1.17 0-2.175.57a5.802 5.802 0 00-1.66 1.425 6.656 6.656 0 00-.095.12q-.75.975-1.185 2.25-.435 1.275-.435 2.685a7.253 7.253 0 00.064.999q.164 1.174.746 1.821a2.664 2.664 0 001.612.854 3.847 3.847 0 00.608.046q.979 0 2.081-.542a7.299 7.299 0 00.229-.118 6.78 6.78 0 001.255-.88q.521-.456 1.019-1.05a11.371 11.371 0 00.066-.08zm10.92-4.02h8.31a6.458 6.458 0 00.037-.306 5.714 5.714 0 00.008-.099q.015-.195.015-.405 0-1.237-.499-2.046a2.695 2.695 0 00-.356-.459 2.82 2.82 0 00-1.475-.797 4.191 4.191 0 00-.88-.088q-.78 0-1.545.285a5.368 5.368 0 00-1.303.71 6.105 6.105 0 00-.152.115q-.69.54-1.26 1.32a6.304 6.304 0 00-.802 1.496 7.228 7.228 0 00-.098.274zM44.062 3.971a2.346 2.346 0 00.728.109q.96 0 1.635-.66a2.248 2.248 0 00.455-.623 2.244 2.244 0 00.22-.997 2.296 2.296 0 00-.048-.484 1.507 1.507 0 00-.492-.851 1.858 1.858 0 00-.804-.4A2.661 2.661 0 0045.15 0q-.96 0-1.635.675a2.75 2.75 0 00-.021.021 2.188 2.188 0 00-.654 1.584 2.258 2.258 0 00.033.398 1.509 1.509 0 00.537.937 1.999 1.999 0 00.652.356z"/></symbol>After placing in your new SVG, save the changes and refresh your webpage in the browser to see the changes.
Your new logo might look fine the way it is, but you could also find that you need to tweak the logos displayed on the page to make them look better. Let’s look at how to do this next.
Customizing the Displayed Logos
On your Slides template, there could be several places where the logo is displayed. To find all uses of the logo symbol on the page, you can search for this string xlink:href="#logo" in the HTML file (you can use Ctr + F or Cmd * F on most code editors for this). A few examples are shown below:
<div class="left"><a href="#" title="Slides Framework"><svg style="width:82px;height:24px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg></a></div>
<div class="left"><a href="#" title="Slides Framework"><svg style="width:82px;height:24px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg></a></div>
<a href="#" class="logo"><svg width="100" height="30"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg></a>
<div class="fix-3-12">
<svg height="77" class="wide ae-1 fromCenter"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg>
</div>
<div class="fix-4-12">
<svg class="ae-1 fix-3-12 margin-bottom-3" style="height: 76px;"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg>
<a href="#" class="button hollow ae-2 cropLeft"><img src="assets/img/appstore.jpg" height="42"/></a><a href="#" class="button hollow ae-3 cropRight"><img src="assets/img/googleplay.jpg" height="42"/></a>
</div>To change the size of a displayed logo, you can use the <svg> element’s width and height attributes (<svg width="100" height="30">) or you could do it with CSS (<svg style="width:82px;height:24px">). There are other attributes of an SVG that can be modified with CSS, here’s a list of them.
Using Raster Images for the Logo
If you’d rather use a raster image (e.g. PNG or JPEG) for your logo, you can replace the <svg> element with an <img> element.
<div class="left">
<a href="#" title="Slides Framework">
<img src="assets/img/logo.png" alt="logo">
</a>
</div>You can then size the image with width and height attributes or with CSS, as well as add other CSS styles to the image.
Below, we’ve changed the logo displayed on the Navbar to use a raster image.
Here is the video tutorial for you that can help you to change the logo: