📄 style_settings.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Visual QuickMenu</title>
<link rel="stylesheet" type="text/css" href="help.css">
<style type="text/css">
.rname {font-weight:normal;}
</style>
<script type="text/javascript">
function goto_bookmark()
{
if (window.location.search)
{
var tobj = document.getElementById(window.location.search.substring(1));
if (window.showHelp)
window.scrollTo(0,tobj.offsetTop+10);
else
window.scrollTo(0,tobj.offsetTop);
}
}
</script>
</head><body onload="goto_bookmark()" class="title" style="margin:20px;"><div style="padding-bottom:5px;font-size:13px;font-weight:bold;">
Style Settings Reference</div><div class="topdivider"></div><div class="content">
<div class="ctitle" style="color:#111111;">CSS Styles</div>
<div style="padding:10px;">
<div class="ctitle" id=backgroundColor>bg-color <span class="rname">[Background Color]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Background color settings are available for most items, titles, dividers, containers, and add-ons. Use any valid CSS color setting or choose a color using the color picker by clicking the build button to the right of the input field.
</div>
<div class="ctitle" id=backgroundImage>bg-image <span class="rname">[Background Image]</span></div>
<div class="icontent" style="margin-bottom:10px;">
CSS background images are best for creating tiled effects such as gradients. These images can also be used to create parent bullets or item images, however because of a bug in IE6 you may notice a flicker when applying these images to sub menu items or hover states. Because of this we
recommend using the item image and bullet features instead, these add-on's work around the IE6 flickering issues.
</div>
<div class="ctitle" id=backgroundRepeat>bg-repeat <span class="rname">[Background Repeat]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to repeat, repeat-x, repeat-y, or no-repeat, the default value is no-repeat.
<br>
<br>
Use the repeat option to tile an image, this option is best used for creating gradient type effects in the items or containers.
</div>
<div class="ctitle" id=backgroundPosition>bg-position <span class="rname">[Background Position]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Use any combination of top, left, center, or a dimensional value. The first value defines the vertical position, while the second value determines the horizontal position. When using two values
separate them with a space.
<br>
<br>
A setting of center center will center your image in the middle of the container or item. The position setting is
useful for attaching pure CSS bullets to parent items, you can set the bullet image to the right with center right.
</div>
<div class="ctitle" id=borderColor>border-color <span class="rname">[Border Color]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Defines the color of all border edges. Use any valid CSS color setting or choose a color using the color picker by clicking the build button to the right of the input field.
</div>
<div class="ctitle" id=borderStyle>border-style <span class="rname">[Border Style]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Specify the border style for all edges or individual edges. Valid styles are none, dotted, dashed, solid, double, groove, ridge, inset, outset. The default value is none.
<br>
<br>
To specify individual edges separate the values with a space, the order is top, right, bottom, left. A setting of... { solid
dashed solid dashed } will produce a solid top and bottom border with dashed left and right edges.
</div>
<div class="ctitle" id=borderWidth>border-width <span class="rname">[Border Width]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Specify the border width for all edges or individual edges. Use any valid unit value, typically px units are
preferred by most developers for border edges.
<br>
<br>
To specify individual edges separate the values with a space, the order is top, right, bottom, left. A setting of... { 5px 1px 1px 1px } will produce a 5 pixel tall top border with 1 pixel width right, bottom, and left edges.
</div>
<div class="ctitle" id=color>color <span class="rname">[Foreground Color]</span></div>
<div class="icontent" style="margin-bottom:10px;">
The color style typically defines the text color for items and titles. With add-ons this
parameter may define the color of a bullet or interactive element. Use any valid CSS color setting or choose a color using the color picker by clicking the build button to the right of the input field.
</div>
<div class="ctitle" id=cursor>cursor <span class="rname">[Cursor]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Specify a valid CSS cursor name... pointer, hand, help, resize, etc. The cursor defines the mouse cursor to display.
</div>
<div class="ctitle" id=fontFamily>font-family <span class="rname">[Font Family]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Specify any valid system font family, if left blank the default browser font will be used which is typically Times New Roman.
<br>
<br>
While any valid font may be specified, we recommend choosing a web safe font from the list, click the build button to the right of the filed to see the available settings.
</div>
<div class="ctitle" id=fontSize>font-size <span class="rname">[Font Size]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Define the size of you text with any valid dimensional unit such as px, em, %, etc.
<br>
<br>
By default the templates use px units, however we recommend using em units instead. Em's will allow your menu to be truly scalable in IE, px values fix the font size in IE and adjust to the users font size setting in all other browsers. Em's adjust to the users settings in all browsers.
<br>
<br>
Em units define a font size relative to the font size set on the menus containing element. Because of this your em setting may look different in the visual interface than it does once published to your web page. The visual tool uses a default containing font size of 13px, a setting of 1em in the visual tool is equivelent to 13px.
</div>
<div class="ctitle" id=fontStyle>font-style <span class="rname">[Font Style]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to normal, italic, oblique. The default value is normal.
</div>
<div class="ctitle" id=fontWeight>font-weight <span class="rname">[Font Weight]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to normal, bold, bolder, lighter. The default is normal.
</div>
<div class="ctitle" id=height>height <span class="rname">[Height]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Defines the height of an item or container. Use any valid CSS unit such as px, em, %, etc. to define your
dimensions. Setting the height to auto is the same as leaving the field blank.
</div>
<div class="ctitle" id=margin>margin <span class="rname">[Margin]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Margins comprise the space between the outside edge or border of an item and the next item or its container. Use any valid dimensional unit such as px, em, %, etc.
<br>
<br>
You can specify a single value which will apply to all edges or individual top, right, bottom, and left edges. When defining individual edges
separate each value with a space... { 10px 5px 10px 5px }.
<br>
<br>
Margins are best used with main or sub menu items to create a space or gap between the items. In a vertical sub menu you can add a bottom or top margin to create blank space between the items.
<br><br>
Margins may also be used to specifically position a sub menu container, use negative or positive values to offset the default positioning. You can also automatically position a sub menu by simply dragging it to any desired location while in design view.
</div>
<div class="ctitle" id=padding>padding <span class="rname">[Padding]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Padding is the space between an item or containers content and its edge, or border if applied. Use any valid dimensional unit such as px, em, %, etc.
<br>
<br>
You can specify a single value which will apply to all edges or individual top, right, bottom, and left edges. When defining individual edges
separate each value with a space... { 10px 5px 10px 5px }.
<br>
<br>
Padding applied to the main or sub menu containers create a buffer between your menu items and the edges of the container.
</div>
<div class="ctitle" id=textAlign>text-align <span class="rname">[Text Align]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to left, center, or right. The default value for this setting is typically inherited from the HTML page containing the menu.
</div>
<div class="ctitle" id=fontVariant>font-variant <span class="rname">[Font Variant]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to normal or small-caps. The small-caps option applies upper-case to all characters.
</div>
<div class="ctitle" id=lineHeight>line-height <span class="rname">[Line Height]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to any integer value greater than 0. The value determines the height of the text line in pixels. Most browsers will center the actual text within the height defined. Full cross browser testing for likeness should be performed with this setting.
</div>
<div class="ctitle" id=textDecoration>text-decoration <span class="rname">[Text Decoration]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Set to none, underline, overline, line-through, blink. The default value is none.
</div>
<div class="ctitle" id=width>width <span class="rname">[Width]</span></div>
<div class="icontent" style="margin-bottom:10px;">
Defines the width of an item or container. Use any valid CSS unit such as px, em, %, etc. to define your dimensions. Setting the width to auto is the same as leaving the field blank.
<br>
<br>
If setting a width for a main or sub menu container, make sure the width is wide enough to
accommodate your content.
</div>
</div>
<!--***********************************box animation-->
<div class="ctitle" style="color:#111111;margin-top:20px;">Add-On: Box Animation</div>
<div class="icontent" style="">
The box animation zooms and shrinks a CSS styled box before and after a sub menu is displayed. A wide array of effects may be achieved with this add-on by customizing the styles of the box and tweaking the position setting.
</div>
<div style="padding:10px;">
<div class="ctitle" id=box_animation_frames>box_animation_frames <span class="rname">[Frames]</span></div>
<div class="icontent" style="margin-bottom:10px;">
This is the total number of animation frames to use, however if combined with an
accelerator the number may be lower than what you specify resulting in a quicker animation sequence.
<br>
<br>
The lower the number the faster your animation will be, the higher the number the slower your animation will run.
</div>
<div class="ctitle" id=box_accelerator>box_accelerator <span class="rname">[Accelerator]</span></div>
<div class="icontent" style="margin-bottom:10px;">
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -