trinest.com

Trent Petronaitis
Posted on 31.05.2010 in How To

Today we are going to cut down the simple basics of some of the web designs which are available to download in the download section. The design is going to be the “Simple Media” template. You can view the completed version here, as well as download it here.

Please note, this tutorial explains more about the elements used and how- rather then a step to step guide on what to type first. Keep this in mind if your going to use this guide.

First some back history about this design, while it hasn’t been used for and project I’ve done- it has been considered originally it was going to be a new blog which I was considering openning up- anyway the rest is history.

The layouts goal is to provide easy and simple access as if it was a media based site.

First thing is first, lets look at the various CSS elements within the document.

body{
background-color:#D9D9D9;
margin:0;

}

This is the “body” section, and as you can see not much is really implemented in this section. We have defined the background color, which is a light gray- as well as giving the body a margin of 0. Some other things you could add to this body tag in the CSS are things such as global font settings- for example if a DIV tag doesn’t have a defined font family or size, or even color it would use what the body tag specifies.

Moving on…

div#block{
width:810px;
background-color:#ffffff;
padding:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #ffffff;
}

This layout uses a global “block” DIV tag which all the other DIV tag elements rest in. This “block” defines the size of the document etc.

What this block has given the user is a white block which has corned edges (if it is in a browser which supports this CSS 3.0 standard).

This block is essencially the main area of the design, everything in this design is within this block- when you put in code in the html section (such as your div tags), nothing will extend from outside this first DIV. For example.

<div id=”block”>

Extra DIV tags here.

</div>

No extra DIV tags or content here. (though you might want to put in a <p> tag or something here- or give the body a bottom margin of 50px or something to pad the design).

As you can see above, this is how the design is made with in the HTML section.

I think that was a little side quest there!

div#top{
height:50px;
}

The main thing here is that the design has an extra padding for the top section because of this code. If your text goes outside of this height you might want to extend the pixels allicated to this section.

div#header{
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#03F;
}
div#sub{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#B3B3B3;
text-align:left;
font-style:italic;
}

Both of these elements are essencialy one. This template uses this for the Sites Title and the Sites Sub Text on the main “header” section.

For the most part this bit of code defines the DIV elements, font family, font size and color. It also tells the DIV to float left.

This header, and sub DIV are placed within the top DIV tag. Like so.

<div id=”top”>

<div id=”header”>Site Title</div>

<div id=”sub”>Sub Title</div>

We are now going to put the Navigation “here”.

</div>

Moving on…

We are going to insert the navigation- as you can see above, it will still be within the top DIV tag.

div#navigation{
float:right;
font-variant:small-caps;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#03F;
}
div#navigation a:link { color: #5C7CFF; text-decoration:none;}
div#navigation a:visited { color: #5C7CFF; text-decoration:none;}
div#navigation a:hover { color: #5C7CFF; text-decoration:none;}

This mostly again defines the font family, size etc. but this time it is floating right. If you have placed this correctly it will be aligned right in the “top” DIV tag.

It is also- for style design, set that the text is “Small Caps”. This means the font is in all caps- but the non Capitals are sub sized.

You can also if you want include a sub navigation, here is the code used in the template. Note the color is now changed from Blue to Green, and the size has been restricted- it still has the “Small Caps” turned on.

div#subnavi{
text-align:right;
font-variant:small-caps;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#03F;
}
div#subnavi a:link { color: #33CC33; text-decoration:none;}
div#subnavi a:visited { color: #33CC33; text-decoration:none;}
div#subnavi a:hover { color: #33CC33; text-decoration:none;}

To separate the style, I’ve added a <hr> tag after the top DIV is turned off in the body of your code- (not the CSS, but the HTML).

While this element doesn’t have any CSS- it does contain some Javascript. This is used as the banner, and the Javascript is a simple array.

<div id=”banner”>
<script language=”JavaScript”>
function random_imglink(){
var myimages=new Array()
myimages[1]=”images/1.png”
myimages[2]=”images/2.png”
myimages[3]=”images/3.png”
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write(‘<img src=”‘+myimages[ry]+’” border=0>’)
}
random_imglink()
</script>
</div>

The image array is called “myimages”, if you want you can change it to “mybanner” or “sitesname_banner” or something like that, but remember to change them all. You can also have more then 3 random banners, or less. Your choice. (The zip file for this theme contains a Black, Gray and Slightly off White image).

Moving back to the CSS. We are now defining the content area.

div#content{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-align:left;
}
div#content a:link { color: #000000; text-decoration:underline;}
div#content a:visited { color: #000000; text-decoration:underline;}
div#content a:hover { color: #000000; text-decoration:none;}

Note the content area is accuarlly full width- meaning its 100% across your “block” DIV tag. The way this themes right navigation is done- is just a float. And isn’t static etc.

The content area just defines the font style. As well as aligning the text left.

div#pannel{
float:right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color:#F2F2F2;
border:1px solid #D9D9D9;
padding:5px;
width:300px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#737373;
}
div#pannel a:link { color: #737373; text-decoration:none;}
div#pannel a:visited { color: #737373; text-decoration:none;}
div#pannel a:hover { color: #737373; text-decoration:none;}

The right “navigation” for this theme is called a Pannel, it separates the elements and floats right in the design- giving it a nice gray box as well. There are other ways to do navigation- and look out for them in future tutorials.

To finish off the CSS- we have the footer.

div#footer{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#737373;
text-align:left;
}
div#footer a:link { color: #737373; text-decoration:none;}
div#footer a:visited { color: #737373; text-decoration:none;}
div#footer a:hover { color: #737373; text-decoration:underline;}

The footer is fairly simple- and I think you know the dril now on what is defined in that section for this particular theme.

Note: The theme contains some extra CSS which identifies various things such as “title” and other DIV tags- you can use these if you want if you are creating say a blog.

Also note the panel is placed inside the content tag- similar to how you did the “top” DIV tag section. The footer is then separate to either element.

Thats it, if you have trouble please email me, and if you do use this as a basis for your layout- please drop me an email anyway- I would like to see who uses it and what for!

Remember you can download the theme in the download center.

Trent Petronaitis
Posted on 31.05.2010 in News

The code name for this lovely design (oh god, who am I kidding…) was called Summer in July, I just tacked on the Retro bit to look cool. But the elements are still there- in some form- I think.

The theme has a few issues- but overall its a nice fresh start and addresses the problems of the previous theme becoming bloaty and unwanted.

Here is a youtube video of me creating the layout- various little snaps.

The banner for this layout is inspired by the Survival Kids (GBC) games, it is a great homage to the game- as well as still been a unique and interesting style.

There are a few errors which I’ll slowly fix or improve- and as well as elements such as the header tags which are quite ugly- so they will also be fixed (they are temp ones to get the design up and running!)

Trent Petronaitis
Posted on 12.05.2010 in Around The Web

While I’ve been around the web in 13 days before, or some other random amount of time which I calculated was the last time I did one- I haven’t ”forgotten” to do one yet.

While I’m on my site updating it with paganistic articles and odd options, I decided time to do another web round up.

Review: Pokemon: Soul Silver (DS)

Pokemon was reviewed ahead of the game where I depicted the fanboy inside me about returning back to the best in the series so far- Gen II- remodled into Gen IVish. Oh well.

Introduction: The second generation of Pokemon was something special, lots of ideas where in the game which should have been carried on from it. Such as the multiple regions, interesting storylines and “good” looking Pokemon, it’s what any fan wants- but is it comparable to the newer generations of Pokemon? Or should Nintendo go back to the drawing board and stop rehashing what has already been done?

Written for DS-X2, check the review out if you wish to read more! Also check out Chris’s Heart Gold review which in some ways is more detailed then my Soul Silver one :/

Review: Again (DS)

Again is one of CING’s final works- while its possibly unlikely we will see Last Window in English as ever passing day goes by, it is possible to play Again- CING and Tecmo’s love child.

The question as I reviewed the title is does it do right, to past CING titles- as well as is it worth it?

Introduction: CING went defunct in 2010 after a steady stream of interesting emotional video games for Nintendo platforms. They had partnered with Tecmo to produce Again (originally known as Again: Eye of Providence) and after a while it was finally released. The question on everyone’s minds, is CINGs latest title one of their golden hits? Or does it fail to live up to the standards gamers have for the company?

Check out my DS-X2 review for Again.

Trent Petronaitis
Posted on 12.05.2010 in Articles

Let’s think for a moment about the perfect game, movie or book- what do they usually get in a review? A nice hefty 10 out of 10, now everyone’s views are different but the general consensus is a true 10 out of 10 is impossible. Now think, how many actually get this legendary score? Why not a good chunk as you would fear, it’s clearly evident that 10 out of 10 gets handed out like it’s going out of fashion. There impossible score- is possible it seems.

There are a few scenarios which reviews are given a higher score then they deserve, or the other way around- giving out worse scores.

A favourite series of the reviewer will get placed in the higher bracket even though it doesn’t deserve it most of the time. A few examples of this are the latest handheld titles from Nintendo in the Zelda series- both Phantom Hourglass and Spirit Tracks are at best a 7.5, that is the proper score when it’s not justified by any other means. I for example enjoyed Spirit Tracks way more than Phantom Hourglass, so I would then add on another 1.0 or so to show this. While I’m at it, if it’s at launch the review will get another 1.0 because of the “hype”.

Continuing to discredit my past reviews as well as everyone else’s, let’s talk about competition- as in especially gaming related- a scenario like Mario verses Sonic. While now cute and cuddly friends- in the past where never seen together- creating a rip, if a reviewer had bias towards say Mario, Sonic titles would be rated lower because of this. Also when Sonic had its huge downfall since its first few games, something like this would scale it even lower by a lot more than 1.0 points. The simple fact is while the series has rebounded in some ways from its lowest low- it has ended up disrespected because of that by the majority of reviewers, and this continues for the simple fact unless the series had a memorable moment in the persons childhood, it would never be considered a series contender until all the older reviewers die off like the dinosaurs.

Or at the end of the day does it really matter? Well I think it does, because at the end of the day- its still pretty bias, for example even if something is say a new IP- if the reviewer had no hype or thought it was going to turn out crap, the instant they play it and it turns out to be awesome- there goes its ranking through the roof. In the end the reverse occurs if it’s subpar and the reviewer had the biggest amount of hype for the game- it’s going to be slapped down pretty dam hard- maybe harder then it deserves.

Oh and with my random rabbling’s I almost forgot to include something about how the review system is flawed and no one treats the scores as what they should be so everything is automatically jacked up anyway. For example 5 should be the point of most- aka it’s the medium, it means its good but its not the best thing in the world- aka average. But instead this point is used as a “bad” average, and the average score is something around 7-8 depending on the publication.