Some Basic Questions

[Chantreya [Chani]]

Hey all! Sorry I've been gone for so long. Life stinks. -.-

I have a couple questions on using the basic code from the code index. I've tried figuring it out myself, but it's not doin' much for me.

OK, for the class called "newstitlebg", where does that go exactly? I need to know in order to make the image for it, so I can know the size proportions.

And what size should my others be? Like the menu, title, etc. I know it only has to be one pixel in width since I'm using a horizontal gradient, but I'd like to know what height.

I think that's all... I'll say thanks in advance for any help you guys can offer.

[Michael]

Aw, I'm sorry that things are going great right now. We really have missed you, I was wondering where you might have gone off to.

The newstitlebg is the image that goes to the News bar. You have to enable the newsbar for the newstitlebg to even show up. So, unless you want a unique image for that, some people use the cat image as the newstitlebg. Or even the title image. Btw, if you haven't seen the newsbar, it is the table that flashes different news things that the admin may put up. Most of the times it is disable and an info table is put in its place.

As far as sizes, I don't think it really matters because it will center them. The last height I used however was 24 and it worked well for me.

If you have any more questions don't hesitate to ask! We're all here for you.

[Nya]

hey welcome back ^^ sorry bout life i think we all hve had our troubles.

What Michael here is trying saying is the News Title Image goes to the Top bar of the News Fader... Which can be enabled from your Admin Panel.

As for hight i think it varies but I would not go below 24 like what Michael said.

I try to make mine 55 unless im trying to get a certain look.

[~•XyMiC•~]

Basically, if you want just plain gradient such from Dark to Light or Light to Dark, use any size. If you are looking to add a gloss, or scanlines, or adding special effect to it, I would recommend you to use the following size:

Your width of your forum X 25. If that's not done, the gradient may not look right. Also, you'll get better view of how it will look like on your forum.

[Chantreya [Chani]]

Thanks, Michael, Nya, and Xymic! I'll try to work things out. I think I'm going to have to start over, because I'm beginning to wonder if I used too many colors to match with text and a scrollbar. -.- I can't wait till I finish the piece of junk so I can show you guys! XD

[~•XyMiC•~]

No Problemos I can't even wait to see what you come up with,

[Nya]

lol your welcome.

I am sure ut will turn out great ^^

[Chantreya [Chani]]

Thanks for the support, you guys. I always put off trying to design Proboards because it looked so complicated, but now I realize it's just manipulating classes.

I have ONE more question. Do you guys know if I can take out the logo box at the top completely and put an image in there and just map it with all the links? Or something? Kinda like what we have here? lol Any help would be MUCHO appreciated, and I'm sorry for being such a pain.

[Nya]

Yes you can, And your not being a pain.

But thats outta my reach lol I know Matty has done that before infact I think this sites banner is done that way. So sorry i cant help in that aspect.

[Chantreya [Chani]]

Are you sure? I think I'd be annoyed with me by now...
Anyway, I think I'll PM Matty and ask him. Thanks for the reference, Nya! You've been so nice to me.

EDIT: I PMed Matty. Hopefully he'll help me... I'm really excited about learning all this! XDDD

[Nya]

lol im sure you will in time. its taken me about two years or so to get where i am in knowledge.

[noman]

For the banner here, I used this script, that removes the pm table cell, and the borders.



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

---

And the rest was done using CSS.

I put the main logo image in the .menubg class.


<style>

.menubg
{
background-image: url(http://img.photobucket.com/albums/v283/dudleythoth/ocgfx2/oc2bgif.gif);
background-repeat: no-repeat;
background-color:#ffd97d;
}

</style>

---

and reduced the size of the logo table cell using the following CSS, and added a background image in the admin cp, where the banner image usually goes.

<style>

.welcomebg
{

padding-top:0px;
padding-bottom:0px;
height: 1px;

}

</style>

---

The buttons are aligned to the left like this:


<style>

.menubg
{
text-align: left;

}

</style>

---

And I positioned them at the top using padding


<style>

.menubg
{

padding-top:5px;
padding-bottom:123px;
padding-left:8px;

}

</style>

---

I also fixed the height of the .menubg to match the size of the banner

<style>

.menubg
{

height: 143px;

}

</style>

---

All together the CSS looks something like this (I also added background colour, to match the main background):


<style>

.menubg
{background-image: url(http://img.photobucket.com/albums/v283/dudleythoth/ocgfx2/oc2bgif.gif);
background-repeat: no-repeat;
background-color:#ffd97d;
text-align: left;
padding-top:5px;
padding-bottom:123px;
padding-left:8px;
height: 143px;
}


.welcomebg
{
background-color:#ffd97d;
padding-top:0px;
padding-bottom:0px;
}


</style>

Hope that'll be helpful to you, [ChantreyaNicole] ;D. For the menu buttons, I added them the usual way in Customize images. Have a play around with it, and if you have any problems, let me know

[Chantreya [Chani]]

Thanks much, Matty! I'll see what I can do. It looks pretty simple with your breakdown of it, and I'll do my best to figure out any problems I come across myself so I'll get more experience and not have to bother you so much. =) Thanks for your time, I really appreciate it! *gets to work*