WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. kambone
    Member
    Posted 9 months ago #

    Hello,
    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.

    http://wordpress.org/extend/plugins/standout-color-boxes-and-buttons/

  2. jp2112
    Member
    Plugin Author

    Posted 9 months 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 {
      background-color:#d8ecf7;
      border:1px solid #afcde3
    }

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

    .scbb-content-box-kambone {
      background-color:#dcdcdc;
      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.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.