Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 13 Apr 2010, 14:54
puddlove puddlove is offline
 
Join Date: Dec 2009
Fluid Rounded Corners and Borders

(Yes I've searched but the results weren't quite helpful enough alone so excuse me if it looks like I am beating a dead horse. Just need some help/advice ).

I've creating a new skin for my vBulletin and want the .tcat class (the thing used for category gradients, at the top of forums and threads etc.) to have rounded corners on both sides. The skin is going to be fluid width, which is no biggie. I created background images for the left and right hand side and then created new classes e.g. category_left, category_right, setting the width/height and rounded corner background images. Added the new classes where I wanted rounded corners. This works fine and works no matter what size resolution/screen you're viewing on which is what I wanted however, this was without table borders. I want to add a table border however when I do the table border goes around the .tcat class too and my category headers meaning I get a border around my rounded corners. Not very flattering at all Settings the class borders to 0/none does nothing as I am talking about the main table outside borders (not the internal borders).

How can I overcome this fairly easily? I don't mind playing around a bit, but I know from other sites there IS a way to get fluid rounded corners and borders without having them interfere... I just don't know how to do it yet.

Any and all help appreciated, thanks guys
Reply With Quote
  #2  
Old 13 Apr 2010, 20:56
MathewC MathewC is offline
 
Join Date: Nov 2006
Do you mean something like www.28forums.com have? or like vBulletin 4.0?
Reply With Quote
  #3  
Old 13 Apr 2010, 21:46
puddlove puddlove is offline
 
Join Date: Dec 2009
Originally Posted by DeadGeek View Post
Do you mean something like www.28forums.com have? or like vBulletin 4.0?
Similar to the link you posted, yeah. See my attachment for an example (with the ugly border included!)

I guess I know a few ways to do this all myself, actually - but I don't wanna waste my time doing them the "wrong" way or finding out I could have done it way easier. I am looking for the easiest/quickest, most reliable (works on all major browsers) way of doing things!

Thanks for the reply.
Attached Images
File Type: jpg rounded_corners.jpg (11.7 KB, 43 views)
Reply With Quote
  #4  
Old 14 Apr 2010, 05:18
vijayninel's Avatar
vijayninel vijayninel is offline
 
Join Date: Mar 2009
Real name: Vijay
I had exactly the same problem a few days back...now i cant member how I solved it but I did. I think it was by deleting some border setting in the forumhome templates.

Let me check it up and get back to you.
Reply With Quote
  #5  
Old 14 Apr 2010, 05:26
puddlove puddlove is offline
 
Join Date: Dec 2009
Originally Posted by vijayninel View Post
I had exactly the same problem a few days back...now i cant member how I solved it but I did. I think it was by deleting some border setting in the forumhome templates.

Let me check it up and get back to you.
That would be very much appreciated, thank you
Reply With Quote
  #6  
Old 14 Apr 2010, 11:26
NoKSouLz NoKSouLz is offline
 
Join Date: Feb 2008
If your using IE then fluid rounded corners/borders dont really work.

There is a piece of code which can be added into css to round corners but only works with updated browsers such as FF, GoogleCrome, Safari
__________________

GoWForum
GowForum | Home of the European Gears of War
Send PM
Reply With Quote
  #7  
Old 14 Apr 2010, 11:43
vijayninel's Avatar
vijayninel vijayninel is offline
 
Join Date: Mar 2009
Real name: Vijay
Originally Posted by NoKSouLz View Post
If your using IE then fluid rounded corners/borders dont really work.

There is a piece of code which can be added into css to round corners but only works with updated browsers such as FF, GoogleCrome, Safari
He is not using CSS ... he is using images/plain old HTML. those work on every browser unlike CSS.

He is making this for vb3 not vb4.
Reply With Quote
  #8  
Old 14 Apr 2010, 12:28
NoKSouLz NoKSouLz is offline
 
Join Date: Feb 2008
Originally Posted by vijayninel View Post
He is not using CSS ... he is using images/plain old HTML. those work on every browser unlike CSS.

He is making this for vb3 not vb4.
ah fair enough..

what seems to be the problem?
__________________

GoWForum
GowForum | Home of the European Gears of War
Send PM
Reply With Quote
  #9  
Old 17 Apr 2010, 08:29
rockinaway rockinaway is offline
 
Join Date: Jun 2005
Have you tried NiftyCorners. CSS is used, but I am sure there will be a work around.
__________________
AdminFuel - Discussion and Resources for Forum Admins
Reply With Quote
  #10  
Old 17 Apr 2010, 16:21
metalguy639 metalguy639 is offline
 
Join Date: Jan 2009
You will have to take out the tborder part in your template code most likely. The easiest way to do this if you are using vb 3.8 or anything that is not 4.0 is to make the images that you want to use in photoshop, gimp, or whatever program you use to make images. Then you will need to splice it and then add it to 2 different templates and change some code in those templates for it to look right. You will need to know and understand html & css and be able to splice an image into 3 pieces. I can give you an example of what I did on my site.

1. Make your image for your category top in photoshop, gimp or whatever you use. It should be something similar to this:



This is a skin that I will be releasing soon to the public. So you want to either make something like that or you could something like this:

This is actual rounded corners I did some time ago.

Once you make your image and unless you are making it into a png I suggest that you pout a background color that is the same color as the background that the image will be on. You can see evidence of that in both pics above. Its easier and looks neater in the long run.

2. Now splice the image into 3 parts. A left side, right side & a middle part. Name them cat_left.gif, cat_right.gif, & cat_bg.gif.

3. Now you will need to change/add some code to your templates with this category image and you'll need to add it as a table to your templates. If you want tableless then you will have to look that up somewhere, but this will at least give you an idea of where & what to edit.

4. Login to your admincp and scroll down and find "Styles & Templates" Make sure that you expand the menu and look for "Style Manager" underneath the Styles & Templates. Click on the "Style Manager" link to open up your styles.

5. Find the style you want to edit in the list and the click on the drop down menu on the far right side and choose "Edit Templates".

6. Now click the <<>> button on the right side to expand the templates and then scroll down and find the FORUMHOME template. Double click to open it.

7. FIND:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

AND DELETE IT FROM THE TEMPLATE.

8. NOW FIND:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

AND REPLACE WITH:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

NOTE: If you still want to be able to mark the forum as read & have the view forum leaders at the bottom you can leave this code in and it would look like this instead:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

9. NOW FIND:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

AND REPLACE WITH:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Be sure to replace the path/to/your/category background image/here with the path and your cat image names. If its the right image then the code before or after it will say align="right" if its the left cat it will say align="left".

10. Now Save the template.

11. Now open the forumhome_forumbit_level1_nopost template.

12. Highlight it all and delete it. Replace it all with this:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Note that you will need to replace the path/to/your/cat image/here with the path to your images. You will also need to adjust the color in the css as well as the sizes of the images. (width & height)

SAVE THE TEMPLATE.

You are done and now you have category tops & the forums are separated from each other.
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 10:50.

Layout Options | Width: Wide Color: