VoyForums
1 CLICK GIVES FREE FOOD!
www.TheHungerSite.com
Protect Habitat with a Click!
www.TheRainforestSite.com
Non-profit ad served by VoyForums...

Login ] [ Contact Forum Admin ] [ Post a new message ] [ Search | Check update time ]


Wrap-over

for quick reference


Sometimes, when you're using a simple forum;
the Administrator wishes to add a background image.
However: when this background is implemented;
it often interferes with the entire page.
The Text often becomes difficult or impossible to read.
This problem can be solved by adding a temporary Field in the backdrop.
It becomes a partial background within a specific area.
We'll call this a Wrap-Over.

----------------
here's a basic example:

add content or text, here.


.

The best way to demonstrate is through example:

add content or text, here.
IF words and paragraphs are placed within this Text Area; they will always protrude into the foreground.
Your content will take center-stage; while the background remains secondary.
Of course, CSS Buttons, links, and images can also be placed within this wrap-over field.


.

You'll also notice:
the backdrop can be changed to any color desired.
I'm now using background-color #EEE4EF.


.

The Text can also be altered to a color of choice. color #3095ee is a nearly fluorescent blue.
and, the font-size changes the size-of-text


Best of all:
a Transparent background can be chosen! (if desired);
This gives more versatility even when you're working against an average white webpage.

another bonus feature is the ability to make neater & better organized text.

-

and reminded:
this wrap-over method also gives more control over text-sizing.
....using the numbered: PX.
These Wrap-overs can also be used to span the entire Header.
So, if this Text Area consists of 8,000 Character/letters;
I could wrap the whole page.

Here's a simple version of The Wrap-Over method
The following example only uses one basic feature;
(choosing the background color):

Choose background color. add stuff here.


Choose background color. add stuff here.

note: [choose your background-color#]
[replace background-color:#1f2144 with any color of choice]

.

Finally, If you want to shorten the entire diameter;
A Width Option must be added into the code:

The width is now 60% of the screen
Also, each word is sized at 14px (known as 'Font-Size')

.

and, here's an additional novelty (which adds borders and border-radius):

The width is now 60% of the screen
and, a border has been added, which surrounds the entire box.
I've chosen a simple White (#ffffff).
I've also chosen border:2px, ...BUT a thinner 1px is recommended!

Plus, I've also added a slight radius (roundness). (border-radius:15px;)
although it's probably better to keep the original square shape!! (so, omit this feature)


Home page (HTML Tutorial)



Subject Author Date Msgs
One item, or many items can be chosenadmin19:45:20 11/17/15 Tue2


Login ] Create Account Not required to post.
Post a new public message:
* HTML allowed in marked fields.
Message subject (required):

Name (required):

  Expression (Optional mood/title along with your name) Examples: (happy, sad, The Joyful, etc.) help)

  E-mail address (optional):

* Type your message here:


Notice: Copies of your message may remain on this and other systems on internet. Please be respectful.

The opening text-sequence also uses a wrap-over technique.
This also enables me to stretch (or narrow) the entire width.
The font-size is also more precise using an exact percentage
This number can also exceed 100%.
(although 300% or above is going to extremes !!!!)
Also, anything lower than 30% can barely be readable !!!
Also, I've chosen an Azure background;
and the border surrounding everything is DarkGray.
These colors can both be changed to a six digit number, such as #F0FFFF, and #A9A9A9.


adding Text here. Text here. Text here.


and, of course, different ID's may be implemented
(creating new color schemes).

All your content here

All your content here

write a paragraph here

write a paragraph here

Add stuff here

Add stuff here

Add stuff here

Add stuff here


finally, I'm using this ID method to add an image to the footer below:

[ Contact Forum Admin ]


Forum timezone: GMT-8
VF Version: 3.00b, ConfDB:
Before posting please read our privacy policy.
VoyForums(tm) is a Free Service from Voyager Info-Systems.
Copyright © 1998-2017 Voyager Info-Systems. All Rights Reserved.