Skin Name: Shuriken Skin URI: http://www.lunaescence.com/ Developer: Sally Anderson (Lazuli) and Marohi Developer URI: http://www.lunaescence.com/ License: GPL. Notes: Feel free to edit, modify, or alter our skins in any way. Doing so will not offend, upset, or bother us in any way. You also do not have to ask our permission first. Description: Shuriken is a light-weight, brown, cream, and tan skin. It's slightly fixed width, and should adjust to fit resolutions down to 800x600. Skin Update: -- Never -- #__________________________________Shuriken Read Me File __________________________________# ------------------------------------------ Custom Graphics ------------------------------------------ Raw files for the logo, menu headers, page background, and listing sidebars are available in: - PhotoShop *.psd http://sally.lunaescence.com/project/efiction/graphics/shuriken_raw_graphics.zip Other formats available upon request. Fonts Used: - Georgia - Arial ------------------------------------------ The CSS Files ------------------------------------------ For this skin, I've created a total of four style sheets that control the layout of the site. - style.css -- Contains global styles that appear on multiple pages throughout the site. - main.css -- Controls the appearance of news, news comments, reviews, and the index page. - user.css -- Controls the appearance of the user pages. - story.css -- Controls the appearance of the viewstory and story listing pages, including challenges and series. We've left you comments throughout these files to help you customize your styles of choice. Both of us are Computer Science majors with a concentration in Web development, so there may be things we've forgotten. ------------------------------------------ extra_header.php ------------------------------------------ IF YOU DON'T KNOW WHAT YOU'RE DOING, DO NOT ATTEMPT TO CUSTOMIZE THIS FILE! Just add any CSS additions to style.css! For this skin, we use extra_header.php to control when our four style sheets are used. This hopefully will reduce the load time by only using each style sheet when they're actually needed, rather than loading them for every page. We've created some simple statements that check to see what the current page is. Statement... 1.) Checks for user pages and calls user.css (with story.css imported in using the @import css declaration) 2.) Checks for story pages and listings and calls story.css 3.) Checks for news, news comments, and reviews and calls main.css 4.) Checks for admin pages and calls both user.css and main.css ------------------------------------------ Customizing the Title ------------------------------------------ The title header is plain text, but you can easily add your own custom header graphics or text. I've left comments in header.tpl and style.css to show you where the customizations can be made. There's an additional menu option at the top of the screen inside the white stripe. Nothing has been done with it for this release. Right now, the height is set at 20 pixels, but you might want to resize it if you choose to put a menu here. The brown bar is pretty much open to add what you need to. It's about 150 pixels tall, though it would be easy to increase or decrease the height as needed. The div below controls where the text displays, which I've left comments about in style.css. If you use a graphic with a height of about 150 pixels, you actually should be able to completely remove the line below and not worry about positioning. ------------------------------------------ Customizing the Menu ------------------------------------------ For this skin, we used a neat trick we learned in class to use both text headers as well as graphical ones. It uses a CSS trick to move the actual text off the screen. Should a browser that doesn't support CSS visit your page, it'll see text headers instead of graphics. To use, refer to header.tpl. We've left you comments to indicate where each section begins and ends. Then, simply customize, copy, and paste this code where you want it.
!! -- YOUR CONTENT HERE -- !!

 

Be sure to edit the parts where it says "YOUR MENU NAME", "YOUR CONTENT", etc. to include your comment. Where it says "YOUR CSS ID", insert a name in lowercase that will uniquely identify the menu. Examples include "donations", "sponsors", "sitelinks", "affiliates" etc. Now, open up style.css and scroll down to line 202 and look for where it says "These sections control the buttons in the menu." Rename, copy, and paste this section in. Be sure to change "YOUR CUSTOM ID" to the name you gave the button above and be sure to change "YOURBACKGROUND.png" to the name of the custom background you're using. /* Button #5: YOUR CUSTOM BUTTON */ #YOUR CSS ID {background:transparent url(images/YOURBACKGROUND.png) no-repeat 0 0;} If you did everything correctly, you should now have a CSS switch button just like the ones we used. =) ------------------------------------------ More Help ------------------------------------------ If you need help with the CSS, here's a few of our favorite sites: http://www.lissaexplains.com/css.shtml http://www.htmldog.com/guides/cssbeginner/ http://www.w3schools.com/css/default.asp Enjoy!