Skip to content

How to Reskin Shepherd

Jump to bottom
Mark Denihan edited this page Jun 21, 2015 · 3 revisions

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

  1. src/jsp/css/theCss.css
  2. src/jsp/css/lessonCss/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/jsp/css/images to your new skin's images (Same Dimensions for best effect)
  4. Update the colour entries in src/jsp/css/theCss.css and src/jsp/css/lessonCss/theCss.css to match your new images
  5. You may wish to remove/reposition 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. Update the build.xml tomcat variable to where you want your WAR file to be dropped
  7. Run the build.xml
  8. You now have a Shepherd built with your custom skin
Clone this wiki locally