Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 19, 2020 at 4:09 pm #1239210
    AlidaKal

    Hi
    I need 2 buttons beside each other with different styling , also for hover effect. I can change the colors only for regular view but not for hover effects. I can only add 1 class to the buttonrow, so I cannot style the buttons different from each other via custom css.
    What I need is the left button in dark background with light text, on hover it will be light background with dark text . The button on the right needs to be the opposite: light background/dark text, on hover a dark background/light col. text.

    I cannot use the 1/2 blocks and have single buttons. They are already in a 1/1 block because of the background effect. I will send you private inlog data and the link to the homepage so my question will be more clear.
    Thanks in advance !
    Kind regards
    Astrid

    August 24, 2020 at 9:28 am #1240286
    AlidaKal

    Dear custom support

    Somebody that could help me please? Posted my request 5 days ago and no reaction sofar fro support.
    Thank s in advance

    Kid regards

    August 24, 2020 at 11:12 am #1240304
    Guenni007

    you can style them – but you can use buttons too for that.
    To have them beside each other – only a display behavior must set on this
    see here an example page for button styling ( even the look is styled there but important for you is that you have button alb and can style each button on it self) put all your buttons ( aligned center ) in a common container and give a custom class to it – rest on that example page:
    https://webers-testseite.de/buttons/

    the four buttons on that page looks this way in the layout:

    August 24, 2020 at 11:25 am #1240308
    Guenni007

    on a button alb you have more styling options even for hover style –
    but if you like to have it for button-row – you can select the buttons in a button-row by counting them and select via :nth-of-type(2) etc.

    .avia-buttonrow-wrap .avia-button:nth-of-type(1) {
… some css rules
}

    or you follow this topic here to have for each button in a button-row a unique ID:
    https://kriesi.at/support/topic/individual-id-for-buttons-in-button-row/#post-1232985

    August 27, 2020 at 11:01 pm #1241315
    AlidaKal

    Dear Guenni
    Thank you for your replies. I have followed your 2nd suggestion for the buttonrow. The one that is in this topic: https://kriesi.at/support/topic/individual-id-for-buttons-in-button-row/#post-1232985
    It works for the 1st section (see the link in private section). When I am inspecting it I can see that a -button1 or -button2 is added to the id I have added to the row
    However for the 2nd section(see the link in private section) , where I have added a new id to the buttonrow , the -button1 qnd the -button2 are not added to the new buttonrow id.
    Can you please help further?

    I am not sure if I understand the 1st option you suggested for the buttonrow styling. I thought the 2nd option was easier to follow.

    Thank you for your help again!
    Kind regards

    August 28, 2020 at 9:11 am #1241464
    AlidaKal

    Hi again
    I have tried now your suggestion for button row:

    .avia-buttonrow-wrap .avia-button:nth-of-type(1) {
    … some css rules
    }

    That one worked fine, thank you!

    Kind regards

    August 28, 2020 at 9:46 am #1241484
    Guenni007

    i do not see private content – because i’m participant as you.

    But on that topic only one button row is used – i changed code to a nested each function ( with nice use of this ;) )

    function id_to_button_row_buttons(){
?>
<script>
(function($) {
	$('.avia-buttonrow-wrap').each(function(){
		var that = this;
		$('.avia-button', this).each(function(i){
			var ButtonRowID = $(that).attr('id');
			$(this).attr('id', ButtonRowID+'-button'+(i+1));
		});
	});
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'id_to_button_row_buttons');
  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.