Blog look a like shop (titlebar picture)

Home Forums Jevelin Theme Blog look a like shop (titlebar picture)

Home Forums Jevelin Theme Blog look a like shop (titlebar picture)

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    RESOLVED Posts
  • worldofpixels
    Participant

    Hi support team,

     

    Thanks in advance for the great job and support you’re providing.

     

    In the blog posts, you are giving the opportunity to change the <span style=”color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen-Sans, Ubuntu, Cantarell, ‘Helvetica Neue’, sans-serif; font-size: 14px; font-style: normal; font-weight: 600; word-spacing: 0px; float: none; display: inline !important; white-space: normal; orphans: 2; widows: 2; background-color: #ffffff; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px;”>Titlebar Background Image, and set an image.</span>

    How can I achieve the same on a shop category?

     

    Exemple:

    When I am in this category http://www.worldofpixels.be/product-category/test-album-scooby-category/ I would like to have the picture of the thumbnail in the header.

     

    Kind regards,

    Ben

     

    Hi Ben,

     

    I hope you are well today and thank you for your question.

     

    You can set the image for that page in the titlebar settings as shown in the attached screenshot.

     

    Best regards,
    Shufflehound team

    Attachments:
    You must be logged in to view attached files.

    worldofpixels
    Participant

    Thank you for the quick answer.

    But then it would be one and only background for all pages.

    I would like to have a background per category.

    In my case, one background per “fotoshoot”

    Solution for this topic

    To have a background per category you have to develop and use custom CSS code like following by adding it in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    .tax-product_cat.term-test-album-scooby-category .sh-titlebar {
        background-image: url(//www.worldofpixels.be/wp-content/uploads/2016/03/pexels-photo-v270221.jpeg);
    }

     

    To create the CSS code for other categories just copy paste the above CSS code and change the category name and background image URL in it.

    worldofpixels
    Participant

    This works well, nice, thank you !

    Now I just have to have the same height as the shop page (if you want to please):

    http://www.worldofpixels.be/shop/

     

    And can you also adapt the code so I have the same on my product page belonging to that category, example on http://www.worldofpixels.be/product/1/, http://www.worldofpixels.be/product/2/, and so on ?

     

    PS: I can also see some widgets below the product page, how can I edit this product page in general?

    Now I just have to have the same height as the shop page (if you want to please):

    http://www.worldofpixels.be/shop/

    Try using below CSS code to achieve this.

     

    .archive.tax-product_cat .sh-titlebar .sh-table {
        padding: 160px 0;
    }

     

    And can you also adapt the code so I have the same on my product page belonging to that category, example onhttp://www.worldofpixels.be/product/1/, http://www.worldofpixels.be/product/2/, and so on ?

     

    We can not find out using CSS code whether the product belongs to that category but you can set image to the products separately by using the below CSS code 8594 is product ID.

     

    .single-product.postid-8594 .sh-titlebar {
        background-image: url(//www.worldofpixels.be/wp-content/uploads/2016/03/pexels-photo-v270221.jpeg);
    }

     

    PS: I can also see some widgets below the product page, how can I edit this product page in general?

    To help us keep support thread separates could you please create new thread for each of your other questions instead of asking them in your single thread as it makes the thread messy and hard to read.

     

    If you want to you can also add reference of this thread in your newly created thread.

     

    We would be more than happy to help you on your new thread.

     

     

    worldofpixels
    Participant

    That is not the best way I was dreaming of, but I can make it work.

    1/ How can I also have this padding to the product page? When I add padding: 160px 0; to .single-product.postid-8594 .sh-titlebar it’s way too big.

     

    2/ How can I add more then one? What’s the best way, let’s say 8595 and 8596 with the same image? Can I combine it to clean a bit my css ?

    Solution for this topic

    1/ How can I also have this padding to the product page? When I add padding: 160px 0; to .single-product.postid-8594 .sh-titlebar it’s way too big.

    To add padding to the product page try using the below CSS code. You can change the value 160 in the below code to change size of padding.

     

    .single-product #page-container .sh-titlebar {
        padding: 160px 0;
    }

    2/ How can I add more then one? What’s the best way, let’s say 8595 and 8596 with the same image? Can I combine it to clean a bit my css ?

    To use same image on the pages you can use CSS code as following.

     

    .single-product.postid-8594 .sh-titlebar,
    .single-product.postid-8595 .sh-titlebar,
    .single-product.postid-8596 .sh-titlebar {
        background-image: url(//www.worldofpixels.be/wp-content/uploads/2016/03/pexels-photo-v270221.jpeg);
    }

     

    If you want to use same image on all product pages then use the below CSS code.

     

    .single-product .sh-titlebar {
        background-image: url(//www.worldofpixels.be/wp-content/uploads/2016/03/pexels-photo-v270221.jpeg);
    }

    worldofpixels
    Participant

    ok thank you, it’s working great, except I still have a difference in height now.

    I have this code:

    .tax-product_cat.term-test-album-scooby-category .sh-titlebar {
        background-image: url(//www.worldofpixels.be/wp-content/uploads/2017/03/achtergrond1.jpg);
    }
    .archive.tax-product_cat .sh-titlebar .sh-table {
        padding: 160px 0;
    }
    .single-product #page-container .sh-titlebar {
        padding: 160px 0;
    }
    .single-product.postid-8594 .sh-titlebar {
        padding: 160px 0;
    background-image: url(//www.worldofpixels.be/wp-content/uploads/2017/03/achtergrond1.jpg);
    }

    But see the height of the header image in this category http://www.worldofpixels.be/product-category/test-album-scooby-category/ and this product http://www.worldofpixels.be/product/1/

     

    Is there also a way to combine those 4 lines of code ?

     

    Thank you !

    Solution for this topic

    Please try using the below CSS code instead of the code that you have shared above.

     

    .single-product.postid-8594 .sh-titlebar,
    .tax-product_cat.term-test-album-scooby-category .sh-titlebar {
        background-image: url(//www.worldofpixels.be/wp-content/uploads/2017/03/achtergrond1.jpg);
    }
    .single-product #page-container .sh-titlebar,
    .archive.tax-product_cat .sh-titlebar .sh-table {
        padding: 160px 0;
    }
    .single-product #page-container .sh-titlebar-height-medium {
        padding: 0;
    }
    .single-product #page-container  .sh-titlebar .sh-table{
        min-height: 0;
    }

    worldofpixels
    Participant

    It works now, thank you, this ticket can be closed too 🙂

    You are most welcome here 🙂

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