Forum Replies Created
-
Posts
-
If you look at Victor's original code - you missed the 'first' on the very first div
<div class="one-third first">It's located in - /wp-content/themes/corporate-pro/style.css
styles.css - Line 3975
current color -
div.gs-faq .gs-faq__question:hover, div.gs-faq .gs-faq__question:focus { color: #009cff; }Change to whatever color you want for hover -
div.gs-faq .gs-faq__question:hover, div.gs-faq .gs-faq__question:focus { color: #ffffff; }Try this -
<?php /** * Template Name: Userwaterfallreview Custom Post Type * Description: This file governs the template for the Userwaterfallreview Custom Post type. It's motivated by me taking over from Luka who didn't do anything yet tried to take money from me. * Author: Johnny T Cheng * */ // Forcing a specific layout for this template - overrides genesis theme settings add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' ); // Enqueue Template Styles add_action( 'wp_enqueue_scripts', 'wow_userwaterfallreview_enqueue_styles' ); function wow_userwaterfallreview_enqueue_styles() { wp_register_style( 'wow_userwaterfallreview_css', get_stylesheet_directory_uri() . '/css/userwaterfallreview.css', __FILE__ ); wp_enqueue_style( 'wow_userwaterfallreview_css' ); } // Filtering the Post Info add_filter( 'genesis_post_info', 'wow_post_info' ); function wow_post_info( $post_info ) { $post_info = ' submitted ' . __( 'by', 'genesis' ) . ' [post_author_posts_link]' . ' on [post_date]'; printf( '<p class="entry-meta-uwr">%s</p>', do_shortcode( $post_info) ); // return $post_info; } // Remove undesired widgets below if enabled for single posts by performing remove_action as needed remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' ); //No need to remove the loop or the content. We just add our ACF fields with a hook instead // Adds our ACF repeater fields for images add_action( 'genesis_entry_content', 'add_acf_images', 1 ); // either change the hook 'genesis_entry_content' and remove the priority or just change the priority to '15' to suit function add_acf_images() { if ( have_rows( 'photos' ) ): // ACF repeater field named photos - set to return array of subfields $featured_photo = get_field( 'featured_photo' ); ?> <div id="acf-featured-photo"> <img src="<?php echo $featured_photo; ?>" alt=""> </div> <div id="acf-photos-list"> <?php while( have_rows( 'photos' ) ): the_row(); // var $image_url = get_sub_field( 'photo' ); // ACF 'text' subfield named 'photo' $image_caption = get_sub_field( 'caption' ); // ACF 'text' subfield named 'caption' ?> <!-- Output set for fancybox lightbox --> <a href="<?php echo $image_url; ?>" data-fancybox="" data-caption="<?php echo $image_caption; ?>"> <img src="<?php echo $image_url; ?>" width="160" alt="<?php echo $image_caption; ?>"> </a> </div> <!--.acf-photos-list--><!-- MOVED THIS BEBFORE THE ENDWHILE --> <?php endwhile; endif; ?> <?php } // Display USP Pro Uploaded Images add_action( 'genesis_entry_content', 'add_usp_pro_images', 2 ); function add_usp_pro_images( $acf_featured_photo_exists ) { $usp_featured_photo = usp_get_meta(false, 'usp-file-1'); if( !(empty($usp_featured_photo) ) ) { ?> <div id="usp-pro-featured-photo"> <img src="<?php echo $usp_featured_photo; ?>" alt=""> </div> <div id="usp-pro-photos-list"> <?php for( $idx = 1; $idx <= 5; $idx++ ) { //note I set 5 photo limit $usp_file = 'usp-file-' . $idx; $usp_caption = 'usp-caption-' . $idx; $usp_alt = 'usp-alt-' . $idx; $image_url = usp_get_meta(false, $usp_file); $image_caption = usp_get_meta(false, $usp_caption); $image_alt = usp_get_meta(false, $usp_alt); if( !(empty($image_url) ) ) { ?> <!-- Output set for fancybox lightbox --> <a href="<?php echo $image_url; ?>" data-fancybox="" data-caption="<?php echo $image_caption; ?>"> <img src="<?php echo $image_url; ?>" width="160" alt="<?php echo $image_alt; ?>"> </a> <?php } } ?> </div> <?php } } // Adds our ACF repeater fields for videos add_action( 'genesis_entry_content', 'add_acf_videos', 15 ); // either change the hook 'genesis_entry_content' and remove the priority or just change the priority to '15' to suit function add_acf_videos() { if ( have_rows( 'videos' ) ): // ACF repeater field named videos - set to return array of subfields ?> <div id="acf-video-list"> <?php while( have_rows( 'videos' ) ): the_row(); // var $video_embed = get_sub_field( 'video_embed' ); // ACF 'oEmbed' subfield named 'video_embed' $video_caption = get_sub_field( 'video_caption' ); // ACF 'text' subfield named 'video_caption' ?> <!-- Output set for straight video embeds with caption below --> <div class="video-embed"> <?php echo $video_embed; ?> </div> <div class="video-caption"> <?php echo $video_caption; ?> </div> </div> <!--.acf-photos-list--><!-- MOVED THIS BEBFORE THE ENDWHILE --> <?php endwhile; endif; ?> <?php } genesis(); ?>The misplaced sidebar link doesn't seem to have the videos , but i can tell you the .site-inner is closing off to early.
The video page link doesn't contain the responsive CSS i gave you , therefore they are not responsive.
I can't help with the USP pro plugin element that's causing the issue , it's not genesis related and you're also using Visual Composer. Too much in the mix to help any further.
You need to put it all together , images , videos and USP pro stuff, and not split it off supplying multiple links to look at , build it the way it needs to be in the final build and trouble shoot that.
On Line 1194 of style.css in the child theme news-pro
/* Primary Navigation */ .nav-primary { border-bottom: 0px solid #0093cd; text-decoration: underline; }Change it to -
/* Primary Navigation */ .nav-primary { border-bottom: 0px solid #0093cd; text-decoration: none; }text-decoration:underline is creating those lines.
Opps .. another edit
Change the ouput to section to this -
<div class="video-embed"> <?php echo $video_embed; ?> </div> <div class="video-caption"> <?php echo $video_caption; ?> </div>This forum post edit isnt available for long enough
With a straight embed with ACF you don't need the
<video><source>tags in that , unless some reason you really need them.This will display them one after the other responsively (mobile) if you include the CSS I've given you.
Video code for ACF
<?php function add_acf_videos() { if( have_rows('videos') ): // ACF repeater field named Videos - set to return Video Array ?> <div id="acf-video-list"> <?php while( have_rows('videos') ): the_row(); // vars $video_embed = get_sub_field('video_embed'); // ACF 'oEmbed' sub field named 'video_embed' $video_caption = get_sub_field('video_caption'); // ACF 'Text' sub field named 'Video Caption' ?> <!-- Output set for straight video embeds with caption below --> <div class="video-embed"> <?php echo $video_embed; ?> <p><?php echo $video_caption; ?></p> </div> <?php endwhile; endif; ?> </div> <?php }CSS for responsive video and getting started
/* main video container div*/ .video-embed { margin-top: 20px; } /*For responsive video embed*/ .video-embed { position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: auto; } .video-embed iframe, .video-embed object, .video-embed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* video caption div*/ .video-caption { background: rgba(0,0,0,0.6); color: #fff; padding: 8px; }more info -
https://www.advancedcustomfields.com/resources/oembed/
Obviously you'll have to work this into that template , hooked where you want it , i haven't included that , just edited your code.
Ok , that's 3 million beers you owe me ! LOL
Ok , that's great. Not sure what Pinit hover you mean ?
Also , try removing the
<ul>and<li>from the ACF code on the template , I think you'll find your images will fall into place better. They were only added as an example to play with.Further edit to the template file -
this -
// Adds our acf repeater fields add_action('genesis_after_entry','add_acf_images' ); // either change the hook 'genesis_entry_content' and remove the priority or just change the priority '15' to suitshould be this -
// Adds our acf repeater fields add_action('genesis_entry_content','add_acf_images' ,15 ); // either change the hook 'genesis_entry_content' and remove the priority or just change the priority '15' to suitIf someone could delete the earlier half baked reply #224045 that messed up , be appreciated
Ok , I doubt anyone can help with the USP Pro Plugin aspect of this , I pesonally have no experirence with it. Also , I can't be of help with the importing process.
I can show you a template example for the custom post type that you have. We don't need to remove the content as you have in the template code you've posted , we can simply use hooks to place the ACF fields output where we want (or any other content). The actual review content will come from the post editor as normal. I also don't know how you've created the actual custom post type itself or what supports you've added , but i'll include a working example for creating that also.
Regards the ACF fields , the output you posted in the template is obviously non functioning as i can see. I also assume you're using Fancybox Lightbox on these images, so i've included that in the ACF output code. It assumes a repeater field is created with 2 sub fields - review_images and image_caption. Set that to return 'Image Array' and show on it this custom post type.
You'll have to check the field names to match yours or re-create them as shown , the field names are examples. The images are wrapped in a
< ul >class with< li >'s , the actual display layout and image size will have to be sorted by you but I've included an inline 'width' declaration as you'll see in the code (i'm not keen on that , but it'll get you started in displaying something). As it is they will display one after the other list style and after the content using a priority. Some code notes are added to help you. If you wanted to display it before the content using just the priority , then just change the '15' to '5' and it will move above the content. Alternatively just change the hook completely to something else - 'genesis_after_entry' for example and remove the priority as required.Visual Hooks guide here -
https://genesistutorials.com/visual-hook-guide/
Register the custom sidebar - Place this in functions.php of your child theme
// Register new sidebar for the Userwaterfallreview Custom Post type genesis_register_sidebar( array( 'id' => 'userwaterfallreview-sidebar', 'name' => __( 'Sidebar for Userwaterfallreviews', 'genesis' ), 'description' => __( 'Sidebar for Userwaterfallreview Custom Post Type', 'genesis-wow-child' ), 'before_widget' => '<aside id="%1$s" class="widget userwaterfallreview-sidebar %2$s">', 'after_widget' => '</aside>', ) ); add_action('get_header','add_userwaterfallreviews_sidebar'); function add_userwaterfallreviews_sidebar() { if ( is_singular('userwaterfallreview')) { // show only on single posts for a CPT with a registered name of userwaterfallreview remove_action( 'genesis_sidebar', 'genesis_do_sidebar' ); // remove the default genesis sidebar add_action( 'genesis_sidebar', 'waterfallreview_do_sidebar' ); // add action hook to call the function below to output the custom sidebar } } // Output the userwaterfallreview custom sidebar function waterfallreview_do_sidebar() { dynamic_sidebar( 'userwaterfallreview-sidebar' ); // ID of the registered custom sidebar }The Template file to be placed in the child theme root dir - save this as - single-userwaterfallreview.php
<?php /** * Template Name: single-userwaterfallreview.php * Description: This is the Single Post Template file for the Userwaterfallreview Custom Post type. * Author: Johnny T Cheng * */ //Forcing a specific layout for this template - overrides genesis theme settings add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' ); //Filtering the Post Info add_filter('genesis_post_info', 'wow_post_info'); function wow_post_info($post_info) { $post_info = 'Submitted ' . __( 'by', 'genesis' ) . ' [post_author_posts_link]' . ' on [post_date]'; return $post_info; } // Remove stuff below - for example - if breadcrumbs are enabled for single posts , we can remove them on this template only // Add other remove actions to this list as needed remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' ); /* -----------------------------------------------------------*/ /* -----------------------------------------------------------*/ /* We dont need to remove the loop or the content */ /* We just add our ACF fields with a hook instead */ /* -----------------------------------------------------------*/ /* -----------------------------------------------------------*/ // Adds our acf repeater fields add_action('genesis_after_entry','add_acf_images' ); // either change the hook 'genesis_entry_content' and remove the priority or just change the priority '15' to suit function add_acf_images() { if( have_rows('photos') ): // ACF repeater field named Photos - set to return Image Array ?> <ul> <?php while( have_rows('photos') ): the_row(); // vars $image = get_sub_field('review_images'); // ACF 'Image' sub field named 'Review Images' $image_caption = get_sub_field('image_caption'); // ACF 'Text' sub field named 'Image Caption' ?> <!-- Output set for for fancy box lightbox --> <li> <a href="<?php echo $image['url']; ?>" data-fancybox data-caption="<?php echo $image_caption; ?>"> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" width="460"/> </a> </li> <?php endwhile; endif; ?> </ul> <?php } genesis();EXTRA if you want it - Register the custom post type with supports - save this file as - userwaterfallreview.php and ZIP it , install via plugins and activate.
<?php /** * Plugin Name: User Waterfall Reviews Custom Post Type * Plugin URI: http://www.worldofwaterfalls.com * Description: A simple plugin that adds a custom post type for Waterfall Reviews * Version: 0.1 * Author: Johnny T Cheng * Author URI: http://www.worldofwaterfalls.com */ function wow_userwaterfallreview_posttypes() { $labels = array( 'name' => 'Water fall reviews', 'singular_name' => 'Water fall review', 'menu_name' => 'Water fall reviews', 'name_admin_bar' => 'Water fall review', 'add_new' => 'Add Water fall review', 'add_new_item' => 'Add Water fall review', 'new_item' => 'New Water fall review', 'edit_item' => 'Edit Water fall review', 'view_item' => 'View Water fall review', 'all_items' => 'All Water fall reviews', 'search_items' => 'Search Water fall reviews', 'parent_item_colon' => 'Parent Water fall reviews:', 'not_found' => 'No Water fall reviews found.', 'not_found_in_trash' => 'No Water fall reviews found in Trash.', ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => array( 'slug' => 'userwaterfallreview' ), 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => 20, 'menu_icon' => 'dashicons-format-status', 'supports' => array( 'title', 'editor', 'author','excerpt', 'thumbnail', 'page-attributes', 'genesis-seo', 'genesis-cpt-archives-settings') ); register_post_type( 'userwaterfallreview', $args ); } add_action( 'init', 'wow_userwaterfallreview_posttypes' );By default the single post for this CPT will already have a unique CSS body class - in this case - single-userwaterfallreview
That can be used to target anything on this page exclusively , nothing else on the site will be affected. Some examples below -/*Some CSS examples Targets the whole page on this CPT only*/ .single-userwaterfallreview { background:green; } /*Targets single post elements on this CPT only - in this case the <u> and <li> are shown as examples */ .userwaterfallreview ul { margin-bottom:0; margin-left:0; } .userwaterfallreview ul li { list-style:none; } /*Targets the whole sidebar on this CPT single posts*/ .single-userwaterfallreview .sidebar { background:red; padding:20px } /*Targets all widgets in the sidebar on this CPT single post*/ .widget.userwaterfallreview-sidebar{ background:blue; padding:20px }Ok , I doubt anyone can help with the USP Pro Plugin aspect of this , I pesonally have no experirence with it. Also , I can't be of help with the importing process.
I can show you a template example for the custom post type that you have. We don't need to remove the content as you have in the template code you've posted , we can simply use hooks to place the ACF fields output where we want (or any other content). The actual review content will come from the post editor as normal. I also don't know how you've created the actual custom post type itself or what supports you've added , but i'll include a working example for creating that also.
Regards the ACF fields , the output you posted in the template is obviously non functioning as i can see. I also assume you're using Fancybox Lightbox on these images, so i've included that in the ACF output code. It assumes a repeater field is created with 2 sub fields - review_images and image_caption. Set that to return 'Image Array' and show on it this custom post type.
You'll have to check the field names to match yours or re-create them as shown , the field names are examples. The images are wrapped in a
- class with
- 's , the actual display layout and image size will have to be sorted by you but I've included an inline 'width' declaration as you'll see in the code (i'm not keen on that , but it'll get you started in displaying something). As it is they will display one after the other list style and after the content using a priority. Some code notes are added to help you. If you wanted to display it before the content using just the priority , then just change the '15' to '5' and it will move above the content. Alternatively just change the hook completely to something else - 'genesis_after_entry' for example and remove the priority as required.
Visual Hooks guide here -
I don't think you need a template for this or need to enqueue a separate stylesheet. On the page you linked i'm only seeing the Primary sidebar.
It might be best to go back to basics and fully explain what you want to achieve here as it might be a case of sledgehammer and nut , It's probably way simpler than you think.
I think I’d start with the mobile view first and work my way up to desktop and hide what’s not required.
It displays after single posts , it won't appear on pages or Archives. Check a single post and you'll see it there.
There are 2 <br> tags added to the code in the text widget - shown below marked in BOLD. When these are removed it lines up perfectly. It's also wrapped in a <p> tag , the other site isn't.
<p><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br>
<!-- Linux Header 728x90 --><br>
<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px;" data-ad-client="ca-pub-4740755494478709" data-ad-slot="1784897457" data-adsbygoogle-status="done"><ins id="aswift_0_expand" style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent;">Enter the URL of your site here -
https://developers.facebook.com/tools/debug/
Check the output , try a refresh.
Also check -
https://developers.facebook.com/docs/sharing/best-practices/
Try changing this CSS entry -
@media (min-width: 896px) .single .content, .contact-page .content { width: 768px; }To this -
@media (min-width: 896px) .single .content, .contact-page .content { width: 100%; }Nothing wrong with doing it that way , but you could add some css to save adding that every time. The thing to check when your adding css and not seeing the changes is the browser cache or even a cache plugin. They will have you running in circles and wasting so much time thinking you've got it wrong. Try clearing your browser cache after adding css and see if the changes show up. Don't use a cache plugin if your developing a site until it's ready to go live. Chrome DEV tools , when open , can disable the cache in settings.
You could try this after removing the inline styles. This will apply to all text widgets used in front-page-5
.front-page-5 .textwidget { text-align: center; }It's not an icon as in a Fontawesome or Dashicons icon , it's a decimal (dec) or hexadecimal character.
This is the character code to show that as shown in the theme demo -
I've put spaces in-between each character to stop this being translated -<button class="show-video"> & # 9 6 5 8 ;</button>More info -
https://www.w3schools.com/charsets/ref_utf_geometric.aspCSS thats generating everything else -
.front-page-4 .show-video { height: 3em; width: 3em; border-radius: 3em; border: 3px solid #ffffff; margin: 0 auto 1em; padding: 0; color: #ffffff; background-color: transparent; font-size: 24px; font-size: 2.4rem; -webkit-transition: all 0.75s cubic-bezier(0, 1, 0.5, 1); transition: all 0.75s cubic-bezier(0, 1, 0.5, 1); } .front-page-4 .show-video:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } - 's , the actual display layout and image size will have to be sorted by you but I've included an inline 'width' declaration as you'll see in the code (i'm not keen on that , but it'll get you started in displaying something). As it is they will display one after the other list style and after the content using a priority. Some code notes are added to help you. If you wanted to display it before the content using just the priority , then just change the '15' to '5' and it will move above the content. Alternatively just change the hook completely to something else - 'genesis_after_entry' for example and remove the priority as required.