Vampire Fetish by Loom Template Plz?

Request custom templates here. There is no guarantee that it will be made for you. Please be respectful, polite, and patient when posting a request.

Vampire Fetish by Loom Template Plz?

Postby Guest » July 16th, 2010, 12:34 pm

So, for awhile, I've wanted a simple black-and-white, sleek template to accommodate my comic and its occasional two-page spreads... I know how to modify templates here. Usually, I work in Dreamweaver, copy & paste whatever current template I'm working under, and and voila! But the task of building one from scratch seems daunting. I feel frustrated not knowing where to start,because I'd love to be able to do this myself and not bother anyone. I have the idea I should work from the default template to acquire Smackjeeves codes? Should I make mocks for the news, archive, etc as well? Below is what I posted on dA earlier. ANY help where to start would be appreciated. I went to http://www.w3schools.com/ and still couldn't get much of a start... I am willing to pay you for your hard work. Like artwork commissions, I know your time & effort on this sort of thing is not free.

http://loominate.deviantart.com/art/VF- ... -171545207

This is a layout brainstorm/mockup. I've been wanting something simple, black-and-white, for a long time on Smackjeeves. I want this also to be able to handle the two-page spreads, since my current template cannot. I also like this, because it lets the comic art speak for itself, and is easily modified for other comics I may do in the future. (I would very much like the uniformity of having my name in the top left.) Hopefully it accommodates smaller screens...and perhaps my sister's phone? Anyway...

Since I'm used to modifying their templates, I'm not quite sure how to go about making my own from scratch and inputting the Smackjeeves attributes.

I wanted to post this on the template forums, but I'm unsure of asking people to do such a time-consuming thing for free. I'm trying to scrounge up some money at the moment, so maybe I'd be able to pay someone for their time?

I wonder if I could start with the default template and somehow modify it to turn into this? I wish I knew where to start, because I'm deathly afraid of accidentally deleting my pages/totally screwing my layout. (I've done it before).

Anyhoo, here is the comic.
[link]

If you have some knowledge of doing custom templates in Smackjeeves, or some tutorials about Smackjeeves, please point me in that direction. I also may be able to pay a small (as of right now very small) bit if someone could do this up.

THERE NEEDS TO BE A TUTORIAL FOR CUSTOM SJ TEMPLATES ZOMG. Or I need to get smarter. Either way...
Guest
 

Re: Vampire Fetish by Loom Template Plz?

Postby Coeus » July 19th, 2010, 5:56 am

Unfortunately I don't have the time at this very second to write up a full tutorial on anything, but perhaps when my university takes a break in a few weeks I can work something out. The hard part is that coding webpages, whether for SJ or not, is pretty much entirely a customized thing. It's hard to tell someone how to make one, without simply showing one way of doing everything, and I worry that that would be very limiting, and thus a bad way to learn. But yeah, in a few weeks I'll see if I can make a tutorial that shows my process of creating templates from scratch.

Regardless, for now I can offer my expertise only in small doses, I am afraid. Myself and the many other coders on this board can certainly point you in the right direction, and are always more than happy to answer any questions you have.

First and foremost I would recommend taking a look at the way that some custom templates you like are set out, and see if you can understand how they are constructed. Often the most complicated of layouts is simply a matter of a some very elegant coding that looks harder than it is.
Naturally at least a base knowledge in HTML/CSS is very important, but to be honest this isn't as hard as it often appears. Learning to code in itself is the easy part, the hard part is applying your knowledge in new and interesting ways.

For reference, when coding templates on SJ I generally use a standard transitional XHTML layout, with a div skeleton. Also I try as much as possible to avoid tables, where others perhaps might embrace them.

Perhaps for now I'll outline how I go about making templates, and if you have any deeper questions I, or one of the other coders, should have no trouble elaborating.

---------------------
Coeus' 8 steps to template success!

  1. Receive the Brief/create design.
    Usually when I code I am receiving a brief from a client, or on Smackjeeves reading template requests, and so this tends to be the first step. If you are creating your own template, this step is still important as you should try and be as explicit as possible in outlining what your template is going to look like. Pretend you are writing a request to a designer, and you want them to make your vision exactly as you see it. Without specific instructions, they won't know what to do, and believe me this step makes coding a breeze later --especially when it comes to margins/padding/alignment/color/size and other tedious elements.
  2. Draw picture/create mock-up
    Arguably part of step one, I thought I should separate this out just to highlight its importance. Many a time I have gone without a mock-up, and it was these occasions that resulted in headaches further down the line. Mock-ups are a fantastic way to figure out colour schemes, and get your positioning just right. It's more frustrating to have to do this later, especially when you can just hammer these mock-ups out in a matter of minutes.
  3. Layout Page Skeleton
    Whether you are an expert or a beginner, I cannot stress how much easier coding becomes when you set up all of your construction elements (divs etc) from the very beginning. Don't style them, don't add content, just put in all the boxes you need.
  4. Position, format and generally prepare
    Now you should be aligning and positioning your elements so that content will simply slot in, and you only need to style them with whatever pretty effects you desire. Again, it is easier to do this now, rather than worry about moving large chunks of CSS and content around in order to edit it. Doing this now also lets you test out tricks without fear of having to recode a whole page.
  5. Slot in some content and make sure it works!
    So unimaginably important is this step, that it is a wonder so many people forget. Test your code! Test test test! Put in a whole bunch of example content and test your divs for breaks; if they are supposed to dynamically resize, make sure it works; and so on.
  6. Grab any CSS you are not planning on changing from the Default SJ CSS file.
    When making my templates, I try to avoid changing the naming of any elements that are shared with default SJ templates. This means that users won't have issues down the line when they want to change something, and are told to look for a specific part. Additionally, it means you can copypasta a lot of the default CSS right in (especially things like the Comic Header/News Posts/Comments) and edit only the specific bits you need --keeping all the otherwise tedious positioning in place.
  7. Finally take the remaining elements you have made and style them to match the mock-up.
    By this stage your website should look workable, if bland. It's up to the final styling to take this functional canvas and turn it into a gorgeous layout.
  8. TEST! TEST! TEST!
    This is especially important if you have used some hacky techniques, unique code (such as unsupported CSS3), browser specific properties, et al. You should open your site in as many browsers as you can, with 1024 x 768 resolution, and make sure it doesn't break too badly. It's not always possible to have a completely cross-browser compatible layout, but the page should not noticeably break in any fashion.

Hopefully this is of some help, but again if you need answers to more specific questions I'm sure there will be someone here to answer it as soon as possible.
User avatar
Coeus
 
Posts: 43
Joined: May 31st, 2010, 2:45 am

Re: Vampire Fetish by Loom Template Plz?

Postby Guest » July 19th, 2010, 1:39 pm

Thanks for the help, Coeus.

I'm seriously thinking about taking a course in this kinda thing. I know it's about knowing elements and building up from basics, but trying to get it all to work is just a headache when you don't know much about how the elements work together....

Of 1-8, I've done steps 1 & 2, creating mock-ups and the sort. What I don't seem to be able to do is distill the elements to create my own layout. I struggle most with making a menu. I started playing with Alternate Horizontal template to see if I could at least GET something that looks similar to my linked mock-up for the time being, so it's not so messy to look my my two-page spreads. From the looks of things, I need to find some tutorials/info about div skeletons and structure, which is what I think I'm going to look for on ww3 schools.....

http://shoki.smackjeeves.com/comics/722804/shoki-cover/

I used an alternate inactive comic to experiment with, and as you can see I don't have a menu. I've only played with "Overall Layout" so far, and I can't quite seem to figure out how to make a left aligned "box/area? dedicated to menu elements. I know using tables is bad, so other than that... I'm lost. I also can't seem to center align the "Vampire Fetish" image at the top. Using div align="center" seems to make the image disappear, even in my Dreamweaver.

Spoiler! :
<!-- Put IE into quirks mode -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>



<link rel="alternate" type="application/rss+xml" title="{SITE_NAME} RSS"

href="http://{SITE_URL}.smackjeeves.com/rss/">



<meta http-equiv="Content-Type" content="text/html" />

<title>{SITE_NAME} - {PAGE_TITLE}</title>

<META NAME="Description" CONTENT="{SITE_DESCRIPTION}">

<META NAME="Keywords" CONTENT="{SITE_NAME}, {PAGE_TITLE}, web comic, webcomic, comic, web comics, webcomics, comics">



<style type="text/css">



@import url("http://www.smackjeeves.com/templates/default/default_jumpbox.css");

body {

margin:0;

border:0;

padding:0;

height:100%;

max-height:100%;

background:#fff;

font-family: verdana, arial, sans-serif;

font-size:85%;

overflow: hidden;

}



/* for internet explorer */

* html body {

padding:85px 0 15px 0;

}



#container {

font-family:"verdana", sans-serif;

font-size: 0.8em;

position:fixed;

top:85px;

left:0;

bottom:15px;

right:0;

overflow:auto;

background:#fff;

padding:10px;

text-align:center;

}



* html #container {

height:100%;

width:100%;

}



#header {
position:absolute;
top:-1px;
left:1px;
bottom:0;
width:100%;
height:85px;
overflow:hidden;
background:#000000;
border-bottom:3px solid #000000;
}

* html #header {height:85px;}





#footer {

position:absolute;

bottom:0;

left:0;

width:100%;

height:15px;

overflow:hidden;

text-align:right;

background:#000000;

border-top:2px solid #000000;

}

* html #footer {height:15px;}



h1 {font-size:2em; margin:0; padding:0;}



h2 {font-size:1.2em; margin:0; padding:0;}



#footer p {

color:#fff;

font-size: 0.8em;

font-weight: bold;

margin:0 10px 0 10px;

}



#header img {

margin: 2px 10px 2px 10px;

}





#left {

float:left;

background:#fff;

border-bottom:1px solid #6D7B8D;

border-right:1px solid #6D7B8D;

border-top:1px solid #6D7B8D;

border-left:1px solid #6D7B8D;

padding:10px;

color:#000;

width:50%;

margin: 0 50px 10px 10px;

}



#right {

float:right;

background:#fff;

padding:10px;

color:#000;

width:30%;

margin-right:5%;

}



#center {

background:#fff;

border-bottom:1px solid #444;

border-right:1px solid #444;

border-top:1px solid #EAEEF2;

border-left:1px solid #EAEEF2;

padding:10px;

color:#000;

width:95%;

margin: 0 10px 0 10px;

}



a, a:visited {

font-size:1em;

font-weight:bold;

text-decoration:none;

color:#fff;

}



a:hover {

color:#CEC9BD;

text-decoration:none;

}



#header ul {

clear:both;

text-align:center;

border-top:3px solid #B02220;

}



#header ul {

margin:0;

padding:0;

list-style-type:none;

background:transparent;

height:3em;

}



#header ul li {

display:inline;

color:#B02220;

}



.lft {float:left;}

.rgt{float:right;}



.columnone {width:98%; float:left; text-align:justify; margin-right:10%;}

.columnone a, .columnthree a:visited {font-size:1em; color:#000; text-decoration:none;}

.columnone a:hover {color:#B02220; text-decoration:underline;}





.commentary {width:98%; float:left; text-align:justify;}

.commentary a, .columnthree a:visited {font-size:1em; color:#000; text-decoration:none;}

.commentary a:hover {color:#B02220; text-decoration:underline;}





a.navi, a.navi:visited {

font-size:1.2em;

font-weight:bold;

text-decoration:none;

color:#000;

}



a.navi:hover {

color:#B02220;

text-decoration:none;

}



a.archive {

font-size:1em;

font-weight:bold;

text-decoration:none;

color:#000;

}



a.archive:hover {

color:#B02220;

text-decoration:underline;

}



a.archive:visited {

color:#003366;

text-decoration:none;

}



hr {clear:both; border:0; height:1px; color:#000; background-color:#000;}



#comic-header #rating

{

display: block;

float: left;

font-weight: bold;

background:#fff;

margin: 15px 0 0 0;

}



#comic-header #rating img

{

vertical-align: top;

margin-top: 5px;

}





#comic-header #rate

{

float: right;

font-weight: bold;

background:#fff;

}



#comic-header #rate #text

{

margin: 4px 4px 0;

}





</style>

<!--[if lte IE 6]>

<style>

h1.split span {color:#000;}

</style>

<![endif]-->





</style>

</head>



<body>



<div id="container">



<br />



{CONTENT}



<br /><br />







</div> <!-- end of container -->



<div id="header">

<img src="http://i799.photobucket.com/albums/yy277/LOOMinate/VF%20site/loom_comics.jpg" alt="loom_comics" />
<img src="http://i799.photobucket.com/albums/yy277/LOOMinate/VF%20site/vampirefetish.jpg" alt="vampirefetish" />

<a href="http://{SITE_URL}.smackjeeves.com/rss/" style="float: right; color: #fff; margin-top: 10px; margin-right: 10px;"><img src="http://www.smackjeeves.com/templates/default/images/rss.gif" alt="RSS Feed" height="15" width="28" border="0" /></a>

<a href="http://www.smackjeeves.com/favorites.php?add={SITE_ID}" style="float: right; margin-top: 12px; margin-right: 12px; background: url('http://www.smackjeeves.com/images/fav_star.gif') no-repeat 0 60%; padding-left: 23px;">Add To Favorites</a>



</div>
<div id="footer">

<p class="right" style="text-align: center;">(c) Taylor Holt</p>

<p class="right">Revised Layout by <a href="http://www.smackjeeves.com/profile.php?id=3996">Enkida</a></p>



</div>
<p>}</p>
</body>

</html>
Guest
 

Re: Vampire Fetish by Loom Template Plz?

Postby Coeus » July 20th, 2010, 7:52 am

Alright, I have a better idea of your experience now. I wasn't 100% sure what level you were at, so I apologize if I used some terms that were a bit confusing.

To be brutally honest, unless you are ever planning on doing web development as a career, it would probably be a waste of your money to take a course in it. I say this because the hardest thing about professional development is generally server-side management, not the aesthetic creation of the site, and so my advice would be that unless you have a really hard time learning things on your own, doing a course will likely be frustrating and useless.

Ok so, rather than try and correct the code you are working on, I think it would probably be more beneficial if I just explain some of the terms I used, and specifically the process of creating the skeleton.
So when I say skeleton, I mean essentially the empty boxes your website is made of. I'm going to use that analogy a lot, I imagine, as it is how I can best visualize the process I use. An example of this step, that I very often use for a base when creating SJ templates, looks like this:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
</style>
<title></title>
</head>

<body>
<div id="header"></div>
<div id="menu">{MENU}</div>

<div id="content">{CONTENT}</div>

<div id="footer"></div>
</body>
</html>


This should be able to get you started on working from scratch, but I would recommend that your time should be spent almost exclusively learning CSS. CSS is by far the most important tool in your arsenal, and the better you are at manipulating CSS, the better you'll be at making efficient, beautiful designs. Additionally, as you yourself have found, a lot of things can't be done directly through HTML --especially the minutia of positioning (an area that will never become less than frustrating!)

I think the best thing I can offer right now, being unable to write some kind of complete tutorial, is try to answer your questions as you go. I'd recommend working on the simplest template you can, and just get the basics out of the way (and make some of the easy, inevitable mistakes), and then when you have some coding under your belt you can start working on something slightly more complex.

I apologize for not really directly answering your questions, but I simply think it would be more to your detriment if I went ahead and tried to show you by backwards-engineering another template. Especially as I would likely make you use random bits of code that won't help you learn. I'd prefer to try and help you correct mistakes you yourself make, rather than try and make something work and you gain no knowledge.
User avatar
Coeus
 
Posts: 43
Joined: May 31st, 2010, 2:45 am


Return to Template Requests

Who is online

Users browsing this forum: No registered users and 1 guest