Help - Search - Members - Calendar
Full Version: Customising The Front Page Of Your Site, The Easy Way
World Dating Partners Forum > HTML > HTML tutorials
mrplough
It's well known that using standard templates is only going to get you so far in the search engines. With thousands of affiliates at WDP, most of whom are using the standard templates, duplicate content issues are a serious concern.

Here is a simple tutorial, which goes through the basics of totally changing the front page of your site.

In a nutshell, I took the standard Coffee Dates, Color Scheme 1 template, and dismantled it, then reassembled it with the options to put in a search block, new member block etc, anywhere you wish.

Step 1:

Go to your site management interface, click on "My Sites" and select the site you wish to change.

Click on "Manage".

I like a clean white look to my sites, so I selected the Coffee Cup Template 1.

Step 2:

Click on "Site Settings", and Check the Custom HTML option, then click save at the bottom.

Step 3:

Open up the template I've posted below in the html editor of your choice, dreamweaver, frontpage or whichever, change the Meta tags, page layout, wording, image, titles etc, everything is customisable! You will have to upload the images you wish in the file management area, and reference them in the html on this template you've created.

I've attached a sample logo.jpg - you can use any relevant to your site of course. If you need images, it's best to either contact WDP, or buy them yourself at places like Shutterstock.

Step 4:

Click on "Front Page Layout", and replace the contents with your new template into there. Save, and you should be good to go smile.gif

If it all goes horribly wrong, change the site back to the original standard template you had and start again. It's trial and error getting it spot on.

You can use any of the standard templates and adapt them in this way, you just have to be careful with what the CSS does to the look. I found the white one the easiest to get right.

Any questions, let me know.

Best of luck smile.gif

Template

<!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>
<title>California local singles, matchmaking, dating advice and personals.</title>
<meta name="keywords" content="california,dating,marriage,photo personals,single women,advice,search,seeking,friend,internet dating,single women,californian" />
<meta name="description" content="Find local singles in California for matchmaking, dating, personals, free chat and dating advice." />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="/scripts/prototype.js" type="text/javascript"></script>
<script src="/scripts/script.js" type="text/javascript"></script>
<script src="/scripts/layer.js" type="text/javascript"></script>
<style type="text/css">
@media screen {
/* 02 */

body {padding:0; margin:0; background-color:#ffffff;}
td {font-family:Arial; font-size:10pt; color:#7C8594;}

h1 {}
h2 {color:#FF8D4E; text-transform:uppercase; font-size:9pt; margin:15px;}
h4 {color:#FF8D4E; text-transform:uppercase; font-size:9pt; background:url(/images/skin/Index/h4.gif) bottom repeat-x; margin-left:30px; margin-bottom:10px; text-align:left; padding-bottom:4px;}
h3 {color:#7C8594; font-size:9pt; margin:15px;}
h3 .big {font-size:11pt;}

a:link {color:#E1772B; text-decoration:none;}
a:visited {color:#E1772B; text-decoration:none;}
a:hover {color:#E1772B; text-decoration:underline;}
a:active {color:#E1772B; text-decoration:underline;}

.more {clear:both; text-align:right;}
.more a:link,
.more a:visited,
.more a:hover,
.more a:active {font-size:8pt;}

table.main {/*border:1px solid #CCCECF;*/ background-color:#FEFFFA;}


.i04 {background:url(/images/skin/Index/i-04.gif) top left no-repeat; width:489px}

.greeting {padding:25px;}

.logo {margin:5px 10px; text-align:center;}
.logo img { border:0px;}

.slogan {
font-size:11pt;
font-weight:bold;
background-color:#F3F4F0;
padding:5px;
margin:10px 0 10px 10px;
text-align:center;
position:absolute;
top:-2px;
width:460px;
overflow:hidden;
left: 0px;
}
.slogan span {color:#E38845; text-transform:uppercase;}

.MembersLogin {clear:both; white-space:nowrap;}
.MembersLogin h4 {color:#7C8594;}
.MembersLogin h4 a:link {color:#ffffff;}
.MembersLogin h4 a:visited {color:#ffffff;}
.MembersLogin h4 a:active {color:#ffffff;}
.MembersLogin h4 a:hover {color:#ffffff;}
.MembersLogin h4 span {color:#ffffff; background-color:#F09E63; padding:5px;}

select, input {font-size:9pt;}
option {color:#C76B08; background-color:#FFF8EE;}

.find {width:205px; text-align:center;}
.find div.iam {height:30px; width:180px; text-align:right;}
.find div.iam select {width:80px;}
.find div.age {height:30px; width:180px; text-align:right;}
.find div.age select {width:80px;}
.find div.seeking {height:30px; width:180px; text-align:right;}
.find div.seeking select{width:80px;}
.find div.coose {height:30px; width:180px; text-align:right;}
.find div.submit {text-align:center; height:30px; width:180px;}
.find div.submit .submit{color:#587FAD; border:1px solid #9CB8BC; background:url(/images/skin/Index/input-submit.gif) top repeat-x; font-weight:bold; padding-left:5px; padding-right:5px; height:18px;}

.feauters {width:205px;}
.feauters div {float:left; width:100px; height:45px; text-align:left;}
.feauters div img {float:left; margin-right:3px;}
.feauters div a:link {color:#DE8300; font-weight:bold;}
.feauters div a:visited {color:#DE8300; font-weight:bold;}
.feauters div a:hover {color:#DE8300; font-weight:bold;}
.feauters div a:active {color:#DE8300; font-weight:bold;}

div.menu {margin:20px 0;}
div.menu div {padding:5px; background:url(/images/skin/Index/menu.gif) left center no-repeat; color:#ffffff; font-size:9pt; padding-left:38px; width:140px;}
div.menu div a:link {color:#ffffff; padding:2px; display:block;}
div.menu div a:visited {color:#ffffff; padding:2px; display:block;}
div.menu div a:hover {color:#ffffff; padding:2px; display:block;}
div.menu div a:active {color:#ffffff; padding:2px; display:block;}

div.menu div.act {background:url(/images/skin/Index/menuact.gif) left center no-repeat;}
div.menu div.act a:link {color:#ffffff; background-color:#E37A2E;}
div.menu div.act a:visited {color:#ffffff; background-color:#E37A2E;}
div.menu div.act a:hover {color:#ffffff; background-color:#E37A2E;}
div.menu div.act a:active {color:#ffffff; background-color:#E37A2E;}

.new{ padding-left:30px; padding-right:10px; margin-top:0; padding-top:0;}
.new p {text-align:justify;}

.dot h4 {background:url(/images/skin/Index/h4-dot.gif) bottom right no-repeat; margin-top:0; padding-top:0; border:0; position:relative; left:10px}

.members {margin-left:25px;}
.members td {padding:5px 0;}
.members th {color:#FF8D4E; text-transform:uppercase; font-size:9pt; text-align:left;}

.membFoto01,
.membFoto03,
.membFoto05
{background-color:#EEEFEB; text-align:center; font-size:8pt; float:left; padding:10px; white-space:nowrap; clear:right;}
.membFoto02,
.membFoto04,
.membFoto06
{text-align:center; font-size:8pt; float:left; padding:10px; white-space:nowrap; clear:right;}
.membFoto01 img,
.membFoto02 img,
.membFoto03 img,
.membFoto04 img,
.membFoto05 img,
.membFoto06 img {border:1px solid #979796; width:47px; height:59px;}

.meet50 {margin:0; padding:0}
.meet50 td {padding:5px 0;}
.meet50 th {color:#FF8D4E; text-transform:uppercase; font-size:9pt; text-align:left;}
.meet50 th a,.ul01 li a,.ul02 li a{text-decoration:none}

.ul01 {margin:0 20px 0 0; padding:0 10px 0 0; float:left;}
.ul02 {margin:0; padding:0 10px 0 0; float:left; clear:right}
.ul01 li,
.ul02 li {margin:0; padding:0; list-style-type:none; font-size:9pt; white-space:nowrap;}

.partnersBanner {border:1px solid #F4C98F; text-align:center; padding:20px; margin:15px;}

.searchMath {background-color:#FEEFDE; margin:15px;}
.searchMath td {padding:10px;}
.searchMath td a:hover{ text-decoration:none}

.cLeft {float:left; width:30%;}
.cRight {float:right; width:65%; border-top:1px solid #E7E9E4; border-left:1px solid #E7E9E4; padding:10px; text-align:center;}
.copyright {color:#7C8594; font-size:8pt;}
.copyright td {padding:12px; color:#7C8594; font-size:8pt;}
.copyright a:link {color:#7C8594;}
.copyright a:visited {color:#7C8594;}
.copyright a:hover {color:#7C8594;}
.copyright a:active {color:#7C8594;}

.sign {text-align:right; color:#CC925F;}
.sign a:link {color:#CC925F;}
.sign a:visited {color:#CC925F;}
.sign a:hover {color:#CC925F;}
.sign a:active {color:#CC925F;}

.bottomMenu {color:#7C8594; font-size:8pt; margin:0 0 10px 0;}
.bottomMenu a:link {color:#7C8594;}
.bottomMenu a:visited {color:#7C8594;}
.bottomMenu a:hover {color:#7C8594;}
.bottomMenu a:active {color:#7C8594;}

.bottomSites {color:#7C8594; font-size:8pt; margin:0 0 10px 0;}
.bottomSites a:link {color:#7C8594;}
.bottomSites a:visited {color:#7C8594;}
.bottomSites a:hover {color:#7C8594;}
.bottomSites a:active {color:#7C8594;}


.feauters{margin-bottom:20px; width:250px}
.feauters td { text-align:right}
.submit{color:#587FAD; border:1px solid #9CB8BC; cursor:pointer; background:url(/images/skin/Index/input-submit.gif) top repeat-x; font-weight:bold; padding-left:5px; padding-right:5px; height:18px;}


div#logoSlogan{ margin:20px 0}
img#logo {float:left; margin-left:30px;}
h1#heading {color:#BE0808; font-size:16px; margin:0; padding:0; height:65px; line-height:65px; width:300px;}
.textBannerBlock a{ text-decoration:none; color:#7C8594; padding-top:10px; display:block}
.textBannerBlock a:hover{ text-decoration:none;}

div#video {display:block; float:none; color:#FFE001; background-color:#D40A20; width:245px; height:34px; margin:20px 0 10px 0; border:1px solid #FFE001; padding:0; overflow:hidden}
div#video a {color:#FFE001; text-decoration:none; font-weight:bold; font-size:11px; padding:0; margin:0}
div#video img { border:none; margin:0; margin-left:-3px; padding:0; padding-right:5px;}
}
</style>
</head>
<body>
<table class="main" border="0" cellpadding="0" cellspacing="0" width="800" align="left">
<tr valign="top">
<td width="489"><div>
<div class="slogan"> California local singles dating and personals </div>
</div>
<br />
<br />
<table width="820" height="496" border="0" cellpadding="0" cellspacing="10">
<tr>
<td height="66" align="center" valign="top">&nbsp;</td>
<td align="center" valign="top"><font color="#FF9966" size="4">Welcome
to the best singles site on the web to find local dates in California!</font><br />
<br />
We offer an unrivalled number of matchmaking tools, which almost guarantee
you're likely to find someone who matches your specific desirable
character traits. Read some testimonials of members who have found
love through our network <a href="/static/stories/feedback.do">here</a>.
</td>
</tr>
<tr>
<td width="266" height="400" align="center" valign="top"> <div align="center"><img src="/additional/images/logo.jpg" width="266" height="400" /></div></td>
<td width="800" align="center" valign="top"><table width="708" height="213" border="0" cellpadding="0" cellspacing="1">
<tr>
<td width="397" height="27" align="center" valign="top"> <div align="center"><font color="#FF9966"><strong>OUR
SPECIAL FEATURES</strong>:</font></div></td>
<td width="400" rowspan="2" align="center" valign="top"><div align="center">
<table width="256" border="0" align="center" cellpadding="0" cellspacing="0" class="meet50">
<tr>
<td><font color="#FF9966"><strong>WAYS TO FIND YOUR IDEAL
PARTNER</strong>:</font></td>
</tr>
<tr>
<td width="336"> <ul class="ul01">
<li><b>SuperMatch</b> - Character matching</li>
<li><b>SoulMatch</b> - Find your soulmate</li>
<li><b>SelectMatch</b> - Interest matching</li>
<li><b>SensualMatch</b> - Sexual compatibility</li>
<li><b>StarSignMatch</b> - Zodiac matching</li>
<li><b>Free E-mail</b> - contact others for free</li>
<li><b>Browse free</b> - Member galleries</li>
<li><b>Video communication</b> - Webcam chat</li>
<li><b>Voice direct</b> - With new technology</li>
<li><b>Phone 2 phone</b> - Anonymous!</li>
</ul></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td height="183" align="center" valign="top"><div align="center" class="feauters">
<div align="center" class="list"><img border="0" align="left" src="/images/skin/Index/feauters/01.gif" />MailBox</div>
<div align="center" class="list"><img border="0" align="left" src="/images/skin/Index/feauters/02.gif" />Chat</div>
<div align="center" class="list"><img border="0" align="left" src="/images/skin/Index/feauters/03.gif" />Voice</div>
<div align="center" class="list"><img border="0" align="left" src="/images/skin/Index/feauters/04.gif" />Photos</div>
<div align="center" class="list"><img border="0" align="left" src="/images/skin/Index/feauters/05.gif" />Phone</div>
<div align="center" class="list"><img border="0" align="left" src="/images/skin/Index/feauters/06.gif" />Video</div>
<div align="center" class="list"><img border="0" align="left" src="/images/skin/Index/feauters/07.gif" />Gallery</div>
<div align="center" class="list"><img border="0" align="left" src="/images/skin/Index/feauters/08.gif" />Toolbar</div>
</div></td>
</tr>
</table>
<a href="/registration/step1.do"><font size="5">JOIN FREE NOW!</font></a><br />
<table width="674" height="17" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="257" height="15" align="center" valign="top"> <div align="center">{%quickSearchBlock%}</div></td>
<td width="543" align="center" valign="top">{%newMembersBlock%}</td>
</tr>
</table>
<br>
These are just a small sample of the members in our network. Globally
we have over 20 million members, which is larger than any other dating
site. It is free to join, and takes just a couple of minutes to fill
out the basic details. You can always come back later and fill out
a more comprehensive profile. We give you lots of dating advice as
well, including how to draw the most attention to yourself on singles
sites.<br /> <br /> <br /> <table width="436" height="35" border="0" cellpadding="0" cellspacing="10">
<tr>
<td height="15" align="center" valign="top"> <div align="center"><font size="2"><a href="/registration/step1.do">Join
Now!</a> - <a href="/login.do">Member Login</a> - </font>
<font size="2"><a href="/static/dating_tips/dating_tips_index.do">Free
Dating Tips</a></font><font size="2"> - <a href="/links.htm">Links</a>
- <a href="http://worlddatingpartners.com?refid=partner-14618">Webmasters</a></font></div></td>
</tr>
</table></td>
</tr>
</table>
<div align="center"></div>
</td>
</tr>
</table>

<div align="left"></div>
</body>
</html>
zaczebra
Thanks for this info mrplough, useful stuff for geeks that can't code..lol - i gotta get around to creating some nice looking sites but as i have so many - it seems a huge task - your template here cuts the time a little, so i might just get my finger out and create some cool looking sites

One question...... hope someone can help - if i want to put some fancy stuff like flash or ajax into the homepage can we upload the files onto wdp servers - seems that we can add image files so can we add some .js files and link to them in our html ?

thanks
mrplough
You can only add images I believe zaczebra.

Yes, it's a time consuming process but worth doing ultimately, boiler plate sites will only take you so far. It's best to hone in precisely on your target audience and dress the site up accordingly.

Even though the rest of the site is pretty much the same as everyone else's after the front page, doing that to the index is enough to make google look at the site differently. I've had much better rankings after giving the index a makeover in this way.

Glad it helped.
Patsy (4601)
We do not have direct access to the servers so you would have to send it to WDP to upload
QUOTE(zaczebra @ Sep 29 2009, 09:55 PM) *
Thanks for this info mrplough, useful stuff for geeks that can't code..lol - i gotta get around to creating some nice looking sites but as i have so many - it seems a huge task - your template here cuts the time a little, so i might just get my finger out and create some cool looking sites

One question...... hope someone can help - if i want to put some fancy stuff like flash or ajax into the homepage can we upload the files onto wdp servers - seems that we can add image files so can we add some .js files and link to them in our html ?

thanks
hellrazaa
I found that photos.com is a cheaper choice instead of shutterstock. You are only gonna need maybe five new pics..you can get those for eight bucks.
Laura(WDP)
QUOTE(hellrazaa @ Apr 7 2011, 06:27 PM) *
I found that photos.com is a cheaper choice instead of shutterstock. You are only gonna need maybe five new pics..you can get those for eight bucks.


They are not so cheap if you look closer at their plans. If you need only a couple of pictures for your WDP site and you can add them yourself, feel free to contact the Support team, we will be happy to help. Just send us the description of the image, your site niche and we will help you for free.

Regards,
hellrazaa
i cant get the one area to show the background...any help would be appreciated
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2012 Invision Power Services, Inc.