Padawan Branding Guide
In this document is a guide on how to apply the Padawan Branding to your static site.
Getting the Padawan logo
Listed below is a link to the Powered by Platform One Party Bus logo. This logo is designed around websites with a light theme, but it can be modified with css to accommodate various text coloring depending on your site's needs.
Applying the logo to your static site
When applying the logo to your static site, typically it is placed in the bottom right corner. In most cases, it can be added into the footer element of your site, with properties like float: right
or right: 0
to position it to the right and bottom:0
to position it to the bottom.
Changing the Padawan logo text color
There are a few ways to change the text color of the padawan text color. One is to manually edit the svg code and change the path property fill
to whatever color you want the text to be. If you go this way, you can also change the color of the other elements within the image. Another way to change the text color specifically is to use the currentColor
property within the logo svg. Below is an example showing how to implement currentColor
in order to change the logo text color.
<div>
<svg>
//insert the svg data from the logo here
<svg>
<div>
.div {
right:0;
bottom:0;
padding-right:20px;
padding-bottom:20px;
color: green; //add the text color you want here
}
In the example above, we have a div element position in the bottom right corner, with a little extra padding to better align the logo. Next we have the logo inside with the color defined by the div color
property.
If you just want to use the logo without changing the text color, you can remove the color
and fill
properties, and can also reference the svg file using an <img>
element to make things easier. There are many examples at https://websites.staging.dso.mil under the Padawan examples that show case the different ways to implement the Padawan Logo.