Announcement

Collapse
No announcement yet.

Rounded corners, how?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Rounded corners, how?

    Hi All

    I`ve seen board with rounded coners on their background, how is this done?

    Kind regards Dean

  • #2
    http://html.tucows.com/designer/tips/roundtables.html
    Tim Hewitt
    myOstrich Internet - Domain Management & Internet Services
    myOstrich Golf - When it comes to golf, we don't have our heads in the sand.

    Comment


    • #3
      Thanks thewitt but looking at the links content and not knowing VB well enough I`ll pass on it.

      Comment


      • #4
        Here's how I did it on my forums. You'll need four gifs for the corners, then add this to your header and footer templates:

        Code:
        Add to header template after: <!-- content table -->
        
        <!-- rounded corners header - works with IE and NS -->
        <table width="{ tablewidth }" border=0 cellpadding=0 cellspacing=0 align="center" bgcolor="{ categorybackcolor }">
            <tr> 
              <td align=LEFT width="1%" nowrap height="20" bgcolor="{ categorybackcolor }"><img src="{ imagesfolder }/corner1.gif" width="20" height="20"></td>
              <td align=Right width="99%" bgcolor="{ categorybackcolor }" valign="top" height="20"><img src="{ imagesfolder }/corner2.gif" width="20" height="20"></td>
            </tr>
          </table>
        <!-- /rounded corners -->
        
        
        Add to footer template after: </table>
        
        <!-- rounded corners footer - works with IE and NS -->
        <table width="{ tablewidth }" border=0 cellpadding=0 cellspacing=0 align="center" bgcolor="{ categorybackcolor }">
            <tr> 
              <td align=LEFT width="1%" nowrap height="20" bgcolor="{ categorybackcolor }"><img src="{ imagesfolder }/corner3.gif" width="21" height="21"></td>
              <td align=Right width="99%" bgcolor="{ categorybackcolor }" valign="top" height="20"><img src="{ imagesfolder }/corner4.gif" width="20" height="20"></td>
            </tr>
          </table>
        <!-- /rounded corners -->
        Be sure to remove the spaces after each { and before each }. I needed to add these for this to display correctly.
        Last edited by Steve Machol; Wed 6 Jun '01, 1:00pm.
        Steve Machol, former vBulletin Customer Support Manager (and NOT retired!)
        Change CKEditor Colors to Match Style (for 4.1.4 and above)

        Steve Machol Photography


        Mankind is the only creature smart enough to know its own history, and dumb enough to ignore it.


        Comment


        • #5
          Steve thanks alot, I`ve sorted it out and I`ve learnt alot too.

          Comment


          • #6
            Here's a good tutorial:

            http://www.webmasterbase.com/article.php/392
            Five Star Review Script - Add reviews to your website!
            Mixed Martial Arts - Houston MMA Training
            Women's Self-Defense - Courses and DVDs available

            Comment


            • #7
              Hi,

              I did it a bit different, in forumhome, forumdisplay_threadslist and showthread added:

              Code:
              <tr>
              <td align="left" width="6"><img src="images/corner_left.gif">
              </td><td bgcolor="#8080A6" width="99%"><img src="images/space.gif" width="1" height="1"></td>
              <td align="right" width="6"><img src="images/corner_right.gif"></td>
              </tr>

              right into the main table before everything else.

              I really like smachol's round tables, but my forum has a transparent table background... http://mcseboard.de

              cu,
              -Tom
              Last edited by Thomas P; Thu 7 Jun '01, 4:49am.
              www.MCSEboard.de
              German Windows Server & IT Pro Community dedicated to Windows Client & Server Systems. MVPs inside

              Comment


              • #8
                Very nice looking forums Thomas!

                One advantage to putting the rounded corners in the header and footer templates is that this look will carry over to every page on the board; search, faq, member list, calendar, user cp, etc.
                Steve Machol, former vBulletin Customer Support Manager (and NOT retired!)
                Change CKEditor Colors to Match Style (for 4.1.4 and above)

                Steve Machol Photography


                Mankind is the only creature smart enough to know its own history, and dumb enough to ignore it.


                Comment


                • #9
                  Just to let everyone know there was a slight problem with the image width and height in my example code. I change these from 21x21 to 20x20 to match the actual size of the gifs I use.
                  Steve Machol, former vBulletin Customer Support Manager (and NOT retired!)
                  Change CKEditor Colors to Match Style (for 4.1.4 and above)

                  Steve Machol Photography


                  Mankind is the only creature smart enough to know its own history, and dumb enough to ignore it.


                  Comment


                  • #10
                    Originally posted by smachol
                    Very nice looking forums Thomas!

                    One advantage to putting the rounded corners in the header and footer templates is that this look will carry over to every page on the board; search, faq, member list, calendar, user cp, etc.
                    Thanks, Steve

                    Yes, you're right, personally I would love to have the ability to change the category strip by tweaking one line of code, which would be used everywhere...
                    Unfortunately there's a cellpadding=4 or so in most of the table headers, so entering a background=xyz.gif looks ugly.

                    cu around,
                    -Tom
                    www.MCSEboard.de
                    German Windows Server & IT Pro Community dedicated to Windows Client & Server Systems. MVPs inside

                    Comment


                    • #11
                      can some one post the 4 gif corner?
                      thanks!

                      Comment


                      • #12
                        Originally posted by Kreker
                        can some one post the 4 gif corner?
                        thanks!
                        What '4 gif corner' are you talking about? Every set is different depending on the colors used.
                        Steve Machol, former vBulletin Customer Support Manager (and NOT retired!)
                        Change CKEditor Colors to Match Style (for 4.1.4 and above)

                        Steve Machol Photography


                        Mankind is the only creature smart enough to know its own history, and dumb enough to ignore it.


                        Comment


                        • #13
                          I haven't it and I don't say how to made they

                          I need the blank corner

                          Comment


                          • #14
                            There's no such thing as a 'blank' corner. To make your own, click on the link in thewitt's message above.
                            Steve Machol, former vBulletin Customer Support Manager (and NOT retired!)
                            Change CKEditor Colors to Match Style (for 4.1.4 and above)

                            Steve Machol Photography


                            Mankind is the only creature smart enough to know its own history, and dumb enough to ignore it.


                            Comment


                            • #15
                              I can't understand, I have to add this in the header and the footer and so......????
                              where are the gir corner1, corner2 etc etc??????


                              Originally posted by smachol
                              Here's how I did it on my forums. You'll need four gifs for the corners, then add this to your header and footer templates:

                              Code:
                              Add to header template after: <!-- content table -->
                              
                              <!-- rounded corners header - works with IE and NS -->
                              <table width="{ tablewidth }" border=0 cellpadding=0 cellspacing=0 align="center" bgcolor="{ categorybackcolor }">
                                  <tr> 
                                    <td align=LEFT width="1%" nowrap height="20" bgcolor="{ categorybackcolor }"><img src="{ imagesfolder }/corner1.gif" width="20" height="20"></td>
                                    <td align=Right width="99%" bgcolor="{ categorybackcolor }" valign="top" height="20"><img src="{ imagesfolder }/corner2.gif" width="20" height="20"></td>
                                  </tr>
                                </table>
                              <!-- /rounded corners -->
                              
                              
                              Add to footer template after: </table>
                              
                              <!-- rounded corners footer - works with IE and NS -->
                              <table width="{ tablewidth }" border=0 cellpadding=0 cellspacing=0 align="center" bgcolor="{ categorybackcolor }">
                                  <tr> 
                                    <td align=LEFT width="1%" nowrap height="20" bgcolor="{ categorybackcolor }"><img src="{ imagesfolder }/corner3.gif" width="21" height="21"></td>
                                    <td align=Right width="99%" bgcolor="{ categorybackcolor }" valign="top" height="20"><img src="{ imagesfolder }/corner4.gif" width="20" height="20"></td>
                                  </tr>
                                </table>
                              <!-- /rounded corners -->
                              Be sure to remove the spaces after each { and before each }. I needed to add these for this to display correctly.

                              Comment

                              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                              Working...
                              X