• Design HOME
• Design Page 2
• Design Page 3
• Design Page 4 Rounded Corners
• Design Page 5
         Blend
• Design Page 6
     Columns

• Design Page 7
• Design Page 8
• File Sync Info   Pg 9
• ToolsPage   Pg 10
• TipsPage   Pg 11
• Contact

Design Continuation... page 5

Blend Description

Added December 20th, 2011 TRComputing

Blend is another Template that we really like. In fact the dateline above was 'borrowed' from it. We are describing it here for you and for us. It, like this one, has a lot of interesting concepts and features. Both have a fixed layout. As we have been studying the HTML world, we have been finding that 'there are ways'. You just have to be smart enough to use them. What 'ways' are we talking about?? How's about flexibilty and fitting to various screen sizes?? We do believe, that on a lot of machines that try to read our pages, they are finding them quite big. -AND- they do not reduce, or resize, well.
LIES. I Tell LIES!! Guess it depends on how long you have been attempting to write Web Pages and how many versions of the different Browsers you have been through to be able to understand what we are about to say. The latest Versions of Firefox DO NOT present any problems in reducing -or- enlarging our screens. 'Ctl +' will increase the size of the Text and 'Ctl -' will decrease it. 'Ctl 0' will put the page back to its Normal size. So, No problems... forget what we were gona talk about. (It's over in the TipsPage, if you are interested. Concerns the font types. )

 Added Aug 21, 2012   We have made changes to this template to fit our needs for our site. For some reason we could not get the 'Jump-to' and 'Return-from' to work in the HTML that we had previously been using. Those were the Templates we had obtained from Bravenet.com -and- they served us well. Our lack of understanding was the biggest problem. This one and the Blend Templates are properly constructed and the Jump/Returns work. So they have become our new 'Base'. Most generally we will be using the 3 column format -but- occasionally only want a two. Which side gets removed will depend on out mood at the time. Extra notes get put in here cause... well we forget.
Found the problem with the Jump/Returns. Seems you can not specify a page hieght. We had all the previous Web Pages with a specified height and scroll capabilities.
     height: 473px;
     overflow: auto;
Gona have to figure out a new way to scroll the center and not the sides.

The above entities, and in particular trying to get them to look the way 'we' wanted them to look, is what brought about this Page. Words... words are used to describe things. Sometimes you need to pay attention to the meaning of words. Especially some words at certain times. Take for instance; cascading. One of its definitions states: a succession of stages, processes, operations, or units. Essentially, you can, and do, describe your Web Pages in a series of steps, or stages. AND you can specify that certain elements operate differently in certain sections of the Web Page. Example from above; the <p> for paragraph operates differently in the 'header' section than it does in the 'content' section. This is specified in the CSS file. So, whenever you are working with someone else's code and things don't seem to work correctly; stop. Examine the 'includes' more closely and see if a 'rule' has been changed.

One of the changes made 'buffaloed' me for quite some time. In the 'header' we have the 'Title' of the document followed by an author's notification. These are all on one line -but- the Title item is inside <h1>'s and the Author info is inside <p>'s. By 'normal' rules these items should be on separate lines. ??? Why are they not? Because... the rules were changed by the creator of this 'Template' for all <p>'s that appear inside a 'logo' item. This requires examining the CSS file.

In the 'logo' definitions, both 'h1' and 'p' are specified as float left. If you place several floating elements after each other, they will float next to each other if there is room. And that was what was happening here. We wanted the Author Info line below the title. So we had to remove the <p> descriptor from within the logo descriptor in the CSS file. You won't see that in the examples here ... cause ... we are trying to keep as much of the original as possible -and- let you make your own changes. Examples of our changes can be seen in the references on the Left Side of this Page.

Top

Smart Phone Page Design.

Added January 2nd, 2012 TRComputing

Another reason for this page is; We finally broke down and got one of them thar intelligent phones. Our LG Wave AX380 is having some problems. Primarily with the fabulous BlueTooth we got on approximately June 15th, 2011... a Plantronics Voyager PRO+. Through tesing on our own (Using wife's Bluetooth) we found that we could not stay connected because of the phone. However, recent events have given suspicions to the BlueTooth device itself. This will not be confirmed until we get the new SmartPhone. -But- back to the subject.

As mentioned above, the 'header logo' definition had both the Title and the Paragraph floating. We changed it and took out the Paragraph floating aspect. Now for the colors, they used a DuoTone image(img02) at the top to get things started. In a decent Graphics Editor, you can get it to paint, or fill, with Gradients. It starts with one color at the top and ends with another at the bottom, blending them as it moves down. Rather clever idea. The final color at the bottom will be the color for the rest of your Web Page... Unless you get fancy and make other changes. The major areas of concern for color are:

• img02 - Backgroung image for the Header. As stated above, this one sorta sets the color theme for the whole WebPage.
• img01 - Background image for the Body - plus the default color.
  Technically, the numeric color setting of the background doesn't mean a thing UNLESS the image is missing!!! It is everything outside of the header and the page. Well, not totally true. The image is outside of everything. You won't see the image UNLESS your browser window is wide enough.
• body - Here, as usual, we set the default Background and the default Text color.
• a & a:hover - When mouse is NOT over and when it IS.
• RelDatesa & RelDates a:hover - When mouse is NOT over and when it IS. From the name it appears this had a usage with some Dates. However, they were not used in the Template.
• logo h1 - Title text color in Header Logo.
• logo p - Paragraph text color in Header Logo.
• logo a - Link text color in Header Logo.
• menu a - Link text color in Menu.
• menu a:hover - Hover text color in Menu.
• menu .current_page_item a - Default Link text color in Menu. We did not use this one. It was supposed to indicate a default selection, home in this case. -But- because it did not turn off IF and WHEN you selected another, we didn't think it fit quite properly.
• page - This is the section that contains both of your columns and the content section. Need to set the default background color.
• latest-post - Another one that was not used in the Template.
• title a & title a:hover - These are the Title lines above each section and they can be links to other places.
• byline - This creates the fine print under the Headers. (or where ever you use it)
• links - Used for References... contains default color.
• sidebar li li - Has a bottom border color.
• sidebar li h2 - Has a background and text color.
• sidebar a & sidebar a:hover - Has text colors
• s & x - Search Box Background and Text colors. Plus border.
• footer, footer a & footer p - Textual colors and Backgroung colors in the footer along the bottom.
• - ======== things we added ============
• title2 - This is a derivitive of our own that we have used for a long time. It will be included in the CSS section at the top of the HTML file. Has some colors.
• subtitle -
• onelinerBox -
• WinColors -
• SuSEcolors -
• nav li ul -

Ok, Let's Do It

Added Janurary 3rd, 2012 TRComputing

Allllrighty Now. First, we need to copy the Template to our New Area, in which to build the SmartPhone WebPage. The dir will be called: MySmartPhone. Then we will ReName the Template files to Blend-HTCRezound.html and Blend-HTCRezound.css. While we are Building it, both files will be in the same dir. An 'images' dir will be created under this one to hold the images used. All these items will be placed in the appropriate areas after the build is complete. -Or- maybe sometime before.

First we must take care of the "house" work. These involve the settings at the top of the page primarily and maybe a few others.

• The <DOCTYPE> is already set - part of the Template.
• The creation date & Author: 31 December 2011 by Chuck Taylor
• Comments:Some minor things about the Page and possible a mention of the Original Authors.
• ======== in the head section ============
• link: to our favicon
• Title: HTC Rezound - Smartphone
• Author:
• Copyright:
• description:
• link to our css file Blend-HTCRezound.css
• link to Calendar css: epoch_styles.css
• links to and inclusion of: Any Javascript you want need.
• inclusion of: Any other CSS styles that you want.
• :

 Body  Now we get to the meat of it all. The characteristics of the body have already been spelled out in the CSS file. If you need any changes they should be made there. Can't think of any right off hand. The rest of the Web Page is a series of div's, the first being the header.

 Header:  This be the top most portion of your viewable Page.

• Our Lord: First we mention and credit the Lord.
• Title: Next is our Logo and the Page Title.
• Author: A mention of the Author. We decided to place it below the Title.
•  Menu:   A horizontal menu with appropriate references. Most of which will be other areas on your site. Off site references are along the side. The important part here is the colors. One for NO mouse over and one for YES mouse over.
• RSS: We haven't messed with the RSS stuff much -but- may in the near furure so for now we will leave them.
• Width: We will leave the 1000px width for both and make adjustments in the sections below these two.

 wrapper:  Other than it is a container for all of the following items, we can see no real purpose in this. There are no specifications for it, it is just a declared division. -But- then we don't always understand everything we see -or- know. We will perform experiments with leaving it out ... later ... and report the results.

 page:  Another container, with characteristics. It has a width of 1000px and a background color. It will hold the two SidePanels and the Content.

 Sidepanel 1   If we are using it, this will be the Left Sidepanel.

 Content   We will always, or should be, be using this one, the Contents. It has a 'Normal' width of 560px which if added on to the two Sidepanels 'Normal' of 220px will give 1000px. However, for this one we are going to increase it to 670px cause we are dropping the Left Sidepanel.

 Sidepanel 2   If we are using it, this will be the Right Sidepanel. In this Sidepanel he has a section he calls the 'Tags'. We could not really see a use for it -but- Web Searching found information on this concept in Wikipedia. Which is where you will go if you click on the word. We may -or- may not use this feature of the Template. It's a place holder for now.