htdocs/themes/StateDecoded2013/ (to, say,
htdocs/themes/Kansas/), then edit
includes/config.inc.php to read
Kansas instead of
StateDecoded2013. The contents of the new
Kansas directory are now your site template.
There is a State Decoded Assets repository that contains PSD files of page mockups and a favicon. These may be modified to customize the site’s images as you see fit.
If you choose to duplicate the default “State Decoded 2013“ theme, then you will be happiest if you do not edit the existing CSS files directly. Instead, create a new CSS file (e.g.,
htdocs/themes/Kansas/static/css/kansas.css) and start it with the following line:
Then add your CSS declarations on top of that. This way, as subsequent releases of The State Decoded add modify the bundled CSS to add new functionality, you will gain that functionality in your own design by simply copying over the new
application.css. Then, in your template (e.g.,
htdocs/themes/Kansas/default.inc.php), have it load
kansas.css instead of
Better still, if you’re comfortable with SCSS, do the same, but by creating a new SCSS file (e.g.,
htdocs/themes/Kansas/static/scss/kansas.scss) that leads off by importing
application.scss, and then use that to generate
The home page is found at
index.php is the file through which all page requests on the site are piped.)
If you have an introductory video that you want to display on the home page, uncomment the
<div class="nest video">[…]</div> stanza from
htdocs/home.php and modify appropriately to link to your video.
Each of these icons should somehow correlate to the political entity’s legal code. With Virginia, we used the seal icon that was created for the site. The larger touch icons have bitmapped 0 and 1s fading across, representing digital bits being “decoded” as it were. Feel free to edit the master images in the State Decoded Assets repository to suit your needs. We recommend running any images through ImageOptim to squeeze out excess file size.
This site was built with future flexibility and reuse in mind. To that end, the site basically is a style guide as well as a design. We use Sass/SCSS to allow the power of variables in CSS. This makes it easy to rapidly change colors and fonts without having to do massive find-and-replace or worry about color math variations in Photoshop.
This does create a layer of complexity, but a worthwhile one. You, as an end user, can write regular CSS in an SCSS file and it will compile normally.
To compile the SCSS into CSS, you need to run CodeKit, Scout, CompassApp, or do a manual setup with Ruby on your system. This is documented on the Compass site.
The site is defined with three breakpoints: