|
|
(7 intermediate revisions by one user not shown) |
Line 1: |
Line 1: |
| '''This is Page 2 of ''Plugin related and other generic customizations in Builder''. [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_in_Builder Here] is Page 1.''' | | '''This is Page 2 of ''Plugin related and other generic customizations in Builder''. [http://ithemes.com/codex/page/Plugin_related_and_other_generic_customizations_in_Builder Here] is Page 1.''' |
| | | |
− | == How to add social media icons in nav bar ==
| + | = How to add social media icons in nav bar = |
| | | |
| This can be done in at least 2 different ways. The primary difference between method 1 and 2 is that in method 2, left margin for first social icon has to be manually adjusted every time a menu item in the nav bar is changed. For this reason, '''method 1 is recommended'''. | | This can be done in at least 2 different ways. The primary difference between method 1 and 2 is that in method 2, left margin for first social icon has to be manually adjusted every time a menu item in the nav bar is changed. For this reason, '''method 1 is recommended'''. |
Line 202: |
Line 202: |
| [http://ithemes.com/forum/index.php?/topic/20491-builder-traverse-theme-navigation-removing-block-behind-icons/#p96994 Forum topic] | | [http://ithemes.com/forum/index.php?/topic/20491-builder-traverse-theme-navigation-removing-block-behind-icons/#p96994 Forum topic] |
| | | |
− | == How to use CSS3 PIE ==
| + | = How to use CSS3 PIE = |
| | | |
| [http://css3pie.com/ PIE] stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties. | | [http://css3pie.com/ PIE] stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties. |
Line 304: |
Line 304: |
| Source: http://www.position-relative.com/2011/01/using-css3-pie-in-wordpress-custom-themes/ | | Source: http://www.position-relative.com/2011/01/using-css3-pie-in-wordpress-custom-themes/ |
| | | |
− | == How to float a div at any position on top of other elements in the container ==
| + | = How to float a div at any position on top of other elements in the container = |
| | | |
| [[File:Screen Shot 2011-12-19 at 10.37.52 PM.png|800px|thumb|none]] | | [[File:Screen Shot 2011-12-19 at 10.37.52 PM.png|800px|thumb|none]] |
Line 353: |
Line 353: |
| Source: http://ithemes.com/forum/topic/28189-where-is-body-tag/page__view__findpost__p__130559 | | Source: http://ithemes.com/forum/topic/28189-where-is-body-tag/page__view__findpost__p__130559 |
| | | |
− | == How to show top most (latest) post in full and the others as excerpts ==
| + | = How to show top most (latest) post in full and the others as excerpts = |
| | | |
| Screenshot: http://d.pr/nfl1 | | Screenshot: http://d.pr/nfl1 |
Line 393: |
Line 393: |
| Source: http://wordpress.org/support/topic/full-article-for-first-post-excerpts-for-the-rest?replies=7#post-1743222 | | Source: http://wordpress.org/support/topic/full-article-for-first-post-excerpts-for-the-rest?replies=7#post-1743222 |
| | | |
− | == How to remove hyperlink from tagline in Header module ==
| + | = How to remove hyperlink from tagline in Header module = |
| | | |
| Add the following code to child theme's functions.php (at the end, but before the closing ?> line, if any): | | Add the following code to child theme's functions.php (at the end, but before the closing ?> line, if any): |
Line 420: |
Line 420: |
| [http://ithemes.com/forum/topic/29848-remove-link-from-tagline/page__view__findpost__p__138431 Thanks to Ronald (forum post)] | | [http://ithemes.com/forum/topic/29848-remove-link-from-tagline/page__view__findpost__p__138431 Thanks to Ronald (forum post)] |
| | | |
− | == Examples of Using jQuery in Builder ==
| + | = How to get the output of a Header module in a HTML module = |
− | | + | |
− | === Disclaimer ===
| + | |
− | '''iThemes will not be responsible for any issues that may be the result of your attempts to change your site's functions.php file. You do not HAVE to change it. All code samples are for your information, possibly inspiration, and provided "as is". However, when properly implemented, the code samples are accurate and will work.'''
| + | |
− | | + | |
− | === Warning ===
| + | |
− | If you do not understand what it is you are doing, if the words "php", "opening tag", "FTP", "functions" and "backup" are not familiar to you proceed with caution. You can blow up your site due to invalid code in the functions.php file. Actually, even if you know or think you know it all, it still happens (it happens to me at least once a week - Ronald).
| + | |
− | | + | |
− | A single missing } or even a , or a semi-colon is all it takes to take your site down. This can be resolved by undoing the changes, however, this can not be done through the wp-dashboard > Appearance > Editor anymore (since your site is down). You then have to restore the functions.php file either through FTP or your hosting cPanel File Manager.
| + | |
− | | + | |
− | '''If you think you can not do that, or do not understand what all the above means, I suggest you refrain from editing functions.php.'''
| + | |
− | | + | |
− | Should anything go wrong, do not blame the code posted here. The code works. It just needs to be inserted a) the right way, and b) in the right place.
| + | |
− | | + | |
− | For everyone else feeling confident, and having read the Disclaimer and the paragraph on how to add PHP code to a PHP file, DO MAKE A BACKUP, at least of the file you are editing. It is also not recommended to do these changes through the wp-dashboard > Appearance > Editor. Setup a localhost server on your computer, and use a simple PHP Editor (with syntax checking), ensure that your additions do not break the site and only THEN FTP your files to your server.
| + | |
− | | + | |
− | === How to add PHP code to a PHP file ===
| + | |
− | When adding code to the <code>functions.php</code> file (or any PHP file), make sure it is in PHP format. HTML code is not PHP code, and it '''WILL''' break things when coded inside a block of PHP code.
| + | |
− | | + | |
− | PHP code can be identified by an opening tag: <code><?php</code>
| + | |
− | and a closing tag <code>?></code>
| + | |
− | | + | |
− | all code between these tags should be PHP code.
| + | |
− | | + | |
− | Most WordPress themes have the opening <code><?php</code> tag in functions.php, coded all the way at the top of the file. Most (Builder Child theme) <code>functions.php</code> files do not have a closing <code>?></code> tag (ALL THE WAY) at the end of the file, since it is not required.
| + | |
− | | + | |
− | So if you add code at the end of your <code>functions.php</code> file, and do so before the closing <code>?></code> PHP tag (if any!) you (generally!) are inside a PHP block of code. But this is '''NOT''' guaranteed.
| + | |
− | | + | |
− | *You can't add html code inside PHP tags.
| + | |
− | *You can't add PHP code outside PHP tags.
| + | |
− | *You can't add opening PHP tags INSIDE a block of PHP code (nesting <code><?php some php code ?></code> when there is no closing php tag before it).
| + | |
− | | + | |
− | Before making the final edits and saving and uploading the file to your server, make sure that the syntax of the entire functions.php is valid syntax. You can do so by using a PHP Editor, and there are online tools such as this one: http://www.piliapp.com/php-syntax-check/
| + | |
− | | + | |
− | ====example of correct PHP code====
| + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | <?php
| + | |
− | PHP code
| + | |
− | ?>
| + | |
− | | + | |
− | html code
| + | |
− | | + | |
− | <?php
| + | |
− | some more PHP code
| + | |
− | ?>
| + | |
− | </pre>
| + | |
− | | + | |
− | ====example of incorrect PHP code 1====
| + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | <?php
| + | |
− | php code
| + | |
− | | + | |
− | <?php
| + | |
− | some more php code
| + | |
− | ?>
| + | |
− | | + | |
− | ?>
| + | |
− | </pre>
| + | |
− | | + | |
− | ====example of incorrect PHP code 2====
| + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | <?php
| + | |
− | html code
| + | |
− | ?>
| + | |
− | </pre>
| + | |
− | | + | |
− | ====example of incorrect PHP code 3====
| + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | <?php
| + | |
− | php code
| + | |
− | ?>
| + | |
− | | + | |
− | more php code
| + | |
− | </pre>
| + | |
− | | + | |
− | | + | |
− | === Introduction ===
| + | |
− | | + | |
− | Please note that code shown is for a particular child theme and for a specific version used when writing the articles. It would usually have to be modified to suit your needs. All code samples use certain selector names (for menus, for builder selectors etc.) This is entirely arbitrary, and it is ''highly unlikely'' that your selectors are the same. '''You have to adapt the code accordingly'''.
| + | |
− | | + | |
− | '''All code samples provided here ASSUME that it will be placed in already existing PHP tags. Therefore, you will not find an opening <?php code at the start, or a closing ?> tag at the end.'''
| + | |
− | | + | |
− | === How to assign odd and even classes to menu items in nav bar ===
| + | |
− | | + | |
− | One typical usage of this would be to set different background colors to alternate menu items.
| + | |
− | | + | |
− | [[File:2013-02-02 21-15-52.png|567px|thumb|none]]
| + | |
− | | + | |
− | Add the following at the end of child theme's <code>functions.php</code>:
| + | |
− | | + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | // Assign even and odd classes to nav bar menu items
| + | |
− | | + | |
− | add_action('wp_enqueue_scripts', 'add_my_code_1');
| + | |
− | | + | |
− | function add_my_code_1() {
| + | |
− | add_action( 'print_footer_scripts', 'my_footer_script_1' );
| + | |
− | }
| + | |
− | | + | |
− | function my_footer_script_1() { ?>
| + | |
− | <script type="text/javascript">
| + | |
− | jQuery(document).ready(function($) {
| + | |
− | $("#menu-main-menu > li:nth-child(odd)").addClass("odd");
| + | |
− | $("#menu-main-menu > li:nth-child(even)").addClass("even");
| + | |
− | });
| + | |
− | </script>
| + | |
− | <?php }
| + | |
− | </pre>
| + | |
− | | + | |
− | where <code>menu-main-menu</code> is the CSS ID of custom menu shown in the nav bar.
| + | |
− | | + | |
− | Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
| + | |
− | | + | |
− | <pre class="brush: css; gutter: false;">
| + | |
− | .builder-module-navigation li.even a {
| + | |
− | background: red;
| + | |
− | }
| + | |
− | | + | |
− | .builder-module-navigation li.odd a {
| + | |
− | background: blue;
| + | |
− | }
| + | |
− | | + | |
− | .builder-module-navigation li.even li a,
| + | |
− | .builder-module-navigation li.odd li a {
| + | |
− | background: #FFF;
| + | |
− | }
| + | |
− | | + | |
− | .builder-module-navigation li a:hover,
| + | |
− | .builder-module-navigation li.even li a:hover,
| + | |
− | .builder-module-navigation li.odd li a:hover {
| + | |
− | background: #333;
| + | |
− | color: #FFF;
| + | |
− | }
| + | |
− | | + | |
− | .builder-module-navigation .current_page_item.even a, .builder-module-navigation .current_page_item.odd a
| + | |
− | .builder-module-navigation .current-cat.even a, .builder-module-navigation .current-cat.odd a
| + | |
− | .builder-module-navigation .current-menu-item.even a, .builder-module-navigation .current-menu-item.odd a {
| + | |
− | background: #333;
| + | |
− | }
| + | |
− | | + | |
− | .builder-module-navigation li a,
| + | |
− | .builder-module-navigation .current_page_item li a,
| + | |
− | .builder-module-navigation .current-cat li a {
| + | |
− | color: #FFF;
| + | |
− | }
| + | |
− | | + | |
− | .builder-module-navigation li li a {
| + | |
− | color: #333;
| + | |
− | }
| + | |
− | </pre>
| + | |
− | | + | |
− | Ex.:
| + | |
− | | + | |
− | [http://www.wpcon186.info/ Live Demo]. Code used on this site: [http://pastebin.com/Kwr3Q1g7 functions.php], [http://pastebin.com/irx9GtC8 style.css].
| + | |
− | | + | |
− | === How to spread/space out menu items equally across the nav bar ===
| + | |
− | | + | |
− | [[File:Screen Shot 2013-02-02 at 9.43.51 PM.png|800px|thumb|none|Before]]
| + | |
− | | + | |
− | [[File:Screen Shot 2013-02-02 at 9.39.19 PM.png|800px|thumb|none|After]]
| + | |
− | | + | |
− | Add the following at the end of child theme's <code>functions.php</code> but '''before''' a closing <code>?></code>, if any):
| + | |
− | | + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | // =========================================
| + | |
− | // = Space out nav bar menu items equally =
| + | |
− | // =========================================
| + | |
− | | + | |
− | // load javascript in the footer
| + | |
− | add_action('wp_enqueue_scripts', 'add_my_code_37742');
| + | |
− | function add_my_code_37742() {
| + | |
− | add_action( 'print_footer_scripts', 'my_footer_script_37742' );
| + | |
− | }
| + | |
− | | + | |
− | // Add Javascript to footer
| + | |
− | function my_footer_script_37742() { ?>
| + | |
− | | + | |
− | <script type="text/javascript">
| + | |
− | | + | |
− | jQuery(document).ready(function($) {
| + | |
− | | + | |
− | var menuItems = $("ul#menu-main-menu").children().length;
| + | |
− | var menuWidth = $("ul#menu-main-menu").width();
| + | |
− | var percentage = (menuWidth / menuItems) / (menuWidth / 100);
| + | |
− | | + | |
− | $("ul#menu-main-menu").children().each(function() {
| + | |
− | $(this).css('width', percentage + '%');
| + | |
− | });
| + | |
− | | + | |
− | });
| + | |
− | | + | |
− | </script>
| + | |
− | | + | |
− | <?php }
| + | |
− | </pre>
| + | |
− | | + | |
− | where <code>menu-main-menu</code> is the ID of custom menu shown in the nav bar.
| + | |
− | | + | |
− | Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
| + | |
− | | + | |
− | <pre class="brush: css; gutter: false;">
| + | |
− | /*********************************************
| + | |
− | Space out nav bar menu items equally
| + | |
− | *********************************************/
| + | |
− | | + | |
− | .builder-module-navigation ul {
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | .builder-module-navigation li a, .builder-module-navigation .current_page_item li a, .builder-module-navigation .current-cat li a {
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | </pre>
| + | |
− | | + | |
− | Thanks to Ronald. Source: http://ithemes.com/forum/topic/37742-navigation-spread-items-to-length-of-the-nav-bar/#entry173441
| + | |
− | | + | |
− | === How to add a slow transition effect for second level menus in nav bar ===
| + | |
− | | + | |
− | [http://jsfiddle.net/ronald/nBFm3/ Live Demo]
| + | |
− | | + | |
− | Add the following at the end of child theme's <code>functions.php</code>:
| + | |
− | | + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | // =========================================
| + | |
− | // = Smoothen transition of 2nd level menu =
| + | |
− | // =========================================
| + | |
− | | + | |
− | // load javascript in footer
| + | |
− | add_action('wp_enqueue_scripts', 'add_my_code_2');
| + | |
− | function add_my_code_2() {
| + | |
− | add_action( 'print_footer_scripts', 'print_my_footer_scripts_2' );
| + | |
− | }
| + | |
− | | + | |
− | // Add required javascript to footer (for delayed opening of subnav)
| + | |
− | function print_my_footer_scripts_2() { ?>
| + | |
− | | + | |
− | <script type='text/javascript'>
| + | |
− | jQuery(document).ready(function($) {
| + | |
− | $("#menu-main-menu li").hover(function(){
| + | |
− | $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
| + | |
− | },function(){
| + | |
− | $(this).find('ul:first').css({visibility: "hidden"});
| + | |
− | });
| + | |
− | | + | |
− | });
| + | |
− | </script>
| + | |
− | | + | |
− | <?php }
| + | |
− | </pre>
| + | |
− | | + | |
− | where <code>menu-main-menu</code> is the CSS ID of custom menu (usually <code><ul id="menu-main-menu"></code>) shown in the nav bar. This is entirely arbitrary, and it is highly unlikely that your selectors are the same. You need to adapt the code accordingly.
| + | |
− | | + | |
− | <u>Alternate Method</u>:
| + | |
− | | + | |
− | Go to My Theme -> Settings -> Analytics and JavaScript Code. Paste the following in the text area under
| + | |
− | | + | |
− | "List any JavaScript or other code to be manually inserted inside the site's <head> tag in the input below."
| + | |
− | | + | |
− | <pre class="brush:php; gutter: false;">
| + | |
− | <script type='text/javascript'>
| + | |
− | jQuery(document).ready(function($) {
| + | |
− | $("#menu-main-menu li").hover(function(){
| + | |
− | $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
| + | |
− | },function(){
| + | |
− | $(this).find('ul:first').css({visibility: "hidden"});
| + | |
− | });
| + | |
− | | + | |
− | });
| + | |
− | </script>
| + | |
− | </pre>
| + | |
− | | + | |
− | where <code>menu-main-menu</code> is the CSS ID of custom menu shown in the nav bar.
| + | |
− | | + | |
− | Save settings.
| + | |
− | | + | |
− | | + | |
− | Thanks to Ronald. Source: http://ithemes.com/forum/topic/30998-is-it-possible-to-add-a-slow-transition-effect-to-the-navbar/#entry144025
| + | |
− | | + | |
− | Another similar forum topic: http://ithemes.com/forum/topic/21002-navigation-with-animated-effect/
| + | |
− | | + | |
− | === How to Clear Placeholder Text Upon Focus in Gravity Forms Fields ===
| + | |
− | | + | |
− | [http://wordpress.org/extend/plugins/gravity-forms-placeholders/ Gravity Forms - Placeholders add-on] plugin can be used to add HTML5 placeholder support to Gravity Forms' fields with a javascript fallback. <code>gplaceholder</code> CSS class should be added to text fields or textareas as needed, or to the form itself to enable this feature to all fields within it.
| + | |
− | | + | |
− | Ex.:
| + | |
− | | + | |
− | [[File:2013-02-04 20-35-47.png|513px|thumb|none]]
| + | |
− | | + | |
− | Now all Gravity Forms' field labels will appear inside the fields as placeholder text.
| + | |
− | | + | |
− | <gallery>
| + | |
− | File:Screen Shot 2013-02-04 at 8.39.24 PM.png|Before
| + | |
− | File:Screen Shot 2013-02-04 at 8.39.33 PM.png|After
| + | |
− | </gallery>
| + | |
− | | + | |
− | The placeholder text will continue to appear when clicked or tabbed to inside a field, but will disappear when user starts typing.
| + | |
− | | + | |
− | If you would like the fields' placeholder text to be cleared when a field gets focus, add the following at the end of child theme's <code>functions.php</code>:
| + | |
− | | + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | // =========================================
| + | |
− | // = Auto hide placeholder text upon focus =
| + | |
− | // =========================================
| + | |
− | | + | |
− | // load javascript in footer
| + | |
− | add_action('wp_enqueue_scripts', 'add_my_code_3');
| + | |
− | | + | |
− | function add_my_code_3() {
| + | |
− | add_action( 'print_footer_scripts', 'my_footer_script_3' );
| + | |
− | }
| + | |
− | | + | |
− | // Add jQuery to footer
| + | |
− | | + | |
− | function my_footer_script_3() { ?>
| + | |
− | <script type="text/javascript">
| + | |
− | jQuery(document).ready(function($) {
| + | |
− | $('.gform_wrapper').find(':input').each(function() {
| + | |
− | $(this).data('saveplaceholder', $(this).attr('placeholder'));
| + | |
− | | + | |
− | $(this).focusin(function() {
| + | |
− | $(this).attr('placeholder', '');
| + | |
− | });
| + | |
− | | + | |
− | $(this).focusout(function() {
| + | |
− | $(this).attr('placeholder', $(this).data('saveplaceholder'));
| + | |
− | });
| + | |
− | | + | |
− | })
| + | |
− | })
| + | |
− | </script>
| + | |
− | <?php }
| + | |
− | </pre>
| + | |
− | | + | |
− | Thanks to Ronald for providing this code [http://jsfiddle.net/ronald/KfZTp/ here].
| + | |
− | | + | |
− | === Loading Script in Footer on All Pages Except One ===
| + | |
− | | + | |
− | Ex.:
| + | |
− | | + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | /* JMAC script load */
| + | |
− | // load jquery and prepare javascript in footer
| + | |
− | add_action('wp_enqueue_scripts', 'jmac_scripts_method');
| + | |
− | function jmac_scripts_method() {
| + | |
− | wp_enqueue_script('jquery');
| + | |
− | add_action('print_footer_scripts', 'jmac_print_footer_scripts');
| + | |
− | }
| + | |
− | | + | |
− | // Add required javascript to footer
| + | |
− | function jmac_print_footer_scripts() { if(!is_page('videoconferencing')) { ?>
| + | |
− | <script type="text/javascript">
| + | |
− | jQuery(document).ready(function($) {
| + | |
− | function toggleVideo(state) {
| + | |
− | // if state == 'hide', hide. Else: show video
| + | |
− | var div = document.getElementById("popupVid");
| + | |
− | var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
| + | |
− | div.style.display = state == 'hide' ? 'none' : '';
| + | |
− | func = state == 'hide' ? 'pauseVideo' : 'playVideo';
| + | |
− | iframe.postMessage('{"event":"command","func":"' + func + '","args":""}','*');
| + | |
− | }
| + | |
− | | + | |
− | });
| + | |
− | </script>
| + | |
− | <?php
| + | |
− | } }
| + | |
− | /* JMAC script load end */
| + | |
− | </pre>
| + | |
− | | + | |
− | Note: The focus of this wiki entry is not what the jQuery code does, but rather the if conditional used:
| + | |
− | | + | |
− | <code>if(!is_page('videoconferencing'))</code>
| + | |
− | | + | |
− | where "videoconferencing" is the slug of Page in which jQuery code should NOT be loaded.
| + | |
− | | + | |
− | Forum topic: http://ithemes.com/forum/topic/33305-script-in-footer-on-all-pages-except-one/
| + | |
− | | + | |
− | === Loading Script in Footer Only on Site's Front Page ===
| + | |
− | | + | |
− | Ex.:
| + | |
− | | + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | // prepare javascript in footer
| + | |
− | add_action('wp_enqueue_scripts', 'add_my_script_4');
| + | |
− | | + | |
− | function add_my_script_4() {
| + | |
− | add_action( 'print_footer_scripts', 'home_page_only_script' );
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | // Add javascript to footer
| + | |
− | function home_page_only_script() {
| + | |
− | if ( is_front_page() ) : ?>
| + | |
− | <script type="text/javascript">
| + | |
− | //your javascript here...
| + | |
− | </script>
| + | |
− | <?php endif;
| + | |
− | }
| + | |
− | </pre>
| + | |
− | | + | |
− | Thanks to Ronald. Source: http://ithemes.com/forum/topic/33473-adding-javascipt-to-home-page/#entry155302
| + | |
− | | + | |
− | === How to Create a "Stay-On-Top" element ===
| + | |
− | | + | |
− | ==== Method 1 ====
| + | |
− | | + | |
− | Live Demos: [http://ithemes.com/ iThemes.com], [http://training.ithemes.com/ WebDesign.com]
| + | |
− | | + | |
− | [[File:Parent page Builder Responsive Test Site.png|800px|thumb|none|Standard nav bar]]
| + | |
− | | + | |
− | As the user scrolls down..
| + | |
− | | + | |
− | [[File:2013-02-14 16-52-24.png|800px|thumb|none|As user scrolls below past the standard nav bar, it gets replaced by a nav bar in a fixed position at the top of browser. When user scrolls to top, it goes away]]
| + | |
− | | + | |
− | '''1.''' Identify the selector of the element that you wish to stay on top. Firebug can be used for this.
| + | |
− | | + | |
− | Ex.: <code>.builder-module-navigation-background-wrapper</code> in case of a navigation module.
| + | |
− | | + | |
− | '''2.''' Add the following at the end of child theme's <code>functions.php</code> (before closing PHP tag, if present):
| + | |
− | | + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | // =========================================
| + | |
− | // = "Stay-On-Top" element =
| + | |
− | // =========================================
| + | |
− | | + | |
− | add_action('wp_enqueue_scripts', 'add_my_code');
| + | |
− | | + | |
− | function add_my_code() {
| + | |
− | add_action( 'print_footer_scripts', 'my_footer_script' );
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | function my_footer_script() { ?>
| + | |
− | | + | |
− | <script type="text/javascript">
| + | |
− | | + | |
− | jQuery(function($) {
| + | |
− | | + | |
− | var filter = $('.builder-module-navigation-background-wrapper');
| + | |
− | | + | |
− | pos = filter.offset();
| + | |
− | | + | |
− | var filterSpacer = $('<div />', {
| + | |
− | "class": "filter-drop-spacer",
| + | |
− | "height": filter.outerHeight()
| + | |
− | });
| + | |
− | | + | |
− | var fixed = false;
| + | |
− | | + | |
− | $(window).scroll(function() {
| + | |
− | | + | |
− | if($(this).scrollTop() >= pos.top+filter.height() )
| + | |
− | | + | |
− | {
| + | |
− | if( !fixed )
| + | |
− | {
| + | |
− | fixed = true;
| + | |
− | | + | |
− | filter.fadeOut('fast', function() {
| + | |
− | $(this).addClass('fixed').fadeIn('fast');
| + | |
− | // $('.search_in_nav, .my-social-icons').hide();
| + | |
− | $(this).before(filterSpacer);
| + | |
− | });
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | else
| + | |
− | | + | |
− | {
| + | |
− | if( fixed )
| + | |
− | {
| + | |
− | fixed = false;
| + | |
− | | + | |
− | filter.fadeOut('fast', function() {
| + | |
− | $(this).removeClass('fixed').fadeIn('fast');
| + | |
− | // $('.search_in_nav, .my-social-icons').show();
| + | |
− | filterSpacer.remove();
| + | |
− | });
| + | |
− | }
| + | |
− | }
| + | |
− | });
| + | |
− | | + | |
− | });
| + | |
− | | + | |
− | </script>
| + | |
− | | + | |
− | <?php }
| + | |
− | </pre>
| + | |
− | | + | |
− | In the above, enter the selector from step 1 in the following line:
| + | |
− | | + | |
− | var filter = $('.builder-module-navigation-background-wrapper');
| + | |
− | | + | |
− | (Optional) If you would like to hide any children of the element in fixed state, specify their selectors in the line below and remove the comment.
| + | |
− | | + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | // $('.search_in_nav, .my-social-icons').hide();
| + | |
− | </pre>
| + | |
− | | + | |
− | Remember to do similarly in the line below:
| + | |
− | | + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | // $('.search_in_nav, .my-social-icons').show();
| + | |
− | </pre>
| + | |
− | | + | |
− | '''3.''' Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
| + | |
− | | + | |
− | <pre class="brush: css; gutter: false;">
| + | |
− | .builder-module-navigation-background-wrapper.fixed {
| + | |
− | position: fixed;
| + | |
− | left: 0;
| + | |
− | top: 0;
| + | |
− | width: 100%;
| + | |
− | | + | |
− | -webkit-box-shadow: 0 0 40px #222;
| + | |
− | -moz-box-shadow: 0 0 40px #222;
| + | |
− | box-shadow: 0 0 40px #222;
| + | |
− | | + | |
− | background: rgba(255, 255, 255, 0.92);
| + | |
− | z-index: 100;
| + | |
− | }
| + | |
− | | + | |
− | .admin-bar .builder-module-navigation-background-wrapper.fixed {
| + | |
− | top: 28px;
| + | |
− | }
| + | |
− | </pre>
| + | |
− | | + | |
− | In the above CSS code, ensure that correct selector is being used.
| + | |
− | | + | |
− | Source: http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/ and http://ithemes.com/wp-content/themes/iThemes2012/js/ui.js
| + | |
− | | + | |
− | ==== Method 2: Using Sticky jQuery plugin in iThemes Builder ====
| + | |
− | | + | |
− | Below instructions can be used to make nav bar and a widget as sticky (fixed position and always visible) using the Sticky jQuery plugin.
| + | |
− | | + | |
− | {{#ev:youtube|Pv8dZcmMr9E|640|none|Watch in 1080p HD and in full screen for best viewing experience}}
| + | |
− | | + | |
− | Please note that I have tested it only in Builder Default child theme. Numbers in the code and CSS may have to be adjusted for other child themes.
| + | |
− | | + | |
− | '''1.''' Download [http://stickyjs.com/ Sticky jQuery plugin]. Extract the zip file and upload jquery.sticky.js to /assets/sticky under site root.
| + | |
− | | + | |
− | '''2.''' Add the following in child theme's <code>functions.php</code> (before closing PHP tag if any):
| + | |
− | | + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | add_action('wp_enqueue_scripts', 'add_my_code');
| + | |
− | | + | |
− | function add_my_code() {
| + | |
− | wp_enqueue_script( 'jquery-sticky', get_bloginfo('wpurl') . '/assets/sticky/jquery.sticky.js', array('jquery'), '1.0', true );
| + | |
− | add_action( 'print_footer_scripts', 'my_footer_script' );
| + | |
− | }
| + | |
− | | + | |
− | function my_footer_script() { ?>
| + | |
− | | + | |
− | | + | |
− | <?php if(is_admin_bar_showing()) : ?>
| + | |
− | <script type="text/javascript">
| + | |
− | jQuery(function($) {
| + | |
− | $(".builder-module-navigation").sticky({topSpacing: 28, getWidthFrom: ".builder-module-navigation-outer-wrapper"});
| + | |
− | $("#meta-5").sticky({topSpacing: 64});
| + | |
− | });
| + | |
− | </script>
| + | |
− | | + | |
− | <?php else : ?>
| + | |
− | | + | |
− | <script type="text/javascript">
| + | |
− | jQuery(function($) {
| + | |
− | $(".builder-module-navigation").sticky({topSpacing: 0, getWidthFrom: ".builder-module-navigation-outer-wrapper"});
| + | |
− | $("#meta-5").sticky({topSpacing: 36});
| + | |
− | });
| + | |
− | </script>
| + | |
− | | + | |
− | <?php endif;
| + | |
− | | + | |
− | | + | |
− | } ?>
| + | |
− | </pre>
| + | |
− | | + | |
− | In the above,
| + | |
− | | + | |
− | a) replace <code>meta-5</code> with the ID of widget that you would like to make sticky.
| + | |
− | | + | |
− | b) replace 36 with height of nav bar
| + | |
− | | + | |
− | c) replace 64 with height of nav bar + 28
| + | |
− | | + | |
− | '''3.''' Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):
| + | |
− | | + | |
− | <pre class="brush:css; gutter: false;">
| + | |
− | .sticky-wrapper.is-sticky .builder-module-navigation {
| + | |
− | border-bottom: 1px solid #d6d6d6;
| + | |
− | box-shadow: 0px 0px 16px rgba(0,0,0,0.1);
| + | |
− | }
| + | |
− | | + | |
− | .builder-module-content .widget {
| + | |
− | background: #DDD;
| + | |
− | border-bottom: 3px solid #F1F0F0;
| + | |
− | width: 264px !important;
| + | |
− | }
| + | |
− | </pre>
| + | |
− | | + | |
− | In the above replace 264 with width of widget w/o left and right padding.
| + | |
− | | + | |
− | === How to Style All First Words of Widget Titles Differently ===
| + | |
− | | + | |
− | [[File:Screen Shot 2013-03-20 at 9.31.42 AM.png|216px|thumb|none]]
| + | |
− | | + | |
− | '''1.''' Add the following in child theme's <code>functions.php</code> (before closing PHP tag if any):
| + | |
− | | + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | // ==================================================
| + | |
− | // = Assign a Class to First Word of Widget Titles =
| + | |
− | // ==================================================
| + | |
− | | + | |
− | // load javascript in footer
| + | |
− | | + | |
− | add_action('wp_enqueue_scripts', 'add_my_code');
| + | |
− | | + | |
− | function add_my_code() {
| + | |
− | add_action( 'print_footer_scripts', 'my_footer_script' );
| + | |
− | }
| + | |
− | | + | |
− | // Add jQuery to footer
| + | |
− | | + | |
− | function my_footer_script() { ?>
| + | |
− | | + | |
− | <script type="text/javascript">
| + | |
− | jQuery(function($) {
| + | |
− | | + | |
− | $('.builder-module-sidebar h4.widget-title').each(function() {
| + | |
− | var h = $(this).html();
| + | |
− | var index = h.indexOf(' ');
| + | |
− | if(index == -1) {
| + | |
− | index = h.length;
| + | |
− | }
| + | |
− | $(this).html('<span class="widget-title-first-word">' + h.substring(0, index) + '</span>' + h.substring(index, h.length));
| + | |
− | });
| + | |
− | | + | |
− | });
| + | |
− | </script>
| + | |
− | | + | |
− | <?php }
| + | |
− | </pre>
| + | |
− | | + | |
− | '''2.''' Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
| + | |
− | | + | |
− | <pre class="brush: css; gutter: false;">
| + | |
− | /****************************************************
| + | |
− | Styling First Word of Widget Titles
| + | |
− | *****************************************************/
| + | |
− | | + | |
− | .widget-title-first-word {
| + | |
− | color: red;
| + | |
− | }
| + | |
− | </pre>
| + | |
− | | + | |
− | Source: http://blog.codez.in/jquery-css-styling-first-word-of-a-text-differently/jquery/2010/08/23
| + | |
− | | + | |
− | === How to incorporate jQuery Kwicks Accordion in Builder ===
| + | |
− | | + | |
− | See [http://ithemes.com/forum/topic/40780-jquery-kwiks/#entry183718 this] forum post.
| + | |
− | | + | |
− | === Animated Responsive Image Grid ===
| + | |
− | | + | |
− | Below is how I implemented a jQuery plugin by [http://tympanus.net/Development/AnimatedResponsiveImageGrid/ codrops] in WordPress for creating a responsive image grid that will switch images using different animations and timings.
| + | |
− | | + | |
− | [http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ Live Demo]
| + | |
− | | + | |
− | '''1.''' Downloaded source, extracted zip file and uploaded the <code>AnimatedResponsiveImageGrid</code> folder to <code>/assets</code>
| + | |
− | | + | |
− | [[File:2013-04-10 14-17-19.png|365px|thumb|none]]
| + | |
− | | + | |
− | '''2.''' Added the following at the end of child theme's <code>functions.php</code>:
| + | |
− | | + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | | + | |
− | // =========================================
| + | |
− | // = My Changes Below =
| + | |
− | // =========================================
| + | |
− | | + | |
− | | + | |
− | // load javascript and styles in footer or head
| + | |
− | | + | |
− | // only on http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/
| + | |
− | add_action('wp_enqueue_scripts', 'AnimatedResponsiveImageGrid_code');
| + | |
− | | + | |
− | function AnimatedResponsiveImageGrid_code() {
| + | |
− | if(is_page( '1155' )) {
| + | |
− | wp_enqueue_script( 'modernizr', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/js/modernizr.custom.26633.js', '2.6.2', false ); /* in head */
| + | |
− | wp_enqueue_script( 'AnimatedResponsiveImageGrid', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/js/jquery.gridrotator.js', array('jquery'), true );
| + | |
− | | + | |
− | wp_enqueue_style( 'AnimatedResponsiveImageGrid-style', get_bloginfo('wpurl') . '/assets/AnimatedResponsiveImageGrid/css/style.css' );
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | add_action('wp_enqueue_scripts', 'add_my_code');
| + | |
− | | + | |
− | function add_my_code() {
| + | |
− | | + | |
− | add_action( 'print_footer_scripts', 'my_footer_script' );
| + | |
− | }
| + | |
− | | + | |
− | // Add jQuery to footer
| + | |
− | | + | |
− | function my_footer_script() { ?>
| + | |
− | | + | |
− | | + | |
− | <!-- only on http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ -->
| + | |
− | <?php if(is_page( '1155' )) { ?>
| + | |
− | <script type="text/javascript">
| + | |
− | jQuery(function($) {
| + | |
− | $( '#ri-grid' ).gridrotator( {
| + | |
− | w320 : {
| + | |
− | rows : 3,
| + | |
− | columns : 4
| + | |
− | },
| + | |
− | w240 : {
| + | |
− | rows : 3,
| + | |
− | columns : 3
| + | |
− | }
| + | |
− | } );
| + | |
− | | + | |
− | $( '#ri-grid-2' ).gridrotator( {
| + | |
− | rows : 3,
| + | |
− | columns : 15,
| + | |
− | animType : 'fadeInOut',
| + | |
− | animSpeed : 1000,
| + | |
− | interval : 600,
| + | |
− | step : 1,
| + | |
− | w320 : {
| + | |
− | rows : 3,
| + | |
− | columns : 4
| + | |
− | },
| + | |
− | w240 : {
| + | |
− | rows : 3,
| + | |
− | columns : 4
| + | |
− | }
| + | |
− | } );
| + | |
− | });
| + | |
− | </script>
| + | |
− | <?php }
| + | |
− | | + | |
− | | + | |
− | }
| + | |
− | </pre>
| + | |
− | | + | |
− | '''3.'''
| + | |
− | | + | |
− | a) Placed this (in Text view) in "Animated Responsive Image Grid" Page:
| + | |
− | | + | |
− | <pre class="brush: html; gutter: false;">
| + | |
− | <h2>Demo 1: Random animations / 55% container width / 3s between switching</h2>
| + | |
− | | + | |
− | <div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
| + | |
− | <img class="ri-loading-image" src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/loading.gif"/>
| + | |
− | <ul>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/1.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/2.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/3.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/4.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/5.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/6.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/7.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/8.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/9.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/10.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/11.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/12.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/13.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/14.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/15.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/16.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/17.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/18.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/19.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/20.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/21.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/22.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/23.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/24.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/25.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/26.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/27.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/28.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/29.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/30.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/31.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/32.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/33.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/34.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/35.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/36.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/37.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/38.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/39.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/40.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/41.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/42.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/43.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/44.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/45.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/46.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/47.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/48.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/49.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/50.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/51.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/52.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/53.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/54.jpg"/></a></li>
| + | |
− | </ul>
| + | |
− | </div>
| + | |
− | </pre>
| + | |
− | | + | |
− | b) Placed this in HTML module below the content module in layout used by that Page:
| + | |
− | | + | |
− | <pre class="brush: html; gutter: false;">
| + | |
− | <h2 style="margin-left: 1em; margin-right: 1em;">Demo 2: "fadeInOut" animation / 100% container width / 1 image switch at a time / 600ms between switching</h2>
| + | |
− | | + | |
− | <div id="ri-grid-2" class="ri-grid ri-grid-size-2">
| + | |
− | <img class="ri-loading-image" src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/loading.gif"/>
| + | |
− | <ul>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/1.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/2.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/3.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/4.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/5.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/6.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/7.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/8.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/9.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/10.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/11.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/12.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/13.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/14.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/15.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/16.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/17.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/18.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/19.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/20.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/21.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/22.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/23.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/24.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/25.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/26.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/27.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/28.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/29.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/30.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/31.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/32.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/33.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/34.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/35.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/36.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/37.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/38.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/39.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/40.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/41.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/42.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/43.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/44.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/45.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/46.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/47.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/48.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/49.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/50.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/51.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/52.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/53.jpg"/></a></li>
| + | |
− | <li><a href="#"><img src="http://websitesetuppro.com/demos/builder-responsive/assets/AnimatedResponsiveImageGrid/images/medium/54.jpg"/></a></li>
| + | |
− | </ul>
| + | |
− | </div>
| + | |
− | </pre>
| + | |
− | | + | |
− | '''4.''' Added the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
| + | |
− | | + | |
− | <pre class="brush: css; gutter: false;">
| + | |
− | /* http://websitesetuppro.com/demos/builder-responsive/animated-responsive-image-grid/ */
| + | |
− | | + | |
− | .ri-grid-size-1 {
| + | |
− | width: 90% !important;
| + | |
− | }
| + | |
− | | + | |
− | .ri-grid ul li,
| + | |
− | .ri-grid ul li a {
| + | |
− | width: 98px !important;
| + | |
− | height: 97px !important;
| + | |
− | }
| + | |
− | | + | |
− | #builder-module-516519f61bcba-outer-wrapper {
| + | |
− | max-width: 100% !important;
| + | |
− | }
| + | |
− | | + | |
− | #ri-grid-2 ul li,
| + | |
− | #ri-grid-2 ul li a {
| + | |
− | width: 94px !important;
| + | |
− | height: 94px !important;
| + | |
− | }
| + | |
− | | + | |
− | .page-id-1155 .builder-module-content .builder-module-element {
| + | |
− | margin-bottom: 0 !important;
| + | |
− | }
| + | |
− | | + | |
− | .page-id-1155 .hentry {
| + | |
− | margin-bottom: 0;
| + | |
− | }
| + | |
− | </pre>
| + | |
− | | + | |
− | === Easy Accordion jQuery plugin in iThemes Builder ===
| + | |
− | | + | |
− | [http://buildersnippets.com/easy-accordion-test-page/ Live Demo] [Note: Due to differences in CSS properties like font sizes between child themes and other minor customizations, the demo (which uses Air child theme) looks slightly different than the screenshot below, which was taken in Default child theme]
| + | |
− | | + | |
− | [[File:Easy Accordion Test Page - WordPress Dev Site 2013-04-30 13-03-49.png|441px|thumb|none]]
| + | |
− | | + | |
− | [http://www.madeincima.it/en/articles/resources-and-tools/easy-accordion-plugin/ Easy Accordion] is a jQuery plugin to create a horizontal accordion and is a free alternative to Slidedeck.
| + | |
− | | + | |
− | The following steps outline how the [http://www.madeincima.it/download/samples/jquery/easyAccordion/ plugin's demo] can be set up in a WordPress site running iThemes Builder. Once you have the following working, you can then edit the HTML, javascript parameters and CSS to suit your needs.
| + | |
− | | + | |
− | '''1.''' Download the full sample zip file from [http://www.madeincima.it/en/articles/resources-and-tools/easy-accordion-plugin/ here] under the Conclusion section. Extract the zip file and upload the resulting <code>jQuery-easyAccordion</code> folder to <code>assets</code> directory under your site's root.
| + | |
− | | + | |
− | '''2.''' Upload all the contents of <code>jQuery-easyAccordion/images</code> folder to active child theme's <code>images</code> directory.
| + | |
− | | + | |
− | '''3.''' Wherever you want the Easy Accordion to appear (in a Page or Post or HTML module etc), paste the following:
| + | |
− | | + | |
− | <pre class="brush: html; gutter: false;">
| + | |
− | <div class="sample">
| + | |
− | <h1>jQuery Easy Accordion Plugin</h1>
| + | |
− |
| + | |
− | <h2>Horizontal Accordion with Autoplay</h2>
| + | |
− | <p>Set the '<strong>autoStart</strong>' parameter to '<strong>true</strong>' to get a timed slideshow. You can also define the interval between each slide in milliseconds using the '<strong>slideInterval</strong>' parameter.</p>
| + | |
− | <div id="accordion-1">
| + | |
− | <dl>
| + | |
− | <dt>First slide</dt>
| + | |
− | <dd><h2>This is the first slide</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img1.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
| + | |
− | <dt>Second slide</dt>
| + | |
− | <dd><h2>Here is the second slide</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img2.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
| + | |
− | <dt>One more slide</dt>
| + | |
− | <dd><h2>One more slide to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img3.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
| + | |
− | <dt>Another slide</dt>
| + | |
− | <dd><h2>Another slide to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img4.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
| + | |
− | <dt>Wow one more</dt>
| + | |
− | <dd><h2>Unbilievable one more slide here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img5.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
| + | |
− | <dt>Last one</dt>
| + | |
− | <dd><h2>This is definitely the last one</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/monsters/img6.png" alt="Alt text to go here" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br /><a href="#" class="more">Read more</a></p></dd>
| + | |
− | </dl>
| + | |
− | </div>
| + | |
− |
| + | |
− | <h2>Simple Horizontal Accordion</h2>
| + | |
− | <p>If you don't specify the '<strong>autoStart</strong>' parameter or if you set it to '<strong>false</strong>' you get a simple slideshow.</p>
| + | |
− | | + | |
− | <div id="accordion-2">
| + | |
− | <dl>
| + | |
− | <dt>Slide title</dt>
| + | |
− | <dd><h2>First mammoth here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img1.png" alt="Alt text to go here" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.</p></dd>
| + | |
− | <dt>Another slide</dt>
| + | |
− | <dd><h2>Over the moon!</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img2.png" alt="Alt text to go here" />Aenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget. </p></dd>
| + | |
− | <dt>Third slide</dt>
| + | |
− | <dd><h2>Another mammoth</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img3.png" alt="Alt text to go here" />Ipsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p></dd>
| + | |
− | <dt>Last slide</dt>
| + | |
− | <dd><h2>This is my favourite</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/mammoths/img4.png" alt="Alt text to go here" />Cum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p></dd>
| + | |
− | </dl>
| + | |
− | </div>
| + | |
− |
| + | |
− | <h2>Set the initial Active Slide</h2>
| + | |
− | <p>You can easily set the <strong>initial active slide</strong> by adding the '<strong>active</strong>' class to the respective DT element.
| + | |
− | <br />Notice that you could also remove the slide number by setting the '<strong>slideNum</strong>' parameter to '<strong>false</strong>'.</p>
| + | |
− | <div id="accordion-3">
| + | |
− | <dl>
| + | |
− | <dt>Slide title</dt>
| + | |
− | <dd><h2>First slide here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img2.png" alt="Alt text to go here" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean commodo ligula eget dolor.</p></dd>
| + | |
− | <dt>Another slide</dt>
| + | |
− | <dd><h2>Title to go here</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img4.png" alt="Alt text to go here" />Aenean commodo ligula eget dolor. Aenean massa. Nascetur aenean commodo ligula eget dolor. Aenean massa eget. </p></dd>
| + | |
− | <dt class="active">Third slide</dt>
| + | |
− | <dd><h2>Here is the title</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img1.png" alt="Alt text to go here" />Ipsum dolor sit amet.Aenean ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p></dd>
| + | |
− | <dt>Last slide</dt>
| + | |
− | <dd><h2>Last slide title</h2><p><img src="http://buildersnippets.com/assets/jQuery-easyAccordion/images/bugs/img3.png" alt="Alt text to go here" />Cum sociis natoque penatibus et donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p></dd>
| + | |
− | </dl>
| + | |
− | </div>
| + | |
− | | + | |
− | <p><a href="http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/">Go back to the post!</a></p>
| + | |
− | </div>
| + | |
− | </pre>
| + | |
− | | + | |
− | In the case of [http://buildersnippets.com/easy-accordion-test-page/ my demo], the above code has been placed in a static Page.
| + | |
− | | + | |
− | '''4.''' Add the following in child theme's <code>functions.php</code> before closing PHP tag (if any):
| + | |
− | | + | |
− | <pre class="brush: php; gutter: false;">
| + | |
− | // load javascript and styles in footer or header
| + | |
− | | + | |
− | // only on http://buildersnippets.com/easy-accordion-test-page/
| + | |
− | add_action('wp_enqueue_scripts', 'easyAccordion_code');
| + | |
− | | + | |
− | function easyAccordion_code() {
| + | |
− | if(is_page( '127' )) {
| + | |
− | wp_enqueue_script( 'easyAccordion', get_bloginfo('wpurl') . '/assets/jQuery-easyAccordion/scripts/jquery.easyAccordion.js', array('jquery'), '0.1', true );
| + | |
− | | + | |
− | wp_enqueue_style( 'easy-accordion', get_bloginfo('wpurl') . '/assets/jQuery-easyAccordion/css/styles.css' );
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | add_action('wp_enqueue_scripts', 'add_my_code_ea');
| + | |
− | | + | |
− | function add_my_code_ea() {
| + | |
− | | + | |
− | add_action( 'print_footer_scripts', 'my_footer_script_ea' );
| + | |
− | }
| + | |
− | | + | |
− | // Add jQuery to footer
| + | |
− | | + | |
− | function my_footer_script_ea() { ?>
| + | |
− | | + | |
− | | + | |
− | <!-- only on http://buildersnippets.com/easy-accordion-test-page/ -->
| + | |
− | <?php if(is_page( '127' )) { ?>
| + | |
− | <script type="text/javascript">
| + | |
− | var accordion;
| + | |
− | jQuery(function($) {
| + | |
− | $('#accordion-1').easyAccordion({
| + | |
− | autoStart: true,
| + | |
− | slideInterval: 3000
| + | |
− | });
| + | |
− | | + | |
− | $('#accordion-2').easyAccordion({
| + | |
− | autoStart: false
| + | |
− | });
| + | |
− | | + | |
− | $('#accordion-3').easyAccordion({
| + | |
− | autoStart: true,
| + | |
− | slideInterval: 5000,
| + | |
− | slideNum:false
| + | |
− | });
| + | |
− | | + | |
− | $('#accordion-4').easyAccordion({
| + | |
− | autoStart: false,
| + | |
− | slideInterval: 5000
| + | |
− | });
| + | |
− | });
| + | |
− | </script>
| + | |
− | <?php }
| + | |
− | | + | |
− | | + | |
− | }
| + | |
− | </pre>
| + | |
− | | + | |
− | The <code>if(is_page( '127' ))</code> conditional is in place to ensure that javascript is loaded and called only where needed (in this case, a specific Page vs site-wide). You would need to either change the ID or remove the conditional to suit your needs.
| + | |
− | | + | |
− | '''5.''' Add the following at the end of child theme's <code>style.css</code> (WP dashboard -> Appearance -> Editor):
| + | |
− | | + | |
− | <pre class="brush: css; gutter: false;">
| + | |
− | /* Easy Accordion Styling */
| + | |
− | | + | |
− | .sample{border:1px solid #92cdec;background:#d7e7ff;padding:30px}
| + | |
− | .easy-accordion h2{margin:0px 0 20px 0;padding:0;font-size:1.6em;}
| + | |
− | | + | |
− | dd p{line-height:120%}
| + | |
− | | + | |
− | #accordion-1{width:800px;height:245px;padding:30px;background:#fff;border:1px solid #b5c9e8}
| + | |
− | #accordion-1 dl{width:800px;height:245px}
| + | |
− | #accordion-1 dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#26526c}
| + | |
− | #accordion-1 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-1.jpg) 0 0 no-repeat}
| + | |
− | #accordion-1 dt.hover{color:#68889b;}
| + | |
− | #accordion-1 dt.active.hover{color:#fff}
| + | |
− | #accordion-1 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
| + | |
− | #accordion-1 .slide-number{color:#68889b;left:10px;font-weight:bold}
| + | |
− | #accordion-1 .active .slide-number{color:#fff;}
| + | |
− | #accordion-1 a{color:#68889b}
| + | |
− | #accordion-1 dd img{float:right;margin:0 0 0 30px;}
| + | |
− | #accordion-1 h2{font-size:2.5em;margin-top:10px}
| + | |
− | #accordion-1 .more{padding-top:10px;display:block}
| + | |
− | | + | |
− | #accordion-2{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8}
| + | |
− | #accordion-2 h2{font-size:2.5em;margin-top:10px;}
| + | |
− | #accordion-2 dl{width:700px;height:195px}
| + | |
− | #accordion-2 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c}
| + | |
− | #accordion-2 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat}
| + | |
− | #accordion-2 dt.hover{color:#68889b;}
| + | |
− | #accordion-2 dt.active.hover{color:#fff}
| + | |
− | #accordion-2 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
| + | |
− | #accordion-2 .slide-number{color:#68889b;left:10px;font-weight:bold}
| + | |
− | #accordion-2 .active .slide-number{color:#fff}
| + | |
− | #accordion-2 a{color:#68889b}
| + | |
− | #accordion-2 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px}
| + | |
− | | + | |
− | #accordion-3{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8}
| + | |
− | #accordion-3 h2{font-size:2.5em;margin-top:10px}
| + | |
− | #accordion-3 dl{width:700px;height:195px}
| + | |
− | #accordion-3 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c}
| + | |
− | #accordion-3 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat}
| + | |
− | #accordion-3 dt.hover{color:#68889b;}
| + | |
− | #accordion-3 dt.active.hover{color:#fff}
| + | |
− | #accordion-3 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
| + | |
− | #accordion-3 .slide-number{color:#68889b;left:13px;font-weight:bold}
| + | |
− | #accordion-3 .active .slide-number{color:#fff}
| + | |
− | #accordion-3 a{color:#68889b}
| + | |
− | #accordion-3 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px}
| + | |
− | | + | |
− | .sample h1 {
| + | |
− | margin-top: 0;
| + | |
− | line-height: 1;
| + | |
− | }
| + | |
− | | + | |
− | .hentry .easy-accordion img {
| + | |
− | background: none;
| + | |
− | border: none;
| + | |
− | -moz-border-radius: 0;
| + | |
− | -webkit-border-radius: 0;
| + | |
− | border-radius: 0;
| + | |
− | padding: 0;
| + | |
− | }
| + | |
− | | + | |
− | .easy-accordion h2 {
| + | |
− | line-height: 1;
| + | |
− | margin-top: 0;
| + | |
− | }
| + | |
− | </pre>
| + | |
− | | + | |
− | == How to get the output of a Header module in a HTML module ==
| + | |
| | | |
| Using a HTML module gives more control than a Header module in situations like [http://ithemes.com/forum/topic/38496-problem-with-header-module/ this]. | | Using a HTML module gives more control than a Header module in situations like [http://ithemes.com/forum/topic/38496-problem-with-header-module/ this]. |
Line 1,566: |
Line 442: |
| </pre> | | </pre> |
| | | |
− | == How to Show Featured Image Below Navigation Module on Static Pages ==
| + | = How to Show Featured Image Below Navigation Module on Static Pages = |
| | | |
| <code>builder_module_render_navigation</code> hook can be used to inject content below and/or above all nav bars in Builder. | | <code>builder_module_render_navigation</code> hook can be used to inject content below and/or above all nav bars in Builder. |
Line 1,612: |
Line 488: |
| Forum topic: http://ithemes.com/forum/topic/40690-featured-image-on-each-page/ | | Forum topic: http://ithemes.com/forum/topic/40690-featured-image-on-each-page/ |
| | | |
− | == How to Fix "Missing required fields" warnings in Structured Data Testing Tool ==
| + | = How to Fix "Missing required fields" warnings in Structured Data Testing Tool = |
| | | |
| [http://www.google.com/webmasters/tools/richsnippets Rich Snippets Testing Tool] can be used to check whether Google can correctly parse your structured data markup and display it in search results. | | [http://www.google.com/webmasters/tools/richsnippets Rich Snippets Testing Tool] can be used to check whether Google can correctly parse your structured data markup and display it in search results. |
Line 1,716: |
Line 592: |
| http://nepallica.com/fix-google-rich-snippets-warning-missing-required-field-wordpress/ | | http://nepallica.com/fix-google-rich-snippets-warning-missing-required-field-wordpress/ |
| | | |
− | == How to Make Entire Text Widgets Clickable ==
| + | = How to Make Entire Text Widgets Clickable = |
| | | |
| [[File:2013-03-31 17-48-29.png|237px|thumb|none]] | | [[File:2013-03-31 17-48-29.png|237px|thumb|none]] |
Line 1,748: |
Line 624: |
| where <code>builder-module-514372ec66190</code> is the ID of widget bar module having the widget. | | where <code>builder-module-514372ec66190</code> is the ID of widget bar module having the widget. |
| | | |
− | == How to Enable Comments For Custom Post Types ==
| + | = How to Enable Comments For Custom Post Types = |
| | | |
| '''1.''' Ensure that support for Comments is enabled in the CPT. | | '''1.''' Ensure that support for Comments is enabled in the CPT. |
Line 1,764: |
Line 640: |
| '''3.''' In the CPT add/edit screen, tick <code>Allow comments</code> in Discussion meta box. If Discussion meta box is not visible, pull down Screen Options at the top right of the page and tick <code>Discussion</code>. | | '''3.''' In the CPT add/edit screen, tick <code>Allow comments</code> in Discussion meta box. If Discussion meta box is not visible, pull down Screen Options at the top right of the page and tick <code>Discussion</code>. |
| | | |
− | == How to Create Mobile Navigation like the new Air Theme ==
| + | = How to Create Mobile Navigation like the new Air Theme = |
| | | |
| There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support. | | There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support. |
This can be done in at least 2 different ways. The primary difference between method 1 and 2 is that in method 2, left margin for first social icon has to be manually adjusted every time a menu item in the nav bar is changed. For this reason, method 1 is recommended.
Create (if you haven't already) a custom menu at Appearance -> Menus, which should appear in the nav bar.
In the above, place the code needed to display your logo (for example) where "HTML code comes here" is present.
In the above, you might want to adjust top, left, background, width and height values.
Edit child theme's index.php and any other needed template files like archive.php that output a list of posts.
With the above change, the top most (latest) post will be shown in full unless more quick tag, is used. If more quick tag is used, "Read More→" will appear at the cut off point.
Add the following code to child theme's functions.php (at the end, but before the closing ?> line, if any):
Output of above Header module can be simulated by using a PHP enabled HTML module having the following code:
In this example, the goal is to show featured image attached to Pages below the nav bar as a header. This way each Page can have its own unique header image.
The fix is to edit these active theme (ideally, should be a child theme of Builder) template files (at the minimum): index.php, archive.php, single.php, page.php and search.php.
If any of these files are not present in the child theme, copy them from parent Builder directory into the child theme's directory and edit them.
Family name and Given names are taken from values entered for Last Name and First Name respectively in author's profile page.
When a text link is placed in a text widget, only the text will be clickable as hyperlinks are inline elements.
How this is done depends on the method being used to set up the CPTs.
Even though the CPT might be shown as selected, it won't actually work until it is unchecked and checked again. Therefore, untick your CPT under Comments, save settings, tick it and again save settings.
There are several steps involved to accomplish this. The solution was tested on a couple of Builder Child themes, but not all, so this may not work for all Child themes. As such, these instructions are provided "as is" and are unsupported. Further customisation is beyond the scope of our theme support.
Select the Mobile navigation Style in the Builder Layout Manager for your Navigation Module.