This template is made for almost any html web editor
Genealogisch en Historisch Overzicht
De Stamboom van de familie Boersma
You have to add a couple of items to your index.php page as well as the templatestyle.css
include($cms['tngpath'] . "surname_cloud.class.php");
<!--Surnames -->
<h2 class="center">Top Surnames</h2>
<p></p>
<?php
$nc = new surname_cloud();
$nc->display(100);
?>
The "display (100)" tells you how many surnames will be displayed. You can easily change it.
/* ========== Surname Cloud ========== */
.surnames-cloud,
.surnames-cloud a {
font-family: Verdana, Tahoma, Arial; padding: 2px 2px
2px 2px; letter-spacing: 0.0em; word-spacing: 0.0em; text-decoration: none;
font-weight: normal; text-align: center; font-size: 14px;}
a.size1
{color: #000099; font-size: 200%;} a.size1:link {color: #000099;}
a.size1:visited {color: #000099;}
a.size2 {color: #3333CC; font-size:
190%;} a.size2:link {color: #3333CC;} a.size2:visited {color: #3333CC;}
a.size3 {color: #006633; font-size: 180%;} a.size3:link {color: #006633;}
a.size3:visited {color: #006633;}
a.size4 {color: #993300; font-size:
170%;} a.size4:link {color: #993300;} a.size4:visited {color: #993300;}
a.size5 {color: #CC0033; font-size: 160%;} a.size5:link {color: #CC0033;}
a.size5:visited {color: #CC0033;}
a.size6 {color: #666666; font-size:
150%;} a.size6:link {color: #666666;} a.size6:visited {color: #666666;}
a.size7 {color: #CC9900; font-size: 140%;} a.size7:link {color: #CC9900;}
a.size7:visited {color: #CC9900;}
a.size8 {color: #999933; font-size:
130%;} a.size8:link {color: #999933;} a.size8:visited {color: #999933;}
a.size9 {color: #000000; font-size: 120%;} a.size9:link {color: #000000;}
a.size9:visited {color: #000000;}
a.size0 {color: #000000; font-size:
100%;} a.size0:link {color: #000000;} a.size0:visited {color: #000000;}
Many
of you want additional pages in your TNG site. I've created a couple of
different styles from Darrin's basic history template. You can view them in
my templates. Go to the
demo
page and choose template 262. There is a button to the HISTORIES pages.
Once there, you can choose another template and the histories pages will
show up that match that template. I like the two
column with the navigation on the left. This way, your users can see all of your
pages from everywhere in the histories folder.
Also, just because the page is listed as places.php, doesn't mean it's only for places. If you have a Fred Jones family, you can just copy the "place" page and rename it to jonesFred.php. I like using last names first in my genealogy files because I don't want to look through 100's of Freds to find my Fred Jones.
The newest zip file download is here: https://genealogywebtemplates.com/histories-2023.zip
You do not have to use one of my templates for these files to work. They work with all TNG templates. The styling you need to add to your css file is included.
The instructions are included in the zip file, but I've also included a bit of html coding below.
You will need ftp access to upload the histories files. I use Filezilla, but you can use any ftp program that you like.
There are a few FTP programs that you can use to upload your file to the web. Most of the interfaces look very similiar. Below is a screenshot of "Filezilla." You will need the information shown below on all of the programs.
1. Host - Your domain name/url goes here
2. Username - This is the FTP username you created with the host (your server company)
3. Password - This is the FTP password you created with the host - It may or may not be the same as your password to sign into your control panel with your host.
4. The Local Site - This is where you will navigate to in order to find your web. These files are on your computer and are listed on the left in filezilla.
5. The Remote Site - This is the host or web files which are listed on the right in filezilla.
6. You will click on the public_html in order to upload your files. Find the tng/histories folder.
7. Navigate to your histories-new file (or wherever you placed your new history page) and then open it by double clicking on the folder to see the files.
8. Find the "histories" folder inside TNG and double click on it to open it.
9. After opening the file, highlight the pages you wish to upload and then right click and choose "upload" or drag the files from the local site (your computer) to the remote site (the web).
The url (web address) will be "http://yourdomainname.com/histories/home.php"
It may be something different if you have tng inside a main web.
For coding in the input boxes in the Template Settings page, take a
look at the bottom of this page for TNG Specific Coding.
https://genealogywebtemplates.com/quickhtml.asp
For the histories pages, all you need to do is to type where I have text. If you don't have an editing program, I use Expression Web 4. It has been discontinued by Microsoft; however it still works great for editing. I have a copy of it to download here, if you want to install it. It contains a "Design" view which will show you where most of the text goes and it won't be in code view unless you choose that tab. It's great for people that are not that familiar with html. I do not have a Mac version.
Expression Web 4 is a WYSIWYG (What you see is what you get) editor. The example below is what you see in Expression Web and what it looks like online:
There are six heading tags used in my templates. Your colors and sizes will depend upon which template your purchased. If you are using a template from TNG, some of the heading tags may be defined as a distinct color and size. If not, they'll just be the default font color & size.
The Drop Cap can be done by applying the dropcap class to the paragraph.
<p class="dropcap">First Letter of your paragraph</p>
Most of my templates have different colors and sizes that can be used on text as well as aligning text to the right. You can check your specific css file for those. Examples of this include:
text align left <p class="left">
text-align center <p class="center">
text-align right <p class="right">
text tiny 65% <p class="tiny">
text small 85% p class="small">
text medium 90% <p class="medium">
text large 120% <p class="large">
text xlarge 180% <p class="xlarge">
All of my templates have image coding to style the look of the image. If you like one of these styles and it's not included in your template, just let me know and I'll send you the code.
Float an image to the left without a border:
<img alt="" src="img/customer1.jpg" class="img-left">
Float an image to the right without a border:
<img alt="" src="img/customer1.jpg" class="img-right">
Float an image to the left with a border:
<img alt="" class="img-border" src="img/customer1.jpg">
Float an image to the right with a border:
<img alt=""class="img-right-border" src="img/customer2.jpg">
Float an image to the left with a border and a shadow:
<img alt="" class="img-catalog img-left" src="img/banner1.jpg">
Float an image to the right with a
border and a shadow:
<img alt="" class="img-catalog img-right" src="img/customer2.jpg">
Make a square image appear to be round and float it to the left.
[looks square in Design view]
<img alt="" class="img-round-left" src="img/banner1.jpg">
Make a square image appear to be round
and float it to the right. [looks square in Design view]
<img alt="" class="img-round-right" src="img/customer2.jpg">
Float an image to the left and add a frame to it:
<img alt="" class="img-frame img-left" src="img/banner1.jpg" >
Float an image to the right and add
a frame to it:
<img alt="" class="img-frame img-right" src="img/customer2.jpg" >
Float an image to the left and curve the corners.
<img alt="" class="img-curved img-left" src="img/customer1.jpg">
Float an image to the right and curve the corners.
<img alt="" class="img-curved img-right" src="img/customer2.jpg">
Float an image to the left and add padding and a light border.
<img alt="" class="img-gallery img-left" src="img/customer1.jpg">
Float an image to the right and add padding and a light border.
<img alt="" class="img-gallery img-right" src="img/customer2.jpg">
Float an image to the left and tilt it to the left.
<img alt="" class="img-rotate-left img-left img-frame" src="img/customer1.jpg">
Float an image to the right and tilt it to the
right.
<img alt="" class="img-rotate-right img-right img-frame" src="img/customer2.jpg">
If you have any problems, please don't hesitate to email or call. If you have any suggestions for this page, I'd LOVE to have them!
Marsha
This template is made for almost any html web editor
Cross-browser tested. We ensure that our templates work in today’s web browsers.
Slideshow (IF INCLUDED): easy to replace our images with your own.
May contain a JavaScript Calendar
This template uses a CSS-based layout, which means that the page sections (header, sidebar, content, and footer) are positioned and styled using CSS. Because this results in cleaner code, your page may load faster and search engines may rank your page higher.
The CSS also controls all of the font colors and sizes. The six heading tags have been styled as well. We include extensive styling for images.
Note: Sometimes Expression Web may lose its formatting in "Design" view or some elements may not appear correctly. Fonts may seem too large or small; spacing between elements may seem too wide, etc. While this can be a bit disconcerting, you will find it easy to keep previewing your site in a browser as you make changes. Don't panic, it's okay, just save your page, then refresh it. This will display your page correctly. To preview your pages, save the page after each change and then go to File > Preview in Browser.
This template package allows you to delete the pages you do not need or rename existing pages if necessary. To edit the existing .html pages, just delete our sample content. You can then type your own text and add any additional photos. Note that you will not be able to edit any “non-editable” regions on these pages. Remember to change the page title when you make a new page or rename a page.
We have used Accordions on our sample product pages and on our EULA page. They are very handy arranging large amounts of content in a relatively small space.
Included in this template is a very simple JavaScript calendar which shows the current month, date and year. Note: You will not be able to see the calendar while in Design view. If you do not wish to include the calendar, you can delete it from the code.
To change the size of the fonts in the calendar or to change the colors, you must edit the calendar.js file.
We have included a very basic contact form. Your visitors can fill out the form and you will receive the results by email. In order to receive
the results, you will need to edit a few lines on the process.php script to set your email address where the form results should be sent and
to set a subject line for the emails.
Once the form has been submitted, you can redirect the user to your "thankyou.html" page. On the php script, near the bottom of the page [Line 76 of the "process.php" page in the javascripts folder] you will need to set the absolute file path to your "Thank You" page:
Important: This contact form works on many web hosting platforms, but we cannot guarantee it will work on all of them. If you have configured the form according to the instructions above but have problems, your web host's support team should be able to help with any server-side settings that may need to be made.
We have added a multi-level drop down menu that works perfectly in mobile devices, tablets and desktop computers. The levels will drop down as you mouse-over the top links. You must edit the drop down menu in code view on the dwt or on individual html pages that are not associated with a dwt.
For a main topic that contains sub-topics, your code will look something like this:
Once you have your menu completed on the .dwt page save your page and allow the changes to update on the .html pages. Font sizes and colors, background colors, margins, paddings, etc. are all controlled in the style.css page.
You can set the size where the menu changes to the mobile version. We have preset the width to 1024 pixels. If your menu uses fewer main topics, you may want to reduce this size. Edit the code located at the bottom of the .dwt template pages:
Font Awesome gives you over 600 scalable vector icons that can instantly be customized: size, color, drop shadow, and even movement. Learn more about Font Awesome - We recommend you bookmark their page for easy reference.
To use an icon as a bullet or marker, for example:
Home
Adding the icons for "Home," "Call," "Email," and "Hours" can done by applying a style to the paragraph tag.
If you have the style available in the dropdown style menu in the text editing box, then choose the style you need.
1. Add your text
2. Place the cursor at the beginning of the text and choose from the dropdown style box for the classes available: Home,
Call, Email, Hours or Comment
Call
Comment
3. Once you choose your style, it will automatically show up! Easy stuff!
By using Google fonts, you now have access to a wide variety of custom fonts. This offers quite a bit of of flexibility for getting exactly the look you want, whether fancy or all business. These fonts can easily be added to your site in under a minute. NOTE: You will not see the Google font when in design view. It will be seen when you preview the site in your browser. Learn more about Google fonts.
Next the font name is added to the CSS file:
Your template contains a JavaScript Lightbox script. You can use the Lightbox feature on any photo in your site; it is not limited to only
the product or gallery pages. The Lightbox JavaScript consists of several files. We recommend that you do not move or edit any of these files.
The Lightbox allows you to click on a small photo and have a larger image appear in a semi-transparent overlay that will appear on top
of the page. The script will automatically size itself, so your images can be varying sizes. On mobile devices, the Lightbox resizes the images
to fit the screen.
First insert your small photo onto the page. Create a hyperlink to the larger photo. Switch to code view and add class="lightbox" which activates the JavaScript. If you wish to have a title appear, add the title attribute as shown in the example.
To click through a group of images, add a group name: data-lightbox-gallery="groupname". The "Previous" and "Next" buttons will now automatically appear.
[Credit for this application: http://dev7studios.com/plugins/nivo-lightbox/.]
We have included a simple pagination block you can insert when you have a number of pages you wish to link to. Remember, this template is a static site (not database driven), so you must manually code each page link.
We may have included an easy JavaScript slideshow on the home page of this template. It is very flexible and you can use your own images sized as shown on the index page and add additional images. To make changes to the images used, the file path to the image(s), or to add a hyperlink, you make the change within the script on the .dwt template page(s). Note that you will not see the slideshow while in Design View, but it is visible when you go to File > Preview in Browser.
The Highlighted "Description" area is the text that will appear on the slide show.
[Credit for this application: Released by http://nivo.dev7studios.com/. ]
1. Naming your pages: make all of the letters lower case and use NO spaces between words. For example - gettingstarted.html or "camel case" - gettingStarted.html
2. Do NOT copy any text from Word, etc. directly into your web. Paste the text into notepad to remove all formatting. If you copy directly into your web, you may get lots of formatting code you don't need.
3. Make use of the Heading Tags. This template has 6 heading tags and quite a few classes that you can use to give interest to your website. Check our "Typography" page for samples of things used in this template/theme.
4. Meta Tags: To help get your site listed in search engines and directories, we have added blank meta tags for keywords and description to each page. You will want to either delete these tags or add your own specific content. DO NOT leave our default content in these tags.
5. Photo / Image Tips:
a. Use all lower case in your photo /
image name.
b. Use "Insert > Picture > From .... Do not drag your images into your web.
c. Use an image program to size your images. Do not grab the corner of the image and pull in to make
the image smaller. It may seem like a small image to you, but your viewer's browser must load the entire huge picture!
If you want a "Misc" menu with dropdowns to your top menu, it's not hard to do.This tutorial assumes that you have a BLANK customconfig.php page. If your page is not blank, you will need to transfer your items to the new customconfig.php page that we are going to code. You will also need a program to edit it. You can use Notepad, Notepad++, Dreamweaver, Expression Web 4 (this is a discontinued program from Microsoft, but it will work for editing pages - You can download it from my site for free if you wish to use it. It is also an "executable" file, so your virus protection service may warn you about downloading it.)
<?php
//your custom PHP code goes here.
//these are "comment"
lines and will be ignored
//here's how to set a custom variable:
//$somevalue = "thevalue";
session_start();
if(
$_SESSION['templatepath'] )
$templatepath =
$_SESSION['templatepath'];
if( $_SESSION['templatenumber'] )
$templatenumber = $_SESSION['templatenumber'];
if(
$_SESSION['templateidx'] )
$templateidx = $_SESSION['templateidx'];
if(strpos($_SERVER['REQUEST_URI'],"admin") !== false) {
$demoreturn = "admin";
$_SESSION['demoreturn'] = "admin";
}
elseif(strpos($_SERVER['REQUEST_URI'],"ajx_") === false &&
strpos($_SERVER['REQUEST_URI'],"tngrss") === false &&
strpos($_SERVER['SCRIPT_NAME'],"ajx_") === false &&
strpos($_SERVER['SCRIPT_NAME'],"tngrss") === false) {
$demoreturn =
"https://" . $_SERVER['HTTP_HOST'];
$demoreturn .=
$_SERVER['REQUEST_URI'] ? $_SERVER['REQUEST_URI'] :
$_SERVER['SCRIPT_NAME'] . "?" . $_SERVER['QUERY_STRING'];
$_SESSION['demoreturn'] = $demoreturn;
}
Please understand that MY miscellaneous pages are in a separate folder called "misc". Yours may be in your "histories" folder or another folder of your choice.
$custmenu['title_text'] = 'Misc'; This is the name of the top link. This name is coded into TNG and is not easily changed.
$custommenulinks[$link_nr]['target'] = "misc/index.php";
This tells the name of the folder and
the page I wish to link to.
$custommenulinks[$link_nr]['label_text'] = "Misc
Pages"; This is the text, "Misc
Pages" that is shown on the first sublink
$link_nr++; // increment the number for each additional link (1)
$custommenulinks[$link_nr]['target'] = "misc/faq.php";
This tells the name of the folder and
the page I wish to link to.
$custommenulinks[$link_nr]['label_text'] = "FAQs";
This is the text, "FAQ's" that is
shown on the second sublink.
$link_nr++; // increment the number for each additional link (1)
$custommenulinks[$link_nr]['target'] = "misc/diseases.php";
This tells the name of the folder and
the page I wish to link to.
$custommenulinks[$link_nr]['label_text'] = "Diseases";
This is the text, "Diseases" that is
shown on the third sublink.
You can see my "Misc Pages" in the "See in Action" section of my TNG Templates.
A new button will be added to the top navigation in the mobile view. It may appear blank or it may appear with leaflets on it.
When you purchased one of my templates, it entitled you to receive free version updates for as long as I have the template in my catalog. TNG Version 15 had a number of updates affecting the templates, specifically, newer navigation code. With that in mind, all of my templates had to be updated. I also updated the footer to newer coding in a few of my older templates. To see the new upgrades to the v15 templates, go to our "See In Action" page. Once there, you will be able compare your current template to the newest update. You can also see the template updates for version 15 listed below.
TNG allowed the mobile view to show the header on all templates. It will be shown when your site is accessed on a mobile device. This change in TNG allows any links you had in the header to be shown while your visitors are in mobile view.
Everything will still be visible on your home page unless I changed or added a new variable. If I did this, you will see an * on the template information below. All you do is copy and paste the information into the new entry box in the template messages page. For example, many of the sites got new footer information coding, so you would need to paste your links and email address into the new entry box and paste your "Webmaster Message" into the new Webmaster entry box. NO changes to the paragraph content variables were made. Most of the variable changes were to the footer coding to allow you to put in your information in an easier format.
If I moved a feature, you do not have to do anything. It will appear as you have it edited, but in a new place on the homepage. For example, on template 200, the quotes section was in the large parallax box. It did not need that much room, so I moved it to a smaller box. I used the large parallax box to contain the sliders of the ancestors.
If you do not want any of the upgraded code except the code necessary for the navigation and mobile views, please let me know PRIOR to installing the updated zip file, otherwise your files will be changed when you install the template update. I will have to give you a different update file. If I customized your template, do not do the update as it will erase those customizations. Please contact me.
I know changes can be trying at times. I will help you in any way that I can to make it easier for you. Just let me know how I can support you. If you have difficulties and need help, I can show you how to make the updates.
All templates received updated navigation code and mobile code in the header and footer. All templates received minor adjustments in spacing of some items.
Some templates have the following additions: Caption codes, an underline on footer and header "mouse-over" links, Surname Clouds, new footer coding. If you have new footer entry coding or caption codes, you can easily fill them in. Specific changes to your template are listed below.
*Template updates contain the following files: templatestyle.css, index, topnav, footer, mobile pages, the new template images and the templatemsgs.php. It does not contain any javascript, fonts nor additional images. No information will be erased. If you are going to do a new install you will need the complete v15 file as the update will not have all of the information you need for the new install. New installs will erase your information.
All you need to do is to email me, give me the template number and the name that was used to purchase the template. I will send you a download link which will be active for only 24 hours. Please let me know when you have downloaded the template, as I will remove the template zip file from my server as soon as I know you have it. If you have any problems, please let me know as soon as possible. If you need help, please let me know. I want you to be happy with the updates.
Darrin, the programmer/owner of
TNG made it very easy to
update your template. All you do is go to the Template Settings page
of your TNG site and click "Import New Template" then browse to the
version 15 template zip file you've downloaded to your computer. Once you
choose the zip file, then Click "Import." That's it!!! No FTP,
nothing else to do to get your new template installed! NONE of your
content will be erased. You must have the version 15
zip file as older versions will not work. Version 15 templates will
not work with earlier versions of TNG.
See
instructions with images.
**** Future updates will be done from the version 15 template with the exception of template 224. ****
Variable - The variable is the call from the
template to the database to get the information for that entry box.
For example, "Footer Headline" is the label of one of the footer
variables.
Parallax-- The large box with the
image in the background. Most contain the 8 People Sliders,
Postcards, Family Cards, Hover Cards - These are the highlights of
individual people shown in a special section. NONE of this coding
was changed.
Ticker
- The "Favorite Quotes" section. Nothing changed with the ticker
coding. On a few templates, I moved the ticker to a new location.
* New footer code added
to make it easier to add your information.
| Template # | Update Information |
| 200* |
The "Surname", "Photos" & "What's New" boxes are now editable, the "Favorite Quotes" section has been moved from the Parallax section to three boxes below. Those boxes contain a new link section and new surname section. Moved "People Slider Boxes" to Parallax. |
| 201 | No major changes |
| 202 | No major changes |
| 203* | Added "Top Surnames" |
| 204* | No major changes |
| 205* | No major changes |
| 206* | No major changes |
| 207 | No major changes |
| 208 | Enlarged header links, Added "Top Surnames" |
| 209* | No major changes |
| 210* | No major changes |
| 211* | Floated page name to the left |
| 212 | No major changes |
| 213* | Added "Top Surnames" |
| 214 | Enlarged header links |
| 215* | No major changes |
| 216 | No major changes |
| 217* | No major changes |
| 218* | Removed top curved edge above slideshow |
| 219 | No major changes, no caption codes were added |
| 220* | No major changes |
| 221* | No major changes |
| 222* | No major changes |
| 223 | Added "Top Surnames" |
| 224* |
No major changes to the original files. The update
has your original variables. The new file has the newer variable names, specifically: the slideshow image, slideshow text, and some of the paragraph numbers. If you want the new file update instead of the old file update, please let me know. The new file update will change a number of your variables, but you will be able to see the changes. To view part of the template's new "Template Setting" page, click here. All future upgrades will be made in both the old and new files for this template only unless everyone currently owning this template chooses the latest new version update. You will have to let me know which version you have the next time there is a major update to TNG's core files affecting the templates. |
| 225* | No major changes |
| 226 | Moved "Favorite Quotes" added "Top Surnames" |
| 227 | Discontinued. New template added |
| 228 | No major changes |
| 229 | No major changes |
| 230 | No major changes |
| 231 | No major changes |
| 232 | Header color change, parallax image change |
| 233 | No major changes |
| 234 | Parallax image added |
| 235 | Horizontal Rule reduced in size |
| 236 | Mobile view in Parallax corrected |
| 237 | People sliders moved to Parallax, Favorite quotes section moved to above footer |
| 238 | Footer headlines corrected |
| 239 | Corrected size of content area in mobile view |
| 240 | No major changes |
| 241 | Moved People Slider Boxes into Parallax, moved 3 colored boxes below |
| 242 | No major changes |
| 243 | No major changes |
| 244 | Changes font in Rounded People section to a more readable font |
| 245 | No major changes |
| 246 | No major changes |
| 247 | Discontinued. New template added |
| 248 | Replaced Horizontal Rule |
| 249 | No major changes |
| 250 | No major changes |
| 251 | No major changes |
| 252 | No major changes |
| 253 | No major changes |
| 254 | No major changes |
| 255 | No major changes, no caption codes were added |
| 256 | No major changes |
| 257 | No major changes |
| 258 | Changed black colored row to lighter color above footer |
| 259 | Adjusted mobile view, changed black colored row to lighter color above footer |
| 260 | No major changes |
| 261 | No major changes |
| 262 | No major changes |
| 263 | No major changes |
| 264 | No major changes |
| 265 | Moved "Random Images" and added new "Top Surnames" area, updated the "Cousins & More" section to a crisper look |
| 266 | No major changes |
| 267 | No major changes |
| 268 | No major changes |
| 269 | No major changes |
| 270 | No major changes |
| 271 | Header changed- same colors, different gradient, different logo instead of small family picture. |
| 272 | No major changes |
| 273 | No major changes |
| 274 | No major changes |
| 275 | No major changes |
I just wanted to show you some of the common classes used in my templates. For those of you using TNG, you can use these codes on your template settings page. If you have any suggestions, please let me know. I'd love to hear them!
If you're unsure, you can always go here: https://wordtohtml.net/ and their program will convert text to html coding.
<p>Paragraph Tag</p> This tag is used for almost all text. You should have opening and closing paragraph tags in your page.
<br> Break. This is the code to break the line and begin text in the same
paragraph, but directly under the line above it. It shows up like this:
<p>This is the first part of the text <br>
This is the second part of the text, but in the same paragraph.
There are six heading tags used in my templates. Your colors and sizes will depend upon which template your purchased.
The Drop Cap can be done by applying the dropcap class to the paragraph.
<p class="dropcap">First Letter of your paragraph</p>
Most of my templates have different colors and sizes that can be used on text as well as aligning text to the right. You can check your specific css file for those. Examples of this include:
text align left <p class="left">
text-align center <p class="center">
text-align right <p class="right">
text tiny 65% <p class="tiny">
text small 85% p class="small">
text medium 90% <p class="medium">
text large 120% <p class="large">
text xlarge 180% <p class="xlarge">
lead text <p class="lead">
<p class="author">
Your colors will match your template.
textcolorDark
textcolorMedium
textcolorLight
textcolorAccent
textcolor-white
textcolor-black
textcolor-gray
textcolor-red
text-align-right
You can find what the hex colors are by going to this link and typing in the hex code: https://www.color-hex.com/
Using the codes above, you can make a word or a paragraph a different color or size:
I want to make THIS text a color and a different size than the paragraph. This is called a "span" because it spans the length of what you choose. <span class="textcolor-red large">THIS</span> I chose to make it the color red and font-size large. You can use many classes on one item.
If I wanted to do the paragraph red and large, then I would add the class to the paragraph tag.
The code for the above sentence is: <p class="textcolor-red large">If I wanted to do the paragraph red and large, then I would add the class to the paragraph tag.</p>
All templates have image coding to style the look of the image. If you like one of these styles and it's not included in your template, just let me know and I'll send you the code.
Float an image to the left without a border:
<img alt="" src="images/customer1.jpg" class="img-left">
Float an image to the right without a border:
<img alt="" src="images/customer1.jpg" class="img-right">
Float an image to the left with a border:
<img alt="" class="img-border" src="images/customer1.jpg">
Float an image to the right with a border:
<img alt=""class="img-right-border" src="images/customer2.jpg">
Float an image to the left with a border and a shadow:
<img alt="" class="img-catalog img-left" src="img/banner1.jpg">
Float an image to the right with a
border and a shadow:
<img alt="" class="img-catalog img-right" src="images/customer2.jpg">
Make a square image appear to be round and float it to the left.
[looks square in Design view]
<img alt="" class="img-round-left" src="img/banner1.jpg">
Make a square image appear to be round
and float it to the right. [looks square in Design view]
<img alt="" class="img-round-right" src="images/customer2.jpg">
Float an image to the left and add a frame to it:
<img alt="" class="img-frame img-left" src="img/banner1.jpg" >
Float an image to the right and add
a frame to it:
<img alt="" class="img-frame img-right" src="images/customer2.jpg" >
Float an image to the left and curve the corners.
<img alt="" class="img-curved img-left" src="images/customer1.jpg">
Float an image to the right and curve the corners.
<img alt="" class="img-curved img-right" src="images/customer2.jpg">
Float an image to the left and add padding and a light border.
<img alt="" class="img-gallery img-left" src="images/customer1.jpg">
Float an image to the right and add padding and a light border.
<img alt="" class="img-gallery img-right" src="images/customer2.jpg">
Float an image to the left and tilt it to the left.
<img alt="" class="img-rotate-left img-left img-frame" src="images/customer1.jpg">
Float an image to the right and tilt it to the
right.
<img alt="" class="img-rotate-right img-right img-frame" src="images/customer2.jpg">
You can add a horizontal rule by just adding the code <hr>. A horizontal rule is just a line that spans a specified distance across your page. This is the horizontal rule for this site:
If I wanted a fancier horizontal rule, which most of my templates contain, I would call it in this way: <hr class="fancy">
On the template settings page, in the input boxes, I have already added the beginning and ending paragraph tags in the index.php. If you wanted to make an additional paragraph, you would need to close the paragraph I put in and then add a new opening paragraph tag. For example the coding in the paragraph box for the following would look like this:
Check the birth, death and marriage records. Those may list parents names, etc. Get copies of these records by ordering them from the appropriate source. Use ALL types of spellings when you look for records. Many times the spelling changed (Hawley to Holley) or the person writing down the information had trouble deciphering the script. Sometimes names are spelled so "screwy" that your best bet is just to go through the pages. The "s" looks like "f" in some old script, so Smith could look like Fith to a beginning transcriber.</p><p>Check the court records index. If you find something of interest, try to order the record from the County Clerk. They charge $X a page to Xerox it. Also know that they are short-staffed and may not be able to fill your request. You may have to make a trip to the county or hire a researcher to get the information for you.</p><p>Check The old newspapers. You may need to write one of the libraries to see if your family member's name is listed in the index. I have some of those newspapers online, but not enough of them!</p><p>If the ancestor was in the Civil War, order the records! They have a great deal of information in them!
Check the birth, death and marriage records. Those may list parents names, etc. Get copies of these records by ordering them from the appropriate source. Use ALL types of spellings when you look for records. Many times the spelling changed (Hawley to Holley) or the person writing down the information had trouble deciphering the script. Sometimes names are spelled so "screwy" that your best bet is just to go through the pages. The "s" looks like "f" in some old script, so Smith could look like Fith to a beginning transcriber.
Check the court records index. If you find something of interest, try to order the record from the County Clerk. They charge $X a page to Xerox it. Also know that they are short-staffed and may not be able to fill your request. You may have to make a trip to the county or hire a researcher to get the information for you.
Check The old newspapers. You may need to write one of the libraries to see if your family member's name is listed in the index. I have some of those newspapers online, but not enough of them!
If the ancestor was in the Civil War, order the records! They have a great deal of information in them!
**You can add any of the coding on this page to your input boxes. Below is the same 4 paragraphs using the html coding I've given you.
</p><p class="dropcap">Check the birth, death and marriage records. Those may list parents names, etc. Get copies of these records by ordering them from the appropriate source. Use <span class="large textcolor-red">ALL</span> types of spellings when you look for records. Many times the spelling changed <em>(Hawley to Holley)</em> or the person writing down the information had trouble deciphering the script. Sometimes names are spelled so "screwy" that your best bet is just to go through the pages. The "s" looks like "f" in some old script, so Smith could look like Fith to a beginning transcriber.</p><p>Check the court records index. If you find something of interest, try to order the record from the County Clerk. They charge $X a page to Xerox it. Also know that they are short-staffed and may not be able to fill your request. You may have to make a trip to the county or hire a researcher to get the information for you.</p><p>Check <span class="textcolorDark"> old newspapers. </span> You may need to write one of the libraries<span class="author"> to see if your family member's name </span>is listed in the index. I have some of those newspapers online, but not enough of them!</p><p>If the ancestor was in the Civil War, order the records! They have a great deal of information in them!
Check the birth, death and marriage records. Those may list parents names, etc. Get copies of these records by ordering them from the appropriate source. Use ALL types of spellings when you look for records. Many times the spelling changed (Hawley to Holley) or the person writing down the information had trouble deciphering the script. Sometimes names are spelled so "screwy" that your best bet is just to go through the pages. The "s" looks like "f" in some old script, so Smith could look like Fith to a beginning transcriber.
Check the court records index. If you find something of interest, try to order the record from the County Clerk. They charge $X a page to Xerox it. Also know that they are short-staffed and may not be able to fill your request. You may have to make a trip to the county or hire a researcher to get the information for you.
Check old newspapers. You may need to write one of the libraries is listed in the index. I have some of those newspapers online, but not enough of them!
If the ancestor was in the Civil War, order the records! They have a great deal of information in them!
For those of you that want to use the "Histories" pages, for more specific instructions, go HERE.
I hope this helps. If you have questions, don't hesitate to write or give me a call.
Thanks,
Marsha
If you have any questions or comments about the information on this site, please contact us. We look forward to hearing from you.