Hey everyone,
I do alot of developing over on yabbforum but this is actually my first released mod. What I thought of when I first began creating this was "Why do rounded corners have to be so difficult?". I dont know if many of you have tried, but I have, and it was a pain! My mod for a very rounded forum came out to be 120+ steps! So basically, what I tried to do is minimize the coding for making such adjustments in one easy to edit area and allow for extensive customization.
Now comes the Table Wrapper. In a sense, this "wraps" any element, object, section of a webpage in a "wrap" that can style anything around it. For instance, if you wanted rounded borders around a category you could just put in a reference in the .template file that would instantly make all categories have a frame around them with smooth blended corners. Except...You would have to make this in html, code CSS, and put it into the template file!
The Table Wrapper makes an easy admin interface where you can create an infinite amount of wraps and name each. Each wrap has an editable code bit that will be placed above and one below an object that you want to wrap. So you can make the top half the upper portion of a table with 3 cells (one left corner, one middle area, and one right corner) then a new row with an unclosed cell that spans 3 columns. The bottom could be the closing of the above cell and 3 more cells in another row for a bottom left, middle, and right cell. The content (what you wrap) would be placed inside that center table cell and effectively be wrapped. The admin interface also gives access to the TableWrap.css which is where you should store any CSS stylings that you apply to ALL the wraps you make. So remember, wraps are all individual with their own HTML, the CSS applies to all of these.
Here is a view of the admin center interface. The only "option" available is whether to turn the feature on and off.
Under "Edit Template Wraps" you can create a new wrap with whatever name you wish. This will add it to the dropdown menu below. Next, to make code that will be placed above a wrapped object, type in the upper textarea. CONTENT between the two represents the content to which you will be wrapping. The lower text area is where you should put code that will display beneath a wrapped object, and of course either is optional.
On the right you will notice the CSS editor. The CSS for the wraps is stored separately from the rest of the .css files, and is editable here for less switching back and forth between pages. However, this css is editable with the styles editor if you switch to source view and use the dropdown box. This one CSS stylesheet will be applied to all of your wraps. So if you have multiple wraps with different CSS styles, they still all go in one file.
You can switch between wraps and create new wraps as well as delete them without ever actually editing a file. Everything is stored locally until you hit save. So nothing you do will effect how the site looks as you are doing it until you hit save. So if you do accidently delete something, just hit refresh. (although this will lose any other changes you have made since opening the page).
I have provided two default wraps and a CSS stylesheet with the MOD. The first wrap is a simple all around wrap with four rounded corners. The second is a top and bottom only wrap with four rounded corners. They are dark blue to demonstrate on my own forum at:
calvars.elementfx.com/yabb2/YaBB.plThe wrap on the categories is "default" and the wrap on the info center blocks is called "sides".
Of course, you will have to change the image links and colors in the stylesheet if you want them to look different. Or of course, make your own.
You can see in the default wrap that the upper text area ends with a <td> tag that is not closed. This is because the CONTENT (the object you wrap) will be placed inside this cell, as it is closed </td> in the lower textarea. Basically, with two different sections placed on either side it leads to unlimited customization.
Last, you may be wondering "How do I actually wrap something?". Its easy! In the .template files or .pl files if need be, all you have to do is type {tablewrap NAME} above the content to wrap and {tablewrapend NAME} below the content. NAME should be the name of whichever wrap you wish to use at that location. Pretty simple!
Last but not least, pictures of the interface and results:
http://www.calvars.com/gac/images/tablewrap1.gifhttp://www.calvars.com/gac/images/tablewrap2.gifThe .zip file includes:
TableWrap.MOD - apply to clean forum (will work with most mods, very few actual code changes).
TableWrap.pl - Upload ASCII to Admin/
tablewrap.txt - Upload ASCII to Variables/
tablewrap.css - Upload ASCII to yabbfiles/Templates/Forum
TableWrap.lng - Upload ASCII to Language/English
This was designed on a 2.3.1 CVS forum, however so few actual code changes are made that it shold work on 2.3. Please let me know.
Suggestions are welcome, bugs are welcome, and enjoy!
Pages: 1