>>  Site Map >>  Forums >>  Themes

Forum module - topics in forum:


Themes - Theme discussion only, Have a theme you made wanna share it. you can post a link to it here or ask questions on making themes and theme issues.

I have a theming question
I have a question that I know you theme gurus might be tired of answering but when creating a theme are the variables like $theuser and $public_message put in with an html editor or can you do it in PS? I've been tryin to get a solid theme goin for a while now and yesterday I opened some header and block html files in golive and saw the codes and I thought I had the answer but after designing a theme in PS and saving it as optimized I brought it up in dreamweaver which I heard is a pretty good way to edit a theme and all that happened was my graphics got mangled! I'd like to learn this so where am I goin wrong?

Thanks for your help in advance,
TekSerMan



This is just basic HTML so lets start with a simple table, this code is for the yet to be released XTC_Red Theme, Fluid Width. This code is the output from Photoshop CS2 unaltered.
Code: :
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (header.psd) -->
<table id="Table_01" width="771" height="192" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td rowspan="13">
         <img src="header_01.jpg" width="1" height="191" alt=""></td>
      <td rowspan="13">
         <img src="header_02.jpg" width="18" height="191" alt=""></td>
      <td>
         <img src="header_03.jpg" width="128" height="16" alt=""></td>
      <td rowspan="13">
         <img src="header_04.jpg" width="20" height="191" alt=""></td>
      <td rowspan="13">
         <img src="header_05.jpg" width="1" height="191" alt=""></td>
      <td rowspan="13">
         <img src="header_06.jpg" width="25" height="191" alt=""></td>
      <td colspan="2" rowspan="2">
         <img src="header_07.jpg" width="282" height="26" alt=""></td>
      <td colspan="2" rowspan="2">
         <img src="header_08.jpg" width="259" height="26" alt=""></td>
      <td rowspan="13">
         <img src="header_09.jpg" width="1" height="191" alt=""></td>
      <td rowspan="13">
         <img src="header_10.jpg" width="34" height="191" alt=""></td>
      <td rowspan="13">
         <img src="header_11.jpg" width="1" height="191" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="16" alt=""></td>
   </tr>
   <tr>
      <td rowspan="2">
         <img src="header_12.jpg" width="128" height="25" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="10" alt=""></td>
   </tr>
   <tr>
      <td rowspan="7">
         <img src="header_13.jpg" width="1" height="114" alt=""></td>
      <td colspan="2" rowspan="7">
         <img src="logo.jpg" width="539" height="114" alt=""></td>
      <td rowspan="7">
         <img src="header_15.jpg" width="1" height="114" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="15" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="header_08-17.jpg" width="128" height="7" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="7" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="header_17.jpg" width="128" height="23" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="23" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="header_10-19.jpg" width="128" height="7" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="7" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="header_11-20.jpg" width="128" height="26" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="26" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="header_12-21.jpg" width="128" height="7" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="7" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="header_13-22.jpg" width="128" height="29" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="29" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="header_14.jpg" width="128" height="7" alt=""></td>
      <td colspan="2" rowspan="3">
         <img src="header_23.jpg" width="282" height="39" alt=""></td>
      <td colspan="2" rowspan="3">
         <img src="header_22.jpg" width="259" height="39" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="7" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="header_25.jpg" width="128" height="26" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="26" alt=""></td>
   </tr>
   <tr>
      <td rowspan="2">
         <img src="header_26.jpg" width="128" height="18" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="6" alt=""></td>
   </tr>
   <tr>
      <td colspan="2">
         <img src="header_27.jpg" width="282" height="12" alt=""></td>
      <td colspan="2">
         <img src="header_28.jpg" width="259" height="12" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="12" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="spacer.gif" width="18" height="1" alt=""></td>
      <td>
         <img src="spacer.gif" width="128" height="1" alt=""></td>
      <td>
         <img src="spacer.gif" width="20" height="1" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="spacer.gif" width="25" height="1" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="spacer.gif" width="281" height="1" alt=""></td>
      <td>
         <img src="spacer.gif" width="258" height="1" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="spacer.gif" width="34" height="1" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="1" alt=""></td>
      <td></td>
   </tr>
</table>
<!-- End ImageReady Slices -->
</body>

The Code Below is the edited code, which was done in dreamweaver by Seven.
Code: :
<table width="99%" height="192" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
   <tr>
      <td rowspan="13">
         <img src="themes/XTC_Red/images/header_01.jpg" width="1" height="191" alt=""></td>
      <td rowspan="13">
         <img src="themes/XTC_Red/images/header_02.jpg" width="18" height="191" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/header_03.jpg" width="128" height="16" alt=""></td>
      <td rowspan="13">
         <img src="themes/XTC_Red/images/header_04.jpg" width="20" height="191" alt=""></td>
      <td rowspan="13" background="themes/XTC_Red/images/header_05.jpg" width="10%" height="191" alt=""></td>
      <td rowspan="13">
         <img src="themes/XTC_Red/images/header_06.jpg" width="25" height="191" alt=""></td>
      <td colspan="2" rowspan="2">
         <img src="themes/XTC_Red/images/header_07.jpg" width="282" height="26" alt=""></td>
      <td colspan="2" rowspan="2">
         <img src="themes/XTC_Red/images/header_08.jpg" width="259" height="26" alt=""></td>
      <td rowspan="13" background="themes/XTC_Red/images/header_09.jpg" width="90%" height="191" alt=""></td>
      <td rowspan="13">
         <img src="themes/XTC_Red/images/header_10.jpg" width="34" height="191" alt=""></td>
      <td rowspan="13">
         <img src="themes/XTC_Red/images/header_11.jpg" width="1" height="191" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="16" alt=""></td>
   </tr>
   <tr>
      <td rowspan="2">
         <img src="themes/XTC_Red/images/header_12.jpg" width="128" height="25" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="10" alt=""></td>
   </tr>
   <tr>
      <td rowspan="7">
         <img src="themes/XTC_Red/images/header_13.jpg" width="1" height="114" alt=""></td>
      <td colspan="2" rowspan="7">
         <img src="themes/XTC_Red/images/logo.jpg" width="539" height="114" alt=""></td>
      <td rowspan="7">
         <img src="themes/XTC_Red/images/header_15.jpg" width="1" height="114" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="15" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="themes/XTC_Red/images/header_08-17.jpg" width="128" height="7" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="7" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="themes/XTC_Red/images/header_17.jpg" width="128" height="23" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="23" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="themes/XTC_Red/images/header_10-19.jpg" width="128" height="7" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="7" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="themes/XTC_Red/images/header_11-20.jpg" width="128" height="26" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="26" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="themes/XTC_Red/images/header_12-21.jpg" width="128" height="7" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="7" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="themes/XTC_Red/images/header_13-22.jpg" width="128" height="29" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="29" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="themes/XTC_Red/images/header_14.jpg" width="128" height="7" alt=""></td>
      <td colspan="2" rowspan="3" background="themes/XTC_Red/images/header_23.jpg" width="282" height="39" alt="">
      <script type="text/JavaScript">
<!-- hide from older browsers

//Author: Jeremy Tymes
//Author Email: jtchange22@gmail.com
//Author Website: http://justintymesports.com/jeremy
//Feel free to redistribute this code as you like as long as this information is intact!
//
//This script requires some javascript knowledge if you wish to edit it, it's not my fault
// if the script doesn't work after you edit it
//
// get the date and time information
var date = new Date();
var month = new String;
var day = new String;
var year = new String;

var seconds = date.getSeconds();
var minutes = date.getMinutes();
var hours = date.getHours();
var pmam=(hours >= 12)? " P.M.":" A.M.";

var month = date.getMonth()
var day = date.getDate()
    // This is the y2k fixer function--don't worry about how this works,
    // but if you want it in your scripts, you can cut and paste it.
    //

 function y2k(number) {
 return (number < 1000) ? number + 1900 : number;
 }

    // Get the year and fix the y2k bug using the fixer function.
    //
var year = y2k(date.getYear())

    // Translate the number of the month to a word--so 0 becomes January, 1 becomes February, etc...
    //
   if (month == 0)
        month = "Jan.";
      else if (month == 1)
        month = "Feb.";
      else if (month == 2)
        month = "March";     
   else if (month == 3)
        month = "April";
   else if (month == 4)
        month = "May";
   else if (month == 5)
        month = "June";
   else if (month == 6)
        month = "July";
   else if (month == 7)
        month = "Aug.";
   else if (month == 8)
        month = "Sep.";
   else if (month == 9)
        month = "Oct.";
   else if (month == 10)
        month = "Nov.";
   else if (month == 11)
        month = "Dec.";

//this code says if the day is 1 then add 'st' after it and so on and so forth, no need to edit this.
if (day == 1)
   day = day + "<sup>st</sup>";
else if (day == 2)
   day = day + "<sup>nd</sup>";
else if (day == 3)
   day = day + "<sup>rd</sup>";
else if (day > 3 && day < 20)
   day = day + "<sup>th</sup>";
else if (day == 21)
   day = day + "<sup>st</sup>";
else if (day == 22)
   day = day + "<sup>nd</sup>";
else if (day == 23)
   day = day + "<sup>rd</sup>";
else if (day > 23 && day < 31)
   day = day + "<sup>th</sup>";
else if (day == 31)
   day = day + "<sup>st</sup>";

//edit time to 12 hour rather than 24 hour...you can take this out if you want it to be based on 24 hour

if (hours > 12)
   {
   hours = hours - 12;
   }

//adds zero before the minute if it is below 10

if (minutes < 10)
   {
   minutes = "0" + minutes;
   }

//adds zero before the second if it is below 10

if (seconds < 10)
   {
   seconds = "0" + seconds;
   }

    // declare the sentence as a variable(as it makes it easier to display later on)
    //you can change this sentence to be what ever you want
var display_date = ("" + month + " " + day + ", " + year);

    //of course it could be a good idea to edit this to your liking, i personally wouldn't keep the seconds, but that's just me
var display_time = ("" + hours + ":" + minutes + ":" + seconds + pmam);
// -->
          </script>
            <script type="text/Javascript">
document.write(display_date);
document.write(".&nbsp;");
document.write(display_time);
          </script>      
          </div>
      </td>
      <td colspan="2" rowspan="3" background="themes/XTC_Red/images/header_22.jpg" width="259" height="39" alt=""><div align="right">$theuser</div></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="7" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="themes/XTC_Red/images/header_25.jpg" width="128" height="26" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="26" alt=""></td>
   </tr>
   <tr>
      <td rowspan="2">
         <img src="themes/XTC_Red/images/header_26.jpg" width="128" height="18" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="6" alt=""></td>
   </tr>
   <tr>
      <td colspan="2">
         <img src="themes/XTC_Red/images/header_27.jpg" width="282" height="12" alt=""></td>
      <td colspan="2">
         <img src="themes/XTC_Red/images/header_28.jpg" width="259" height="12" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="12" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="18" height="1" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="128" height="1" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="20" height="1" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="25" height="1" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="281" height="1" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="258" height="1" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="34" height="1" alt=""></td>
      <td>
         <img src="themes/XTC_Red/images/spacer.gif" width="1" height="1" alt=""></td>
      <td></td>
   </tr>
</table>
<!-- End ImageReady Slices -->
<table width="99%" cellpadding="0" cellspacing="0" border="0" align="center"><tr valign="top">
<td></td></tr></table>
<table width="99%" cellpadding="0" cellspacing="0" border="0" align="center"><tr valign="top"><br>
<td></td>
<td width="175" valign="top"><center>$public_msg</center>


Take notice of what she did. Wherever she wanted to place code or varibles she made the images background images, for example. Where she wanted the "$theuser" variable she changed:
Code: :
<td colspan="2" rowspan="3"><img src="images/header_22.jpg" width="259" height="39" alt=""></td>

to:
Code: :
<td colspan="2" rowspan="3" background="themes/XTC_Red/images/header_22.jpg" width="259" height="39" alt=""><div align="right">$theuser</div></td>

This must be done anyplace you want to place a variable or any other code such as a javascript.
Notice something else she did. You need the complate "Theme" path for the images to show, for example:
Code: :
<img src="header_01.jpg" width="1" height="191" alt="">

Became:
Code: :
<img src="themes/XTC_Red/images/header_01.jpg" width="1" height="191" alt="">

If your theme is fluid width, covers the whole broser window then you will also need streatch points, that may be done in two steps, first:
Code: :
<img src="header_05.jpg" width="1" height="191" alt="">

and change it to something like this:
Code: :
<td rowspan="13" background="themes/XTC_Red/images/header_05.jpg" width="10%" height="191" alt=""></td>

Then Find:
Code: :
<table id="Table_01" width="771" height="192" border="0" cellpadding="0" cellspacing="0">

and change it to:
Code: :
<table width="99%" height="192" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">

If your theme is fixed width then the above is not necessary.
If you don't follow these steps then your theme will not display properly.



NukeCode I want to Thank You! You give good instructs! Now I do have a better understanding. I'll keep you posted as to my progress!

Thanks Loads,
TekSerMan



Attention! You are currently viewing sitemap page!
We strongly suggest to look at original content

Search from web

Valid HTML 4.01 Valid CSS