Editing the "Summary tables" or Gram Boxes that fall under home perspectives:

Author: * Laurels Curius - 52 Posts on this thread out of 2,713 Posts sitewide.
Date: Jun 6, 2005 - 17:46

Changing the appearance of the 'summary boxes'

Also known as summary tables, gram boxes and "those thingies under our perspectives". According to the css class assigned to this area, I usually call them "gram boxes". (AW's css class for it is .gram) There are quite a few neat tricks we can make them do, and folks will probably figure out more as time goes by.

The short answer for what this does and how it works; AW code includes a huge list of formatted style using CSS and specifically by assigning each doo-dad a css 'class'. It then instructs that class to appear a particular way. When you alter your gram boxes using the various code examples below, you are telling it to appear a different way. Because your CSS code is the 'last word' so to speak, it follows your instructions instead. That's why they call it cascading style sheets. Unless an !important is stuck after one of the styles, the last word always prevails. (read more about that here: 06-Style Precedence) This may be the only time in your life you are guaranteed the last word.

As with all CSS, these classes and the styles and attributes assigned to them need to be encased in the following code:

All of your overall page css can go in there, not just one thing at a time. Though that works too oddly enough. To learn more about CSS and even how to create and write your own, visit Arachne's Web Tutorials: CSS in our Academy. An entire series of great tutorials awaits you! Anyway, on with the show..

Here is a screenshot of the gram boxes altered by most of the options I'll be discussing:

The basic empty code we'll be using, the edit_me's will be what your going to edit and change to suit your design ideas:

Open up either Notepad (basic text editor installed on pretty much every pc) or an html editor, copy the above code and paste in. Editing anything inside that microscopic edit area in homes causes uncontrollable bouts of cursing. Follow along the edit_me list below, changing yours to suit your style with your choice of colors, background image url's, etc.

edit_me1 ~Replace the edit_me1 text with an image url. This is how I got my gram box to have the dark blue swirly background in example above. Note that the url(""); stays just like it is, I know that looks like something you are supposed to delete, but it isn't. And don't feel bad for thinking that, I had to look this up 86 times before I 'got' that. As with the rest of the edit_me's, the only thing you delete is the actual edit_me1-5 itself, and put in your stuff there. In this case, you are putting in the url to your chosen background image. To get the url of an image, go to your image gallery, click on image so that it's opened up full size, then right click over it. A dialogue box should appear with a list of stuff. One of them is "URL" copy the url and paste it in between the "quotes". Note that if it is an AW image, you can omit the first http://www.ancientworlds.net bit, and only include the /aworlds_media/ibase_1/00/04/33/8digits_000.gif. Keeps the code a bit shorter, that's the only purpose that serves. But I use it. Before I head on to edit_me2, I want to note that there is a way to achieve a bordered effect using an image in your gram boxes. It's by fixing the width and height of the boxes and creating a correctly sized image to suit. Details can be found at the end of this post in 'options'.

edit_me2 ~Replace the edit_me2 text with either a color number, or a color name. (Find a list of websafe colors here: Sankhkare's Color Chart) Even if you are using a background image, you should fill in this area as well. While folks are waiting for your background to load, it's very weird to have a dark blue background show up eventually when screaming monkey-piss yellow was there for 2 minutes before. Also, you can omit the background-image or just leave the url area blank, and only have a solid color in there, which looks very fine I think. Several homes have this, one simple and elegant one is Hapshetsut's per.

(the rest of the edit me's are for borders and border styles, if you wish your gram boxes to be the default border, just delete the edit me's and leave them blank)

edit_me3 ~Replace edit_me3 with a border width in pixels (so it should look like border-width: 00px; ) You can set four different ones here if you wish. Like border-width: 3px 1px 3px 1px; will give you a 3 pixel border on top and bottom, and a one pixel border on both sides.

edit_me4 ~Replace edit_me4 with your chosen border style. For a list of current borders styles applicable under CSS2 along with examples, see; Borders and borders yet to come. Note the option contained within that you can vary the border styles just as you can vary border-width discussed above. Example would be: border-style: solid dotted solid dotted; that would give you a solid border on top and bottom, and dotted border on the sides.

edit_me5 ~Just as we did with background-color, replace edit_me5 with a chosen hex (numerical) color or a color name. Like border-style and border-width, even this can be varied. Example would be: border-color: #ffffff #000000 #ffffff #000000; or even using color names like: border-color: white black white black; . That would give you white on top and bottom and black on the sides. Like a tuxedo. Or a penguin?

Extra glop:

Border Options ~ Border images will be an available option in CSS3, but meanwhile there is no way to assign an image url to the border of your gram boxes. However, there is an alternative method. If you assign a fixed width and height for those gram boxes, and create an image with a border around it that exact size, you can place that image url into the background-image url area. (explained up there under edit_me1) Because the three boxes are normally in different sizes, this will probably extend their overall width a bit, but the final effect looks really groovy I think. A great example of this is in Sankira's Bei Shu (er, home). Check it out:

An example of how Sank created that follows:

.gram {background-image: url("his border image url"); width:125px; height:195px; border-style: none; padding: 15px;}

Note the padding added. This way, the text won't butt up against the edges and overlap the border image he created. Very clever huh?

Altering gram box text and text color ~ You may note that when you use all the CSS styles for .gram above, your gram boxes still don't look the same as that first example. It's probably the text! By default, your font will be whatever default lousy aw font is used there *L* , and the info numbers like how many grams, messages, even posts below the boxes will be in hooker-dress red. Here's an example of what mine looks like without any fancy shmansy color or font adjustments:

To get control over the font families and colors in your gram boxes, add both the following classes and attached values, editing the bits in bold to reflect your own styles and colors.

.community,div,table { font: editpx edit,arial,helvetica; color: #edit }

.dynam,.dynamicnum {color: #8470ff}

Just so's you know, the dynam,dynamicnum alters the numbers that show up in red otherwise, and the community,div,table change the font itself. This will also change the font that shows up in most of your homesite keep in mind, so don't make it too squirrely so folks can read it. And I do reccommend keeping the arial,helvetica or arial,sans-serif so that if folks don't have your chosen font installed on their system, they can still view something.

Lastly, this is the complete code I use to change all the bits I choose to in my gram box so that it looks like the first example up top: