Code Party 04 Takes Place Here

Message 515 of 1157

CodeParty 04
Official Start Time: About 8:00 am Central Time
Friday, April 17
Click on This Thread to Join In!

I'm posting this tonight so that any "early birds" can get started whenever they are ready!

We're adding a little something new. You'll be more than welcome to give suggestions about how what we are learning can be used on our Eon's profile page, group stickies, PM's, message posts and even web sites. If you've used some code, feel free to post a link to your Eons profile page or Group home page to show us or you can just tell us how you used it.

Here's a link to the outline - view link - no particular order. A few basic codes will be added before morning. Here's a link to the basic CSS font styles file, too: view link

Feel free to play with any code from past parties - view link - any other posts or bring your own code! As we make changes in the code, we'll learn more about how the CSS styles and HTML tags work! Also, feel free to use the converter view link so you can show people the code you used or tell them what you changed. Don't worry if you don't know how to do this, we can use "view source" to learn your secrets!

If your new to this, don't hesitate to ask for help at any time. That's what we're here for! I'll be around about 8:00 central time, but feel free to start any time you want! Have Fun!

posted by Mimi58

97 Replies

1 2 ... 10 Next »

Good Morning!

Here are links to the code we may play with. Both have the same information, but if you can't open one, perhaps you can open the other:
view link
http://ccs.110mb.com/eons/copar/copar4a. html

Scratch Number 2 from the list. It doesn't work anymore on Eons. It will be easier to copy the basic code from the file. This is number 3

What Can You Do!
Then you could regular text. You could use this idea to "jazz" up a
blog. You could put this in a widget box. You could use it in a message
post or PM. You could have a poem in it. You could have a picture and
then some text. You could do all kinds of things! You could also have
the title in the box with a background and have the writing underneath
outside of a box.

<div style="width:480px; padding: 10px; color: #000033; border: 10px double; border-color: #000033; background-image: url(http://www.eons.com/images/members/ 2009/4/13/9/9/99608693219410518187.jpg); "><span style="display: block; text-align: center; font-weight: bold; font-style: italic; font-size: 20px;">YOUR TITLE</span><br />YOUR WORDS <br /><br /><br /></div></div>

Let's start with this code and see what we can do. Those of you that are new, don't hesitate to ask questions! You can start with changing the colors and/or text.

posted by Mimi58
9 months ago

Nothing happens when I click on this view link.

Here's a link to the outline - view link - no particular order

posted by Rich702
9 months ago

Ooops you beat me to it Mimi :)

posted by Rich702
9 months ago

YOUR TITLE
YOUR TEXT

<div style="width:480px; padding: 10px; color: #FFFFCC; border: 10px double; border-color: #FFFFCC; background-image: url(http://www.eons.com/images/members/ 2008/11/23/8/8/88389472213050518187.jpg) ; "><span style="display: block; text-align: center; font-weight: bold; font-style: italic; font-size: 20px;">YOUR TITLE</span><br />YOUR TEXT <br /><br /><br /></div></div>

I changed the URL for the background image to a darker background. The changed #000033 in two places to #FFFFCC. You could use words for the colors rather than the hex numbers. You can use the links to the color charts to get different colors.

The links to the outline again. Hopefully one will work, LOL:

view link ccs.110mb.com/eons/copar/copar4.xhtml
view link ccs.110mb.com/eons/copar/copar4a.html

posted by Mimi58
9 months ago

YOUR TITLE
YOUR WORDS

I copied the code from the file for #3 and then changed width:480px to width:520px
I changed the border from double to dotted

<div style="width:520px; padding: 10px; color: #000033; border: 10px dotted; border-color: #000033; background-image: url(http://www.eons.com/images/members/ 2009/4/13/9/9/99608693219410518187.jpg); "><span style="display: block; text-align: center; font-weight: bold; font-style: italic; font-size: 20px;">YOUR TITLE</span><br />YOUR WORDS <br /><br /><br /></div></div>

For those of you new to this, just copy the code and then make a few changes and see what you get.

posted by Mimi58
9 months ago

YOUR TITLE
I copied the original code, the changed
the width for 480px to - width:520px
the border style from double to dotted
the border size from 10px to 5px

Be sure not to have a space between the number and the px

And I put this explanation in place of YOUR WORDS

This also illustrates how the box get taller as you add more words. You don't have to set a height.

You could use something like this for a blog or a sticky announcement. How else could you use a big box with a border?

<div style="width:520px; padding: 10px; color: #000033; border: 5px dotted; border-color: #000033; background-image: url(http://www.eons.com/images/members/ 2009/4/13/9/9/99608693219410518187.jpg); "><span style="display: block; text-align: center; font-weight: bold; font-style: italic; font-size: 20px;">YOUR TITLE</span><br />YOUR WORDS <br /><br /><br /></div></div>

posted by Mimi58
9 months ago

For those of you who are new to this. Here are the things in this code that you can change easily.

width:520px;
padding: 10px;
color: #000033;
border: 5px dotted; border-color: #000033;
background-image: url(http://www.eons.com/images/members/ 2009/4/13/9/9/99608693219410518187.jpg);
text-align: center;
font-weight: bold;
font-style: italic;
font-size: 20px;

We'll take a few at a time.

width:520px;
You can change the number. Just be sure there is no space between the number and the letter px. Keep the bumped up together. If you are wanting to use this in a certain place on your profile, you can look at the maximum width file to see the limits - view link ccs.110mb.com/eons/MaxWidthsResizing. html

padding: 10px;
This sets the space between the writing and the border. You could have more padding or less. Depending upon what you want. You could also have separate padding sizes for each side or for two of the sides.

padding: 5px 15px;
OR
padding: 5px 10px 20px 30px;

This might be fun to play with!

posted by Mimi58
9 months ago

This is the list again of what you can change. You don't have to change everything. You can also look for these in other code.

width:520px;
padding: 10px;
color: #000033;
border: 5px dotted; border-color: #000033;
background-image: url(http://www.eons.com/images/members/ 2009/4/13/9/9/99608693219410518187.jpg);
text-align: center;
font-weight: bold;
font-style: italic;
font-size: 20px;

Now some more from the list.

color: #000033;
border: 5px dotted; border-color: #000033;

Notice that #000033 shows up in two places. The first one will affect the color of the text. The second one affects the color of the border.

You can use hex colors - those are the ones with the # symbol in front. Generally they are 6 digits, but they can be 3 digits.

One of the color charts that I like to use (Thank you HJ for the link) is view link owens4.com/colors.html It gives the common names of the colors. It also gives the Hex value. When you click on a color in the chart, it makes the background that color so you can see what the other colors look like with that color background.

posted by Mimi58
9 months ago

Good Morning
Better late than never! How do we find the background images?

posted by trish0653
9 months ago

I have a quote in the left column on my profile page: "We cannot all do great things, but we can do small things with great love."
~Mother Theresa

I could put that in a box with a border - which I plan to do when I find some time and the right background, LOL

"We cannot all do great things, but we can do small things with great love."
Mother Theresa

For this, I put the quote in the title and "Mother Theresa" in replace of YOUR WORDS
I also changed width:480px to width:210px
That's the maximum width for the left hand column
I also changed the font-size: 20px of the title to font-size:14px;
I also removed some line breaks at the bottom. Line breaks are the br's with less than and greater than symbols.

<div style="width:210px; padding: 10px; color: #000033; border: 10px double; border-color: #000033; background-image: url(http://www.eons.com/images/members/ 2009/4/13/9/9/99608693219410518187.jpg); "><span style="display: block; text-align: center; font-weight: bold; font-style: italic; font-size: 14px;">"We cannot all do great things, but we can do small things with great love."</span><br />Mother Theresa<br /></div></div>

posted by Mimi58
9 months ago

97 Replies

1 2 ... 10 Next »