Footer changes - by Sporbillis - on WordPress WooCommerce support

This topic has 83 replies, 5 voices, and was last updated 7 years, 9 months ago ago by Jack Richardson

  • Avatar: Sporbillis
    Sporbillis
    Participant
    July 5, 2016 at 12:53

    Also some of the code you used broke the footer signup appearance

    Avatar: Eva
    Eva Kemp
    Support staff
    July 5, 2016 at 13:06

    Hello,

    3. I’ve added this code for hover effect:

    .vc_btn3.vc_btn3-size-lg:hover {
        color: black !important;
        background-color: white !important;
        border: 2px solid white !important; 
    }

    Please check now.

    1. I’ve added the code. Check now.

    2. What header are you talking about? All changes should be made in child theme. Have you read this section http://prntscr.com/bp1q7t ?

    3. Issue with subscribe form has been fixed. The reason was you forgot to close }

    Regards,
    Eva Kemp.

    Avatar: Sporbillis
    Sporbillis
    Participant
    July 5, 2016 at 13:09

    3. Thanks

    1. Thanks

    2. So i just create a new folder in the child theme ( anywhere ) called fonts and i put the web fonts in there. In custom.css i just load them and then use them like we are using the code now. correct?

    3. My mistake. Thanks

    Avatar: Sporbillis
    Sporbillis
    Participant
    July 5, 2016 at 15:13

    Another note. The text on row 1 and on row 3 has a lot of white space next to it. Can we fix it ? Row 1 text needs to move more to the right. Row 3 text needs to move more to the left.

    Avatar: Eva
    Eva Kemp
    Support staff
    July 5, 2016 at 17:28

    Hello,

    2. Upload font file to child theme directory and add css code to child style.css as described in the article.

    The text on row 1 and on row 3 has a lot of white space next to it. Can we fix it ?

    Use this code in child style.css file:

    .left-pad {
      padding-right: 0px !important;
    }
    .right-pad {
       padding-left: 0px !important;
    }

    Regards,
    Eva Kemp.

    Avatar: Sporbillis
    Sporbillis
    Participant
    July 5, 2016 at 23:24

    1. So i just upload the font in the child theme directory without any folder?

    2. Will the font be visible to all devices? Or if the computer/mac doesn’t have installed the font it won’t display correctly ?

    3. About the page we are editing the “Our Story ” and “Our Mission” have lots of white space above them on mobile. Can we reduce it only on mobile?

    4. The code you gave me worked but it moved them until the edge of the screen, can we move them a bit inside?

    Avatar: Eva
    Eva Kemp
    Support staff
    July 6, 2016 at 06:44

    Hello,

    1. You can create “fonts” folder in the child theme directory and upload your font file there.

    2. It will be visible.

    3. In previous posts I gave you this code:

    @media (max-width: 480px) {
       .vc_custom_1467711731340 {
          margin-top: -80px !important;
    }
    .vc_custom_1467711691758 {
       margin-top: -130px;
    }}

    Add it in child style.css file.

    4. Edit this code:

    .left-pad {
      padding-right: 0px !important;
    }
    .right-pad {
       padding-left: 0px !important;
    }

    to this:

    .left-pad {
      padding-right: 5px !important;
    }
    .right-pad {
       padding-left: 5px !important;
    }

    Regards,
    Eva Kemp.

    Avatar: Sporbillis
    Sporbillis
    Participant
    July 6, 2016 at 08:39

    1.2.4 Okay thanks

    3. I have already used that code since previous post but it didnt work. The code is applied in the custom.css like the rest but it doesnt work

    Avatar: Sporbillis
    Sporbillis
    Participant
    July 6, 2016 at 09:25

    I followed the article you provided me and i upload the font i wanted ( Lucida Bright ). I added the css code in the child theme and i changed the font-family in the footer of the homepage and it broke everything. I then removed the code from the homepage but the footer is still broken! PLEASE HELP

    *Edited, fixed it, forgot to add the ; in the css. Can you please confirm somehow that on the footer i am using that font ?

    Avatar: Sporbillis
    Sporbillis
    Participant
    July 6, 2016 at 09:44

    I used the font Lucida Bright but i don’t think it’s working because it looks different on 2pcs ( windows ) and different on my iphone. On the iphone is correct.
    ***( i think i fixed it , but please check )

    Also in the our story page on mobile the black row we did “Auto…” The word unparallelled on mobile is cut like this :
    unparallelle
    d Price
    Can we fix it?

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    July 6, 2016 at 13:21

    Hello,

    3. I have already used that code since previous post but it didnt work. The code is applied in the custom.css like the rest but it doesnt work

    I’ve corrected the code. Please check it now.

    I used the font Lucida Bright but i don’t think it’s working because it looks different on 2pcs ( windows ) and different on my iphone. On the iphone is correct.

    Here you can see that your font is loaded in footer http://prntscr.com/bphc0f and in mobile devices the font is the same.

    Also in the our story page on mobile the black row we did “Auto…” The word unparallelled on mobile is cut like this :
    unparallelle
    d Price
    Can we fix it?

    Please pay attention to the property you added in text block editor in Pages > Our Story http://prntscr.com/bphfzb

    Best regards,
    Jack Richardson.

    Avatar: Sporbillis
    Sporbillis
    Participant
    July 6, 2016 at 16:21

    Thanks for everything . I have 2 questions :

    1. How can i make the price under the products in the home page and shop page to appear in the center below the images? Both desktop and mobile.

    2. If i want to customize the product page which file should i customize and how to keep the changes in the child theme in case of update without losing them ?

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    July 7, 2016 at 08:55

    Hello,

    1. Use this css code:

    .slide-item .product .product-name, .products-grid .product .product-name,
    .slide-item .product .add-to-container, .products-grid .product .add-to-container {
       text-align: center;
    }

    2. Please clarify what exactly do you want to edit and do you mean single product page or shop page?
    As for child theme read the documentation here https://codex.wordpress.org/Child_Themes

    Best regards,
    Jack Richardson.

    Avatar: Sporbillis
    Sporbillis
    Participant
    July 7, 2016 at 09:09

    1. Thanks now they are centered.

    2. How can i change the color/font/size of the ADD TO CART button? I want it to look like it looks on the single product page.

    3. I have removed the youtube/twitter icons you added on header / footer and i added the Vimeo icon like you showed me. Although i have some problems:

    3.1 The vimeo icon i can’t change the size of it on the footer, it’s smaller than facebook and instagram, i tried to put more px; to it but it didn’t work. Also the header you made doesn’t show on all pages, only on the homepage. The vimeo icon on the footer only shows on the homepage. Can we fix those?

    4. About the changes i want to make on the SIGNLE PRODUCT PAGE:
    See private to see exactly

    Please, contact administrator
    for this information.
    Avatar: Sporbillis
    Sporbillis
    Participant
    July 7, 2016 at 10:00

    Also you added this code in child theme for the #wrig.. heading to Show as one line on the mobile. It was working fine until today, dont know why.:

    .vc_custom_1466012751520 .title.a-center span {
        font-size: 22px !important;
    }

    Can we do the same for my other heading aswell?

    Add the code in child style.css in the @media (max-width: 480px) section:

    Avatar: Sporbillis
    Sporbillis
    Participant
    July 7, 2016 at 10:42

    Also now the footer is fully broken on all pages. I swear the only thing i changed was the vimeo icon

    Also the menus lost the font i set ! What happened ::S

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    July 7, 2016 at 12:40

    Hello,

    You forgot to close } in child style.css. I’ve edited the code. Please check the “#wrig” section and footer now.

    2. How can i change the color/font/size of the ADD TO CART button? I want it to look like it looks on the single product page.

    Use this code in child style.css file:

    a.button.etheme_add_to_cart_button.product_type_simple {
        color: white;
        background-color: #909090;
        font-size: 21px;
    }

    3.1. As I see icon font size is changed http://prntscr.com/bpwjzq.

    4. Sorry, but our theme doesn’t have such options.

    Best regards,
    Jack Richardson.

    Avatar: Sporbillis
    Sporbillis
    Participant
    July 7, 2016 at 12:49

    1. Thanks

    2. I ll try the code now

    3. It is changed but the icon is still smaller than other other 2 icons.

    3.1 Header we made under menu only displays on homepage. Can we make it display on all pages?

    3.2 Vimeo icon only displays on homepage. Can we make it display on all pages?

    4. The heading #wrig is fixed. Can we do that for my other heading aswell ? “A watc…”

    5. I understand the theme doesn’t support those changes, any way you can help to modify the page a bit? At least the description to make it look more organized.

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    July 7, 2016 at 13:15

    Hello,

    3. Add this code in child style.css file:

    .footer-top .ico-custom-vimeo::before {
       font-size: 22px !important;
    }

    3.1. You need edit each page and add copy the content from home page:
    http://prntscr.com/bpx0nh

    3.2. I’ve added the code in child style.css file:

    .footer-top .ico-custom-vimeo::before {
    	content: "\f27d";
    	font-family: FontAwesome;
    	font-style: normal;
    	font-size: 16px;
    }

    Check the icon in footer now.

    4. I’ve edited the css code:

    .vc_custom_1467810434845 .title.a-center span {
        font-size: 22px !important;
    }

    and changed it to

    .vc_custom_1467810434845 .title.a-center span, .vc_custom_1462619350298 .title span {
        font-size: 22px !important;
    }

    Check “A watc…” title now.

    5. As I see description is shown properly http://prntscr.com/bpx3n6. What exactly do you want to customize?

    Best regards,
    Jack Richardson.

    Avatar: Sporbillis
    Sporbillis
    Participant
    July 7, 2016 at 13:33

    3. Thanks

    3.1 How do i copy and paste on all pages? Isn’t there any easier and faster way?

    3.2 Thanks

    4. Thanks

    5. Well their description shows more clean and more refined than our description. Also i like they have 2 titles on their products. Can i do that at least somehow?

    6. Also any way we can change the fonts of the Product titles in the single product page / homepage / shop page? Can i also change the font of the product description in the signle product page?

  • 1 2 3 4 5
    Viewing 60 results - 41 through 60 (of 83 total)

You must be logged in to reply to this topic.Log in/Sign up

Helpful Topics

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.