Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Creating dynamic CSS styling

    @naveen.kumar
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 239
    Comment on it

    Basic ideas behind dynamic theming


    In addition to creating templates that are displayed conditionally, the Drupal also provide us to apply CSS for specific conditions on any given page. 

     $classes
    this variable aid dynamic CSS styling. Conditional style is used to mange the one, two, or three columns style, or to behave different when logged in as authenticated users.

    1. Before Drupal 6 
      $layout
      was used
    2. In Drupal 6 
      $body_classes
    3. And Drupal 7 Supports 
      $classes

    By default $classes is included with body tag in html.tpL.php file that's mean $classes is available to all templates.

    Below are the dynamic classes available by default in Drupal 7

    1. .front/*front page*/ 
    2. .not-front /*not front page*/
    3. .not-logged-in /*not logged in*/ 
    4. .logged-in /*logged in*/ 
    5. .node-type-[name of type] /*node visible*/ 
    6. .page-[page type] /*page visible*/ 
    7. .two-sidebars /*two sidebars*/
    8. .sidebar-left /*left sidebar visible*/ 
    9. .sidebar-right /*right sidebar visible*/
    10. .one-sidebar /*one sidebar*/
    11. .no-sidebar /*no sidebars*/

    For example 

    <body class="html front not-logged-in one-sidebar sidebar-first page-node">
<body class="html front logged-in one-sidebar sidebar-first page-node">s
<li class="<?php print $classes; ?>"></pre> /*Calling $classes*/

    $classes play vital role in creating dynamic theming.

    Adding new variables to $classes

    In your template.php file

    <?php function themename_preprocess_node(&$vars) { $vars['classes_array'][] = ''} ?>

    now this variable will be available to all template


    Thanks

    adding variable to $classes dynamic theming with drupal 7 drupal 7 drupal 7 theming Creating dynamic CSS styling
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: