Templating the EDK (Updated for Pt4)

Thought of something everyone else is having trouble with and just wanna help them? Post it here.
User avatar
Warbear
Apprentice
Posts: 49
Joined: Sat Jun 14, 2008 20:24
Location: Canberra, Australia
Contact:

Templating the EDK (Updated for Pt4)

Post by Warbear » Sat Mar 07, 2009 11:43

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. :twisted:

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
Last edited by Warbear on Fri Mar 27, 2009 14:51, edited 3 times in total.
Image
I do stuff...contact me.

Beor0d
Greenhorn
Posts: 12
Joined: Thu Jul 10, 2008 17:37

Re: Templating the EDK (Updated for Pt2)

Post by Beor0d » Sat Mar 21, 2009 23:01

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.

User avatar
Warbear
Apprentice
Posts: 49
Joined: Sat Jun 14, 2008 20:24
Location: Canberra, Australia
Contact:

Re: Templating the EDK (Updated for Pt2)

Post by Warbear » Mon Mar 23, 2009 01:38

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

I do stuff...contact me.

User avatar
sevey
Noob
Posts: 4
Joined: Sat Jun 14, 2008 20:24
Location: Ohio, Usa

Re: Templating the EDK (Updated for Pt2)

Post by sevey » Tue Mar 24, 2009 01:23

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?

User avatar
Warbear
Apprentice
Posts: 49
Joined: Sat Jun 14, 2008 20:24
Location: Canberra, Australia
Contact:

Re: Templating the EDK (Updated for Pt2)

Post by Warbear » Tue Mar 24, 2009 12:30

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.
Image

I do stuff...contact me.

fisk
Apprentice
Posts: 47
Joined: Sat Jun 14, 2008 20:24
Location: ORE MONGERS
Contact:

Re: Templating the EDK (Updated for Pt2)

Post by fisk » Tue Mar 24, 2009 17:45

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

User avatar
FriedRoadKill
Regular
Posts: 226
Joined: Fri Jun 20, 2008 22:23

Re: Templating the EDK (Updated for Pt2)

Post by FriedRoadKill » Tue Mar 24, 2009 18:15

There are links in the quoted text in the OP
I did data dumps. And some code. ~Now retired ~

fisk
Apprentice
Posts: 47
Joined: Sat Jun 14, 2008 20:24
Location: ORE MONGERS
Contact:

Re: Templating the EDK (Updated for Pt2)

Post by fisk » Thu Mar 26, 2009 01:37

FriedRoadKill wrote:There are links in the quoted text in the OP
D'oh. The textcolor was same as background. Silly forum-theme.
Image

speedcat
Greenhorn
Posts: 10
Joined: Sat Jun 14, 2008 20:24

Re: Templating the EDK (Updated for Pt4)

Post by speedcat » Fri Apr 17, 2009 06:08

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
Lead Moderator
Posts: 229
Joined: Sat Jun 14, 2008 20:24
Location: England

Re: Templating the EDK (Updated for Pt4)

Post by mastergamer » Fri Apr 17, 2009 11:56

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.

Post Reply

Return to “Tutorials”

Who is online

Users browsing this forum: No registered users and 1 guest