how to modify html?

Can you tell us, specifically, what on your site you are trying to change. All this talk about duplicating had got me confuzzled.

Okay, so if I'm understanding you, you developed an entire web page template and layout in photoshop and now you want to apply that to your proboard forum?

Weeds read this thread and I think we start to explain it:

support.proboards.com/index.cgi?action=display&board=support&thread=410886&page=1#4742712

Now let me clear up alot of the confusion...

It's true that the base HTML and CSS of a forum are set and untouchable. However, we can use javascript to overwrite that code. We tell the browser "don't read this part of the page, read this instead" So even though there are two existing entries we'll specify which one it should display so it doesn't get shown twice like you're thinking it will.

I posted the link to your old thread so Tumbleweeds could read it and figure out how to help you best.

You said you have a photoshop file, can you export that as a picture file (jpg or png) and use the attachment function to post it here. Once we see what you want done we can point you towards existing codes that you can use in the Headers/Footers that Ricky told you about to modify your forums look.

You can send it to us via a Personal Message. Click the envelope over there
<---

Okay there is going to be a lot to go over in my post so take your time, read it, re-read it:

1) When you log into your forum you see the link that says Admin, click on it and it takes you to the admin panel.

2) Click on "Headers/Footers" Click the dropdown and select "Global Header/Footer" Copy and paste this next part into the Global Header:

<style type="text/css">
<!--

#menuitem {
color:#000000; //color of font
background-color: #aaaaaa; //the background color of the menu items
height: 30px; //adjustable
}

#menuitem hover {
color:#ffffff; //font color on menu hover
background-color:#ff00ff; //purple color of menu
}
-->
</script>


<script type="text/javascript">
<!--
document.getElementsByTagName('td').item(2).style.display="none";
document.getElementsByTagName('td').item(1).style.align="left"
document.getElementsByTagName('font').item(1).style.display="none";
//-->
</script>

Code:
<script type="text/javascript">
/* Move Menu Above Banner */
/* By Luke */
/* [url]http://support.proboards.com/[/url] */

document.getElementsByTagName("tr")[2].style.display="none";
var td = document.getElementsByTagName("td");
var table = document.getElementsByTagName("table");
var mcell = table[0].insertRow(0).insertCell(0);
mcell.colSpan = "2";
mcell.align= "center";
mcell.className = "menubg";
mcell.align = "left";
mcell.innerHTML = td[4].innerHTML;
</script>

<table width="92%"><tr>
<td class="windowbg">
<!--====Login===-->
   <div id="socialLogins" style="cursor:pointer;text-align:center;"></div>
<script>
(function(){
var gY=window.gigya,gYd=gY.services.socialize;
if(gY&&gYd&&!document.getElementById('componentDiv1')){
   var ae = window.addEventListener?['addEventListener','load']:['attachEvent','onload']
   window[ae[0]](ae[1],function(){
       if(!gYd || !gYd.plugins){var ac=arguments.callee; ac.count=('count'in ac?ac.count++:0); if(ac.count<1000)setTimeout(ac,500);return}
       var d=document,g='getElementById',l,q,r,s,t,u='',v,z=gYd.plugins.login.modules;
       for(q in z){
           if("object" == typeof(z[q]) && "pageDiv" in z[q])l=z[q].pageDiv; else l=null;
           if(l){
               for(s=l.getElementsByTagName('img'),t=0;t<s.length;t++){
                   v=s[t].parentNode.parentNode;
                   u += '<img src="'+s[t].src+ '" width="'+s[t].width+ '" height="'+s[t].height+ '" onclick="pb_openOverlay(); gigya_id = 0; gigya.services.socialize.plugins.login.providerClick(\''+q+'\',\''+v.title.toLowerCase()+'\')">&nbs'+'p;';
               }
           }
       }
       if(u)d[g]('socialLogins').innerHTML=u;
       },false)
}
})()
</script>

<form action="/index.cgi" method="post" name="sideloginform" onsubmit="disable(this);if(location.href.indexOf('action=logout')==-1)this.redirect.value=location.href;">
<input type="hidden" value="/index.cgi" name="redirect">
<input type="hidden" name="action" value="login2">
<img onload="document.getElementById('sidelogout').style.display=(pb_username=='Guest'?'none':'')" src="http://s3.images.proboards.com/blank.gif">
<center><table width="100%" cellspacing="3" cellpadding="0" border="0">
<tbody><tr>
<td width="50%"><center><font size="1pt" color="#ffffff">username:</font></center></td>
<td width="50%"><input type="text" name="username" size="18" tabindex="3001" maxlength="18" class="sidelogin user"></td>
</tr><tr>
<td width="50%"><center><font size="1pt" color="#ffffff">password:</font></center></td>
<td width="50%"><input type="password" name="password" size="18" tabindex="3002" class ="sidelogin password"></td>
</tr><tr title="stay logged in">
<td width="50%"><center><font size="1pt" color="#ffffff">stay on:</font></center></td>
<td width="50%"><input type="checkbox" id="minutesinput1" name="minutes" tabindex="3003"></td>
</tr><tr>
<td width="100%" align="center" colspan="2">
<input type="submit" value=" login " tabindex="3004" class="sidelogin submit">
<input type="button" style="display: none;" id="sidelogout" onclick="location.href='/index.cgi?action=logout'" value="Logout" class="sidelogin logout">
<center><font size="1pt"><a href="/index.cgi?action=register" class="sidelogin register">Register</a></font> |
<font size="1pt"><a href="/index.cgi?action=forgotpassword" class="sidelogin forgot">Forgot Password</a></font></center>
</td></tr>
</tbody></table></center>
</form>
<!--===End Login===-->
</td>

<td><!--I'll have to see about modifying a code that makes the newest member appear up top.-->Newest Member info here:</td>
</tr></table>


Now hit save and that should start moving things around. (Don't worry if it doesn't look right just yet we'll work out all the bugs as we go along.)

Now back at the admin panel select "Headers/Footers" again. Now this time select: "Main Header/Footer" and then paste this next part into the Main Footer:

<!--Use this code to remove the standard folder icon next to each board and replace it with whatever image you want.-->

<script type="text/javascript"><!--

/*
* Different On/Off Icons for each Category
* Created By Triad
* http://support.proboards.com
*/

var _cat = [
     ["category_id", "Off_URL", "On_URL"],
     ["category_id", "Off_URL", "On_URL"] // No comma on the last line.
];

if(location.href.match(/\.com(\/|.+cgi(\?|#.+|\?\w+=(home|\w{15}y.+))?)?$/i)){
     for(var tb = document.getElementsByTagName("table"), a = 1; a < tb.length; a++){
           if(tb[a-1].className == "bordercolor" && tb[a].cellPadding == "4" && tb[a].rows[0].cells[0].innerHTML.match(/forum\sname/i)){
                 for(r = 1; r < tb[a].rows.length; r++){
                       if(tb[a].rows[r].cells[0].colSpan == "5" && tb[a].rows[r].cells[0].firstChild.name){
                             var id = tb[a].rows[r].cells[0].firstChild.name;
                             for(x = 0; x < _cat.length; x++){
                                   if(id == _cat[x][0]){
                                         while(tb[a].rows[++r] && tb[a].rows[r].cells[0].colSpan != "5"){
                                               if(tb[a].rows[r].cells[0].firstChild.alt == "[ ]")
                                                     tb[a].rows[r].cells[0].firstChild.src = _cat[x][1];
                                               else
                                                     tb[a].rows[r].cells[0].firstChild.src = _cat[x][2];
                                         } r--;
                                   }
                             }
                       }
                 }
           }
     }
}

//--></script>


Okay use this to get into your headers and footers:

ukskc.proboards.com/index.cgi/index.cgi?action=headersfooters&NOHEADERS=1

And then delete this portion in the Global Header:

<script type="text/javascript">
<!--
document.getElementsByTagName('td').item(2).style.display="none";
document.getElementsByTagName('td').item(1).style.align="left"
document.getElementsByTagName('font').item(1).style.display="none";
//-->
</script>

Okay use the link I gave you to get to your headers/footers and remove the codes from the global header one at a time. As soon as things go back to normal we know which one is messing things up.