[Resolved] Any ninja able to replicate the left sidebars found here: https://bit.ly/3eGq8f5

Home Forums Support Any ninja able to replicate the left sidebars found here: https://bit.ly/3eGq8f5

  • This topic has 8 replies, 2 voices, and was last updated 6 months ago by David.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1246106
    Tom

    Hello,
    I’m getting a site up w/ GP Premium and I am trying to replicate the 3 left sidebar widgets found at https://bit.ly/3eGq8f5 – specifically 1) Vaccum Types (appears to be a table/stack of buttons) which then changes on a resize to buttons at the top of the page, 2) Reviews – logo w/ review text carousel that jumps to the bottom of the content body on resize, 3) Trusted and Secure – tagline and two trust logos/images which positions after #2 on resize. Is this possible and anyone interested/willing to help? I’d pay for the work of course. Thanks in advance.

    #1246285
    David
    Staff
    Customer Support

    Hi there,

    Shouldn’t be too difficult to accomplish.
    Do you have a site setup with a left sidebar with the Category / Nav widget in place ?
    By default the Sidebar will stack below the content on Mobile. It will just need some CSS to hide the Category / Nav widget on mobile.

    Are you using the Secondary Navigation for anything ? If not we can repurpose that for the Mobile row of buttons.

    Let me know

    #1246473
    Tom

    Yessir, the site is here: https://bit.ly/2ysBUsM .

    Not currently using the secondary navigation. Happy to try anything to tell me to do.

    Also, what about how the Vacuum Types changes to bubbles/buttons on mobile? And how that Reviews widget has a carousel/slider? Any idea what to do there?

    Thanks!

    #1246525
    David
    Staff
    Customer Support

    1. This CSS to remove the Categories widget from Sidebar on mobile:

    @media (max-width: 768px) {
        #left-sidebar .widget_categories {
            display: none;
        }
    }

    2. Create a Category Navigation above the Content ( we can do this without using the Secondary Nav).

    2.1 Create a new Hook Element:
    https://docs.generatepress.com/article/hooks-element-overview/

    2.2 Add this to the Hook Content:

    <?php
    $cat_args = array(
    	'orderby'    => 'name',
    	'order'      => 'asc',
    	'hide_empty' => true,
    );
     
    $post_categories = get_terms( 'category', $cat_args );
     
    if ( ! empty( $post_categories ) ) {
        echo '<div class="post-cat-nav-container hide-on-desktop">
        <span class="post-nav-title">Categories</span>
    	<ul class="post-cat-nav">';
    		foreach ( $post_categories as $key => $category ) {
    			printf( 
    				'<li>
    					<a href="%1$s">
    						%2$s
    					</a>
    				</li>',
    				get_term_link( $category ),
    				$category->name
    			);
    		}
    	echo '</ul>
    	</div>';
    }
    ?>

    2.3 Select before_main_content from the hook_list
    2.4 Check execute PHP
    2.5 Set your Display Rules to where you want it displayed eg, Entire Site
    2.6 Now add this CSS to your site:

    .post-cat-nav {
        list-style: none;
        margin: 0;
        padding: 10px 0;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        align-items: center;
    }
    
    .post-cat-nav li {
        flex: 0 0 auto;
        margin-right: 0.5em;
    }
    
    .post-cat-nav li a {
        font-size: 15px;
        padding: 5px 12px;
        border: 1px solid;
        border-radius: 25px;
    }
    
    .post-cat-nav-container {
        text-align: center;
        padding-left: 30px;
        padding-right: 30px;
    }
    

    The Carousel Elements will require a Carousel / Slider plugin

    #1246803
    Tom

    Awesome – thank you!

    – For the categories widget, can you point me in the right direction on how to style it similar to how they have it? They have it where it looks like a table (borders), plus background colors change on hover/active?

    – For the mobile category nav, I tried what you recommended and it’s working! Thank you. How can I have the ‘Categories’ text on top and center over those categories buttons?

    – Any recommendations for a slider/carousel plugin that works in a sidebar widget?

    -Lastly, where can I send you at least a tip?

    #1246846
    David
    Staff
    Customer Support

    1. Try this CSS:

    /* remove padding and add border */
    #left-sidebar .widget_categories {
        padding: 0;
        border: 1px solid #ccc;
    }
    
    /* Center title and add background color */
    
    .sidebar .widget_categories .widget-title {
        text-align: center;
        margin-bottom: 0;
        background-color: #f5f5f5;
    }
    
    /*  Add Padding and Borders to title and links */
    .sidebar .widget_categories .widget-title, .sidebar .widget_categories a {
        padding: 15px 20px;
        border-bottom: 1px solid #ccc;
        display: block;
    }
    
    /* Set background of current category */
    .sidebar .widget_categories li.current-cat a {
        background-color: #f5f5f5;
    }

    2. I edited the Hook Content Code and CSS above to add a centred title and give the container some padding.

    3. Hmmm – not sure on that one – not a big slider fan.
    Meta Slider is free and pretty versatile and theres the Smart Slider 3 which a lot of people like. Not sure how they behave in a sidebar though.

    4. Thats very kind – we accept Coffee Donations here:

    https://generatepress.com/ongoing-development/

    #1246994
    Tom

    Beautiful – thank you!

    Your coffee has arrived!

    #1247124
    Tom

    🙂

    #1247193
    David
    Staff
    Customer Support

    Wow – thats really kind of you.
    Glad to be of help.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.