Translate
Online Users

In total there are 7 users online :: 3 registered, 0 hidden and 4 guests

Most users ever online was 72 on Mon Apr 07, 2014 12:28 pm

Users browsing this forum: No registered users and 1 guest based on users active over the past 5 minutes

Last Online
In order to view the online list you have to be registered and logged in.



We are a free and open
community, all are welcome.

Click here to Register

Search

Coming tutorials

Create a new style combining the best of existing styles... discuss...

Moderator: Staff

Coming tutorials

PostAuthor: Mike » Mon Jun 11, 2012 12:14 am

Style Design

Basic Styles: Codename: Prosilver Black
The basic style design or port only requires a few css changes to produce a new style...
This type can easily be maintained as the code will always be identical to the original style...
This type of modification only requires the addition of one or two config edits and general css tag edits...
All other files can be set to copy the original prosilver base (inheritance can be used for all other files)...

Intermediate Styles: Codename: Prosilver Black with new code wrappers:
With the intermediate design or port we only need make a few edits to create a completely new style...
Most of the basic files remain intact, normally only viewforum_body, viewtopic_body and forumlist_body need be edited...
Intermediate designs tend to wrap certain sections of code in nicer looking images...
When used with a style_config file, updating intermediate designs becomes much simpler...

Advanced and Game Styles: Codename: Diablo III
Creating an advanced style requires a good deal of work, it also requires a lot of imagination...
Keeping these styles up to date is an ongoing process and should normally be left to the original author...
Advanced style change almost all aspects of the style on which they are based...
Surprisingly enough you can also create a brand new style based on prosilver or any other style with very few alterations...

    Criteria:
    New images and icons...
    New page layout is also an option...
    New colours, fonts and generally new css tags are ensured...

Could be a game style, not sure yet... perhaps a Diablo III style...

Tutorials:
  • In part one of this tutorial we will examine the how we can create a different looking style by simply modifying the styles css characteristics...
    The original authors copyright should be left intact, however you could add something along the lines of "Modified by Joe Blog"...
  • In part two we will go a little further by including code to wrap certain sections to create a nicer looking style and also include new images and colours...
    The original authors copyright should be left intact, however you could add something along the lines of "Modified by Joe Blog"...
  • For the final tutorial we will build a new style from scratch including all the previous methods...
    You are now the original author, so add your copyright...
---------------------------------------------------------------------------------------------------------------------

Introducing the style_config file:
It's no secret that all styles are based on either prosilver or subsilver, so when updating your style, you have to compare it to the new version of the style on which it was based... The update process is made more complex and time consuming if the style to update differs drastically from the original (on which it was based), often to the extent that even with comparison software the two can't be reconciled... The key is to make very few alterations to the new style by employing a style config file as *introduced by CyberAlien (aka Art) some years back...

CA's method was to locate the more complex alterations in another file (I call this the style_config.html file) and only use simple variable in your version, thus allowing the comparison method to succeed...

Example Code:
This won't mess up the original code
Code: Select all
{$MY_CODE}
a much as this
Code: Select all
<div class="block_bc" style="width:100%;">
   <span class="block_bl" style="float:left;"></span>
   <span class="block_br" style="float:right;"></span>
</div>
<br /><br />
The style_config.html file would look like this:
Code: Select all
<!-- DEFINE $MY_CODE = '<div class="block_bc" style="width:100%;"><span class="block_bl" style="float:left;"></span><span class="block_br" style="float:right;"></span></div><br /><br />' -->
It's easy to see how valuable the method is, even with a lot of alterations it should be easy to compare the old and the new...

---------------------------------------------------------------------------------------------------------------------

A note of copyright:
In the last ten years I have come across hundreds of styles purporting to be unique/original... In reality many were not new. If you modify a style to the extent it is not recognisable, it may be considered new, if you change a few colours (even in images), it most certainly is not new. If in doubt, don't claim ownership, simply append your copyright to the original authors copyright in the footer...
If it looks like an Apple, tastes like an Apple... it's probably an Apple...

Rules of using another authors code:
If you use images/icons or code (including JS) written by another author, get their permission to reuse it, and note this in your code. Do not port or copy non commercial style without written permission from the copyright holder...

---------------------------------------------------------------------------------------------------------------------
Notes:
* To my knowledge it was CyberAlien that first came up with the config file method, if you know any different, please let me know...
Image
User avatar
Mike
Developer team leader
Developer team leader
 
Posts: 6051
Joined: Sun Mar 27, 2011 2:12 pm
Location: Dublin, Ireland

Return to Creating a new style

Who is online

Users browsing this forum: No registered users and 1 guest

cron
Charlie Pringle
Ebay's 76junkyard