Tip for adjusting items layout in the new sitebuilder widgets

John Bizley
@john-bizley
9 years ago
251 posts

When you create new items in the New Sitebuilder here is one way in which you can change the look of them using pure css.

When you add your widgets an id is created for them which enables you to target those widgets. If you eight click and inspect the widgets in firefox, chrome etc you will be able to get the widget id's.

You can view how my changes look by going to my site here http://1940snetwork.com/

I have added two lists in the side panel for the latest videos and the latest audio and also have added a photos page which I have changed how the layout looks there too.

I have added some extra post below showing the before and after views and the code used. You will notice the colour setting look different as used a different skin for the before views as this did not have the code added.

All the css code I just added to the grid css file in the skin.

Here is the code I used for the photos page, I will add more posts below for the others.

/* For the photos list page */
@media only screen and ( min-width:768px ){
#widget_id-12 .item.widget-item.widget-item-widget_list .row .col3{ width:24%; margin:0.5% }}
#widget_id-12 .item.widget-item.widget-item-widget_list .row .col3 > .p5{
padding: 5px;
border: 1px solid lightgrey;
box-shadow: 1px 2px 4px grey;
border-radius: 4px;
}
#widget_id-12 .item.widget-item.widget-item-widget_list .row .col3 > .p5 > .img-profile{
padding: 10px;
border: double 6px bisque;
background: #624949;
}
#widget_id-12 .item.widget-item.widget-item-widget_list .row .col3 > .p5 > .img-profile:hover{
padding: 10px;
border: double 6px gold;
background: #000;
}
updated by @john-bizley: 05/29/15 06:37:52AM

John Bizley
@john-bizley
9 years ago
251 posts

Here is the video list before I added code to it, as you can see the videos look a little small and when resized the text gets a little squished up to the side

updated by @john-bizley: 04/26/15 11:40:46AM

John Bizley
@john-bizley
9 years ago
251 posts

Here is the after view and the code I used to adjust it, you widget ID will be different so you will have to adjust to yours.

/* For Latest YouTube Videos */
#widget_id-3 .item.widget-item.widget-item-widget_list .row .col2{ width:50%; clear:both; float:left }
#widget_id-3 .item.widget-item.widget-item-widget_list .row .col6{ width:50%; float:left }
#widget_id-3 .item.widget-item.widget-item-widget_list .row .col2 > .p5{ width:100%; clear:both; float:left; padding:2px }

@media only screen and ( min-width:768px )and ( max-width:1020px ) {
#widget_id-3 .item.widget-item.widget-item-widget_list .row .col6{ width:100%; float:left }
#widget_id-3 .item.widget-item.widget-item-widget_list .row .col2{ width:100%; clear:both; float:left }
}

updated by @john-bizley: 04/26/15 11:42:34AM

John Bizley
@john-bizley
9 years ago
251 posts

Here is the audio list which when added didn't look great as items overlapped

updated by @john-bizley: 04/26/15 11:44:02AM

John Bizley
@john-bizley
9 years ago
251 posts

So here is the adjusted audio list with me using this code, again your ID will be different so you will have to adjust it for yours.

/* For the latest audio list */
#widget_id-11 .item.widget-item.widget-item-widget_list .row .col4{ width:100%!important }
#widget_id-11 .item.widget-item.widget-item-widget_list .row .col2{ width:50%!important }

updated by @john-bizley: 04/26/15 11:45:36AM

@michael
9 years ago
7,714 posts

Thanks for the tip john.

You're probably aware, so just a reminder to any readers. Jamroom works on a 12 col layout. so if you have:
col6
col6

Then that will be a 50%|50% layout. If you have col4, col4, col4 then that will be a 33%|33%|33% layout.

When adding an "Item List" widget, you have the option of using a "Custom" template. That will load the default template for the module and you can customize it to change the widths of stuff by changing the class names.

So for example the audio module default template looks like this:

{jrCore_module_url module="jrAudio" assign="murl"}
{if isset($_items)}

    {foreach from=$_items item="item"}

    <div class="item">

        <div class="container">
            <div class="row">
                <div class="col2">
                    <div class="block_image">
                        <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.audio_title_url}">{jrCore_module_function function="jrImage_display" module="jrAudio" type="audio_image" item_id=$item._item_id size="xlarge" crop="auto" class="iloutline img_scale" alt=$item.audio_title width=false height=false}</a>
                    </div>
                </div>
                <div class="col1">
                    <div class="p5">
                    {if $item.audio_active == 'on' && $item.audio_file_extension == 'mp3'}
                        {jrCore_media_player type="jrAudio_button" module="jrAudio" field="audio_file" item=$item}
                    {else}
                        &nbsp;
                    {/if}
                    </div>
                </div>
                <div class="col4">
                    <div class="p5" style="overflow-wrap:break-word">
                        <h3><a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.audio_title_url}">{$item.audio_title}</a></h3><br>
                        <span class="info">{jrCore_lang module="jrAudio" id="31" default="album"}:</span> <span class="info_c"><a href="{$jamroom_url}/{$item.profile_url}/{$murl}/albums/{$item.audio_album_url}">{$item.audio_album}</a></span><br>
                        <span class="info">{jrCore_lang module="jrAudio" id="12" default="genre"}:</span> <span class="info_c">{$item.audio_genre}</span><br>
                        {jrCore_module_function function="jrRating_form" type="star" module="jrAudio" index="1" item_id=$item._item_id current=$item.audio_rating_1_average_count|default:0 votes=$item.audio_rating_1_count|default:0}
                    </div>
                </div>
                <div class="col5 last">
                    <div class="block_config">

                        {jrCore_item_list_buttons module="jrAudio" field="audio_file" item=$item}

                    </div>
                </div>
            </div>

        </div>
    </div>
    {/foreach}
{/if}

and you can drop those last co5 and expand the col4 to 9 so it looks like this

{jrCore_module_url module="jrAudio" assign="murl"}
{if isset($_items)}

    {foreach from=$_items item="item"}

    <div class="item">

        <div class="container">
            <div class="row">
                <div class="col2">
                    <div class="block_image">
                        <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.audio_title_url}">{jrCore_module_function function="jrImage_display" module="jrAudio" type="audio_image" item_id=$item._item_id size="xlarge" crop="auto" class="iloutline img_scale" alt=$item.audio_title width=false height=false}</a>
                    </div>
                </div>
                <div class="col1">
                    <div class="p5">
                    {if $item.audio_active == 'on' && $item.audio_file_extension == 'mp3'}
                        {jrCore_media_player type="jrAudio_button" module="jrAudio" field="audio_file" item=$item}
                    {else}
                        &nbsp;
                    {/if}
                    </div>
                </div>
                <div class="col9">
                    <div class="p5" style="overflow-wrap:break-word">
                        <h3><a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.audio_title_url}">{$item.audio_title}</a></h3><br>
                        <span class="info">{jrCore_lang module="jrAudio" id="31" default="album"}:</span> <span class="info_c"><a href="{$jamroom_url}/{$item.profile_url}/{$murl}/albums/{$item.audio_album_url}">{$item.audio_album}</a></span><br>
                        <span class="info">{jrCore_lang module="jrAudio" id="12" default="genre"}:</span> <span class="info_c">{$item.audio_genre}</span><br>
                        {jrCore_module_function function="jrRating_form" type="star" module="jrAudio" index="1" item_id=$item._item_id current=$item.audio_rating_1_average_count|default:0 votes=$item.audio_rating_1_count|default:0}
                    </div>
                </div>
            </div>

        </div>
    </div>
    {/foreach}
{/if}

If you wanted to.

@michael
9 years ago
7,714 posts

screenshot

updated by @michael: 04/29/15 12:30:14AM

user tip Tip for adjusting items layout in the new sitebuilder widgets

Tags