Multiply.Design

Home Notes Blog Photos Video Reviews Links

Group's posts with tag: table

What are tags? You can give your posts a "tag", which is like a keyword. Tags help you find content which has something in common. You can assign as many tags as you wish to each post.
View posts by people in your network with tag table

Changing the table view

Jul 4, '08 12:02 PM
by Missthemed for everyone

The table view
Now I've chosen Skyline here to show how tables can be changed which by default is like this

Now of course some other theme bases are white by default so of course if you have white links everything disappears and the table view just looks horrible

Well don't worry the table view like most other things can be changed
"But how? you say , well quite easily actually
lets start with a border the table I'll change that to orange so you can see it
.tablediv1 {background-color:#FC9A05;}

and then change the main background color , pink as you can see
.tablediv1 tr{background-color:#F305FC;}

then the top part of the table the "header" make that pink as well
.tablediv1 th{background-color:#F305FC;}

That doesn't look very good does it?
needs a font color and a hover color
so make the font color black
.tablediv1 th{
background-color:#F305FC; color:#000;}
and add a hover color
.tablediv1 tr:hover{background-color:#1346A5;}

the hover is blue there it's a bit difficult to show you a hover color on a static image

But wait there's more , you want the text on the table easily read don't you well you need to add this as well
.bodysummary{color:#eee;}
Don't go away yet there is even more available .. no not a set of seak knives but an extra for those of you who have groups try this one on your group
.adminbg{
background-color: #F305FC; color:#F9FC05;}
You might want to change the colors though unless you like pink with yellow text

And even more for those who like more and I know you do, add a background image on hover if you like or background image and plain on hover or even opaque the table image
What you can't do is make tables transparent using this
~~.tablediv1 tr{background-color:transparent;~~
I've crossed it out as it will not work the table will be white (trust me I know it turns white )

Here is the code for the simple table view above , play with this yourself and see what you come up with
/*border*/
.tablediv1 {background-color:#FC9A05;}
/*main*/
.tablediv1 tr{background-color:#F305FC;}
/*top*/
.tablediv1 th{background-color:#F305FC;
color:#000;
}
/*text*/
.bodysummary{
color:#eee;
}
/*hover*/
.tablediv1 th:hover{background-color:#1346A5;
color:#000;
}
.tablediv1 tr:hover{background-color:#1346A5;
}
/*for groups -- admin table view*/
.adminbg{
background-color: #F305FC; color:#F9FC05;
}

This tutorial of course was made up for Skyline, the same code works on almost all the base themes but you may have to add
background-image:none on some bases as they have a background image on table view

Tags: missy a, table, tutorial, tips&tricks

Table Cheats

Mar 26, '08 9:48 AM
by Linda for everyone

Link: http://cedesign.net/tablesj.htm

Premade table codes

Tags: table, dantcer

9 comments share

Generate HTML Tables Clean and Fast

Mar 26, '08 9:25 AM
by Linda for everyone

Link: http://tablegen.nfshost.com/

From Luiz! Thanks for the link !!

Tags: table, dantcer

14 comments share

Groups Customization and HTML table

Mar 3, '08 8:48 AM
by Missy for everyone

Interesting concept

A customized theme on a group page but how you say?
The same way as you put one up on your own page, only you need to be admin of the group.
Only admin can change a groups theme.

Click Customize site, the yellow bar will appear which has Custom CSS and choose a theme (same as your own personal page)
You can put on a group what you put on your own page and vice versa

Now a few hints on placing a Customized theme on your groups page
Firstly most groups don't have a Guestbook (some do and someone else can explain how to put one up on your group) they do of course have replies on Notes and Blogs
These replies need to be easily read, the quotes also need to be read by everyone who uses your group
So say you set up a group for the "older" set of which I'm one then the replies need to be a bit bigger and an easily read color say black on white or as on my own group yellow on brown or black
Same goes for things like links, you are running a group and in a group the members of the group need to be able to find the places to post a new note or read where it says "share" (some of course will never find them no matter how big they are or how much they flash on and off.. its the way some folks are)

Some folks as I said may have trouble finding things so make links or navigation in your group clear ... make things easier for your members .. choose contrasting colours. A group page needs to be set up with the members in mind

Another way to make things easier on your group is to add a search box and a few links to the groups welcome message, now that can get a bit messy and a big long list of links is a bit boring as well and you want your group to be interesting right

Now you've seen Psychotic's post on How To Set Up Private Conversation Blogs
Well you can use that same set of tables to do the same kind of thing I've done here on my group

You want something like that for your own group don't you?
Well here you go this is the code, I've changed it a little so all you need to do is put your groups name in and the other group names in that yours supports
I've left some in for you, the link to Multiply Design has been left in the code
(I've also removed the bananas)

About the Google search you MUST put your group name in the links on it or it wont work, your group must also be search-able by Google (a public group) or the search box again wont work

Don't worry the table won't be brown and yellow links, the text and links will default to your groups colours ( my group has yellow links as default)

<table style="border-collapse: collapse;" id="AutoNumber1" border="1"
bordercolor="#111111" cellspacing="1" width="100%">
<tbody><tr>
 <td colspan="4" width="100%">
 group name supports these 
 groups</td>
</tr>
<tr>

 <td width="25%"><a href="http://usersupport.multiply.com/">
 Multiply User
 Support</a> 
 For User Support</td>
 <td width="25%"><a href="http://CustomizedThemes.multiply.com/">
 Customized
 Themes</a> 
 CSS themes</td>
 <td width="25%"><a href="http://easythemes.multiply.com">Easy Themes</a> 
 No CSS just backgrounds</td>
 <td width="25%">
 <a href="http://multiplydesign.multiply.com/">Multiply Design</a> 
 a place where everyone learns</td>
</tr>
<tr>
 <td width="25%">Another group name here 
 description</td>
 <td width="25%"><a href="http://y360refugees.multiply.com">Yahoo! 360
 Refugees</a> 
 For x 360 Members</td>
 <td width="25%"><a href="http://multiplynewbie.multiply.com">New to Multiply</a> 
 For Newbies</td>
 <td width="25%">Another group name here description</td>
</tr>

<tr>


<td colspan="4" width="100%">
Group Name useful links
 </td>
</tr>
<tr>
 <td width="25%">
 
 <img src="http://images.multiply.com/multiply/icons/clean/16x16/select.png" border="0" height="16" width="16">
 <a target="_blank" href="http://groupname.multiply.com/links/compose">Post a Link
 </a> 
  </td>
 <td width="25%">
 
 <img src="http://images.multiply.com/multiply/icons/clean/16x16/select.png" border="0" height="16" width="16">
 <a target="_blank" href="http://groupname.multiply.com/notes/compose">Post a Note</a> 
  </td>
 <td width="25%">
 
 <img src="http://images.multiply.com/multiply/icons/clean/16x16/select.png" border="0" height="16" width="16">
 <a target="_blank" href="http://groupname.multiply.com/journal/compose">Post a blog
 </a> 
 <a target="_blank" href="http://groupname.multiply.com/journal/compose">(Admin only)</a> 
 </td>
 <td width="25%">
 
 <a target="_blank" href="http://groupname.multiply.com/photos/upload">
 
 <img src="http://images.multiply.com/multiply/icons/clean/16x16/select.png" border="0" height="16" width="16">Post a Photo</a> 
 </td>
</tr>
<tr>

<td colspan="4" width="100%">
Search group name<center>
<form method="get" action="http://www.google.com/search"><input name="ie" value="UTF-8" type="hidden">
<input name="oe" value="UTF-8" type="hidden">
<table style="text-align: center; border-collapse:collapse" bordercolor="#111111" cellpadding="0">
<tbody>
<tr>
<td><a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" alt="Google"
border="0" height="32" width="75"></a></td>
</tr>
<tr>
<td>
<input name="q" size="21" maxlength="255" value="" type="text">
<input name="domains" value="http://yourgroupname.multiply.com"
type="hidden"> 
<input name="sitesearch" value="" type="radio"> web <input name="sitesearch" value="http://yourgroupname.multiply.com/" checked="checked"
type="radio"> yourgroupname 
<input name="btnG" value="Search" type="submit">
</td>
</tr>
</tbody>
</table>
</form>
</center>
</td>
</tr>
</tbody></table>

Of course you can use this same table on your own personal page only remove the use-full links part (post a Note etc.) as only YOU can post those on your own page and yes you can use it for images only or Widgets or thingamabobs what ever you like

Disclaimer: The theme here on Multiply Design is readable, easily navigated, and uses the tricks and tips discussed in the group within. If are looking to revamp your group (or your own page) look to the theme used here. You can learn a lot from what this group has done with its theme.

Tags: html tables, missy a, tips&tricks, group customizing, tools, table, html, navigation, search box, google

8 comments share

Easter Table (4 photos)

Mar 1, '08 3:40 AM
by Psychotic for everyone

Tags: html, backgrounds, table, tips&tricks, tutorial

slideshow share

ONE Code - Multiple Uses! Embedded Backgrounds (Table Code)

Feb 29, '08 1:15 PM
by Linda for everyone

ONE Code - Multiple Uses! Embedded Backgrounds (Table Code)

There is an excellent tutorial with screenshots HERE
that teaches you "How to add a bordered background to your blog using a Table Code". This tutorial will expand on this, providing a more layered and complex look. Don't worry. I'm not going to teach you to "write" the code. I'm just going to give it to you!

Here's a "ready made" code that you yourself can change out the background image property urls for ANY occasion! Once you do it, it's done until you wish to use it or edit it for a different occasion. Or make one for each!

First, CLICK HERE to see how I used mine (text). (Screenshot isn't animated - link will show you it is) Also you can see the actual code in action, bottom of this post.

Now, notice that no matter WHERE you right click on this, on my site, and the example below, you will only see "save background as". Not "save image as". That is because it IS all backgrounds. These backgrounds are layered and embedded, one on top the other.

Look at the code (in notepad) Notice the MULTIPLE places for YOU to put YOUR image property url from your hosted backgrounds. You can notice my repeat pattern and repeat the same way, or differently. It's up to you. (I am leaving my url's so you can post it "as is" by ticking the html box, paste the code, untick the html box, and see exactly what it looks like. Just tick the html box again to make your image url changes. Untick, and place your cursor in the text box to change the text, insert images or use the other blog toolbar options.

For this one there are several different background images used. They are repeated and embedded to get THIS look. You can make yours look any way you wish for any occasion or Holiday and use as many different background images that you want. But for now, (so you have a reference) you may wish to save each of my backgrounds I used for this, to your album, and change out the url's to your urls (in case mine are removed).

Once done, you can change the text area background color, add your OWN text there, an even insert an actual image.

Step by step...

1. Post/Blog
2. Tick the html box
3. Paste code
4. Untick the box

WYSIWYG! What you see is what you get! Put your cursor on the text, back over it and put your own text in. The inner box will expand as you add your text, images, etc. to accomodate.

Tick the box again to change the background image url's or repaste from notepad. (Save as draft as you go along)

Untick the box to add your text and use the blog toolbar to add images, adjust your text etc.

Make your first one, or store this one in a blog, and set it to you only. (You can even back date it to move it further back in your blog and out of your way) Then you have it to go back to whenever you are ready to make your own. You can even attach the text file to the blog as I did here.

Code is attached to this blog! Just right click, "save as" on the attachment and save to your computer. Then try it when you get a chance. I have left MY image urls so you can test the posting in a blog "as is" first. (instead of "image url here" like we normally do)

YOUR TEXT GOES HERE AND THE TEXT BOX WILL EXPAND IN SIZE AS YOU TYPE!

HOW COOL IS THAT?

Attachment: Background table code - xmas.txt

Tags: html, backgrounds, tutorial, tips&tricks, table, dantcer

27 comments share