Advanced may want to do more sophisticated things like providing specialized background images or changing the site re-size behaviour. Some of these advanced site customization topics are covered here.
1. Having your web-page "Float" over a background image.
Often it is desirable to have your site appear to float about some kind of a stylized background image. CSS expressions that allow images to be placed behind the webpage are now exposed in the System Setup under "Preferences" / "Appearance" as shown below. (you will need to click on the Show Advanced Options selector)
To use a background image you should:
a) First upload a suitable graphic to the photo gallery - the best graphics will typically be large (1024 x 768) if you want the graphic to occupy the whole background, but ideally should not be too large to avoid slowing down the load time of the page. 50 kilobytes or less would be ideal although larger files are OK. You should leave any graphics uploaded for this purpose at their original size. After you upload the file, make a note of the name of the actual file on the server, and its path in the "uploads" directory. (eg. uploads/background-ocean.jpg in the example below)
b) Next in the system setup, create a CSS expression similar to the one shown below and enter it in the "Background Area CSS Expression" area
The background-repeat property is used to govern whether the image repeats vertically, horizontally, in both directions or in neither direction. More information on this CSS property can be found at http://www.w3schools.com/css/pr_background-repeat.asp
Valid background-repeat properties are:
| • | repeat (or repeat-both as shown) |
| • | repeat-x |
| • | repeat-y |
| • | no-repeat |
Knowledgeable web-page designers will be interested to know that CSS expressions entered in this manner will be applied directly to the "BODY" tag in the page. While normally used for images it can be used for other purposes as well. You should terminate your CSS expression with a comma always.
Developers should not assume that theirs is the only style being applied. NeatClubs.COM may conditionally generate different body tag syntax depending on options selected in the NeatClubs.COM setup. As an illustration, the example above would result in NeatClubs.COM generating web-site HTML that appears similar to the following
(notice how the provided CSS instruction has been embedded in the style parameter in the BODY tag):
An excellent site to obtain custom backgrounds and create custom color gradients is GRSites.COM. A link is provided below. For their free graphics and gradients, they allow their use and request simply that you provide a link back to their web-site from your own.
2. Incorporating a stylistic background image into your page
Sometimes web designers would like to have more flexibility than the simple grid layout available in NeatClubs.COM.
Although the application itself will still be constrained to have a header section that runs across the top, along with left, center and optional right column panels underneath, web-designers can use the "Full Website CSS Expression" to provide an appropriately sized graphic image that will sit behind the displayed components on every page.
Note that background colors in these display areas will take precedence over these CSS specified background images, so to get effects like the ones below you will need to make some color properties transparent.
These properties are the header_background, topmenu_background, content_background, left_column and right_column. For even more control, the menu background colors can be made transparent, and the subheader (the white horizontal bar showing the date in the example below) can be disabled. Also, you might want to disable the header graphic since the header graphic will otherwise float above your provided background image.
After making the appropriate areas transparent, we follow the same procedure for setting our Full Website CSS expression
Note that for best results the graphic should be at least the width of the page (left column + center column + right column + 20 pixels in the site setup)
You can use background styles like this with dynamically resizeable pages as well, but you will want to ensure your design is well suited to this. (the example above would not be well suited since if the page was resized, the image would appear to "stop" and now follow the expanded page. Advanced CSS users may want to have the images flow to the right to accommodate such circumstances.
3. Incorporating stylistic background graphics behind the left panel elements of the center content area
We'll spare you the details since the approach is identical to that shown above, but we can also include background images in the left panel or in the center display area. Note that if provided, these images will take precedence over a provided background graphic and will also take precedence over background colors so when doing this there is no need to make colors transparent. Designers will want to either blend their graphics with the chosen page background color, or used transparent background elements so that colors or graphics in lower layers appear through the provided graphic.
4. Changing login area settings
You can control login area settings including where the login area appears under System Setup / Preferences / Appearance. The setup options are shown below with the advanced setup options exposed.
Enabling a login link on the side panel as an example results in a side panel element being inserted as shown below.
5. Changing the position of the menus
The location of the side panel menu is configured in the Side Panel setup under System Setup / Preferences. The example below positions the menu in the left-side panel, and makes it the second element from the top.
The top menu options are configured under System Setup / Preferences / Menus under the sub topic Menu location & properties
6. Employing transparency effects
On some browsers you can achieve interesting transparency effects. NeatClubs automatically selects a reasonable level of opacity for transparent menus. In the Menu Setup you can expose this and other advanced settings by click on the "Show Advanced Options" link.
Notice that in the example below, by setting transparency we can see the the content of the page appear behind the pull-down menus.
7. Using Images behind Menu Buttons
Sometimes we would like to create special, textured effects behind menu buttons. The example below (on our demo site) shows how we can over-ride the CSS style for menu buttons in various states. In this case with the intent of making buttons appear borderless with a 3D "brushed aluminum" type of look. On the top level menu we want selected options to have a blue background with white text, and we want the second level menus to be the opposite (dark background with white text when unselected, and dark text on a light background when selected)
Advanced options exposed in the Menu Setup make this possible. Below are the CSS definitions used to create the menu effects above. Advanced users can of course upload their own images and references them in the uploads directory rather than the system provided images directory,
The supporting color scheme definition determines where the text colors come from depending on the "state" of the menus (whether they are selected or unselected)
If a CSS style is present, we can safely not provide colors like the Background Color as shown below since the background element would be replaced anyway by the background image provided in the CSS definition. The system is designed so that CSS definitions will supersede settings in the color definition.
There are limits however - the CSS settings pertain only to the "background" properties of menu items - therefore they may not over-ride things like text colors or styles.
8. Changing the style and spacing between side panel elements
Subtly different appearances can be achieved on the side panel elements by changing properties like the type of border, the border weight in pixels, the padding space (inside the side panel element box that separates the border from contained text) and the exterior space around the box (referred to as the amount of "padding" in the parent container (generally the left or right column). The default padding is five pixels for most sites, however this number is adjustable between one and twenty.
These are exposed as advanced options under System Setup / Preferences / Appearance / Web Page Settings.
Choices of 5 and 5 respectively for the side panel elements spacing and interior element padding result in side panel spacing as shown below. We avoid a cluttered look since an interior spacing of 5 pixels is allowed between interior text and the bounding container. Also side panel container elements themselves are separated by a 5 pixel "buffer"
9. Enabling, disabling and changing the sequence and of side panel display elements
The behaviours of the side panel elements are configured under System Setup / Preferences / Side Panels. More about Side Panel Elements is covered here.
Customizing Menus
Below is some sample CSS code that shows how to customize the Tigra menu system with CSS styles.
.m0l0oout {
box-shadow: 3px 3px 2px #A0A0A0; -moz-box-shadow: 3px 3px 2px #A0A0A0; -webkit-box-shadow: 3px 3px 2px #A0A0A0;
-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; margin:2px 0px;
}
.m0l0oover {
box-shadow: 3px 3px 2px #A0A0A0; -moz-box-shadow: 3px 3px 2px #A0A0A0; -webkit-box-shadow: 3px 3px 2px #A0A0A0;
-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; margin:2px 0px;
}
.m0l1oout,.m0l2oout {
box-shadow: 3px 3px 2px #A0A0A0; -moz-box-shadow: 3px 3px 2px #A0A0A0; -webkit-box-shadow: 3px 3px 2px #A0A0A0;
-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; margin:2px 0px;
}
.m0l1oover,.m0l2oover {
box-shadow: 3px 3px 2px #A0A0A0; -moz-box-shadow: 3px 3px 2px #A0A0A0; -webkit-box-shadow: 3px 3px 2px #A0A0A0;
-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; margin:2px 0px;
}