v4 forum skin designer - completely lost ;C

[PIXEL 01V]

I've tried looking at the options for how to make things work for V5 and i'm honestly, completely stumped. I don't know what javascripts will be compatable and what won't and what CSS declarations would work and what won't and so on. I'm mainly self-taught and my only experience in coding is CSS and HTML, I had to use open source coding from mainly PB support for everything else that used javascripts or certain other advanced HTML things that just simply confuse me. I'm a bit overwhelmed and frustrated, especially considering that V5 should be coming out before 2013 and that I have finals I need to look over and that if I don't fix my site it will most assuredly never be able to get back on its feet after v5 is pushed out.

Does anyone have any kind of tip to help me? Just some place where I could start out converting everything to look as close to the original as possible. I mean, how would you feel if your site went from this;
0-1-vector-rp.proboards.com/index.cgi (main page)
0-1-vector-rp.proboards.com/index.cgi?board=charhelp (board preview)
0-1-vector-rp.proboards.com/index.cgi?board=charhelp&action=display&thread=19 (post preview)


To this
0-1-vector-real-beta.freemessageboards.com/ (main board)
0-1-vector-real-beta.freemessageboards.com/board/7/application-template (board preview)
0-1-vector-real-beta.freemessageboards.com/thread/19/9734-character-templates (post preview)

Note: What I did was use the beta to convert 0-1-vector-rp into 0-1-vect-real-beta and then copy-paste the headers and footers over from my site over to that site. I tried using a few of the plugins at first but those confused me too because I copy-pasted the javascripts that my headers/footers use on my v4 site and they didn't seem to work...

Where would I start to get to converting all of this so that I can continue with running my site once V5 comes out without it being a horrible mutated mess? I'm so lost T_T

EDIT: I'm not really asking for someone to do all of the work for me. I do understand SOME of the things I can change, like the avatar sizes... maybe... I'm not even entirely sure on that. The point is, I can see what V5 is trying to do, it's trying to make it capable for someone to customize their forum and have everything orginized without needing 35 pages of Global Footers and 18 pages of Global Header junk, which is what ZERO|ONE VECTOR ended up using.

I'm just starting to panic what with V5 supposedly coming soon. I needed to use so many open source codes to move around parts of the forums and myo mod to change the display of the boards in the categories... and now it's just all messed up >.<

[Shorty]

I would first suggest removing all of your headers and footers(most of them won't work). And then after that let's then take another look at what's wrong. I will try my best to help you.

[Thomasss]

Hello!!

I have heard, that any codes that change the style, look, or the way a forum behaves will no be compatible with v5. Unfortunately, i can not really help when it comes to converting them to v5 though.

[PIXEL 01V]

Dec 5, 2012 10:53:14 GMT -8 Shorty said:

I would first suggest removing all of your headers and footers(most of them won't work). And then after that let's then take another look at what's wrong. I will try my best to help you.

Thank you both of you for your quick reply! Anyway, I've removed the headers and footers, I just wanted to show that I've tried messing with the general headers/footers to at least see if they worked. This is what I am confused on to the point that I don't even know where to start to do certain things;

• Is there a way to separate the menu buttons from the header as well as remove the bar where the login buttons are to begin with? I had a code which had the menu buttons placed into its own div called Menu_Div. As far as i've been able to tell the code <*Header> </header> in the table wrapper in the admin page can take care of actually removing the header, which I want to remove to mimic my v4 version more.

• Is there any way to move the navigation par telling you where you are in the forums? I want to move it so that it is below the advertizement. Better yet, remove it completely and place it somewhere else as only text to mimick my v4 site.
  

• Where can I change the CSS for the boards, category backgrounds and title backgrounds as well as figure out how to remove the "THREADS" column and the "POSTS" column and remove the "LAST POST" column and then move the "LAST POST" information elsewhere similar to how my boards presents that information?

• Is there a way to replicate what I had done for the login box below the menu buttons? That coding seems to somewhat work still but acts a little wonky. It was this code that was placed near the bottom of the global headers IIRC, below the div for Menu_Div IIRC ((Obviously I didn't make anything but the CSS coding that went with it, but I did try playing with it.<div class=quicklogin><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="0%" align="right"><input type="text" name="username" size="18" tabindex="3001" maxlength="18" class="sidelogin user"></td>
<td width="0%" align="left"><input type="password" name="password" size="18" tabindex="3002" class ="sidelogin password"></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">
</td></tr><tr><td align="center" colspan="2"><div id="pm_text"></div></td></tr>
</tbody></table></center>
</form></div>
  Related CSS:.quicklogin {
background-color: #36253F;
position: absolute;
padding: 8px 8px 16px 8px;
width: 382px;
height: 85px;
right: 201px;
top: 312px;
border-radius: 16px 16px 16px 16px;
-o-border-radius: 16px 16px 16px 16px;
-moz-border-radius: 16px 16px 16px 16px;
-webkit-border-radius: 16px 16px 16px 16px;

}
.quicklogin a {
color: #EDBC7E;

}
.quicklogin a:hover {
color: #B16593;

}
#pm_text {
font-family: arial;

}
#pm_text p{
padding: 0px;
margin: 5px 0px 0px 0px;

}
#pm_text a {
font-family: arial;
color: #EDBC7E;

}
#pm_text a:hover {
color: #B16593;
• Is there any known way to use a money hack code? AKA where you create a system where a player gets a certain number of points every time they post in a board where the post count is enabled and that staff members can modify how many points they have by subtracting or adding to it as they wish.

• What's up with the [*table] code? It works as far as I see, but there are certain features that were in the Enhanced UBBC Table code made by EtonBones that I had a fancy for. A preview of what I mean is in the link in my first post going to the application template - the [atrb=] statements changing things about the tables and the [cs=5] thing which is short for [columnspan] so that a single cell could span 5 columns within a table... is v5 capable of replicating any of that?
  

• Going along the same lines with the above bulletin, the more recent releases of the Style UBBC Tags created by ipokemon allowed for tags he called [classy]. AKA you could create divs to insert inside anywhere of your post by declaring it somewhere in your post. Like [div class="line"][/div]


[newclass=.line]background: #463251; float: top; margin: 14px 0px 0px 0px; height: 2px; display: block; width: 250px;[/newclass]
  This was useful because it allowed you to create little CSS things that you put inside of another [style=] tag, if you get my meaning. It also let you condense the coding of posting templates by having [div class="title"]TITLEHERE[/div] instead of a much larger declaration for every time you wanted to use the exact same CSS that you used for "Title". Is there any way to do this naturally in V5? Sorry if I sound really dumb here :C
  

I'm also not so sure how CSS should work for V5. Do I just look for the class of what i'm looking for, like #board-7.board.item.first or something, then do<style type="text/css">
#board-7 {
margin-left: -15px;
font-size: 10px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transform: translateX(-11px);
-webkit-transform: translateX(-11px);
-o-transform: translateX(-11px);
-moz-transform: translateX(-11px);
background-position: top center;
background-repeat: no-repeat;

}
</style>
... or something? It took me three different forum attempts, me looking at open source skins of several other people, a lot of carousing on http://www.w3schools.com/css/default.asp and a lot of experimentation to find out how CSS worked to fix up the site I have now. Now I feel like everything is different and it's... blarg @_@

[Thomasss]

Can i ask if you have a beta forum?

[PIXEL 01V]

Dec 5, 2012 13:56:17 GMT -8 Thomasss said:

Can i ask if you have a beta forum?

I have three links to one of the two beta forums I have which was converted from my actual site. These are beta sites, right? O-o

0-1-vector-real-beta.freemessageboards.com/ (main board)
0-1-vector-real-beta.freemessageboards.com/board/7/application-template (board preview)
0-1-vector-real-beta.freemessageboards.com/thread/19/9734-character-templates (post preview)

I also have another beta forum which was made from my test forum but I haven't touched. Not sure you want to see that one XD

[Thomasss]

and just to clarify, you have used these codes in the forums themselves right? (Im just making sure)

[Thomasss]

Dec 5, 2012 13:54:29 GMT -8 PIXEL 01V said:

Dec 5, 2012 10:53:14 GMT -8 Shorty said:

I would first suggest removing all of your headers and footers(most of them won't work). And then after that let's then take another look at what's wrong. I will try my best to help you.

Thank you both of you for your quick reply! Anyway, I've removed the headers and footers, I just wanted to show that I've tried messing with the general headers/footers to at least see if they worked. This is what I am confused on to the point that I don't even know where to start to do certain things;

• Is there a way to separate the login buttons from the header as well as remove the bar where the login buttons are to begin with? I had a code which had the menu buttons placed into its own div called Menu_Div. As far as i've been able to tell the code <*Header> </header> in the table wrapper in the admin page can take care of actually removing the header, which I want to remove to mimic my v4 version more.

• Is there any way to move the navigation par telling you where you are in the forums? I want to move it so that it is below the advertizement. Better yet, remove it completely and place it somewhere else as only text to mimick my v4 site.
  

• Where can I change the CSS for the boards, category backgrounds and title backgrounds as well as figure out how to remove the "THREADS" column and the "POSTS" column and remove the "LAST POST" column and then move the "LAST POST" information elsewhere similar to how my boards presents that information?

• Is there a way to replicate what I had done for the login box below the menu buttons? That coding seems to somewhat work still but acts a little wonky. It was this code that was placed near the bottom of the global headers IIRC, below the div for Menu_Div IIRC ((Obviously I didn't make anything but the CSS coding that went with it, but I did try playing with it.<div class=quicklogin><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="0%" align="right"><input type="text" name="username" size="18" tabindex="3001" maxlength="18" class="sidelogin user"></td>
<td width="0%" align="left"><input type="password" name="password" size="18" tabindex="3002" class ="sidelogin password"></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">
</td></tr><tr><td align="center" colspan="2"><div id="pm_text"></div></td></tr>
</tbody></table></center>
</form></div>
  Related CSS:.quicklogin {
background-color: #36253F;
position: absolute;
padding: 8px 8px 16px 8px;
width: 382px;
height: 85px;
right: 201px;
top: 312px;
border-radius: 16px 16px 16px 16px;
-o-border-radius: 16px 16px 16px 16px;
-moz-border-radius: 16px 16px 16px 16px;
-webkit-border-radius: 16px 16px 16px 16px;

}
.quicklogin a {
color: #EDBC7E;

}
.quicklogin a:hover {
color: #B16593;

}
#pm_text {
font-family: arial;

}
#pm_text p{
padding: 0px;
margin: 5px 0px 0px 0px;

}
#pm_text a {
font-family: arial;
color: #EDBC7E;

}
#pm_text a:hover {
color: #B16593;
• Is there any known way to use a money hack code? AKA where you create a system where a player gets a certain number of points every time they post in a board where the post count is enabled and that staff members can modify how many points they have by subtracting or adding to it as they wish.

• What's up with the [*table] code? It works as far as I see, but there are certain features that were in the Enhanced UBBC Table code made by EtonBones that I had a fancy for. A preview of what I mean is in the link in my first post going to the application template - the [atrb=] statements changing things about the tables and the [cs=5] thing which is short for [columnspan] so that a single cell could span 5 columns within a table... is v5 capable of replicating any of that?
  
  [li]Going along the same lines with the above bulletin, the more recent releases of the Style UBBC Tags created by ipokemon allowed for tags he called [classy]. AKA you could create divs to insert inside anywhere of your post by declaring it somewhere in your post. Like [div class="line"][/div]


[newclass=.line]background: #463251; float: top; margin: 14px 0px 0px 0px; height: 2px; display: block; width: 250px;[/newclass]
  This was useful because it allowed you to create little CSS things that you put inside of another [style=] tag, if you get my meaning. It also let you condense the coding of posting templates by having [div class="title"]TITLEHERE[/div] instead of a much larger declaration for every time you wanted to use the exact same CSS that you used for "Title". Is there any way to do this naturally in V5? Sorry if I sound really dumb here :C
  

I'm also not so sure how CSS should work for V5. Do I just look for the class of what i'm looking for, like #board-7.board.item.first or something, then do<style type="text/css">
#board-7 {
margin-left: -15px;
font-size: 10px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transform: translateX(-11px);
-webkit-transform: translateX(-11px);
-o-transform: translateX(-11px);
-moz-transform: translateX(-11px);
background-position: top center;
background-repeat: no-repeat;

}
</style>
... or something? It took me three different forum attempts, me looking at open source skins of several other people, a lot of carousing on http://www.w3schools.com/css/default.asp and a lot of experimentation to find out how CSS worked to fix up the site I have now. Now I feel like everything is different and it's... blarg @_@

And me and CSS do not get along, i use CSS Generator.. Anyway, with the blue text above, The money hack should not be compatible with v5. v5 is coming out with their own Money System, once this comes out, im sure money hacks will become available, as the money system we have now in v4, there are MANY money hacks. 

[Thomasss]

v5 is a big step form v4. I would suggest posting these problems in the General v5 Discussion? they should be able to help ya out more then i can.

[PIXEL 01V]

That's cool - the money system, I mean. So long as there's a way to do it that would be a huge relief since the combat system I made for the roleplay relies on a money system.

Also I wasn't entirely sure where I should post this. This board was called "coding help" and this has to do with coding, so I was like hm!

[Thomasss]

Yeah, when it comes to this though, it would be helpful to have a admins point of view..

[PIXEL 01V]

Gollee gee willikers did I just find a style sheet.

[Thomasss]

Sorry i could be no more help..

[PIXEL 01V]

It's fine. I still have absolutely no idea how to do all of the bulleted things I listed above, but I found something called a style sheet within the colors & styles of the admin panel. Seems like what I was looking for to edit up the CSS of the forums... so maybe after playing with that I can at least get that part of this whole fiasco out of the way XD

[Thomasss]

Have fun! Remember, the support forum can always help! And you can also message an admin as well.!