Styles – CSS Color Picker for each page

  • dangerdan27

    (@dangerdan27)


    13 years ago

    I just downloaded this plugin: Styles and it’s really cool.

    However, I have my site set up to be a series of landing pages, and I’m hoping to take the “Window Background” attribute of the Styles plugin and make it apply on a page-by-page basis. Does anyone have any advice for how to:

    A) define on a page what the color should be? Custom Fields are probably the way to go, I’m assuming, but how do I make a drop-down menu featuring the different colors I offer?

    B) Apply that choice to the theme CSS in such a way as to make it display properly?

    Thanks for helping me out! Still a novice at editing code.

Viewing 2 replies - 1 through 2 (of 2 total)

  • If your theme supports the built-in WordPress function body_class, there will be lots of classes on your body tag that allow CSS to be applied to specific pages. For example, Page with ID 55 would be wrapped in the class “page-55”. You can see what classes are available, as well as the code for adding it to the body tag on the body_class codex page.

    As for Styles specifically, it does support loading a custom CSS file from your theme directory, and selectors can be added fairly easily by following the syntax in the bundled examples. However, I wouldn’t do it just yet if I were you — the current version up is experimental. I’ll be changing the data structure to something that will be better long term in version 0.5, which should be up within the next week or so. Experiment with the version that’s out now if you like, but know that changes will have to be redone in the new format.

    PS: If you’re wanting to add color options in custom meta, it’s also possible to hook into the body_class filter to add a class to a page if some meta exists. For example, if your meta were set to “green”, you could then add the class “green” to body. See the Add Classes By Filters section. This would be unrelated to the Styles plugin.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Styles – CSS Color Picker for each page’ is closed to new replies.