PDA

View Full Version : Can someone please code a wordpress layout for me?



pattie1213
09-05-2008, 11:00 PM
hey, i have a layout i made. can someone please code it for me? If you can, make a message, and i'll pm you with the layout code.

thnx

Nile
09-05-2008, 11:33 PM
Why don't you post it here, so everyone can see. So anyone can give a try to make it, instead of limiting it.

pattie1213
09-07-2008, 01:47 AM
um...ok, but it's ptretty long.


<HTML>
<HEAD>

<script type="text/javascript">

/***********************************************
* Ultimate Fade-In Slideshow (v1.51): Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["http://i161.photobucket.com/albums/t218/shattered-beauty/video.png", "", ""] //plain image syntax
fadeimages[1]=["http://i161.photobucket.com/albums/t218/shattered-beauty/video2.png", "", ""] //image with link syntax
fadeimages[2]=["http://i161.photobucket.com/albums/t218/shattered-beauty/video3.png", "", ""] //picture with syntax
fadeimages[3]=["http://i161.photobucket.com/albums/t218/shattered-beauty/video4.png", "", "_new"] //image with link and target syntax



var fadebgcolor="white"

////NO need to edit beyond here/////////////

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>




</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (Untitled-1) -->
<div style="position:absolute; top:385; left:0; background:url(http://i161.photobucket.com/albums/t218/shattered-beauty/test3.png); height:32px; width:100%;"></div>



<TABLE style="position:relative;" WIDTH=834 BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR>
<TD>
<IMG SRC="http://i161.photobucket.com/albums/t218/shattered-beauty/tes.png" WIDTH=834 HEIGHT=114 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="http://i161.photobucket.com/albums/t218/shattered-beauty/ginger_02-1.png" WIDTH=834 HEIGHT=143 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="http://i161.photobucket.com/albums/t218/shattered-beauty/ginger_03-1.png" WIDTH=834 HEIGHT=157 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="http://i161.photobucket.com/albums/t218/shattered-beauty/ginger_04.png" WIDTH=834 HEIGHT=131 ALT=""></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
<div id="slide2" style="top:62; left:255; position: absolute; z-index:1; width: 145; height:147">

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 388, 195, 0, 3000, 1, "R")


</script></div>

</BODY>
</HTML>


<STYLE>

body { background: url(http://i161.photobucket.com/albums/t218/shattered-beauty/realbg.png);
background-attachment: fixed;
background-repeat: repeat-y;
}

</STYLE>


Wrapped code in
tags.

Nile
09-07-2008, 05:01 PM
It looks like it already is coded, did you want it to be completely recoded?

Medyman
09-08-2008, 01:40 AM
@Nile...
The OP means into a Wordpress template with the requisite PHP involved.

@Pattie...
I think you're underestimating the work that needs to be done to get what you have into a working WordPress blog. I'd advice to either download an existing template (there are literally thousands of these floating around the Web) and edit it to fit your needs or seek the help of a professional to integrate your design ideas into a working WordPress template.

What you have is a good start on a design, but there is much more involved in creating a WordPress template. I've done a fair amount of WordPress customization in my day so I should know.

We do have a paid forum here where you can post your request to seek the services of people on this forum.

If you don't have the desire or budget to pay someone else, I'd recommend consulting the following sites (in the order presented):

http://nettuts.com/site-builds/how-to-create-a-wordpress-theme-from-scratch/
http://jonathanwold.com/tutorials/wordpress_theme/
http://bothack.wordpress.com/2006/09/17/how-to-create-a-wordpress-template-in-5-minutes/
http://themetation.com/how-to-create-wordpress-themes-from-scratch-part-1/
http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/
http://anekostudios.com/2006/09/21/how-to-create-a-wordpress-template-or-theme/

I used the second one myself to create my first WordPress template. If you're familiar with HTML, it should be no problem.

As a word of warning, the table-based layout that you have will present lots and lots of problems with the dynamic nature of WordPress. I'd recommend switching over to a CSS-based layout before attempting to integrate it with WordPress.