Small tutorial - Custom fields inside Themler Bootstrap row, columns, equal height

Stagger Lee
1820 Posts
Stagger Lee posted this 09 August 2015

Took me some time to figure it out. In principle everything is already in Bootstrap documentation. Had to generate one empty Themler row with columns to figure out how classes are placed.

For further developing and adapting after wish to different devices read documentation, it ie pretty easy:
http://getbootstrap.com/css/
Bottom, custom responsive width. There is no need for CSS media queries. In Themler Bootstrap all power is in classes.
http://answers.themler.com/articles/3896/columns-shortcode
Back to tutorial.

  • Let us say this simple examle to not complicate code. You have one Page with repeatable ACF fields.
  • Page is for Links/Frends.
  • One custom field is for URL Link Title, name of a friend.
  • Second field is for URL Website of a friend.

  • Insert CMS Code in Themler template, where you want and need custom fields to be shown.

  • In code paste this. Adapt names of your fields to your own, or add more fields if you want.

<pre class>&lt;div class="separated-item- col-md-24"&gt;
&lt;div class="bd-griditem-"&gt;
&lt;div class=" bd-layoutcontainer-"&gt;
&lt;div class="bd-container-inner"&gt;
&lt;div class="container-fluid"&gt;
&lt;?php /* * Loop the_sub_field */ if( get_field('my_repeatable_field') ): ?&gt;
&lt;?php while( has_sub_field('my_repeatable_field') ): ?&gt;
&lt;div class="row bd-row-flex bd-row-align-middle bd-collapsed-gutter chronik-alternate"&gt;
&lt;div class="col-md-4 chronik-title text-center"&gt;
&lt;div class="bd-layoutcolumn-"&gt;
&lt;div class="bd-vertical-align-wrapper"&gt;
&lt;?php the_sub_field('friend_url'); ?&gt;
&lt;i class="icon-calendar"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-md-20 chronik-text"&gt;
&lt;div class="bd-layoutcolumn-"&gt;
&lt;div class="bd-vertical-align-wrapper"&gt;
&lt;?php the_sub_field('friend_name'); ?&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;

</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>

Optional CSS. Columns need some padding, etc.. Dont overcomplicate CSS code. Dont ruin what Bootstrap and Themler give already.

.chronik-alternate {
margin:0 0 10px 0; border-top:1px solid #ccc;
}
.chronik-title {
font-size: 32px;
padding:20px !important;
margin:0;
color:#e73e64;
background:#ddd;
line-height:130%;
}
.chronik-text {
line-height:130%;
background:#fff;
padding:20px !important;
}
.chronik-text p {margin:0; padding:0;}

.chronik-alternate .icon-calendar {font-size:45px; color:#999; margin:10px 0 0 0; padding:0; display:block;}

You guessed by now it is not Friend/Links example. Some "Timeline" function done with custom fields. But principle is the same.

  • Few classes are missing numbers and style for those specific classes.
  • If you want it max robust and Themler Bootstrap way make one custom Page template (never will be used anywhere), and in this template make dummy row control with columns, both styles as you want for custom fields. Then take code with class numbers from this template and use it for HTML/PHP code (not CSS, it is already in style.css, Themler generates all on Save).

  • So can you use same custom Page template for styling of other things, fields, custom shortcodes, etc. Point is letting Themler generate CSS code.

  • This example above wont work if you split those 2 custom fields inside real row control with 2 columns. Code doesnt know it has to repeat rows as on Archive list, and will put all content in just one row, and 2 columns. Impossible to style, and impossible to match those 2 custom fields and result is confusing and wrong. Maybe I missed something, will check later if it is possible. With Shortcode Exec PHP plugin if nothing.

Took me some time to figure it out. In principle everything is already in Bootstrap documentation. Had to generate one empty Themler row with columns to figure out how classes are placed. For further developing and adapting after wish to different devices read documentation, it ie pretty easy: [http://getbootstrap.com/css/][1] Bottom, custom responsive width. There is no need for CSS media queries. In Themler Bootstrap all power is in classes. [http://answers.themler.com/articles/3896/columns-shortcode][2] [1]: http://getbootstrap.com/css/ [2]: http://answers.themler.com/articles/3896/columns-shortcode Back to tutorial. - Let us say this simple examle to not complicate code. You have one Page with repeatable ACF fields. - Page is for Links/Frends. - One custom field is for URL Link Title, name of a friend. - Second field is for URL Website of a friend. - Insert CMS Code in Themler template, where you want and need custom fields to be shown. - In code paste this. Adapt names of your fields to your own, or add more fields if you want. &lt;pre class&gt;&amp;lt;div class=&quot;separated-item- col-md-24&quot;&amp;gt; &amp;lt;div class=&quot;bd-griditem-&quot;&amp;gt; &amp;lt;div class=&quot; bd-layoutcontainer-&quot;&amp;gt; &amp;lt;div class=&quot;bd-container-inner&quot;&amp;gt; &amp;lt;div class=&quot;container-fluid&quot;&amp;gt; &amp;lt;?php /* * Loop the_sub_field */ if( get_field(&#39;my_repeatable_field&#39;) ): ?&amp;gt; &amp;lt;?php while( has_sub_field(&#39;my_repeatable_field&#39;) ): ?&amp;gt; &amp;lt;div class=&quot;row bd-row-flex bd-row-align-middle bd-collapsed-gutter chronik-alternate&quot;&amp;gt; &amp;lt;div class=&quot;col-md-4 chronik-title text-center&quot;&amp;gt; &amp;lt;div class=&quot;bd-layoutcolumn-&quot;&amp;gt; &amp;lt;div class=&quot;bd-vertical-align-wrapper&quot;&amp;gt; &amp;lt;?php the_sub_field(&#39;friend_url&#39;); ?&amp;gt; &amp;lt;i class=&quot;icon-calendar&quot;&amp;gt;&amp;lt;/i&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class=&quot;col-md-20 chronik-text&quot;&amp;gt; &amp;lt;div class=&quot;bd-layoutcolumn-&quot;&amp;gt; &amp;lt;div class=&quot;bd-vertical-align-wrapper&quot;&amp;gt; &amp;lt;?php the_sub_field(&#39;friend_name&#39;); ?&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &lt;/div&gt; &lt;/div&gt; &lt;?php endwhile; ?&gt; &lt;?php endif; ?&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; Optional CSS. Columns need some padding, etc.. Dont overcomplicate CSS code. Dont ruin what Bootstrap and Themler give already. .chronik-alternate { margin:0 0 10px 0; border-top:1px solid #ccc; } .chronik-title { font-size: 32px; padding:20px !important; margin:0; color:#e73e64; background:#ddd; line-height:130%; } .chronik-text { line-height:130%; background:#fff; padding:20px !important; } .chronik-text p {margin:0; padding:0;} .chronik-alternate .icon-calendar {font-size:45px; color:#999; margin:10px 0 0 0; padding:0; display:block;} You guessed by now it is not Friend/Links example. Some "Timeline" function done with custom fields. But principle is the same. - Few classes are missing numbers and style for those specific classes. - If you want it max robust and Themler Bootstrap way make one custom Page template (never will be used anywhere), and in this template make dummy row control with columns, both styles as you want for custom fields. Then take code with class numbers from this template and use it for HTML/PHP code (not CSS, it is already in style.css, Themler generates all on Save). - So can you use same custom Page template for styling of other things, fields, custom shortcodes, etc. Point is letting Themler generate CSS code. - This example above wont work if you split those 2 custom fields inside real row control with 2 columns. Code doesnt know it has to repeat rows as on Archive list, and will put all content in just one row, and 2 columns. Impossible to style, and impossible to match those 2 custom fields and result is confusing and wrong. Maybe I missed something, will check later if it is possible. With Shortcode Exec PHP plugin if nothing.
Vote to pay developers attention to this features or issue.
2 Comments
Order By: Standard | Newest
Stagger Lee
1820 Posts
Stagger Lee posted this 09 August 2015

Class "col-md-4" is number of parts of one row. So this means this column will have 4 parts. Next has to use 20 "col-md-20", to fill all 24 possible, to get 100% width of container.

This is not finished sentence.

This example above wont work if you split those 2 custom fields inside real row control with 2 columns.

Naturally I meant 2 CMS Code or Shortcode blocks inside 2 columns.

Class "col-md-4" is number of parts of one row. So this means this column will have 4 parts. Next has to use 20 "col-md-20", to fill all 24 possible, to get 100% width of container. This is not finished sentence. **This example above wont work if you split those 2 custom fields inside real row control with 2 columns.** Naturally I meant 2 CMS Code or Shortcode blocks inside 2 columns.

Last edited 09 August 2015 by Stagger Lee

Stagger Lee
1820 Posts
Stagger Lee posted this 09 August 2015

One more thing:

  • Horizontal centering content of columns. Use class "text-center" as above. if you dont need horizontal centering just delete class.

  • Vertical centering, vetical-align: bd-row-align-top, bd-row-align-middle, bd-row-align-bottom.

One more thing: - Horizontal centering content of columns. Use class **"text-center"** as above. if you dont need horizontal centering just delete class. - Vertical centering, vetical-align: **bd-row-align-top, bd-row-align-middle, bd-row-align-bottom**.
You must log in or register to leave comments