Home Forums WC Vendors Pro Support Understanding Header & Profile Images

NOTICE: We've Moved to a Ticket System for Support

As of August 31, 2017 (12am EST) our support forums will be retired (read-only), and we will be moving to a support ticket system.  This will allow us to better organize and answer support requests, and provide a more personalized experience as we assist our customers.

For the time being, we will leave our forums open for reading and learning while we work on creating a more robust Knowledge Base for everyone to use.

If you are a WC Vendors Pro customer please open a support ticket here. 

If you are a WC Vendors user please open a support ticket on the Wordpress.org forums.

The information on this forum is outdated and in most instances no longer relevant. Please be sure to check our documentation for the most up to date information.

https://docs.wcvendors.com/

Thank you to all of our customers!

 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #50733
    Jeffrey
    Participant

    Hey guys,

    Do you have a good tutorial on understanding how to properly set up the Store Images (header, profile, etc.)

    Mine looks pretty bad (see attached).

    Thanks!

    #50771
    Anna
    Member

    Hello,
    What would you like it to look like? You can alter the css some..

    #50781
    Jeffrey
    Participant

    Hey @Anna

    The biggest issue is the white box from the profile photo nearly covers the entire cover photo behind it. Kinda defeats the point of having the cover photo.

    Shouldn’t the profile photo be more of a thumbnail size?

    Thanks!

    #50790
    Anna
    Member

    Hello,
    Well these can all be styled a bit to reflect each site. We include just standard styling for the store banner image and the store icon.

    To control the banner image inner element, which is the semi-transparent overlay… use this element:
    .wcv-header-container #inner-element

    Here are the defaults for that element:

    .wcv-header-container #inner-element {
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        background: rgba(255,255,255,.9);
        max-width: 80%;
        height: 100%;
        padding: 15px 10px;
    }

    If you want to change the opacity so it is more transparent, Then adjust the background to be .75 instead of .9 . If you want the inner element to only cover 50% of the banner instead of 100%, adjust it to 50%.
    Like this:

    .wcv-header-container #inner-element {
    background: rgba(255,255,255,.75);
    height: 50%;
    }

    For the icon, the element is:
    .wcv-header-container #inner-element .store-icon

    To change it to be smaller, (default is 150 height and 150 width), try a smaller number for height and width:

    .wcv-header-container #inner-element .store-icon {
    width: 100px;
    height: 100px;
    }

    any of these changes should be put in your child theme style.css file.

    #51332
    IGNACIO
    Participant

    Good afternoon, I have followed all the steps that you comment and it is not effective. I copied in style.css from my theme and it does not change anything. I want to remove the title and the white background from the header.

    #51344
    Anna
    Member

    Well– I am not sure what is not working and why.
    The inner banner (white) css element is:
    .wcv-header-container #inner-element

    So if you put:

    .wcv-header-container #inner-element {
    display:none;
    }

    In the theme/child theme style.css file it should prevent that form showing.
    I don’t know if you theme has a custom css file.
    That might prevent the modification from showing up.

    #51346
    WC Vendors Support
    Participant

    display: none !important;

    #51457
    Jeffrey
    Participant

    Hi @anna

    Circling back to this…

    The CSS code worked great! Thanks for that.

    A couple questions (see attached snapshot for reference)…

    1. How do you control the image of the thumbnail pic? Right now, it looks like it defaults to the most recent product posted? Is there a way to insert another pic?

    2. Regarding the font, where it says “Jeff Store”… A) Is there a way to control the color of the font, or outline it? I know you can change the transparency of the background, but if it is too white, it washes out the background photo. B) “Jeff Store” appears twice. Is there a way to control which one shows, and/or turn one or the other OFF?

    Thanks for the help!

    #51484
    Anna
    Member

    1. How do you control the image of the thumbnail pic? Right now, it looks like it defaults to the most recent product posted? Is there a way to insert another pic?

    I think that’s the store icon there- which can be changed by the vendor in their pro dashboard > settings > branding. I do not know why that would show a product?? It is an image upload for the store icon….

    2. Regarding the font, where it says “Jeff Store”… A) Is there a way to control the color of the font, or outline it? I know you can change the transparency of the background, but if it is too white, it washes out the background photo. B) “Jeff Store” appears twice. Is there a way to control which one shows, and/or turn one or the other OFF?

    The second Jeff’s Store in smaller text is your STORE DESCRIPTION. You probably just entered Jeff’s Store as an example.
    To change the .h3 heading.store name, use this css element.. I just provided examples(color, font-family, font size) below with the element you need to use:

    
    div.wcv-store-grid__col.wcv-store-grid__col--3-of-3.store-info > h3 {
    	font-size:40px;
    	font-family:'Roboto Slab', serif;
    	color:#ababac;
    }
    #51538
    Jeffrey
    Participant

    Hi @anna

    Yep, I’m embarrassed. You’re totally right…

    Initially, I entered the store description and icon pic content, as a test. Feel really bad I even asked you that question. There’s just so many moving parts in the website that sometimes I overlook things.

    Thanks for the code though. Will definitely be using it in the future.

    Appreciate everything you do!

    Cheers! 🙂

    #51620
    Anna
    Member

    Hello,
    No worries- there is a lot to try and work with, for sure. 😉 Glad the css is working.

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘WC Vendors Pro Support’ is closed to new topics and replies.