Home › Forums › Basel support forum › Instagram: Remove Tiny Arrows and Add 'Load More' button

Instagram: Remove Tiny Arrows and Add 'Load More' button

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 3, 2019 at 4:17 pm #116766

    ochow7
    Participant

    Hello,

    We have 2 questions for our instagram widget.

    (1) It added tiny arrows to each photo. How can we get rid of them?

    (2) How can we add a load more button, so it shows more photos on a grid layout when clicked?

    I appreciate your help.

    April 4, 2019 at 6:49 am #116851

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    body .instagram-widget .instagram-pics li:hover>.wrapp-pics>.hover-mask:after {
display:none;
}

    There is no option to add a “Load more” button.

    Best Regards

    April 4, 2019 at 3:14 pm #116984

    ochow7
    Participant

    (1) The code that you provided didn’t work. The arrows that I’m referencing are not a hover effect. If you look at the page, it’s consistently there. Can you take another look please?

    (2) Side question. On our shop page – the title, price and buttons underneath the picture were not centered aligned. We found the following code via this support thread: https://xtemos.com/forums/topic/product-images-allignment/ and inputted it. It center aligned everything except for the price. Can you modify the code so that price get’s aligned as well?

    body .basel-hover-alt .product-title {
    text-align: center;
}
body .basel-hover-alt .wrap-price{
text-align:center;
}
body .basel-hover-alt.purchasable .wrapp-swap{
	margin: 0 auto;
}
    April 4, 2019 at 7:10 pm #117053

    Elise Noromit
    Member

    Hello,

    Please provide the screen which arrows to remove.

    Also provide the screen of the result and show what you want to move and where

    Best Regards

    April 4, 2019 at 8:15 pm #117066

    ochow7
    Participant

    I’m re-attaching the links in the private content below.

    Also, let me know your thoughts about the code I provided above – I need help revising it so that the price underneath each item, can be centered on the shop page.

    April 5, 2019 at 7:26 am #117141

    Elise Noromit
    Member

    Hello,

    Please provide your site admin access so that I could check the element.

    Best Regards

    April 8, 2019 at 7:01 pm #117712

    ochow7
    Participant

    Hello – the login credentials are below.

    Please let me know your thoughts on:

    (1) removing the little arrows on the IG widget
    (2) center aligning the ‘price’ with the rest of the ‘title’ & ‘buttons’

    I appreciate your help. Thanks.

    April 9, 2019 at 6:48 am #117765

    Elise Noromit
    Member

    Hello,

    You are applying HTML block in the extra content http://prntscr.com/n9f0rs I am checking this blog and see the shortcodes to the others blocks http://prntscr.com/n9exhl It is not correct.

    You need to insert the Instagram element directly. If you do not want to create and configure the element each time save the row as a template and insert wherever you need.

    The price has been centered.

    Best Regards

    April 9, 2019 at 6:48 pm #117912

    ochow7
    Participant

    Hello, the code you provided for the price, allowed the price to be centered on the shop pages, but it also moved it on the individual product pages. You can see it centered in the middle now on the product page (link below in private section). I want to move it back to it’s regular position.

    Can we edit this code you provided to help fix this please?

    body .wrapp-swap .price,
.single-product-content .basel-scroll-content > p.price {
	 text-align: center;
}
    April 9, 2019 at 7:27 pm #117925

    Elise Noromit
    Member

    Hello,

    Please remove replace the code with this one: 

    body .wrapp-swap .price {
	 text-align: center;
}

    Best Regards

    April 10, 2019 at 3:08 am #117951

    ochow7
    Participant

    thank you. please close the ticket

  • Author
    Posts

Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Instagram: Remove Tiny Arrows and Add 'Load More' button’ is closed to new replies.