I think it would help in theming if, after a style has been selected and the user has navigated to a new page, the subsequent page gets the appropriate class added to the BODY tag.

"Appropriate class" here refers to the classes that are added to / removed from the BODY tag by jQuery while dynamically switching between the styles - 'pagestyle_standard', 'pagestyle_black_white', etc. This would mean that themers could override styles - eg 'body.pagestyle_black_white' - in their theme CSS instead of manually editing the module's included CSS files.

This could be done either using jQuery (at the point of $(document).ready();), or by adding the class to the global $body_classes variable during the loading process. In order to extend support for non-JavaScript browsers I think the latter method is preferable.

After all that blather you will be pleased to know that the actual process of doing so is incredibly easy - just make use of the template preprocessing hooks for the 'page' event, just declare a template_preprocess_page() function and mod the 'body_classes' element of the passed-in argument:

/**
 *Override or insert variables into the page template.
 *
 * @param &$variables
 *   Contains the following arguments: $content, $show_blocks
 *
 * @see template_preprocess_page
 */
function pagestyle_preprocess_page(&$variables) {
  if ($stylor = pagestyle_get_current()) {
    $variables['body_classes'] .= ' pagestyle_'. $stylor;
  }
}

That's worked for me at a theme level and I can't see any reason why it wouldn't in a module.

Comments

CZ’s picture

CZ commented
Status: Active » Postponed (maintainer needs more info)

Can not follow you. Please tell me more information or attach a patch.

kingandy’s picture

kingandy
he/him
commented

When switching between styles, the jQuery code adds a class to the BODY tag (eg 'pagestyle_standard' or 'pagestyle_black_white').

The next time a page loads, the BODY tag is not assigned this class.

It would be useful if the BODY tag loaded with the appropriate class assigned to it.

mshepherd’s picture

mshepherd commented
Status: Postponed (maintainer needs more info) » Active

This snippet is really useful.

I want to add additional styles to each page that is processed by the pagestyle module (applies for textsize module also). So that once a page style has been selected each page will assume my additional styles.

Example: I'd rather have blocks outlined in black on the pagestyle_black_white style. When the user first selects the page style, this module drops a class into the html body tag <body class="pagestyle_black_white">.... So I can easily write custom styles in my theme which then supplement the styles provided by the module.

Example from my theme:

/*
 * page style module adjustments and additions
 */

.pagestyle_black_white #sidebar-first-inner .block .inner,
.pagestyle_black_white #sidebar-last-inner .block .inner {
  border: 2px solid #000;
}
.pagestyle_black_white #header-top-inner,
.pagestyle_black_white #primary-menu-inner,
.pagestyle_black_white #header-site-info-inner {
  border-bottom: 2px solid #000;
}

However, once a visitor navigates to a new page, the pagestyle_black_white class is no longer in the body tag and so the custom styles from my theme don't load.

This snippet fixes this. Very useful. Thanks for sharing!

mshepherd’s picture

mshepherd commented

With further testing, I found this actually made the styles switch improperly, sometimes switching back and forth apparently randomly. By moving the function into the theme's preprocess_page function, I found it worked as it should.

function MYTHEME_preprocess_page(&$vars) {
  if ($stylor = pagestyle_get_current()) {
    $vars['body_classes'] .= ' pagestyle_'. $stylor;
  }
}
mrfelton’s picture

mrfelton commented

subscribing

mrfelton’s picture

mrfelton commented

I don't know why, but the pagestyle module includes the following inline styles at the top of the pages:

<style type="text/css" media="screen, projection, tty, tv, print"> 
<!--
/* <![CDATA[ */
body.pagestyle_black_white, body.pagestyle_black_white * { font-weight: normal !important; }
body.pagestyle_white_black, body.pagestyle_white_black * { font-weight: bold !important; }
body.pagestyle_yellow_blue, body.pagestyle_yellow_blue * { font-weight: bold !important; }
body.pagestyle_standard, body.pagestyle_standard * { font-weight: normal !important; }
/* ]]>*/
-->
</style>

I have no idea why it does that, but I found that with either of the above snippets, the font weights were getting reset to normal all over the place all the time. I used the following to ensure that the css class was only applied to the body for styles other than the standard one.

  if (function_exists('pagestyle_get_current')) {
    $stylor = pagestyle_get_current();
    if ($stylor != 'standard') {
      $vars['body_classes'] .= ' pagestyle_'. $stylor;
    }
  }
CZ’s picture

CZ commented

The JavaScript code in the head is required for jQuery (JavasScript) style switcher, because the module use the current style from the external linked CSS. This allows a style switcher in the browser, see first image [1]. Not the easiest way, I know. Add current style to $body_classes is possible and approved.

[1] http://www.zwahlendesign.ch/downloads/pagestyle/images/pagestyle.png

CZ’s picture

CZ commented
Status: Active » Fixed

Thanks! Added.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.