Okay
  Public Ticket #2722814
Book Demo Homepage
Closed

Comments

  •  3
    MillenniumFilmJournal started the conversation

    Hi,

    I am trying to recreate a few things from your bookstore demo.

    1. In your homepage you show a "Selected Book" with the price and description but none of the tabs at the bottom. I want to show the same thing with one of our magazines. How do I do that? When I use the Woocommerce product page widget it shows the whole page. 

    2. You also show recent books with three tabs "best selling, latest, and sale." How can I make that section as well?

    3. For your event section, you have a color background but the post containers are white. How do I make that?

    See pictures. 

    4. I want to make the map, calendar and time icons from your events pages, (https://demo.kaliumtheme.com/bookstore/events/forever-young-adult-discusses-new-published-books)  However I am having 3 problems. The icons look weird when I hover over them, not like your page where it just has a white circle around them when you hover over them. 

    Second, how do you create the map link so it has the current location of the user and the destination you want? 

    And third, how do you make it so that your images alight with the widgets below? do you stretch the content? (https://millenniumfilmjournal.com/portfolio/mfj-70-body-memory-afa-screening/)

    Thanks for your help. I tried downloading the posts and pages only from your bookstore demo to see how you had made it but they did not download. 

  • [deleted] replied

    Hi MillenniumFilmJournal,

    1— We have added this CSS code:

    .home .single-product .share-product-container, .home .wpb_wrapper .woocommerce .products.related, .home .single-product .woocommerce-tabs {
        display: none;
    }

    to hide other information from the homepage.

    See video: https://d.pr/v/cnvmxG

    2— We have used Tabs in that area. See video: https://d.pr/v/XGzt7F

    3— We have used Portfolio Items element there. See video: https://d.pr/v/YPDoOo

    and we also added some CSS codes to make the portfolio projects (in this case Events) more different than default theme style.

    4— We have used CSS there. See video: https://d.pr/v/ltoEQ3. You can find the code snippets on the CSS that I will send to you below.

    4b— We have used the Google Maps element. See video: https://d.pr/v/ryJ5Zc

    4c— The image is large enough and we have added full so it will take the full-size. See video: https://d.pr/v/vAiwV4

    P.S: In case you need the extra CSS codes that we use, here they are (https://d.pr/n/tDMFbr+), a lot of them are commented too.

    Have a great day!

  •  3
    MillenniumFilmJournal replied

    Hi Ylli,

    Thanks for your help! A few things didn't work:

    1.Awesome!

    2. Thanks! However the Woocommerce widgets are cropping the images and I can't see where to change the default size of the images. Is there a way to solve this?

    3. I have created the portfolio items element and added the events CSS however the date does not appear, even though I added the date css. The category appears which I want to hide. And I can't seem to add the bottom padding like in your demo. (https://millenniumfilmjournal.com/wp-admin/post.php?post=3359&action=edit) (https://millenniumfilmjournal.com/)

    4a. Almost! My maps icon has a link. When I hover over it it still shows a line which does not appear in your demo. (https://millenniumfilmjournal.com/wp-admin/post.php?post=5272&action=edit) (https://millenniumfilmjournal.com/events/mfj-70-body-memory-afa-screening/)

    4b. I did not mean the maps element, but the map icon. When you click on your map icon, googlemaps opens up and inputs the user's current location with directions to the location. When I try to recreate this link it does not let me input the user's current location. 

    see images.

    4c. How big does the image have to be so it stretches to the row content? I am using an image that is 2459px x 1630px. 

    PS: Thanks for the codes!!! But is there a reason I cannot download the post, pages, portfolio from your book demo without importing the child theme, theme options, typography, slider and widgets? I've tried several times but nothing downloads.

  • [deleted] replied

    Hi MFJ,

    2— You can change their sizes in this area: Appearance > Customize > WooCommerce > Product Images.

    3— Please see this video: https://d.pr/v/hsInQO

    4a— Please add the code below to your Custom CSS area:

    .vc_icon_element-inner a:after {
        background-color: transparent;
    }

    4b— That has nothing to do with a theme, this is managed from Google Maps.

    We have used this link for example:

    https://www.google.com/maps?saddr=Current+Location&daddr=40.733280,-73.990940

    Read more: Google Maps URL for directions from current location.

    4c— I found out that the problem was caused by the Jetpack plugin, once I disabled the plugin the image went full-width. It seems that an option of the Jetpack is causing that.

    See video: https://d.pr/v/A36Yju

    5— You can import them and then re-activate your current Theme, basically, the Child theme of Bookstore contains Theme Options of that demo and also contains the extra CSS codes in the style.css area that we added for that demo.

    If you want to perform that action please backup your site and database first because it can mix-up your content now that you already added content on your website.

    Have a nice weekend!

  •  3
    MillenniumFilmJournal replied

    Hi Ylli,

    Thank you for all this!!! I already tried reactivating the theme with the book options a couple of times, nothing happened and I don't think I want to bother trying again so that will remain a mystery. You solved everything except one thing:

    3. I now have the dates under the portfolio items however the padding still seems off as it cuts off right below the date. How could I add some extra space like in yours?

  • [deleted] replied

    Hi MFJ,

    Happy to hear your kind wordssmile.png

    As for your last question:

    Please add the code below to your Custom CSS area:

    .portfolio-holder.portfolio-type-1 .portfolio-item .info {
        padding: 20px 30px !important;
    }
    
    Have a nice day!

  •  3
    MillenniumFilmJournal replied

    Hi Ylli,

    It worked! Amazing thank you!!

  • [deleted] replied

    Happy to hear thatsmile.png

    I wish you all the best!

    P.S: If you like the theme, it would help us a lot if you could give us a five-star rating on Themeforest from your Downloads tab.

    A huge thank you from me and Laborator in advance.