List of Stylevar Data Types

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • arvid
    Member
    • Jan 2005
    • 68

    List of Stylevar Data Types

    Click image for larger version

Name:	add_stylevar.png
Views:	3
Size:	29.4 KB
ID:	3715246
    Below you'll find a list of the different Data Types and a short description, an image of the editor for the type and an example of the use. All from vB 4.0.2.

    Simple Types
    String
    Click image for larger version

Name:	string.png
Views:	2
Size:	11.5 KB
ID:	3715232
    Any textstring can be entered. Useful for odd css entities. Keep in mind that there is a phrase system also. Maybe a phrase would be more fitting for your application?
    speak: {vb:stylevar your_string};

    Numeric
    Click image for larger version

Name:	numeric.png
Views:	2
Size:	11.5 KB
ID:	3715236
    Any textstring can be entered. No validation is build into the type so you are not limited to numbers. The only real benifit compared to the String type is that the title of the input box is Numeric instead of String, hinting to the user what should be entered. If you are going to use the value for a size I would use either the Dimension type or the Size type instead.
    font-size: {vb:stylevar your_number}px;
    [i]width: {vb:math {vb:stylevar single_width} * {vb:stylevar your_number}}px;

    URL
    Click image for larger version

Name:	url.png
Views:	2
Size:	11.2 KB
ID:	3715231
    Any textstring can be entered. No validation built into the type this time either. As with Numeric, the only real benifit compared to the String type is the title ("URL").
    background-image: url({vb:stylevar your_url});

    Path
    Click image for larger version

Name:	path.png
Views:	2
Size:	11.2 KB
ID:	3715234
    Again, any textstring can be entered, so the title is the only benifit compared to the String type.
    background-image: url(images/{vb:stylevar your_path}/image.png);

    Color
    Click image for larger version

Name:	color.png
Views:	2
Size:	11.1 KB
ID:	3715243
    This time, the type actually gives us something compared to the String type. This gives us a textfield and the little color-square you surely know by now. Either you enter the color in the textfield, or you click on the square and use the popup. Again there is no validation check that what you entered is a correct css color if you don't create your own using the Validation field.
    color: {vb:stylevar your_color}; or
    background-color: {vb:stylevar your_color}; or
    border-color: {vb:stylevar your_color};

    Image Path
    Click image for larger version

Name:	image_path.png
Views:	2
Size:	11.9 KB
ID:	3715239
    As most of the other simple types, this only gives you a title.
    background-image: url(images/{vb:stylevar your_path}/image.png);

    Image
    Click image for larger version

Name:	image.png
Views:	2
Size:	11.2 KB
ID:	3715238
    This doesn't even give you its own title, this just gave me a regular textfield labeled "String". (maybe a bug?)
    background-image: url({vb:stylevar your_image}); or
    background-image: {vb:stylevar your_image}; if you include the url() in your variable data

    Font List
    Click image for larger version

Name:	font_list.png
Views:	2
Size:	13.9 KB
ID:	3715241
    This gives you a textarea input box instead of the textfield, and its own title.
    font-family:{vb:stylevar your_fontlist};

    Size
    Click image for larger version

Name:	size.png
Views:	2
Size:	13.5 KB
ID:	3715233
    This gives you a select box labeled units containing different css units (px, em, % etc) and a textbox labeled Size. As usual, the texbox isn't validated.
    width:{vb:stylevar your_size};
    font-size:{vb:stylevar your_size};


    Complex Types

    Background
    Click image for larger version

Name:	background.png
Views:	2
Size:	30.0 KB
ID:	3715245
    Gives you the options availible to the css entity background. It seems no validation this time either. And writing a validation script would be tricky or maybe impossible (?)
    background:{vb:styelvar your_background};

    Font
    Click image for larger version

Name:	font.png
Views:	2
Size:	21.5 KB
ID:	3715240
    Suitable for the font css entity. No validation.
    font:{vb:stylevar your_font};

    Text Decoration
    Click image for larger version

Name:	text_decoration.png
Views:	2
Size:	21.9 KB
ID:	3715247
    For the text-decoration entity. Uses a collection of Yes/No radio buttons for each of the availible options. One a bit strange thing is that you can select None at the same time as all the other options, but if you do the none overrides the other so all is well
    text-decoration:{vb:stylevar your_textdecoration};

    Dimension
    Click image for larger version

Name:	dimension.png
Views:	2
Size:	14.7 KB
ID:	3715242
    Obviously used for things with a width and a height. Two textfields and one Popup for units.
    width:{vb:stylevar your_dimension.width};
    height:{vb:stylevar your_dimension.height};

    Border
    Click image for larger version

Name:	border.png
Views:	2
Size:	15.4 KB
ID:	3715244
    For the border entity.
    border:{vb:stylevar your_border};

    Padding
    Click image for larger version

Name:	padding.png
Views:	2
Size:	19.4 KB
ID:	3715235
    For the padding entity. The "Use the 'top' value for all sides" option is useful.
    padding:{vb:stylevar your_padding};

    Margin
    Click image for larger version

Name:	margin.png
Views:	2
Size:	19.9 KB
ID:	3715237
    Really the same as the Padding type. Css-wise they are the same, so the only reason would be for the user to know what they are entering info for, but since there is no label in this version of vBulletin it is redundant this far. (but since it is set in the database it might show up in future versions of vBulletin, so you better stick to the right type)
    margin:{vb:stylevar your_margin};
    Last edited by arvid; Mon 8 Mar '10, 11:29pm.
widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
Working...