The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Optimizing my forum to the next level :)

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Optimizing my forum to the next level :)

Post by TR on January 3rd 2010, 4:58 pm

Greetings,
I own the forum TRForums.com. I'm happy with our development, art, and layout- But I'd like to optimize it and launch some new features into the skin. Generally, I'd like to upgrade it so it looks better.

I don't have alot of experience with CSS, so I was wondering if someone could help me out with implementing some effects from other forums. I'm thinking of switching to PunBB, but I'd like to have the rounded corner effects that this forum has for categories. Would that be possible?

In addition, I was wondering if the navigation/searchbar on this forum like this. Would it be possible to implement something like that?

And finally, I'd like to optimize my forum a little more so the Banner doesn't overlap the page when the window size decreases, as well as Avatars as so forth.

=I own the whole Adobe Creative Suite CS3, have alot of Design Experience in Photoshop, and a sbscription to Lynda-So I defiantly have any needed resources. Any help would be appreciated; Thankyou!
-TR

TR
Forumember

Posts : 399
Reputation : 0
Language : English, Gamer

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by TR on January 4th 2010, 4:49 am

^Up

TR
Forumember

Posts : 399
Reputation : 0
Language : English, Gamer

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by TR on January 5th 2010, 6:23 am

Up.
Can anyone shine some light on this? Even suggestions on a single question would be a great help.

TR
Forumember

Posts : 399
Reputation : 0
Language : English, Gamer

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by ankillien on January 5th 2010, 12:07 pm

Hello,

Upgrading to punBB would be a good option. It will allow you to modify you templates too. You can have rounded corners on your forum Very Happy and also navigation bar like that forum.

You can choose a good looking theme from hitskin.com. You don't need to create a skin at your own. You can always add CSS modifications to your forum.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by TR on January 5th 2010, 5:06 pm

Hey Ank,
I saw the forum you Posted and I loved how all of the designs flowed. I was wondering if you knew the CSS Code for the banner? It seems like they have their image banner, and behind it a tiling/repeating black version of it so it stretches all across the screen.

Also, how did they hide the FM Footer?

All the best,
-TR

TR
Forumember

Posts : 399
Reputation : 0
Language : English, Gamer

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by ankillien on January 6th 2010, 7:26 am

The have a simple image banner. No special style is applied to it.
You can create your banned and upload it via pics management in admin panel.
TO put background on the forum body you can use CSS code...

Code:
body {
background : url(IMAGE URL HERE) repear;
}

Hiding the footer is not appreciated by Forumotion. If you try to hide the footer links, your forum can get deleted.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by TR on January 6th 2010, 2:54 pm

Yes, but as you can see they have their banner, and then some kind of tiling boarder around it. Is it really just an image banner? It seems like it wouldn't fit for everyone if that was true.



(Forummotion does the same thing with their banner as well)

TR
Forumember

Posts : 399
Reputation : 0
Language : English, Gamer

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by ankillien on January 6th 2010, 5:53 pm

Oh yes!

They have a banner images as well as a background there.
If you want to do like that, I can help you. I need to know what version you are using.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by TR on January 6th 2010, 6:00 pm

Thats exactly what a want, so the banner looks like a more proffesional header.
I'm switching to PunBB soon, so if you could show me how to do it on that. Very Happy

TR
Forumember

Posts : 399
Reputation : 0
Language : English, Gamer

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by ankillien on January 6th 2010, 6:09 pm

Ok, you need to add this code to your CSS...

Code:
#pun-intro {
background : url(BACKGROUND IMAGE URL HERE) repeat-x;
}

It will add a background to your logo. After that you can add a logo images from Admin CP > Display > Pics Management Very Happy

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by TR on January 6th 2010, 7:00 pm

Thanks, I set up a test forum and applied it with a random dog image, and it seemed to work- But if you notice on Vaatyrium, the banner (Or banner background, rather.) stretches accross the whole screen- While the one of my test forum is constrained to the forums width. How do I fix this? In addition, I'm facing the same problem when the banner is overlapping and off-center. How does Vaatyrium make theirs so clean?

(Test forum)

TR
Forumember

Posts : 399
Reputation : 0
Language : English, Gamer

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by ankillien on January 7th 2010, 4:02 am

Hmmm..

To m ake it like that you need to increase your forum width.
This code will do it...

Code:
.pun{
width : 100%;
}

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by TR on January 7th 2010, 4:34 am

Hmm.... but now all of the tables and everything is at 100%. Vaatyrium seems to have the banner at 100% and the actual forum width at a lower percentage. How are they achieving this affect?

TR
Forumember

Posts : 399
Reputation : 0
Language : English, Gamer

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by BrickMaster on January 7th 2010, 6:10 am

I found out what they did, the banner is actually the same size as the forum width. They just cleverly made it look like it is wider than the forum by carefully planning their background.

BrickMaster
Forumember

Male Posts : 253
Reputation : 0
Language : English, CSS, HTML

http://www.brick-builder.com

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by ankillien on January 7th 2010, 1:07 pm

@TR wrote:Hmm.... but now all of the tables and everything is at 100%. Vaatyrium seems to have the banner at 100% and the actual forum width at a lower percentage. How are they achieving this affect?

On Vaatyrium, they don't have a separate background for banner. They have same background that also covers banner.

This is the background they are using...
http://img401.imageshack.us/img401/1797/lastbacking.png

Thats actually a body background not a banner background.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by TR on January 7th 2010, 3:09 pm

Okay, and how are they centering the banner so neatly? I put the background on the test forum to test it out, and the banner is off-center and making the scrolling on it strangely. (And theres some kind of blue background infront of it?)

Test forum

Also- Do you know the required CSS Codes to give PunBB rounded corners? Very Happy

TR
Forumember

Posts : 399
Reputation : 0
Language : English, Gamer

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by ankillien on January 7th 2010, 4:16 pm

Looks like your logo image is too wide.
You should reduce its width first.
To center align it, go to Admin CP > Display > Headers & Navigation > Logo positioning : 'Center'.

And also apply Display Forum Title to 'No' and Save.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by TR on January 7th 2010, 5:32 pm

Applied both of the things, and they didn't seemed to of worked?

http://frogzard.omgforum.net/

Also; Vaatryirum's banner is wider then the mine, so I don't think width is an issue. Is it possible they have a CSS code to embed it or something?

TR
Forumember

Posts : 399
Reputation : 0
Language : English, Gamer

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by ankillien on January 7th 2010, 5:36 pm

Add this code in your CSS and you'll get most of it sorted out...

Code:
#pun-intro {
background : transparent;
}
#pun-intro img {
text-align : center;
width : 750px;
padding-top : 15px;
}

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by TR on January 7th 2010, 5:52 pm

EXCELLENT! Thankyou so much, Ank! :wouhou:
Now I just need to know that rounded corners script and I think I'm good to go. Smile

Also, is there anyway to get rid of the
Logged as Admin. Your last visit was on Thu 7 Jan 2010 - 16:25

Below the header?

TR
Forumember

Posts : 399
Reputation : 0
Language : English, Gamer

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by ankillien on January 7th 2010, 6:12 pm

This code will remove the logged in info under the banner.

Code:
#pun-visit {
display : none;
}

Here is code for rounded corners...

Code:
.main-head {
-moz-border-radius : 10px 10px 0 0;
-webkit-border-radius : 10px 10px 0 0;
}
.main-content , .main-content table tbody tr td {
-moz-border-radius : 0 0 10px 10px;
-webkit-border-radius : 0 0 10px 10px;
}
.main-box , #pun-foot div {
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
}

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by TR on January 7th 2010, 6:23 pm

Thanks! The only problem is that the rounded corners code is only doing it for the greyish white tables. The blue headers are still square?

Test Forum

Also, do you know how to get rid of this little bar under the bottom of the header?


Also, when I tried uploading a banner the size of Vaat's (Just testing it out with their background to see how it worked) it resized it with the code you provided. How do I fix this?

TR
Forumember

Posts : 399
Reputation : 0
Language : English, Gamer

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by ankillien on January 8th 2010, 4:21 am

The banner is too wide for your forum width.
Either you reduce size of the banner or increase width of the forum.

TO avoid resizing the banner you need to remove this line from following code...

#pun-intro img {
text-align : center;
width : 750px;
padding-top : 15px;
}

remove the bold part from your CSS and save.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by TR on January 8th 2010, 5:30 am

Thanks, I've got it worked out for the most part.

Anyway, do you know the rounded corner script and how to get rid of that little bar?

TR
Forumember

Posts : 399
Reputation : 0
Language : English, Gamer

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by ankillien on January 8th 2010, 11:00 am

To remove that bar add this code...

Code:
#pun-navlinks {
display : none;
}

Sorry, I don't understand what blue titles are you talking about.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by TR on January 8th 2010, 3:22 pm

That seems to hide the navbar now, though. Is there any way to make it like Vaat's so there is no blue bar and still the navbar images?

http://www.vaatyrium.net/

TR
Forumember

Posts : 399
Reputation : 0
Language : English, Gamer

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by ankillien on January 8th 2010, 3:43 pm

Here...


Code:
#pun-navlinks {
background : transparent !important;
}

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by TR on January 8th 2010, 4:21 pm

Great, thanks.

Is there any way to bump the Nav images down a bit and get rid of this pesky blue line now? Very Happy


TR
Forumember

Posts : 399
Reputation : 0
Language : English, Gamer

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by ankillien on January 9th 2010, 11:40 am

To move nav bar down...

Code:
#pun-navlinks {
padding-top : 30px;
}

I don't understand why that blue line is appearing.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Re: Optimizing my forum to the next level :)

Post by TR on January 9th 2010, 3:02 pm

Hm, moving down the nav doesn't seem to be working?

Heres my CSS:
#pun-navlinks {
padding-top : 100px;
}

#pun-intro {
background : transparent;
}
#pun-intro img {
text-align : center;
}

.main-head {
-moz-border-radius : 10px 10px 0 0;
-webkit-border-radius : 10px 10px 0 0;
}
.main-content , .main-content table tbody tr td {
-moz-border-radius : 0 0 10px 10px;
-webkit-border-radius : 0 0 10px 10px;
}
.main-box , #pun-foot div {
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
}

#pun-visit {
display : none;
}

#pun-navlinks {
background : transparent !important;
}

TR
Forumember

Posts : 399
Reputation : 0
Language : English, Gamer

Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum