For my latest plugin, the Amazon Login for WooCommerce, you need to add an Amazon app in order to use it. Here is, how this works: Continue reading
Category: Uncategorized
Available LESS variables in the theme
In the theme folder you can find the LESS variables in the following files:
- /assets/less/variables.less (Twitter Bootstrap variables)
- /assets/less/{theme-name}-variables.less (where {theme-name} is the current theme name like schema-corporate)
You can edit these files directly or (which is better if you want to get automatic updates): you can edit the variables directly on the themes options page. Just activate custom colours and scroll down to the “LESS Variable Changer”.
Here is a short excerpt of the variables.less:
// Grays // ------------------------- @black: #000; @grayDarker: #222; @grayDark: #333; @gray: #555; @grayLight: #999; @grayLighter: #eee; @white: #fff; // Accent colors // ------------------------- @blue: #049cdb; @blueDark: #0064cd; @green: #46a546; @red: #9d261d; @yellow: #ffc40d; @orange: #f89406; @pink: #c3325f; @purple: #7a43b6; // Scaffolding // ------------------------- @bodyBackground: @white; @textColor: @grayDark; // Links // ------------------------- @linkColor: #08c; @linkColorHover: darken(@linkColor, 15%); // Typography // ------------------------- @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif; @monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; @baseFontSize: 14px; @baseFontFamily: @sansFontFamily; @baseLineHeight: 20px; @altFontFamily: @serifFontFamily; @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily @headingsFontWeight: bold; // instead of browser default, bold @headingsColor: inherit; // empty to use BS default, @textColor // Component sizing // ------------------------- // Based on 14px font-size and 20px line-height @fontSizeLarge: @baseFontSize * 1.25; // ~18px @fontSizeSmall: @baseFontSize * 0.85; // ~12px @fontSizeMini: @baseFontSize * 0.75; // ~11px @paddingLarge: 11px 19px; // 44px @paddingSmall: 2px 10px; // 26px @paddingMini: 0 6px; // 22px @baseBorderRadius: 4px; @borderRadiusLarge: 6px; @borderRadiusSmall: 3px; // Tables // ------------------------- @tableBackground: transparent; // overall background-color @tableBackgroundAccent: #f9f9f9; // for striping @tableBackgroundHover: #f5f5f5; // for hover @tableBorder: #ddd; // table and cell border // Buttons // ------------------------- @btnBackground: @white; @btnBackgroundHighlight: darken(@white, 10%); @btnBorder: #bbb; @btnPrimaryBackground: @linkColor; @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); @btnInfoBackground: #5bc0de; @btnInfoBackgroundHighlight: #2f96b4; @btnSuccessBackground: #62c462; @btnSuccessBackgroundHighlight: #51a351; @btnWarningBackground: lighten(@orange, 15%); @btnWarningBackgroundHighlight: @orange; @btnDangerBackground: #ee5f5b; @btnDangerBackgroundHighlight: #bd362f; @btnInverseBackground: #444; @btnInverseBackgroundHighlight: @grayDarker; // Forms // ------------------------- @inputBackground: @white; @inputBorder: #ccc; @inputBorderRadius: @baseBorderRadius; @inputDisabledBackground: @grayLighter; @formActionsBackground: #f5f5f5; @inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border // Dropdowns // ------------------------- @dropdownBackground: @white; @dropdownBorder: rgba(0,0,0,.2); @dropdownDividerTop: #e5e5e5; @dropdownDividerBottom: @white; @dropdownLinkColor: @grayDark; @dropdownLinkColorHover: @white; @dropdownLinkColorActive: @white; @dropdownLinkBackgroundActive: @linkColor; @dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; // (and a lot more)
Here is the content of the schema-corporate-variables.less (Version 1.4):
@fontSizeXL: @baseFontSize * 2; // ~24px @fontSizeXXL: @baseFontSize * 2.75; // ~40px // The standard border colors @border-color: #d4d4d4; @border-width: 1px; @border-style: solid; @border: @border-width @border-style @border-color; @border-radius: 5px; // the header (with title, subtitle, logo, etc.) @header-background-color: #fcfcfc; @header-border: @border; @header-title-font-family: @headingsFontFamily; @header-title-font-size: @fontSizeXXL; @header-title-font-color: #515151; @header-subtitle-font-family: @headingsFontFamily; @header-subtitle-font-color: #777777; @header-subtitle-font-size: @baseFontSize; // the background color of some rows @frontpage-row-background-color: #f3f3f3; // The twiter widget @widget-twitter-background: #ffffff; @widget-twitter-border: @border; // Gradients @gradient-start-color: #ffffff; @gradient-end-color: #efefef; // Box shadows @box-shadow-outer: 0 1px 3px -1px rgba(0, 0, 0, 0.15); @layout-box-shadow-outer: 0 2px 3px 1px rgba(0, 0, 0, 0.15); // The footer sections @footer-1-font-size: @baseFontSize; @footer-1-font-color: @textColor; @footer-1-link-color: @textColor; @footer-1-link-color-hover: @textColor; @footer-1-background: url( %("%s/assets/img/textile-light.jpg", @theme-uri) ); @footer-2-font-size: @fontSizeMini; @footer-2-font-color: fade( @textColor, 50% ); @footer-2-link-color: @footer-2-font-color; @footer-2-link-color-hover: @footer-2-font-color; @footer-2-background: none; // Headerbar colors @headerbar-font-size: @fontSizeSmall; @headerbar-font-color: #ffffff; @headerbar-link-color: @headerbar-font-color; @headerbar-link-color-hover: @headerbar-link-color; @headerbar-background: url( %("%s/assets/img/textile-black.jpg", @theme-uri) ); // Sidebars @sidebar-background-color: #F4F4F4; // Content background colors @content_background_color: #ffffff; // Header navigation link colors @header-nav-link-color: #0088CC;
Available icons
We always support the latest version of FontAwesome. Please go to your themes documentation page to check out what version is currently built in.
[box type=”info”]Note: To use an icon you only need the name of the icon. For example if you want to use the “icon-exclamation-sign” icon you only need to copy and paste exclamation-sign (without the icon- at the beginning). Browse icons. [/box]
Example: How to use an icon for a button
- Go to the website of FontAwesome.
- Search for any icon you want. For example: the icon-medkit ([icon icon=”medkit”])
- For a button you can use the following shortcode, included the icon:
[[button icon="medkit"]This is a button with medkit icon.[/button]]
Available Shortcodes
Please go to this page: Available Shortcodes