VoyForums
[ Show ]
Support VoyForums
[ Shrink ]
VoyForums Announcement: Programming and providing support for this service has been a labor of love since 1997. We are one of the few services online who values our users' privacy, and have never sold your information. We have even fought hard to defend your privacy in legal cases; however, we've done it with almost no financial support -- paying out of pocket to continue providing the service. Due to the issues imposed on us by advertisers, we also stopped hosting most ads on the forums many years ago. We hope you appreciate our efforts.

Show your support by donating any amount. (Note: We are still technically a for-profit company, so your contribution is not tax-deductible.) PayPal Acct: Feedback:

Donate to VoyForums (PayPal):

[ 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

Post a message:
This forum requires an account to post.
[ Create Account ]
[ Login ]
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-2019 Voyager Info-Systems. All Rights Reserved.