Announcement

Collapse
No announcement yet.

Rounded corners, how?

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

  • slappy
    replied
    Here is some additional information I posted over on vBulletin.org:

    CSS Design: Creating Custom Corners & Borders Part II

    http://www.alistapart.com/articles/customcorners2

    Bullet-Proof Rounded Corners

    http://www.albin.net/CSS/roundedCorners/

    This last one uses a javascript which is downloadable here:

    http://seky.nahory.net/soubory/0504-...ded-corners.js

    This last one is a javascript to produce rounded corners to elements where you want to have the rounded corners. You open the rounded-corners.js file copy and saved that then uploaded the javascript to your server, generally to your /clientscript folder. Then you add to the appropriate template: "<script src="rounded-corners.js>" and "Add the rounded class to all elements, that should have the rounded corners.

    a simple fa├žade added:

    Look in your templates and find elements that ought to be rounded, and add the following inside the corresponding HTML tags:


    HTML Code:
    class="rounded-corners" This is what calls the CSS for the correct style settings with the javacode in the download.

    You can find additional information on vBulletin.org by using the Search button there and entering: rounded corners

    Regards,

    Leave a comment:


  • dojo
    replied
    I have searched previously, this is how I got to this thread

    http://www.webcredible.co.uk/user-fr...rs-boxes.shtml
    does't work.

    I didn't make myself clear unfortunately and I apologise. I need a tutorial for VB not "normal" sites. I can "fool" the template system with the rounded corners IF i knew where to put that code.

    I tried what was said in here, and didn't get to anything. My page is already modified since I try to put a photoshop made design into it. But I don't know what template bits to modify (tried the header - footer thing, doesn't work). I need to have this made on the index page (and have the main categories separated (not "glued" as in the default style) and also put a rounded table instead of the "normal" squared corner one. And I have searched the web and even tried modifying the theme as the admin panel lets me, but with no avail. And that means almost 5 hours of doing nothing. I am not used to not be able to solve such things, that would explain my "grumpy" attitude. I just wished there was a simpler way

    Leave a comment:


  • slappy
    replied
    This is from a post I previously made, which you would have found if you used the Search Button.

    You might want to check this document out. It's titled:

    Rounded Corners without Images: A Nifty Corners Inspiration

    It's found here and it will teach you "a method of creating rounded corners of an element without using images, just with a piece of JavaScript and few drops of CSS." It provides the technique and the javacode to do this.

    http://seky.nahory.net/2005/04/rounded-corners/

    Here's a discussion of Rounded Corners using images and CSS.

    http://kalsey.com/2003/07/rounded_corners_in_css/

    Here's another title: CSS and round corners: Boxes with curves

    http://www.webcredible.co.uk/user-fr...rs-boxes.shtml

    Here's another titled: Nifty Corners: rounded corners without images

    http://www.html.it/articoli/nifty/index.html

    This artiles links earlier articles by the author with yet more code and samples.

    Much to be found on this subject with some basic searching on the web.

    Regards,

    Leave a comment:


  • dojo
    replied
    Is there any chance to get the template pages to be downloaded on the PC? I worked for 3 hours already and cannot make those round corners. Not to mention I cannot export the CSS so that I can make the changes, I have to reload that page in the admin panel for 10 times to make some changes.

    One link to the tutorials is not working and there seems to not be a chance to make those borders. Should you be able to offer me some more direction to decent tutorials that could cover this, I thank you in advance.

    Leave a comment:


  • Loki
    replied
    thank you!!

    Leave a comment:


  • Steve Machol
    replied
    Admin CP -> Templates -> Edit -> Expand List -> Header, then Footer

    Leave a comment:


  • Loki
    replied
    ok dumb question. I see that you said to enter that code in the header and footer template. but where is that? I have created the .gifs already just cant find what to edit.

    Leave a comment:


  • Steve Machol
    replied
    As I said, you need to make your own corner gifs. And you can learn how to do this by clicking on thewitt's link.

    Leave a comment:


  • Kreker
    replied
    it can't find the image

    I have to make and upload'?

    Leave a comment:


  • Kreker
    replied
    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.

    Leave a comment:


  • Steve Machol
    replied
    There's no such thing as a 'blank' corner. To make your own, click on the link in thewitt's message above.

    Leave a comment:


  • Kreker
    replied
    I haven't it and I don't say how to made they

    I need the blank corner

    Leave a comment:


  • Steve Machol
    replied
    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.

    Leave a comment:


  • Kreker
    replied
    can some one post the 4 gif corner?
    thanks!

    Leave a comment:


  • Thomas P
    replied
    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

    Leave a comment:

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