Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • June 27, 2016 at 12:12 pm #653752
    schiffbauer00

    Hello,
    I’m using Enfold and I’m very happy with it, but:

    1) I want that the sale badge is in the top right of the product image. Maybe a little overlaying the border of the image.
    In the default setting, it is next to the price (grid view). How can I move it (best with CSS)?

    2) In the single product view it should be the same….. now it is at the top right of the single product page.

    3) Further it should be forced to be a circle.

    Thanks in advance.
    Jan

    June 29, 2016 at 6:43 am #654612
    Rikard

    Hey Jan,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Thanks,
    Rikard

    June 29, 2016 at 8:04 am #654650
    schiffbauer00

    Hey Rikard,

    thanks for your reply!

    I post a link and and login to the website shop.
    As mentioned the sale badge should be on top of the product picture in the upper right corner. Same for the single product….
    At the single product you can see, that I started to set the sidebar (I want it on the left), but this is another thread.

    Thanks again!
    Jan

    July 2, 2016 at 3:33 am #655968
    Ismael

    Hi,

    Please add this in the functions.php file:

    // custom script
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script>
(function($){
	function h() {
	$('#top .product').each(function() {
		var onsale = $(this).find('.onsale'),
			thumb = $(this).find('.thumbnail_container');

		onsale.appendTo(thumb);
	});
	}

	h();
})(jQuery);
</script>
<?php
}

    This will move the onsale container inside the thumbnail container.

    Best regards,
    Ismael

    July 2, 2016 at 7:35 am #656039
    schiffbauer00

    Hi Ismael,

    perfect! But 3 more points remaining :-(
    Please have a look at the side…
    1) In the product overview: when the product picture changes due to mouse hover, the color of the text “Sale!” changes (to the link color)
    2) In the single product view: the sale badge is still not in the picture container…
    3) can I force the badge to be a circle?? (Replacing it with a picture would be fine and solves problem 1, but I think it is more complicated?)

    Thank you so much!
    Jan

    July 2, 2016 at 7:42 am #656042
    schiffbauer00

    Sorry, one more:

    how can I adjust the position of this “new” badge slightly?

    Thanks
    Jan

    July 2, 2016 at 8:58 am #656064
    Vinay

    Hi,

    Please elaborate what you like to adjust. If possible would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

    Best regards,
    Vinay

    July 4, 2016 at 8:28 am #656409
    schiffbauer00

    Hi Kriesi Team,

    the picture below shows the shop overview page.
    As you can see, the sale badge is in the right upper corner as I wanted it :-)

    1.How can I adjust the position to move it just little?

    2.The main problem is, that the “sale!” changes color when the picture has a hover effect. This is depending on the browser: in edge it goes to red, in safari it is getting bold?? Please go on the “shop” page and and check this.

    3.Last but not least: The badge should be a forced circle.To get rid of the hover effect and shape: would it be more easy to place a picture instead?

    Tanks in advance!!
    Jan

    I posted the link in the private content…

    July 5, 2016 at 6:28 am #656829
    Ismael

    Hey!

    1.How can I adjust the position to move it just little?

    Use this css code:

    #top .onsale {
    margin-right: 20px;
    margin-top: 20px;
}

    2.The main problem is, that the “sale!” changes color when the picture has a hover effect. This is depending on the browser: in edge it goes to red, in safari it is getting bold?? Please go on the “shop” page and and check this.

    I can’t reproduce the issue on my end. Could you please provide a link where we can see the issue?

    3.Last but not least: The badge should be a forced circle.

    Please use this:

    #top .onsale {
    height: 40px;
}

    Best regards,
    Ismael

    July 6, 2016 at 9:40 pm #657729
    schiffbauer00

    Hi Ismael,

    CSS works perfect! Thanks!

    I added my first Video :-) so you can probably see the hover effect issue I mean.
    I postet the link in the private content. (The video is on the right).

    Thanks!!
    Jan

    July 9, 2016 at 3:08 am #658672
    Ismael

    Hi,

    I’m sorry but I can’t see the video. Could you please upload it on youtube?

    Best regards,
    Ismael

    July 9, 2016 at 8:14 am #658708
    schiffbauer00

    Hi Ismael,

    thanks for your reply! I’m wondering if you did not find the video on the Website or if it is not displayed, not working?
    Please try one again… http://joleo.de/mock-ups/ (login above).
    But anyway, I put it on YouTube

    Best regards.
    Jan

    July 12, 2016 at 4:09 am #659652
    Ismael

    Hi,

    I can see the video player but it’s blank. Thanks for the youtube video. Unfortunately, I can’t reproduce the same hover effect on my end. Is this happening in the shop page (http://joleo.de/shop/)? Please try this in the Quick CSS field:

    .onsale:hover {
    color: #ffffff;
}

    Best regards,
    Ismael

    July 12, 2016 at 7:35 am #659685
    schiffbauer00

    Hi Ismael,
    tricky with the video ??? maybe later.

    Your CSS does not work… I will change back to the default position of the sale badge. Then it is all fine again.
    One quick question before you can close this thread: where can I enable the masonry shop?
    I don’t find it :-)

    Thanks
    Jan

    July 13, 2016 at 11:28 am #660290
    Andy

    Hi,

    what do you mean with masonry shop? are you talking about a product grid? if yes then when editing a page go to “Plugin Additions” and choose Product Grid element inside of ALB.

    Best regards,
    Andy

    July 13, 2016 at 9:48 pm #660583
    schiffbauer00

    Hi Andy,
    I mean: how to change from this
    http://kriesi.at/themes/enfold/shop/
    to this

    Masonry Shop

    Best regards
    Jan

    July 17, 2016 at 8:11 am #661711
    schiffbauer00

    Hi,

    got everything I wanted. Thanks a lot!!

    you can close this…

    July 17, 2016 at 5:52 pm #661799
    Rikard

    Hi,

    Great, glad you got it working :-)

    Please open a new thread if you should have any further questions or problems.

    Regards,
    Rikard

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Sale badge position’ is closed to new replies.