Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Styling Panel Panes with Stylizer

Video loading...

  • 0:00
    [MUSIC PLAYING]
  • 0:01
    BUILDING WEBSITES IN DRUPAL 7 WITH PANELS
  • 0:04
    Styling Panel Panes with Stylizer
  • 0:06
    Amber Matz
  • 0:07
    AMBER MATZ: With Panels we can place blocks, menus, views, fields,
  • 0:11
    and many other components as panel panes.
  • 0:14
    We can even create mini-panels to place blocks in theme regions.
  • 0:19
    We can control the HTML markup of these components
  • 0:22
    in a variety of ways, based on the kind of component it is.
  • 0:26
    For example, changing the HTML that wraps
  • 0:28
    a field and its label in a view.
  • 0:31
    But what if you want to control the style of the pane itself?
  • 0:34
    The panel pane that contains whatever widget you placed inside?
  • 0:39
    To control the pane styles-- the background of the pane perhaps,
  • 0:43
    or the font style of the pane title--
  • 0:45
    we need to use a ctools style plug-in.
  • 0:48
    But what if you don't want to go through the process of creating one
  • 0:51
    yourself?
  • 0:52
    There's Stylizer, a module included in the Chaos tools suite that
  • 0:56
    provides a host of options for controlling the colors, fonts,
  • 1:00
    textiles, and borders of the panel pane, content, and header.
  • 1:04
    A word of caution, if you're looking for way to implement a well defined
  • 1:08
    set of styles with limited options, this
  • 1:11
    probably isn't the module for you.
  • 1:13
    But if you like the functionality provided by the color module
  • 1:16
    in a theme like Bartik, and the ability
  • 1:18
    to change styles on panel panes without diving into code,
  • 1:21
    then this could be just what you need.
  • 1:24
    In this lesson we'll look at the style options
  • 1:27
    that Panels provides out of the box.
  • 1:29
    Then we'll enable Stylizer module, and walk through changing
  • 1:32
    the styles of the panel pane container
  • 1:34
    and heading using Stylizer's extensive settings form
  • 1:38
    and live preview.
  • 1:39
    [WATER DROP]
  • 1:40
    Before we dive into the functionality
  • 1:43
    that Stylizer provides, let's take a look at how we can style regions
  • 1:48
    and panes using panels just by default, without that module.
  • 1:53
    Since I've generated some content, and I've got a bunch of nodes,
  • 1:56
    I've gone ahead and enabled the page manager module.
  • 1:59
    So that I can create a node template and style
  • 2:03
    the content panes within that.
  • 2:05
    So I've done that.
  • 2:06
    And I've got Devel Generate enabled, which is how I generated
  • 2:10
    the content, and Panels is enabled, obviously.
  • 2:14
    And I've also enabled the Panels In-Place Editor,
  • 2:18
    since we are talking about previewing
  • 2:20
    styles as they look in your theme.
  • 2:22
    And the Panels In-Place Editor really
  • 2:25
    provides that sort of functionality as well.
  • 2:28
    You can see the regions and the content panes
  • 2:30
    and how they're rendered in your theme.
  • 2:33
    Let's take a look at a node.
  • 2:36
    And this is a node page where I'm using a node template
  • 2:39
    that I've set up in Page Manager.
  • 2:41
    I can edit this panel.
  • 2:43
    And you can see that I've got four regions here.
  • 2:46
    I've got a layout that has this top region,
  • 2:49
    left side, right side, and bottom.
  • 2:51
    I've added the node title to the top, the node's content
  • 2:55
    to the left side; the image field to the right side;
  • 2:59
    some custom content-- just some plain text in the form of a custom
  • 3:03
    content pane here-- and the comments I've
  • 3:06
    dropped into the bottom region, as well.
  • 3:08
    In the General Settings I've disabled the Drupal blocks
  • 3:11
    and regions, and I've enabled the In-Place Editor.
  • 3:15
    Returning back to that node.
  • 3:17
    Now these buttons are provided by the panels In-Place Editor,
  • 3:20
    so if I click Customize This Page, I've
  • 3:23
    got a number of different buttons that I
  • 3:25
    can activate for each region and each pane.
  • 3:28
    So in this blue dotted region these are
  • 3:33
    things that I can add to this region.
  • 3:35
    So I could add a new pane to this region,
  • 3:37
    or I could modify the styles for this region.
  • 3:40
    And these buttons here relate to the panel pane itself.
  • 3:43
    So I can activate the settings of this panel pane;
  • 3:47
    the styles-- which we'll take a look at in a moment--
  • 3:50
    or I can remove it.
  • 3:51
    So out of the box, if I click on Style,
  • 3:55
    I can activate the pane style for this panel pane, which in this case
  • 3:59
    is called Node Title.
  • 4:00
    I've got four options; system block, no markup
  • 4:03
    at all, no style, or rounded corners.
  • 4:06
    So just for fun, I'll click on the Rounded Corners option.
  • 4:09
    And if I click Save, now you can see I've got a rounded corners
  • 4:14
    style applied to this panel pane.
  • 4:16
    So what functionality does Stylizer Module provide?
  • 4:20
    Let's go ahead and enable that module by going to Modules.
  • 4:24
    And this is in the Chaos tools suite package.
  • 4:27
    So I'll check it here.
  • 4:28
    It says, "Create custom styles for applications such as panels."
  • 4:32
    And I'll save the configuration.
  • 4:34
    Now I'll return to that node, and I know
  • 4:37
    it's listed here on my Home Page.
  • 4:39
    I'll click the Customize This Page button.
  • 4:42
    And now I'll go back into the styles for that pane.
  • 4:46
    And now I have a new option called Custom Style.
  • 4:49
    Let's select that, and click Next.
  • 4:51
    Got two options here; rounded shadowbox or plain.
  • 4:54
    I will choose the rounded shadowbox, and then the Continue button.
  • 4:58
    And now here's where we really get into it.
  • 5:01
    This is an Extensive Settings Form, where I can choose any number
  • 5:06
    of styles for the background, the text, the header text, including
  • 5:10
    fonts and a number of different CSS styles.
  • 5:14
    Also I have a preview window here, which
  • 5:17
    is showing me a preview of the styles.
  • 5:19
    This does say Preview here, but it is
  • 5:22
    being covered up by the rounded corner.
  • 5:24
    So let's go ahead and play around with this.
  • 5:27
    Let's change this background to a lovely shade of purple.
  • 5:33
    And I can change the text to white.
  • 5:37
    I can use this color chooser thing, or I could just type it in,
  • 5:40
    whichever.
  • 5:41
    And I'm just clicking the Preview button after each selection,
  • 5:44
    so I can see how it's going.
  • 5:46
    And you'll notice that this text color
  • 5:49
    doesn't affect the heading here.
  • 5:52
    So I need to change that as well, and hit Preview again.
  • 5:58
    Let's go ahead and change the header font, just for fun.
  • 6:03
    Make it a serif font, super big, so we can really see the difference.
  • 6:07
    I'll choose a variant of small caps.
  • 6:10
    And we've got a big, giant header.
  • 6:12
    So I could change any other styles here,
  • 6:14
    but I'm going to call this good.
  • 6:16
    But before I do, I'm going to check this check box here that says,
  • 6:20
    "Make this style available to other regions or panes."
  • 6:23
    So I'm going to check that, and now I get a few more options.
  • 6:26
    I can give this an administrative title,
  • 6:29
    so I'll call this the, "Big Purple Rounded Header Box."
  • 6:33
    I'll give it a name, Rounded_Box_Alphas.
  • 6:37
    It's just a random name that I made up.
  • 6:39
    You can choose whatever you want.
  • 6:41
    For the machine name you just need to provide a unique machine name
  • 6:45
    without spaces or anything like that.
  • 6:48
    So use underscores, alphanumeric characters,
  • 6:51
    no special characters, that sort of thing.
  • 6:53
    And I'll just say that this is a, "Rounded box
  • 6:57
    with a purple background and large header text."
  • 7:02
    OK.
  • 7:02
    So I'll finish that up, and now we have
  • 7:05
    this style applied to this content pane.
  • 7:08
    I'll click Save, and there we go.
  • 7:11
    If I want to apply that same style to another region,
  • 7:15
    or I should say another content pane,
  • 7:18
    I'm going to update this panel pane right here.
  • 7:22
    And I can just select right now the "Big Purple Rounded Header Box"
  • 7:26
    that I just created.
  • 7:28
    So I'll click Next, and done.
  • 7:30
    So where are these reusable styles located?
  • 7:35
    What-- Where are they saved?
  • 7:36
    How can I get to them and edit them?
  • 7:38
    They are saved under Structure, Stylizer,
  • 7:42
    and here is the reusable style that I just created.
  • 7:46
    I can edit this.
  • 7:48
    And you may be expecting that huge settings form, but on this screen
  • 7:54
    all I can edit is the title and the description.
  • 7:58
    I can export it.
  • 8:00
    But if I wanted to change any of these settings here--
  • 8:03
    any of these colors, or the fonts, or any of the styles at all---
  • 8:08
    there isn't a clear way to do this, but I'll show you a little trick.
  • 8:12
    If I select everything in this export text box, Command-C to copy.
  • 8:18
    I go back to this edit screen.
  • 8:21
    Or actually, I'm just going to cancel out of this,
  • 8:23
    and I'm back on the Stylizer page, which
  • 8:26
    I got to from Structure, Stylizer.
  • 8:28
    And I'm going to import a new style.
  • 8:31
    And I'm going to paste in the style that I just copied from the one
  • 8:37
    that I just created.
  • 8:39
    And I'm going to check this box, "Allow
  • 8:41
    import to overwrite an existing record".
  • 8:44
    I'll click Continue, and it kicks me over back into the settings form.
  • 8:48
    So now I could tweak this color a little bit.
  • 8:51
    Oh I want to make it a little bit darker, hit Preview,
  • 8:54
    and that's all I wanted to do.
  • 8:57
    I'll click Update, and Save.
  • 9:00
    Now if I return to my node, I've got the darker
  • 9:05
    style applied in both places.
  • 9:07
    It's not exactly intuitive, but that is how you could update the color
  • 9:12
    of a style that you've already saved and checked as reusable.
  • 9:18
    The other way to create a style, you don't have to do it in your theme.
  • 9:22
    You can also go to Structure, Stylizer,
  • 9:25
    and you could add a new one here.
  • 9:27
    So let's add a gray background box.
  • 9:31
    "Gray box with white text.
  • 9:33
    Dark gray background with white text."
  • 9:39
    I click Continue, and I need to decide if it's going to apply
  • 9:43
    to the panel region or the panel pane.
  • 9:45
    And I'm going to choose the panel pane and click Continue.
  • 9:49
    Once again, this form should look familiar,
  • 9:52
    it's just in the context of our admin theme instead of the user
  • 9:56
    facing theme.
  • 9:57
    So I'm going to choose a plane box, and click Continue.
  • 10:01
    Now I've got my settings form again.
  • 10:03
    I'm going to choose a nice dark background, and some white text.
  • 10:11
    You can use the color picker, or if I know the hex color,
  • 10:13
    I can just enter that in, whichever.
  • 10:16
    And same with the header background, I'm going to type it in here.
  • 10:22
    And the header text I'm going to make white.
  • 10:25
    OK.
  • 10:26
    Now I have my dark gray box with white text, and I'll click Finish.
  • 10:31
    And now I have it listed here.
  • 10:33
    I can use it now, so let's go ahead and use it.
  • 10:36
    I'll go back to a node page, and click Customize This Page.
  • 10:40
    And let's go down to our comments section,
  • 10:43
    and click the Style button for this panel pane.
  • 10:46
    And now here it is listed, "Gray box with white text".
  • 10:49
    I don't need to go back into Custom Style.
  • 10:51
    I can just select the one that I just saved.
  • 10:54
    And there you go.
  • 10:57
    So a couple different ways to apply styles
  • 10:59
    and save styles using Stylizer.
  • 11:01
    You can see that it's a pretty powerful module,
  • 11:03
    and it affords a lot of options.
  • 11:05
    So if you want to open those options up to your content administrators
  • 11:10
    or to yourself if you are running your own site, super.
  • 11:14
    But if there are any limitations and you really only want to limit what
  • 11:19
    people can do, then this may not be the module for you.
  • 11:23
    So one thing to keep in mind, and you may have noticed this already,
  • 11:26
    is that even though I chose a really extra, extra large heading
  • 11:30
    for this header text here, this doesn't
  • 11:33
    look very extra, extra large.
  • 11:34
    So what's going on here?
  • 11:36
    We can see what's going on by inspecting this element.
  • 11:40
    So I'll right click in that area, and inspect the element.
  • 11:44
    And the markup here is an h2 of class page
  • 11:50
    hyphen title in pane hyphen title.
  • 11:53
    Pane-title is going to be the relevant class here.
  • 11:57
    So what Panelizer is doing is that it provides a template file that
  • 12:00
    controls the markup for this panel pane.
  • 12:02
    And as you can see it's added a number of divs.
  • 12:07
    And what it does is it plays a little selector game,
  • 12:10
    and it adds the div of this panel pane, so the rounded shadow pane,
  • 12:17
    rounded shadow pane, et cetera, et cetera.
  • 12:20
    And then as a selector first, and then it looks for the pane title.
  • 12:24
    So really it's waging a little war with your theme,
  • 12:28
    and your theme might just win.
  • 12:31
    The styles that are applied in Stylizer--
  • 12:34
    they're competing with your theme, and so it just depends on the CSS
  • 12:39
    that you've used for your theme in the markup.
  • 12:42
    That will determine how these styles actually render in the end.
  • 12:47
    The other thing to keep in mind is that we can tweak
  • 12:50
    the markup of something like a node title.
  • 12:52
    So in this case, if I customize this page,
  • 12:55
    this panel pane is a dropped in node title.
  • 12:59
    So it's got a specific set of settings,
  • 13:01
    including some markup options.
  • 13:03
    So I've clicked on the Settings button there,
  • 13:05
    and that's popped me into this Configure Node Title Settings Form.
  • 13:09
    And right now I have a h2 tag specified,
  • 13:13
    as well as some extra classes.
  • 13:15
    I've added this pane-titleclass, because that's
  • 13:18
    what Panelizer was expecting.
  • 13:20
    And this Page Title Class I just added for semantic purposes.
  • 13:25
    But I really want this Page Title to be marked up as an h1.
  • 13:29
    So if I select that and click Finish,
  • 13:32
    now my white header background is not applying at all.
  • 13:35
    And if I inspect this element, I can see
  • 13:38
    that it does have the proper markup, just like I specified in Panels.
  • 13:42
    But that color is being determined-- if I hover over this style.css--
  • 13:49
    you can see it's being determined by that Bartik theme, which
  • 13:52
    is what I have activated right now.
  • 13:54
    So the color white is not being applied at all.
  • 13:57
    It's being overridden by my theme.
  • 14:00
    So as you can see, Stylizer is a very powerful module.
  • 14:03
    It provides a lot of options, and it doesn't
  • 14:06
    provide a lot of limitations.
  • 14:08
    You can create some reusable styles with this module
  • 14:11
    that you could provide for your content administrators.
  • 14:15
    But with Stylizer on you're always going to have that custom style
  • 14:19
    option, where they can just go crazy.
  • 14:21
    Unless you're comfortable giving that power and options
  • 14:24
    available to your content administrators,
  • 14:27
    you may need to make a decision on whether or not Stylizer is for you.
  • 14:31
    But if you want those options, and you need those options,
  • 14:35
    Stylizer can provide an extensive settings form that
  • 14:38
    can work really well with your theme.
  • 14:40
    You may need to make some adjustments to which theme that
  • 14:43
    you're using, or how it's-- the CSS in that theme.
  • 14:46
    But it provides a way to access the ctools style plug-in
  • 14:50
    without needing to code that plug-in yourself.
  • 14:54
    [WATER DROP]
  • 14:55
    drupalize me

Styling Panel Panes with Stylizer

Loading...

Stylizer enables site editors to change the styles of panel pane backgrounds, content, text styles, borders, and heading styles. It provides an extensive settings form, including a live preview and integration with the Color module, for point-and-click color picking.

In this lesson, we will:

  • Identify style options provided by Panels
  • Enable Stylizer module
  • Change Styles of a Panel Pane and Heading using Stylizer

By the end of this lesson you should have a good idea of whether or not you want to enable Stylizer on your Panels-based site and if you do, how to access and use it.

Stylizer module comes packaged with CTools.

Demo site log in:

  • Navigate to /user
  • Login with admin/admin
Downloads: 
Log in or sign up to download companion files.
Additional resources: