Templating the EDK (Updated for Pt4)

[Warbear]

OK, I have promised in the past few weeks to do this, so here it is STARTING, there is a LOT of information in my head to get out and it's taking longer than I thought.

I will update this post as I go about writing the rest of them, but also keep an eye on the site too. If anyone would like to help me out by donating some ISK, then please know that I won't stop you.

Stylin the EDKB [Pt1]
Recently on the EDK forums I released some images of my recent work on the layout of the EDK, and was asked to share it. Initially I was going to share it, but in the end I decided I wanted to keep the layout for my alliance mine, and show people if they wanted to, how to make their own. So I have done some thinking, and tried to figure out the HOWs of it all. And there are a efw ways to approach it. But in the end I decided to "Chunk the Elephant". "Chunk the Elephant" is an apt term. Doing the whole thing, in one BIG article would be too much, both for readers, and me. In the same way as trying to carry an elephant. So by breaking it up, my aim is to make the EDK lighter to work with, and allow people to go at an easier pace, and thereby get it right.

So in this article, we are going to look at

• HOW the EDK is themed.
• The tools you will need to do all this work (software as well as mentals).
• The structure of the folders, and how they apply to the design of the EDK itself.
• Then do some BASIC changes like a new banner for the top.
• Lastly we will look at the steps required to get ready to do some MAJOR work on the EDK.

Stylin the EDKB [Pt2]
In the first part of this seies of articles, we looked at the very basics of modifying the EDK so that you can start looking at making it your own. Also we looked at the basics of it's structure,where to find the elements and aquick run down on how they work. We also looked at those things that are requierd to get the modification really moving along.

In this part of the series, we will look at:

• the basics of the CSS file structure
• the fist real changes in coloring the theme
• look at fonts and typography for the EDK

By the end of it, you will be able to use the basic templated structure of the EDK, but still make it your own with some nice font setups.


Stylin the EDKB [Pt3]
In the first two parts of this series of articles, we looked at:

• the very basics of modifying the EDK so that you can start looking at making it your own
• the basics of it's structure, where to find the elements and a quick run down on how they work
• those things that are requierd to get the modification really moving along.
• the basics of the CSS file structure
• the fist real changes in coloring the theme
• look at fonts and typography for the EDK

In this last main portion of the series, we will look into just one element. Changing the Layout.

Stylin the EDKB [Pt4] or "Can I has Pie?"
I decided when I started writing this series, that I would try to show some of the cooler things that you can do with thr CSS and the templating system to make the EDK your own. This part of the series is aimed to do that. It is in itself just a guide to what can be done, and is free to be copied and used, but do not distribute it. Since it is modifing files, it would be classed as a Hack rather than a mod, so follow the rules in article1, and back everything up before you start.

So, what does this hack do exactly. Well it replaces the bar that is used in the campaigns and contracts section with a pie chart to represent the way things are going. I decided on a pie chart because it's a bit trickier, show it lets you get a better understanding of what I am doing, but it again is just an example.


Still to come...
♦ Pt 5: Modifying the ship config panel and some cool tricks.
♦ Pt 6: Changing the sigs in the Sig Generator
♦ Pt 7: Bonus Material: Rotating Banner Script

[Beor0d]

Thanks for this great tutorials. I am waiting for more

The next step of tutorials would be how to setup a corp page with joomla like you did

Hope to see that and many more tutorials.

[Warbear]

Mine is stuck inside an e107 site, but I will do that, it's easy as.

[sevey]

is it possible to actually make the killboard a part of e107? not a wrap but incorperate it into the site its self like a plugin?

[Warbear]

I have never tried, and never will, integrating the killboard directly into the e107 is out of my scope. I would like to learn enough to make a proper plugin killboard for e107. But till then, this way allows me to do minimal work on my part. Comparatively that is.

[fisk]

So where are the tutorials? All I see are some ideas of what could be in a tutorial.

[FriedRoadKill]

There are links in the quoted text in the OP

[fisk]

There are links in the quoted text in the OP

D'oh. The textcolor was same as background. Silly forum-theme.

[speedcat]

Hey Warbear

Can you give me some hints for two questions...

1) How to do 3D-like "boxtitles" and "buttons" like these on this EDK here:
http://boot.evekb.co.uk/

2) How to do such "crosslined" losses like these here:
http://www.fugitiveninja.com/killboard/?a=home


Both are quite cool effects... perhaps you have an idea how to realize these stuff.

best regards,
speedcat

[mastergamer]

They're both just images that you create with photoshop and edit the CSS to use.

Suppose you're using the style "blue" and you have a file named "menu_bar_blue.gif" in your /style/blue/ folder, you'd edit /style/blue/style.css and change the existing kb-table-header bit to this:

Code: Select all

.kb-table-header
{
  height: 15px;
  background: #39475F;
  font-size: 10px;
  font-weight: bold;
  padding: 4px;
  background-image: url("menu_bar_blue.gif");
}

A similar thing goes for the striped loss background, but that requires you to be running the mod that displays the losses on the front page. You just edit the CSS for that in a similar way.