glFusion Wiki

Site Tools


glfusion:themes:demo

Demo Theme

This is the theme developed for the glFusion Demo site.

Moving Blocks to the left

This is how the styles look out-of-the-box:

$uiStyles = array(
    'full_content' => array('left_class' => '',
                            'content_class' => 'uk-width-medium-4-4',
                            'right_class' => ''),
    'left_content' => array('left_class' => 'uk-width-medium-1-4',
                            'content_class' => 'uk-width-medium-3-4',
                            'right_class' => ''),
 
    'left_content_right' => array('left_class' => 'uk-width-medium-1-4',
                                  'content_class' => 'uk-width-medium-3-4',
                                  'right_class' => ''),
 
    'content_right' => array('left_class' => '',
                             'content_class' => 'uk-width-medium-4-4',
                             'right_class'  => '')
);

By adding a small change to the left_content and left_content_right section - we will push the main content by 1 column and pull the blocks over - see the added uk-push / uk-pull styles below:

$uiStyles = array(
    'full_content' => array('left_class' => '',
                            'content_class' => 'uk-width-medium-4-4',
                            'right_class' => ''),
    'left_content' => array('left_class' => 'uk-width-medium-1-4 uk-pull-3-4',
                            'content_class' => 'uk-width-medium-3-4 uk-push-1-4',
                            'right_class' => ''),
 
    'left_content_right' => array('left_class' => 'uk-width-medium-1-4 uk-pull-3-4',
                                  'content_class' => 'uk-width-medium-3-4 uk-push-1-4',
                                  'right_class' => ''),
 
    'content_right' => array('left_class' => '',
                             'content_class' => 'uk-width-medium-4-4',
                             'right_class'  => '')
);

That's it. The blocks now display on the left.

Fixed Width

In the header.thtml file of the demo theme, there are 2 places where the class uk-responsive-width is used. Both are on the uk-container divs, one that wrap the navigation menu and one that wraps the content div. Simply remove the uk-responsive-width style from those 2 lines. Be sure to save your custom header.thtml in the custom/ folder.

glfusion/themes/demo.txt · Last modified: 2017/04/12 21:12 (external edit)

Page Tools