Skip to content

How to Reskin Shepherd

Jump to bottom
Mark Denihan edited this page Oct 9, 2018 · 3 revisions

Shepherd's skin can be customized by updating the relevant CSS files. There are two important ones you need to update;

  1. src/main/webapp/css/theCss.css
  2. src/main/webapp/css/theCss.css

The first CSS file is where the Security Shepherd Platform looks to for its styling. This includes pages such as Login, Index, Scoreboard and Register.

The second CSS file is where the Security Shepherd modules look to for their styling. This is every default jsp lesson page that comes with Shepherd.

These two files are very similar, with the lessonCss lacking header/footer settings.

Step By Step

  1. Fork the Security Shepherd Repository
  2. Pull your Shepherd fork
  3. Update the images in /SecurityShepherd/src/main/webapp/css/images to your new skin's images (Same Dimensions for best effect)
  4. Update the color entries in src/main/webapp/css/theCss.css and src/main/webapp/css/lessonCss/theCss.css to match your new images
  5. You may wish to remove/re-position the <h1>Security Shepherd</h1> from the <div id="header"> in the index.jsp, register.jsp, login.jsp and scoreboard.jsp as it may spoil your custom banner.
  6. Run the pom.xml with mvn clean install
  7. Drop the WAR file that is created on your Tomcat Server
  8. Complete the Setup Wizard
  9. You now have a Shepherd built with your custom skin
Clone this wiki locally