Standout Color Boxes and Buttons
[resolved] help with custom box colour (2 posts)

  1. kambone
    Posted 2 years ago #

    Not very advanced user here.
    I am strugling to get the right syntax for custom colour of the boxes.
    What exactly should be the string into the box for custom css class at the Settings page ?
    For example, if i want to use light grey with hex #DCDCDC ?
    Thanks in advance.


  2. jp2112
    Plugin Author

    Posted 2 years ago #

    Kindly refer to the FAQ which states:

    There is a textbox on the plugin settings page where you can enter your own CSS class name. This will be appended as follows:

    • For color buttons, the class will be scbb-button-whatever you typed
    • For boxes, the class will be scbb-content-box-whatever you typed

    You must supply the matching CSS for your custom class.

    So let's say you wanted to create your own custom color. You would type the class name in the textbox on the plugin options page. Ex: kambone

    There's no secret -- you literally enter any word you want to represent the custom class you want to style.

    So based on the FAQ explanation, you now have a class called "scbb-content-box-kambone". You need to target this class in your local stylesheet -- I assume this is style.css in your theme folder.

    You must supply the CSS to style the content box. My suggestion is to look at the CSS included with the plugin, copy all the CSS related to an existing color, then simply rename the class to the one you chose.

    For example, here is the color-related CSS for the blue content box, from the scbb.css file:

    .scbb-content-box-blue {
      border:1px solid #afcde3

    This sets the color for the blue content box. You just change the values as appropriate:

    .scbb-content-box-kambone {
      border:1px solid #dcdcdc

    See how you used the class name you typed into the plugin options page to build the name of the custom class?

    As an alternative, you could send me the CSS and I will integrate it into the existing plugin. You just have to choose a different name for the color since I'm already using "gray". Also, you need a slightly different border color for a two-tone effect.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Standout Color Boxes and Buttons
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.