Here’s a great thing about S-Drive Streams' Hardcore customization mode: You can use the @S-Drive rule within comments to define your own customization tools to be used in simple mode. To implement this, all you need to do is find the selector you wish to use, put the declaration you intend to create the tool for on its own line, and then use the @S-Drive syntax, which looks like this:

/* @S-Drive name: Variable name; */

 

In this example:

  • /* and */ are comment markers; anything within them is ignored by the browser when rendering the webpage, but checked by S-Drive for the correct tool syntax
  • @S-Drive name is the property that lets S-Drive know that a tool definition is about to follow
  • Variable name is the name you will give to the tool being created

So let’s say you wish to create a tool that will provide a slider to adjust the width of the post container, using a minimum possible value of 400 pixels and a maximum possible value of 600 pixels. First, you need to include a line in the Hardcore mode CSS that references the correct selector, property, and value:

.sdrive-stream-post-container {

  width: 480px;

}

 

Then you place the @S-Drive comment on the line with the value to be changed and include the minimum and maximum values:

.sdrive-stream-post-container {

  width: 480px; /* @S-Drive name: Post Area Width; min: 400; max: 600; */

}

 

Now you have a tool that you can use in simple mode to easily configure this setting!

There are three types of tools you can create with this method: Size ranges (in pixels), drop-down font lists, and color pickers.

Size Range tools

This is the type of tool we discussed just a moment ago. Within the comment, you just need to specify a range in pixels using the min and max properties.

/* @S-Drive name: (Name of tool); min: X; max: X; */

 

This tool will only work with properties which have values that can be set in pixels, such as font-size or line-height. Here’s an example of what a successfully created tool code might look like in Hardcore mode:

.sdrive-stream-container {

   line-height: 20px;     /* @S-Drive name: Line Height; min: 10; max: 50;*/

}

 

Drop-down Font List tools

To create a drop-down list tool that shows a list of fonts, simply create the comment with a name for the tool on the same line as the font-family property.

/* @S-Drive name: (Name of tool); */

 

Because this tool is only used for choosing a font, it can only be implemented on the same line as the font-family property; S-Drive knows to create a drop-down tool specifically because the @S-Drive comment was made on the same line as this property. Here’s an example of what a successfully created tool code might look like in Hardcore mode:

.sdrive-stream-container {

   font-family; Helvetica, Arial, sans-serif    /* @S-Drive name: Font Choice; */

}

 

Color Picker tools

To create a color picker tool with a clickable swatch, again, simply create the comment with a name for the tool on the same line as a color property.

/* @S-Drive name: (Name of tool); */

 

Because this tool is only used for choosing colors, it can only be implemented on the same line as a color-related property. These properties include:

  • color
  • background-color
  • border-color

When the @S-Drive comment is placed on the same line as one of these color-related properties, S-Drive knows to create a color picker tool. Here’s an example of what a successfully created tool code might look like in Hardcore mode:

.sdrive-stream-container {

   background-color:#323232;     /* @S-Drive name: Background Color; */

}

 

Creating multiple tools within the same selector

You can create more than one tool within a single selector if each property intended to be used as a tool is placed on its own line. All you need to do is place the @S-Drive comment to the right of the property’s value and semicolon, like this:

#sdrive-stream-container {

   margin:20px;

   padding:0 20px;

   text-align:left;

   width:640px;               /* @S-Drive name:Width; min:400; max:900; */

   background-color:#9bb9d0;  /* @S-Drive name:Background Color; */

}

 

Now we have two tools, one which allows us to set the container’s width, and one which allows us to choose the container’s background color.