Brainchild RPGs
« Quick Codes »

Welcome Guest. Please Login or Register.
Dec 24, 2009, 1:45am

[Home] [Help] [Search] [Login] [Register]



Brainchild RPGs :: Resources :: Miscellaneous :: Quick Codes
   [Search This Thread][Send Topic To Friend] [Print]
AuthorTopic: Quick Codes (Read 753 times)
Tiggie
Administrator
*****
member is offline




[homepage]

Joined: Nov 2006
Gender: Female
Posts: 23
Karma: 0
Quick Codes
« Thread Started on Apr 22, 2007, 7:06pm »
Okays, so here I'll post little codes that come in DEAD handy on an RPG.

Mini-Banner
I'd like to add this is the most basic version, you might see codes with added stuff, but this is what you need to link an image to a site.
Code:
<a href="SITELINK"><img src="MINIBANNERLINK"></a>


Category/Title Background Images
I call them "grads", short for gradients. Gradients used to be the fashion when they first popped up, now you see all kinds of images! Pop this in your global headers. The first image will appear behind the title bars, and the second will appear behind the category titles.
Code:
<style type="text/css">
<!--

.titlebg
{
background-image: url(IMAGELINK);
}
.catbg
{
background-image: url(IMAGELINK);
}

-->
</style>


Board Slimmer
Put this code in your global header and footer to make the board narrower. Change the '700px' number near the end to make it wider or slimmer.
Code:
<script language="JavaScript">
<!--
tablew = document.getElementsByTagName('TABLE');
for(t=0;t<tablew.length;t++) {
if(tablew[t].width=="92%"){
tablew[t].width='700px';
}
}
// -->
</script>


Centering Backgrounds
Ever wondered how you get a background like the one on Brainchild? You make a simple image that tiles downward, or one that will fill the hight of the screen with enough room in the middle for the boards and then use this code in the global headers.
Code:
<style type="text/css">
<!--

body
{
background-position: center;
background-repeat: repeat-y;
}

-->
</style>
« Last Edit: May 18, 2007, 6:44pm by Tiggie »Link to Post - Back to Top  IP: Logged
Tiggie
Administrator
*****
member is offline




[homepage]

Joined: Nov 2006
Gender: Female
Posts: 23
Karma: 0
Re: Quick Codes
« Reply #1 on Jun 23, 2007, 6:55pm »
These codes change the colour of the input areas around the site. Like the reply boxes, the dropdown boxes and the buttons! Change the text in capitals to the hex codes (six digit codes that create colours) that you want. Put them in your global headers

Text Areas
This is the code for the textareas like the reply boxes and the boxes for banner codes.
Code:
<style type="text/css">
<!--
textarea
{
color:#FONT;
background-color: #BACKGROUND;
border: 1px solid #BORDER;
}
-->
</style>


Input Areas
For example, the thread titles or login boxes.
Code:
<style type="text/css">
<!--
input
{
color:#FONT;
background-color: #BACKGROUND;
border: 1px solid #BORDER;
}
-->
</style>


Buttons
For the "Reply" buttons etc.
Code:
<style type="text/css">
<!--
select
{
color:#FONT;
background-color: #BACKGROUND;
border: 1px solid #BORDER;
}
-->
</style>


Dropdown Menus
For the quick forum jumps and other drop-down menus.
Code:
<style type="text/css">
<!--
option
{
color:#FONT;
background-color: #BACKGROUND;
border: 1px solid #BORDER;
}
-->
</style>

« Last Edit: Jun 23, 2007, 6:58pm by Tiggie »Link to Post - Back to Top  IP: Logged
Kyi
New Member
*
member is offline




[homepage]

Joined: Jun 2007
Gender: Female
Posts: 4
Location: In the rain.
Karma: 0
Re: Quick Codes
« Reply #2 on Jun 25, 2007, 7:49pm »
Change Linkage
This let's you personalize your links on your forum. You can get rid of the underline/overline, give yourself a hover color, put in bold, etc. Goes in your global headers.

Code:
<style type="text/css">
<!--
A:link {text-decoration: none; color: #COLOR; font-weight: normal;}
A:visited {text-decoration: none; color: #COLOR; font-weight: normal;}
A:hover {text-decoration: none; color: #COLOR; font-weight: normal;}
.nav {font-size: 10px; text-decoration: none; color: #COLOR; font-weight: normal;}
.nav:link {font-size: 10px; text-decoration: none; color: #COLOR; font-weight: normal;}
.nav:visited {font-size: 10px; text-decoration: none; color: #COLOR; font-weight: normal;}
.nav:hover {font-size: 9px; text-decoration: none; color: #COLOR; font-weight: normal;}
-->
</style>


Staff Colors
Although Proboards already gives you the option for your staff members to have their own color, you can't make them bold, underlined, give them their own hover, etc unless you use this code. Make sure you don't already have colours listed under the member groups or this code will not work! Global headers.

Code:
<style type="text/css">
<!--
.group1:link,.group1:visited {
color: #COLOR;
text-decoration: none;
}
.group1:hover {
color: #COLOR;
text-decoration: none;
}
.group2:link,.group2:visited {
color: #COLOR;
text-decoration: none;
}
.group2:hover {
color: #COLOR;
text-decoration: none;
}
-->
</style>



Fix Banner Area
These codes will remove the text that's in the banner area. If you don't put them in, then there's text next to your banner and it looks all bleh. Global headers.

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


Code:
<script type="text/javascript">
<!--
document.getElementsByTagName('font').item(1).style.display="none";
//-->
</script>
« Last Edit: Aug 22, 2007, 7:02am by Tiggie »Link to Post - Back to Top  IP: Logged
Ice Cream&&
New Member
*
member is offline



[aim]
[homepage]

Joined: Aug 2007
Gender: Female
Posts: 3
Location: in front of my computer
Karma: 0
Re: Quick Codes
« Reply #3 on Aug 20, 2007, 6:43pm »
Hmm, I can't seem to get the staff colors to work. Can anyone help me?
Link to Post - Back to Top  IP: Logged
Ice Cream&&
   [Search This Thread][Send Topic To Friend] [Print]

Google
Webbrainchildrpg.proboards.com
Click Here To Make This Board Ad-Free


This Board Hosted For FREE By ProBoards
Get Your Own Free Message Boards & Free Forums!