Gradients, buttons, and some codes (MS Paint)

[Ifrit]

ok i use a total of 5 different programs to make my images... but i am confused on how to make a layout for proboards........ Does anyone use photo impression3.0, mgi photosuite 8.06, Ulead Photo Express 4.0 SE or Ulead Photo Express 2.0 SE? and the exceptional Paint? Does anyone like have a tutorial for any of thoes?.. nows the time i really wish i could get psp lol!

[matthew]

I'm not familiar with any other those programs apart from Paint.

First off you might want to make some gradients. I learnt how to made a gradient by hand in paint. you'll find the tutorial here


Although, It's much easier if you have a graphics program that will make the gradient for you.. If you dont have a graphics program that generates gradients, you can use this online Gradient Generator

here's the one i made using the online Gradient Generator. I made it at 1px width (it doessn't need to be any wider because it will repeat) and 55 pixels in height (to compensate for board stretching).




After you've made your gradient copy and paste it into paint, and magnify to 800%.

select the colour dropper tool, and click at the top of the gradient.




Then go to colours> Edit Colours > Define custom Colours and select a lighter shade of the colour for yur highlight.



select the line tool, and apply the colour to the top pixel on the grad



then save. I have to save as a .png because the image distorts if i save it in any other format in Paint

host the image and put it on your board using style tags (in the headers).

<style>

.titlebg
{
background-image: url(IMAGE GOES HERE);
background-repeat: repeat;

}

</style>

and you should have something like this.

---

you can also use grads to make buttons



I pixeled the border and the text using the line tool, and used the same highlight colour.




I hope that's some help to you ,Ifrit

[Ifrit]

Oh trust me it does! Thanks once again!

[matthew]

no problem, Ifrit.

[Ifrit]

ok heres a nother question... how do i make a skin.. or a template?

[matthew]

First you need to come up with a good colour scheme, using hex colours. I use my colour palette in Paint Shop Pro to do this, but you can also use colour charts that you can find on the net, such as

Webmonkey
Color Schemer online colour generator

All colours go in 'Create/modify forum skin' in the admin area.

All the graphics are made individually. You'll find most of them in 'customize forum images' in the admin area, and include.

Menu Icons
Folders
Smiley Faces
Instant Messages
Stars
Message Icons
Post Page Icons
Topic Icons
Profile Icons
Misc. Icons

plus the background, banner, which both go into 'Create forum skin' and gradients, which, using css go into the header, using style tags.

You can also use codes to modify the look of the forum. I use this code (in the headers) to center the banner, remove the welcome message, and <home>, in the logo table.

<script language=javascript>
<!--
var PMLogoCell = document.getElementsByTagName("TD")[1]; PMLogoCell.removeChild(PMLogoCell.lastChild)
document.getElementsByTagName('tr')[1].deleteCell(1);
-->
</script>

And I use this code to change the width of the forum, which goes in the footers

<script language="JavaScript">
var boardwidth = document.getElementsByTagName('TABLE');
for(i=0;i<boardwidth.length;i++) {
if(boardwidth.width=="92%"){
boardwidth.width='695 px';}}
</script>

you change the part in red to change the forum width.


I also use some css to change the style of the forum.

I use this for the scroll bar

<style type="text/css">
<!--
body
{
scrollbar-arrow-color: #Colour Code Here;
scrollbar-track-color:#Colour Code Here;
scrollbar-3dlight-color:#Colour Code Here;
scrollbar-highlight-color:#Colour Code Here;
scrollbar-face-color:#Colour Code Here;
scrollbar-darkshadow-color:#Colour Code Here;
scrollbar-shadow-color:#Colour Code Here;
}

</style>

These I use for the Menu, Title, Category, and News Title. gradients/images.

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

.newstitlebg
{
background-image: url(TITLE_NEWS_MENU IMAGE URL HERE);
background-repeat: repeat;
}

.titlebg
{
background-image: url(TITLE_NEWS_MENU IMAGE URL HERE);
background-repeat: repeat;
}

.catbg
{
background-image: url(CAT IMAGE URL GOES HERE);
background-repeat: repeat;
}

.menubg
{
background-image: url(TITLE_NEWS_MENU IMAGE URL HERE);
background-repeat: repeat;
}

</style>


And I use this to center my background images because i use vertical borders alot

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

background-position:center top;
background-repeat:repeat-y;

</style>


Hope that helps

[Ifrit]

Aha now i get it... That made everything so much clearer for me lol THANKS! AGAIN *runs off to begin work*

[40ringz]

Wow, thanks M@!! Those codes helped me too! ;D

[shannon]

I tried to put the gradient on but i couldnt get it to work, any help?

[Jordan]

Hmmmm... linketh?