Plugin settings glossary

In this page you’ll find the values you can use to set the different settings of your plugin!

Note: always make sure to check inside your plugin’s setup page, in Step 2, if there are any “Special settings“ for your specific plugin, as it may require you to use particular values instead of the ones listed in here.


Color

For any settings that involve color, you can use HEX (#000000), RGB ( rgb(0, 0, 0) ) or RGBA ( rgba(0, 0, 0, 1) ).

If you want your color to be semi-transparent, RGBA is the way to go! The last parameter allows you to set a value between 0 to 1 to indicate how opaque your color should be. This works best for overlays!

These suffixes are examples of plugin settings involving color:

  • overlay-bg

  • font-color

  • line-color

  • link-bg

  • border-color

Editable text or links

In a couple of plugins you’ll find that there’s one or two settings that allow you to add extra content to your block! In these cases you can stick with plain text and simply write any phrase you like between quotes (single or double, it doesn’t matter).

These are some suffix examples:

  • text

  • link-text

If you want to take this setting up a notch, you can also switch the text for an image!

You’ll need to upload an image to your Custom CSS window by clicking on the "Manage Custom Files" button and then clicking on the file to get the URL where its being stored.
Once you have that URL, replace the current value of your setting for url('your-url-here').

For example, if the default setting looks like this:

@sbc-1_pager-next-text: "NEXT";


You can add an image by switching the value for this:

@sbc-1_pager-next-text: url('your-url-goes-here');

Font styling

There are many settings in most plugins that can allow you to tweak parts of the text involved to your heart’s content!

These are the suffixes of settings you may find in your plugin and the values you can give them:

  • font-family
    Simply type in the name of the font you’re using (lato) and use single quotes if it involves more than one word ( 'open sans' ).

  • title-case, link-case
    Can be used to set your text to uppercase, lowercase or each word in caps. Use uppercase for uppercase, lowercase for lowercase, capitalize for caps only on the first letter of each word, and none to display your text normally.

  • font-size

    Pretty straightforward, it sets the size of your font. You can use pixels (30px) or ems (2em).

  • font-weight

    It allows you to set the weight of your font. You can use normal or bold or any of the following values that go from lighter to bolder, 400 being normal: 100, 200, 300, 400, 500, 600, 700, 800, 900.

    Keep in mind the weight depends on the font you’re using!

  • letter-spacing
    Lets you set the spacing within letters. It’s best to use ems for this as its a unit relative to your font’s size (0.5em)

Hover mode

In most cases, your plugin will come with some settings that can style the hover mode.

You’ll be able to recognize those settings by the word "hover" at the beginning of the suffix!

These are some examples:

  • hover-time
    hover-time-excerpt

    hover-time-image
    Allows you to set the time the change between normal mode and hover mode will take, in seconds (0.8s).

  • hover-scale
    This cool setting lets you create a "growing" or scaling effect for the element you’re styling. You simply need to set a number that represents how bigger (or smaller) you want your element to go. For example, using 1.2 will make your element become 1.2 times bigger than it already is, and 0.5 will shrink it to half its original size.

  • hover-rotate
    This allows you to set a degree of rotation for your element once your cursor activates the hover mode! You can use positive (30deg) or negative (-5deg) degrees to set the rotation angle.


Position

For those plugins where you’re able to adjust the position of different elements, unless otherwise specified under the plugin’s special settings, you can use percentages (50%) or pixels (60px)!

Some suffix examples of positioning settings are:

  • position

  • position-vertical

  • position-horizontal

Shadow

Some plugins may come with additional fun settings you can set to make your blocks look even more customized, for example using a shadow.

You’ll notice your plugin has this setting by the prefix shadow.

To add a shadow to your element you need to set a couple of parameters inside this setting, this is what you’ll often see as the default: 3px 10px 10px 3px 10px 10px rgba(0, 0, 0, 0.1);

  • The first parameter (3px) sets the vertical offset of the shadow from the element; a positive number pushes it downwards, and a negative number pulls it upwards.

  • The second parameter (10px) sets the horizontal offset of the shadow from the element; a positive number pushes it to the right, while a negative number pulls it to the left.

  • The third parameter (10px) sets the blur of the shadow. A bigger number makes it blurrier and bigger, while a smaller number makes it sharper.

  • The last parameter ( rgba(0, 0, 0, 0.1) ) is the color; you can use HEX, RGB or RGBA. This last one works best since you’re able to set the opacity as well and make the shadow more transparent.

Size

Depending on the plugin, you may be able to alter sizing properties such as width and height of different elements. For these cases you can use pixels (3px) or percentages (100%), unless otherwise specified under the plugin’s special settings.

These are some suffix examples of sizing settings you may see:

  • line-thickness

  • border-width

  • line-width

Spacing

In most plugins, you’ll be able to set the spacing around the element you’re styling to separate it from what’s surrounding it. In these cases you can use percentages (5%), ems (2em) or pixels (10px).

These suffixes are examples of plugin settings involving spacing:

  • padding

  • line-separation

  • padding-vertical

  • padding-horizontal