new ztest css /* An alternative version of the commonly used Deliciously Blue color theme. This look works with almost all layouts. */ /* This is a stylesheet for use with HotDoodle. It is both good and bad in that this stylesheet is heavily commented. The good part is that the comments can allow casual users to create their own looks without having to master stylesheets. The bad part is that the comments can make the stylesheet at first seem more complicated than it really is. You may upload your stylesheet through the Custom Look and Feel item on the admin menu. When you do this you will get a link that will run the stylesheet through the CSS validator at http://jigsaw.w3.org. We recomment that you run this and that you check also that what it echos as valid HTML has all that you input, because mismatched comments can take out whole blocks. If the formatting suddently goes weird, you probably started and forgot to close a comment. Check your recent edits, or use the validator above. ============================================================ == Site Theme Core Options ============================================================ // Core font size, others are computed relative to this // Typical xx-small= 9px // Typical x-small: 10px // Typical small: 13px // Typical medium: 16px // Typical large: 18px // Typical x-large: 24px // Typical xx-large: 32px Module titles are a place where the theme gets much of its look You can either go with the main colors (or something close) and make the titles bigger and bolder, or ypu can invert the titles where the normal background becomes their lettering and the normal font color becomes their background. Alternatively, they can be an entirely different color, perhaps with a light background. It depends on if you want the titles to be bars or not. Also do decide if if titles are centered. Navigation links are somewhat special Make them stand out by color, font, or size For blockish themes consider using the same color for =MODULE_TITLE_FONT_COLOR=, =MAIN_FONT_COLOR= Another style decision is to use this same font for =LINK_FONT_COLOR= and maybe even for =NAVLINK_FONT_COLOR= and =MANAGEMENTLINK_FONT_COLOR= However, if the links all have the same colors, consider differentiating them by other means such as font, boldness, size, or text-decoration. // Module title font, should be a complimentary to the background, or dark if there is no background // arial, verdana, "ms sans serif", sans-serif // tahoma, arial, verdana, "ms sans serif", sans-serif // Helvetica, Verdana // '"ms sans serif", sans-serif, verdana, arial'} ============================================================ == Site Color Legend ============================================================ // White // defaults to MAIN_BG_COLOR // defaults to MAIN_BG_COLOR // defaults to HEADER_BG_COLOR // defaults to HEADER_BG_COLOR // Color of block outline and title // White. Defaults to MAIN_BG_COLOR // White. White. Defaults to MODULE_BODY_BG_COLOR , set this only if you want a blockish look // defaults to MODULE_BODY_BG_COLOR // White. Defaults to MAIN_BG_COLOR // Blue Gray defaults to MODULE_BODY_BG_COLOR // moderate blue // Green gray Color of block outline and title // Dark Gray // Darker Gray. Used in places like form boxes. easier to see w/ background color // was 1B7457} // Forest Green. Defaults to MAIN_FONT_COLOR // was 1B7457} Forest Green Defaults to MAIN_FONT_COLOR // White // Bright Blue. Defaults to NAVBUTTON_HIGHLIGHT_BG_COLOR // midnight blue. was #9ECCFF Light Blue // Dark blue/violet. Defaults to LINK_FONT_COLOR // midnight blue. was #FF0000 Default RED // slightly pastel green. // was A1D1A1 slightly pastel green. Defaults to MODULE_BODY_BG_COLOR // Dark red == These colors are ok for almost all themes // Darker Blue // Pastel Blue // was 6DA6E2 Moderate Blue - but was too dark for the text ============================================================ == Do some assignments for some things that might not have been set above ============================================================ ============================================================ == These are rarely used and take on default values from the above, but you may set them ============================================================ // was 3a75b6 - bright blue ============================================================ == That WYSIWYG text editor: ============================================================ When that text editor opens, it sees something like the following:
Colors
MAIN_BG_COLOR = #FFFFFF | navbutton: hover leftsidebar/center background |
MODULE_BODY_BG_COLOR = transparent | modulebody background |
MODULE_BODY_BG_COLOR = transparent | CONTAINER_BG_COLOR = transparent container background |
MODULE_CONTROL_BG_COLOR = | module control background |
MODULE_TITLE_BG_COLOR = transparent | moduletitle background, row header, box boundary |
MODULE_TITLE_FONT_COLOR = #666666 | moduletitle and H3 font |
NAVBUTTON_HIGHLIGHT BG_COLOR = #ffffff | body border, navbutton border and hover background, navbuttoncurrent background |
HOVER_BG_COLOR = #3a75b6 | row hover background |
MAIN_FONT_COLOR = #676767 | text, links, input area text |
MINOR_FONT_COLOR = #666666 | Lighter text to for secondary items such as "posted" |
LINK_FONT_COLOR = #0C3F81 | regular links |
NAVLINK_FONT_COLOR = #0C3F81 | navlink, title_link font |
MANAGEMENTLINK FONT_COLOR = #0C3F81 | management links and navigation_mngmntlink font |
MANAGEMENTLINK BG_COLOR = #C5DAB3 | management links and navigation_mngmntlink font |
BORDER_COLOR = #2763A5 | outlines blocks and sections (in blockish themes), seperates tabs, is color of pulldown and top menus |
ALT_BG_COLOR = #CEE5FF | form header, even row div.container_editheader, edit box border, input background, body margin |
*/
.container_info {
font-size: x-small;
font-weight: bold;
}
/*Hierarchy 6*/
a.container_mngmntlink {
}
/* .moduletitle is used by just about every module
Example:
{$moduletitle}
{$moduletitle}
{$moduletitle}
{$moduletitle}
Setting this is pretty much manditory
*/
.moduletitle {
font-weight: bold;
font-size: large;
/* Some get a cool effect by playing with titles
font-weight: 100;
font-family: tahoma, arial, verdana, "ms sans serif", sans-serif;
*/
color: #666666; /* =MODULE_TITLE_FONT_COLOR= */
/* Don't set the background color if in a totally non blockish theme */
/* If you use a contrasting background-color, you should set the padding so that the text
is not too close to the colored rectangle.
*/
padding-left: 4px; padding-top: 1px; padding-bottom: 1px;
margin-left: 0px; /* Negative values are honored by Mosilla, but IE treats them as positive, making things worse */
/* width: 100%; */ /* Not needed for what is generated in here, and it confuses some browsers */
/* Centering the text can make a big visual difference */
/* text-align: center; */
}
.admincontrol { /* replacement for .modulecontrol. Hardcoded standard colors */
background-color: #A1D1A1; /* =DOODLELINK_BG_COLOR= */
width: 100%;
border: 10px groove #666666; /* =MINOR_FONT_COLOR= */
margin-bottom: 20px; /* Visual seperator before start of page */
}
/* If the container has a visible outline, we will generally we want the title
to streatch from end to end of container, but will
need the contents to have some offset. For these, set
modulebody and modulecontrol to have padding-left and container to have no padding
The modulebody control is actually applied to a table and not a div.
This is because if the inner content contains a table and the div has padding
the table might push outside the div (in mozilla), or expand the div (in IE)
*/
.modulebody {
padding-left: 8px;
padding-right: 4px;
width: 100%;
/* Do not set the background color if in a totally non blockish theme */
padding-bottom: 4px;
/* border-bottom: 1px solid gray;*/ /* what a mess! */
}
.Compact_modulebody {
padding: 0px;
margin: 0px;
}
.login_modulebody {
width: 175px; /* We don't want these extending across big screens */
}
/* =======================================
=======================================
=======================================
Special block types
=======================================
=======================================
======================================= */
/* Style Invisible is mainly for containers. It is for a container that is not seen.
For example, in a block hilighted theme, a 2-col container would have its
2 cols of contents in the block bachground. Using the invis container
shows the blocks without a noticalbe change in background.
*/
div.Invis_container_box {
background-color: transparent; /* Should be transparent or =MAIN_BG_COLOR=
transparent allows the background image to come through */
border: none;
}
.Invis_moduletitle {
background-color: transparent; /* Should be transparent or =MAIN_BG_COLOR=
It should be the same as for Invis_container_box
so that the text does not seem to be highlighted */
/* Also unset any padding so there is no visible mark of the block's presence */
padding-left: 0px;
padding-right: 0px;
}
.Invis_modulebody {
background-color: transparent; /* Should be transparent or =MAIN_BG_COLOR=
It should be the same as for Invis_container_box
so that the text does not seem to be highlighted */
/* Also unset any padding so there is no visible mark of the block's presence */
padding-left: 0px;
padding-right: 0px;
border: none;
}
div.Header_container_box {
background-color: transparent; /* Should be transparent or =MAIN_BG_COLOR=
transparent allows the background image to come through */
border: none;
vertical-align: bottom;
}
div.Center_container_box {text-align: center;}
.Center_moduletitle {text-align: center;}
.Center_modulebody {text-align: center;}
div.Left_container_box {text-align: Left;}
.Left_moduletitle {text-align: Left;}
.Left_modulebody {text-align: Left;}
div.Right_container_box {text-align: Right;}
.Right_moduletitle {text-align: Right;}
.Right_modulebody {text-align: Right;}
div.Wide_container_box {width: 100%;}
.Wide_moduletitle {width: 100%;}
.Wide_modulebody {width: 100%;}
div.Feature_container_box {
background-color: #FFFFFF; /* =MAIN_BG_COLOR= */
}
.Feature_moduletitle {
color: #676767; /* =MAIN_FONT_COLOR= */
}
.Feature_modulebody {
color: #676767; /* =MAIN_FONT_COLOR= */
background-color: #FFFFFF; /* =MAIN_BG_COLOR= */
font-weight: bold;
font-size: medium;
/* width: 100%; */
}
div.Minor_container_box {
background-color: #CEE5FF; /* =ALT_BG_COLOR= */
}
.Minor_moduletitle {
font-size: small;
color: #676767; /* =MAIN_FONT_COLOR= */
background-color: #CEE5FF; /* =ALT_BG_COLOR= */
}
.Minor_modulebody {
background-color: #CEE5FF; /* =ALT_BG_COLOR= */
font-size: xx-small;
/* width: 100%; */
}
/* Category title is used for article categories and for bb names,
if not overridden by bb_category_title.
It is shared to make it easier to keep these things in the same style.
Note that the biggest item of text in it is of class
navlink bb_navlink bb_navlink_category, so if you want the categories to
stand out you need to either do something with borders and backgrounds
in td.category_title, or else set the optional
bb_navlink or bb_navlink_category classes
Maybe have the category title shaded, but have the titles of articles be unshaded.
Examples:
| Not Categorized | orThe 1 board See all 3 Articles | */ .category_title { font-weight: bold; font-size: medium; /* If you use a contrasting background-color, you should set the padding so that the text is not too close to the colored rectangle. */ /* Do not set the background color if in a totally non blockish theme */ /* background-color: #ffffff; */ /* =NAVBUTTON_HIGHLIGHT_BG_COLOR= */ padding-left: 4px; padding-top: 1px; padding-bottom: 1px; } /* After modules and cats, there are items Example Use:{$gallery->name}
{$post->title}
*/
.itemtitle { /* imagegallery, newsmodule, weblogmodule. See moduletitle */
/*
font-size: small;
font-family: verdana, arial, "ms sans serif", sans-serif;
*/
font-weight: bold;
}
.paypal_itemtitle {
font-size: medium;
}
/* Title links are for parts of titles that are links
They should generally have the same color as a navlink
It is pretty much a manidoty class.
Example Usage:
Details...
*/
.title_link {
font-size: xx-small;
font-weight: bold;
text-decoration: underline;
color: #0C3F81; /* =NAVLINK_FONT_COLOR= */
}
/* If the category title is inversed, then the font must also be inversed
Example Usage:
id more=1 title=$moduletitle}">{$board->name}
id more=1 title=$moduletitle}">{if $board->article_cnt > 1}See all {$board->article_cnt} {$config->article_name_plural}{else}See {$config->article_name}{/if}
|
*/
.category_title_link {
color: #666666; /* =MODULE_TITLE_FONT_COLOR= */
}
/* Summaries are the opposite of titles
Example Usage:
|
*/
.summary {
font-size: x-small;
padding-left:1.5em;
color: #676767; /* =MAIN_FONT_COLOR= */
}
/* Some things need a deeper indentation and less emphisis. They use summary2
Example: |
*/
.summary2 {
padding-left:3em;
font-size: xx-small;
color: #666666; /* =MINOR_FONT_COLOR= */
}
/* Much of the site is in table columns, so any setting of
general td will affect many things.
It is best to not have anything here and to let the general div take care of it all
*/
td {
}
/* H3s are still in use in a few places
configure_site, some calendar views, some workflow views
*/
h3 {
color: #666666; /* =MODULE_TITLE_FONT_COLOR= */
background-color: transparent ; /* =MODULE_TITLE_BG_COLOR= */
}
/* H1: manage_sites */
/* H2: manage_sites */
/* Unqualified spans are used for theme display, file upload
article status
It is probably best if it resets the color to the system default
*/
span {
color: #676767; /* =MAIN_FONT_COLOR= */
}
/* table {
padding: 0px;
width: 100%; -- Blows the mini calendar
} */
/* Some tables have alternating highlight rows.
example: class="row {cycle values='even_row,odd_row'}"
See the "manage page" page for an example
*/
tr.row {
}
tr.even_row {
background-color: #CEE5FF; /* =ALT_BG_COLOR= */
}
tr.odd_row {
}
tr.row:hover td, tr.row:hover td a {
background-color: #3a75b6; /* =HOVER_BG_COLOR= */
color: transparent; /* =MODULE_BODY_BG_COLOR= */
}
/* Headers of tables
Example Use:
| Username |
*/
td.header {
background-color: #9ECCFF; /* =MODULE_TITLE_BG_COLOR= */
color: #666666; /* =MODULE_TITLE_FONT_COLOR= */
font-weight: bold;
font-size: small; /* Medium? */
/* No padding if not in a blockish theme */
padding: 0px;
}
td.header a {
background-color: transparent; /* =MODULE_TITLE_BG_COLOR= */
/* Don't override the link color */
font-weight: bold;
font-size: small; /* Medium? */
padding: 2px;
}
td.boxed { /* This was called administration_modmgrbody in older stylesheets */
border: 2px solid #2763A5; /* =BORDER_COLOR= */
padding-left: 10px;
}
/* ==============================
== Links
============================== */
/* 'a' is for the links the user embeds such as with the wywisig editor.
Links to other pages in the site are some form of the a.navlink class
and links to functionality (such as add article) are some form of the a.mngmtlink class */
a {
font-weight: bold;
text-decoration: none;
color: #0C3F81; /* =LINK_FONT_COLOR= */
font-family: verdana, arial, "ms sans serif", sans-serif;
}
/* All of the used links can have a :visited form that changes their color a bit so
folks can see where they have recently been */
a:visited {
}
a:hover {
text-decoration: underline;
color: #666666; /* =MINOR_FONT_COLOR= */
/* background-color: #3a75b6; */ /* =HOVER_BG_COLOR= */
}
/* mngmntlinks (all variants) are for links that do something -- drop a posting,
join a group, etc. They change the state of the DB.
Some themes prefer to mark these somehow, perhaps by making them a bolder color
or in a different font or text decoration. This acts as a warning to users
that the link will do something.
This class is manditory, it is the lead and sometimes the only class listed
Many modules will have a variant of this for optional overrides e.g.
class="mngmntlink article_mngmntlink"
class="mngmntlink calendar_mngmntlink"
It is also often used with mngmntlink_small and doodlelink
*/
a.mngmntlink {
font-size: small;
text-decoration: underline;
color: #0C3F81; /* =MANAGEMENTLINK_FONT_COLOR= */
/* If links are not differentiated in color,
then make them standout by weight, font, decoration, or background color */
/* Highlighting the font in a slightly different background draws the eye to management links. See EarthYellow */
}
a.mngmntlink:hover {
background-color: transparent;
text-decoration: underline;
color: #666666; /* =MINOR_FONT_COLOR= */
}
/* The _small mngmntlink is used where vertical space is at a premium
It is an optional class, always being used in a sequence of the following
class="mngmntlink mngmntlink_small"
*/
a.mngmntlink_small {
font-size: xx-small;
}
/* the doodlelink is used for things like the edit and permission icons.
It should be visually small, but visually distinctive (such as being red).
It is an optional class, always being used in a sequence of the following
class="mngmntlink mngmntlink_small doodlelink"
*/
a.doodlelink {
font-size: xx-small;
padding-right: 4px;
text-decoration: underline;
}
a.doodlelink:hover {
padding-right: 4px;
text-decoration: none;
background-color: #ffffff; /* =NAVBUTTON_HIGHLIGHT_BG_COLOR= */
}
/* navigation_mngmntlink is used for those mngmntlinks that affect navigation
e.g. add a page, what type of page, delete page
It is a very optional class, always being used in a sequence of the following
class="mngmntlink navigation_mngmntlink"
*/
a.navigation_mngmntlink {
text-decoration: none;
color: #0C3F81; /* =MANAGEMENTLINK_FONT_COLOR= */
font-weight: bold;
font-size: small;
}
/* navlinks (all variants) are for links that take you somewhere else in the site
but which do NOT do something -- they do not change the state of the DB.
This class is manditory, it is the lead and sometimes the only class listed.
Many modules will have a variant of this for optional overrides e.g.
class="navlink article_navlink"
class="navlink login_navlink"
*/
.navlink {
color: #3a75b6; /* =NAVLINK_FONT_COLOR= #2C2574 */
font-size: small;
padding: 2px;
}
/* Consider also setting a.navlink:hover */
/* Navlink current is used only on navlinks that refer to the current page
In it, you can change the color, font, background, etc to show the user where they are
The class is optional, all uses of it also use navlink.
class="navlink navlinkcurrent"
class="navlink navlinkbutton navlinkcurrent navlinkcurrentbutton"
*/
.navlink:hover {
background-color: #3a75b6;
color: #FFFFFF; /* =MAIN_BG_COLOR= */
text-decoration: none;
}
.navlinkcurrent {
font-weight: 900;
background-color: #ffffff; /* =NAVBUTTON_HIGHLIGHT_BG_COLOR= */
}
/* For navlinks used in categories. If the category uses a background color,
then we must invert the font color. Example Usage:
id}">{$board->name}
|
or
{$catid->name}
|
*/
.category_navlink {
color: #666666; /* =MODULE_TITLE_FONT_COLOR= */
text-decoration: underline;
/* Reset the size to be the same as for the category bar */
font-size: medium;
/* font-weight: bold; */
}
/* ==============================
== Navigation Menu Buttons
============================== *
/* Navlink button is used only in SOME navigation menus such as Expanding_hierarchy_Buttons.
This class is used for the wrapping table, for the individual table cells,
and for the links in the table.
class="navlink navlinkbutton"
class="navlink navlinkbutton navlinkcurrent navlinkcurrentbutton"
*/
table.navbutton {
border: 1px solid #FFFFFF; /* =MAIN_BG_COLOR= */
/* For some reason, full width tables cross outside of the container boundaries
in Mozilla but not in netscape.
Narrow this table
*/
width: 100%;
}
/* The normal navbuttons are either of class navbutton or,if the Rounded style
is in effect, of class navbutton_rounded. Unlike most things on this
stylesheet, both are not used, so navbutton_rounded is not just a fine-tune
of navbutton
*/
td.navbutton {
padding: 3px; /* inner space between menu items */
margin: 8px; /* space between containers, shows the generic section color or background */
background-color: transparent; /* =MODULE_BODY_BG_COLOR= */
border: 1px solid #2763A5; /* =BORDER_COLOR= */
background: url(/hotdoodle_engine/themes/images/Deliciously_Blue/Deliciously_Blue_barfill2.gif);
background-repeat: repeat-x;
}
td.navbutton a.navlink {
color: transparent; /* =MODULE_BODY_BG_COLOR= */
padding-left: 4px;
padding-right: 4px;
}
td.navbutton a.navlink:hover{
color: #CEE5FF; /* =ALT_BG_COLOR= */
text-decoration: underline;
background-color: transparent;
}
td.navbutton_rounded { /* Used when the rounded style is in effect. Ir is this or td.navbutton, but not both */
border: none;
padding: 4px 0px 4px 0px; /* inner space between menu items */
}
td.navbutton:hover { /* Not honored in IE */
/* background-color: #ffffff; */ /* =NAVBUTTON_HIGHLIGHT_BG_COLOR= */
color: #CEE5FF; /* =ALT_BG_COLOR= */
}
/* Chose between =MAIN_BG_COLOR= and =NAVLINK_FONT_COLOR= for the colors here */
td.navbuttoncurrent {
background-color: #ffffff; /* =NAVBUTTON_HIGHLIGHT_BG_COLOR= */
}
.navlinkbutton {
font-size: x-small;
color: #0C3F81; /* =NAVLINK_FONT_COLOR= */
padding: 6px; /* Needed to give it some offset from box */
/*
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: large;
font-weight: 100;
*/
}
.navlinkcurrentbutton {
/* Most styles make the current button a bit bigger than the others */
font-size: small;
font-weight: bold;
background-color: transparent;
color: #0C3F81; /* =NAVLINK_FONT_COLOR= */
}
/* The userguide_navlink class is used only for links to the hotdoodle manual
and when used it is always used with navlink as well. e.g.
class='navlink userguide_navlink'
The class is optional, but if not set these userguide links might be too prominent
*/
.userguide_navlink {
background: #A0C5EC url("/hotdoodle_engine/iconset/doodle_help_wtxt.gif") no-repeat top left;
color: #676767;
font-size: xx-small;
height: 16px;
text-decoration: underline;
padding-left: 45px;
}
/* The following are used for help on forms.
Help boxes are the expanding help. Tipboxes are always open
*/
.helpbox {
border: 1px solid #2763A5;
background-color: #9ECCFF; /* =HELP_BG_COLOR= */
padding: 4px;
}
.tipbox {
width: 30%;
}
/* ==============================
== Title
============================== *
/* .title is used by just about every module and is one level less than moduletitle
However, it is used in some links so it must appear after links
in the stylesheet.
Example:
Not Categorized |
{$article->subject}
|
Setting this is pretty much manditory
*/
.title {
font-size: medium;
/* If you want regular titles to be a different color than main divisions, then set it here */
/* color: #676767; */ /* Anything except for =MODULE_TITLE_FONT_COLOR=, because that color would be there by default */
/* If you use a contrasting background-color, you should set the padding so that the text
is not too close to the colored rectangle.
background-color: #222222;
padding-left: 4px; padding-top: 1px; padding-bottom: 1px;
*/
}
/* =======================================
=======================================
=======================================
Fine Tune BreadCrumb and You are Here
=======================================
=======================================
======================================= */
/* The You are Here classes are used in navigation breadcrumb and youarehere views
These typically are used as page titles so the HTML generator
special cases an extra class on them. In here you can set the font to be huge, set
background or boundaries, and otherwise make the section stand out
*/
.youarehere_modulebody {
font-size: x-large;
padding-left: 8px;
padding-right: 4px;
width: 100%;
color: #0C3F81;
/* Either set color or shading */
background-color: #ffffff; /* =NAVBUTTON_HIGHLIGHT_BG_COLOR= */
color: transparent; /* =MODULE_BODY_BG_COLOR= */
background-color: transparent; /* =MODULE_BODY_BG_COLOR= */
border: 1px solid #2763A5; /* =BORDER_COLOR= */
background: url(/hotdoodle_engine/themes/images/Deliciously_Blue/Deliciously_Blue_barfill2.gif);
background-repeat: repeat-x;
}
/* You also need to override the navlink to be the same font size */
a.youarehere_navlink {
font-size: x-large;
color: transparent; /* =MODULE_BODY_BG_COLOR= */
padding-left: 8px;
padding-right: 8px;
}
a.youarehere_navlink:hover {
color: #CEE5FF; /* =ALT_BG_COLOR= */
background-color: transparent;
text-decoration: underline;
}
/* ==============================
== Sometimes we just need things to be smaller such as in calendar summaries
==============================
Example: |
12/31/69
| Uploads have been disabled.
It should be noticable
*/
.error {
font-weight: bold;
color: #8B0000; /* =ERROR_COLOR= Not the =MAIN_FONT_COLOR=, make it stand out */
padding-bottom: 1em;
}
/* =======================================
=======================================
=======================================
Most titles
=======================================
=======================================
======================================= */
/* Forms have titles and headers. Typical usage:
Compose a Message
If you want to send this message to more than one user on the system, simply add their usernames to the list by highlighting them individually and clicking the '>>' button.
{$form_html}
*/
div.form_header {
border-top: 1px solid #2763A5; /* =BORDER_COLOR= */
border-bottom: 1px solid #2763A5; /* =BORDER_COLOR= */
margin-bottom: 1em;
}
div.form_title {
font-size: small; /* Medium? */
font-weight: bold;
}
/* These affect the fields on the forms */
input, textarea, select {
background-color: #CEE5FF; /* =FORMS_BG_COLOR= */
font-size: x-small;
color: #3A3A3A; /* #676767; /* =MAIN_FONT_COLOR= */
padding-top: 0px; padding-bottom: 0px; padding-right: 0px;
padding-left: 2px;
border-color: #2763A5; /* =BORDER_COLOR= */
}
input.button {
border-style: solid;
border-color: #2763A5; /* =BORDER_COLOR= */
border-width: 1px;
}
textarea {
font-family: verdana, arial, "ms sans serif", sans-serif;
}
/* ==============================
== Nav tree
============================== */
/* Manage tree uses tabbed navigation. That uses the following classes */
td.tab_btn_current {
background-color: inherit;
border-bottom: 0px solid #2763A5; /* =BORDER_COLOR= */
}
td.tab_main {
padding: .5em;
border: 1px solid #2763A5; /* =BORDER_COLOR= */
border-top: 0px solid #2763A5; /* =BORDER_COLOR= */
}
td.tab_btn_last {
}
td.tab_spacer {
border-bottom: 1px solid #2763A5; /* =BORDER_COLOR= */
border-left: 1px solid #2763A5; /* =BORDER_COLOR= */
}
td.tab_btn {
border: 1px solid #2763A5; /* =BORDER_COLOR= */
border-right: 0px solid #2763A5; /* =BORDER_COLOR= */
background-color: #CEE5FF; /* =ALT_BG_COLOR= */
padding: .5em;
}
/* =======================================
=======================================
=======================================
Fine Tune
=======================================
=======================================
======================================= */
calendar_highlights_moduletitle {
color: #676767; /* =MAIN_FONT_COLOR= */
border: 1px solid #2763A5; /* =BORDER_COLOR= */
}
/* =======================================
=======================================
=======================================
Top navigation tab stuff,
used in Top Nav Buttons and Top Nav Fancy views
=======================================
=======================================
======================================= */
/* == BEGIN == TOP NAV =============================== */
table.topnavfancy a.navlink_topnavfancy { /* Used in both Top Nav Buttons and Top Nav Fancy */
float:left;
display:block;
padding:5px 5px 4px 5px;
margin-right:1px;
color: #FFFFFF; /* =MAIN_BG_COLOR= */
background:url("http://hotdoodle.com/sitetemplates/Deliciously_Blue/tabright10.gif") no-repeat right top;
}
table.topnavfancy a.navlink_topnavfancy:hover { /* Used in both Top Nav Buttons and Top Nav Fancy */
/*font-size: x-small;*/
/* padding:5px 1px 4px 1px; */
background-position:100% -42px;
}
table.topnavfancy { /* Used in Only Top Nav Buttons */
margin-left: 4px;
margin-right: 1px;
padding: 0px;
text-align: left;
background-color: transparent;
}
tr.topnavfancy { /* Used in Only Top Nav Buttons */
margin: 0px;
text-align: center;
/* Maybe set a different color here */
background-color: transparent; /* =BORDER_COLOR= */
}
td.topnavfancy { /* Used in Only Top Nav Buttons */
text-align: left;
background-color: transparent; /* =TOPNAV_BG_COLOR= */
background:url("http://hotdoodle.com/sitetemplates/Deliciously_Blue/tableft10.gif") no-repeat left top;
margin-left:2px;
padding:0px 1px 0px 1px;
text-decoration:none;
vertical-align: middle;
white-space: nowrap;
}
td.topnavfancy:hover { /* Used in Only Top Nav Buttons */
margin-left:1px;
background-position:0% -42px;
vertical-align: middle;
}
/* == END == TOP NAV =============================== */
/* == BEGIN == TOP NAV FANCY =============================== */
div.topnavfancy { /* places bg across whole bar */
padding: 8px;
text-align: center;
border: 1px solid #2763A5; /* =BORDER_COLOR= */
background-color: transparent; /* =TOPNAV_BG_COLOR= */
background: url(/hotdoodle_engine/themes/images/Deliciously_Blue/Deliciously_Blue_barfill1.gif);
background-repeat: repeat-x;
vertical-align: middle;
/* height: 10px; */
}
div.topnavfancy a.navlink {
color: #FFFFFF; /* =MAIN_BG_COLOR= */
text-decoration: none;
background-color: transparent;
}
div.topnavfancy a.navlink:hover {
text-decoration: underline;
background-color: transparent;
}
/* == END == TOP NAV FANCY =============================== */
/* =======================================
=======================================
=======================================
Enable Rounded Top Nav Buttons -- tabs, really
=======================================
=======================================
======================================= */
/* end rounded corners */
/* =======================================
=======================================
=======================================
Top Pulldown view -- this needs alot of CSS declarations
whenever it is used
=======================================
=======================================
======================================= */
#TopPullDown {
width: 100%;
background: #FFFFFF; /* set to =MAIN_BG_COLOR= so that empty space is not obvious */
float:left;
/* border: 5px solid #2763A5; */ /* =BORDER_COLOR=, set if you want the entire menu bordered */
}
#TopPullDown ul {
list-style: none;
margin:0;
padding: 0;
}
#TopPullDown a, #TopPullDown h6 {
/* font: bold 11px/16px arial, helvetica, sans-serif; */
font-weight: bold;
display: block;
border-left: 2px solid #FFFFFF; /* =MAIN_BG_COLOR=, not the border color */
border-right: 2px solid #FFFFFF; /* =MAIN_BG_COLOR==, not the border color*/
margin: 0;
padding: 2px 3px;
background: transparent; /* =CONTAINER_BG_COLOR= */
}
#TopPullDown h6 {
color: #2763A5; /* =BORDER_COLOR= */
}
#TopPullDown a {
color: #0C3F81; /* =NAVLINK_FONT_COLOR= */
text-decoration: none;
}
#TopPullDown a:hover {
background: #FFFFFF; /* =MAIN_BG_COLOR= */
color: #0C3F81; /* =NAVLINK_FONT_COLOR= */
}
#TopPullDown ul ul a { /* Properties of submenus */
background: transparent; /* =CONTAINER_BG_COLOR= */
}
#TopPullDown li {
position:relative;
float: left;
/* width: 8em; */
text-align:center;
}
#TopPullDown li li {
position:relative;
float:left;
text-align:left;
width:12em;
}
#TopPullDown ul ul {
position: absolute;
z-index: 500;
}
#TopPullDown ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#TopPullDown ul ul {
display: none;
}
div#TopPullDown ul ul,
div#TopPullDown ul li:hover ul ul,
div#TopPullDown ul ul li:hover ul ul
{display: none;}
div#TopPullDown ul li:hover ul,
div#TopPullDown ul ul li:hover ul,
div#TopPullDown ul ul ul li:hover ul
{display: block;}
/* =======================================
=======================================
=======================================
Specific to some themes
=======================================
=======================================
======================================= */
.sidebar { /* used in many themes. 1024x768 should be the typical presumed window size */
background-color: transparent; /* =SIDEBAR_BG_COLOR= */
height: 400px; /* Guarantee a min page size so that small pages don't look odd */
width: 50px;
}
.primarysidebar, .leftsidebar, .mainsidebar {
/*
Updated to consolidate class names, eventually only the
first class name will remain.
*/
width: 50px;
padding-right: 14px;
}
.secondarysidebar, .rightsidebar {
/*
Updated to consolidate class names, eventually only the
first class name will remain.
*/
padding-left: 14px;
}
/* The stylesheet does not know if the left or the right sidebar is the main
one, the one with logins, menus, etc.
The layout file sets mainsidebar as an extra class.
Example Usage:
*/
table.bodyframe {
}
td.bodyframeleft {
}
td.bodyframeright {
}
td.bodyframebottom {
}
.mainarea, .centerarea, .divmain {
/*
Updated to consolidate class names, eventually only the
first class name will remain.
*/
vertical-align: top;
background-color: #FFFFFF; /* =MAIN_BG_COLOR= */
/* border-right: 1px solid #2763A5; */ /* Should generally be set to =MODULE_TITLE_FONT_COLOR= or border_color*/
/*
padding-left: 10px;
padding-right: 10px;
*/
/* set margin-bottom if you want the header bar seperated */
/* margin-bottom: 8px; */
}
/* divtop is used in many themes, and stands alone. It used to be called .header, but this conflicted
|
*/
.divtop {
/*
Updated to consolidate class names, eventually only the
first class name will remain.
*/
/* set margin-bottom if you want the header bar seperated */
border-bottom: 4px solid #2763A5; /* Set this to =MODULE_TITLE_BG_COLOR= you want a border around just the header*/
background-color: transparent; /* =MAIN_BG_COLOR= */
}
.mainarea, .centerarea,.divmain {
/*
Updated to consolidate class names, eventually only the
first class name will remain.
*/
background-color: transparent; /* =MAIN_BG_COLOR= */
}
/* Footer is used in many themes, and is typically a specialization of center area
(even if it is not centered tothe centyer area
Typical Usage:
*/
.footer, .divfooter, .divfoot {
/*
Updated to consolidate class names, eventually only the
first class name will remain.
*/
background-color: #CEE5FF; /* =ALT_BG_COLOR= */
font-size: xx-small;
}
.divmanagepage{
}
/* =======================================
=======================================
=======================================
Look specific enhancements
=======================================
=======================================
======================================= */
div.Feature_container_box {
background-color: transparent; /* =MODULE_BODY_BG_COLOR= */
border: 4px solid #2763A5; /* =BORDER_COLOR= */
padding: 4px;
}
.Feature_moduletitle {
text-align: center;
color: transparent; /* =MODULE_BODY_BG_COLOR= */
background-color: #2763A5; /* =BORDER_COLOR= */
padding: 4px;
}
.Feature_modulebody {
background-color: #2763A5; /* =BORDER_COLOR= */
padding: 4px;
}
.Feature_modulebody td {
color: transparent; /* =MODULE_BODY_BG_COLOR= color doesn't set with .feature_modulebody in IE*/
}
.Feature_modulebody a {
background-color: transparent; /* =MODULE_BODY_BG_COLOR= */
padding-left: 2px;
padding-right: 2px;
}
div.Feature2_container_box {
border: 2px dashed #676767; /* =MAIN_FONT_COLOR= */
}
.Feature2_moduletitle {
background-color: #676767;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding: 2px;
}
.Feature2_modulebody {
font-weight: normal;
font-size: small;
text-align: center;
padding: 4px;
}
div.Feature3_container_box {
background-color: #2763A5; /* =BORDER_COLOR= */
}
.Feature3_moduletitle {
text-align: center;
color: #CEE5FF; /* =ALT_BG_COLOR= */
}
.Feature3_modulebody {
text-align: center;
color: #CEE5FF; /* =ALT_BG_COLOR= */
}
.Feature3_modulebody td {
color: transparent; /* =MODULE_BODY_BG_COLOR= color doesn't set with .feature_modulebody in IE*/
}
.Feature3_modulebody a {
color: #FFFFFF; /* =MAIN_BG_COLOR= */
text-decoration: underline;
padding-left: 4px;
padding-right: 4px;
}
.Feature3_modulebody a:hover {
color: #2763A5; /* =BORDER_COLOR= */
background-color: #CEE5FF; /* =ALT_BG_COLOR= */
text-decoration: none;
}
div.Feature4_container_box {
}
.Feature4_moduletitle {
}
.Feature4_modulebody {
border: 12px dotted #CEE5FF;
padding: 10px;
width: auto;
}
div.Minor_container_box {
background-color: #CEE5FF; /* =ALT_BG_COLOR= */
}
.Minor_moduletitle {
font-size: small;
}
.Minor_modulebody {
font-size: xx-small;
}
div.Minor2_container_box {
border: 2px double #2763A5; /* =BORDER_COLOR= */
}
.Minor2_moduletitle {
font-size: small;
border-bottom: 1px solid;
border-color: #2763A5; /* =BORDER_COLOR= */
}
.Minor2_modulebody {
font-size: medium;
}
div.Minor3_container_box {
border: 1px solid;
border-color: #CEE5FF; /* =ALT_BG_COLOR= */
width: 90%;
}
.Minor3_moduletitle {
padding: 6px;
}
.Minor3_modulebody {
padding: 4px;
}
/* Containers insert BRs between adjacient containers
The margin here defines the dividers in the site
*/
br.container {
}
br.Compact_container {
line-height: 0px;
padding: 0px;
margin: 0px;
}
div.Compact_container_box {
padding: 0px;
margin: 0px;
}
div.Box_container_box {
width: 300px;
border: 2px solid #2763A5;
text-align: center;
}
.Box_moduletitle {
width: 300px;
text-align: center;
}
.Box_modulebody {
height: 200px;
text-align: center;
} | |