Thanks a lot Yigit,
it was a very easy way to customize an element.

And may I have 2 another questions about this element?
1> What if I want to change the color of “Price Row”? What is the related code for that?
2> And also please let me know about the codes which changes the font size in cells.

Regards,
Sadegh

Hi Vinay,

thank you for this tip, but it doesn´t solve the responsive problem. Font and line height are reduced now, but on my IPad, the text isn´t centered yet, there is still too much padding on the left
For the desktop version now the the font size is too small.
And there ist still the question, if it´s possible to fade out the text on hover (mouse rollover).

Any ideas?

kind regards

Ricarda

I finally came up with the following pieces of codes and put in in code block. it worked perfectly except for the mobile version:

1) The contact form distance from the top of the page is set for desktop and don’t know how to adjust it in mobile version so whole contact form can be seen in mobile version

2) the contact form goes behind texts and pictures.

Can you solve those issues for me?

Thanks.

Code Block #1

<!-- include Google hosted jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){ 

	var _scroll = true, _timer = false, _floatbox = $("#contact_form"), _floatbox_opener = $(".contact-opener") ;
	_floatbox.css("right", "-300px"); //initial contact form position
	
	//Contact form Opener button
	_floatbox_opener.click(function(){
		if (_floatbox.hasClass('visiable')){
            _floatbox.animate({"right":"-300px"}, {duration: 300}).removeClass('visiable');
        }else{
           _floatbox.animate({"right":"0px"},  {duration: 300}).addClass('visiable');
        }
	});
	
	//Effect on Scroll

	$(window).scroll(function(){
		if(_scroll){
			_floatbox.animate({"top": "130px"},{duration: 300});
			_scroll = false;
		}
		if(_timer !== false){ clearTimeout(_timer); }           
			_timer = setTimeout(function(){_scroll = true; 
			_floatbox.animate({"top": "110px"},{easing: "linear"}, {duration: 500});}, 400); 
	});

	
	
    //reset previously set border colors and hide all message on .keyup()
    $("#contact_form  input[required=true], #contact_form textarea[required=true]").keyup(function() { 
        $(this).css('border-color',''); 
        $("#result").slideUp();
    });
	
});
</script>

Code Block #2

<!-- contact form start -->
<div class="floating-form" id="contact_form">
<div class="contact-opener">Open Contact Form</div>
    <div class="floating-form-heading">Request Information</div>
    <div id="contact_results"></div>
    <div id="contact_body">
         [av_contact email=' (Email address hidden if logged out) ' title='' button='Submit' on_send='' sent='Your message has been sent!' link='manually,http://' subject='' autorespond='' captcha='active' hide_labels='aviaTBhide_labels' form_align='' color='']
[av_contact_field label='Name' type='text' options='' multi_select='' check='is_empty' width=''][/av_contact_field]
[av_contact_field label='Last Name' type='text' options='' check='is_empty' width=''][/av_contact_field]
[av_contact_field label='E-Mail' type='text' options='' multi_select='' check='is_email' width=''][/av_contact_field]
[av_contact_field label='phone' type='text' options='' check='is_phone' width=''][/av_contact_field]
[av_contact_field label='Your Available Cash Is:' type='select' options=', $200.000-$500.000, $500.000-1.000.000,' check='is_empty' width=''][/av_contact_field]
[av_contact_field label='Your Approx. Networth is:' type='select' options=',$00000,0000' check='is_empty' width=''][/av_contact_field]
[av_contact_field label='What is your timeline to invest?' type='select' options=',60 days, 90 days, 120 days, over 120 days' check='' width=''][/av_contact_field]
[/av_contact]
    </div>
</div>
<!-- contact form end -->

Code Block #3

/* floating box style */
.floating-form {
    max-width: 300px;
    padding: 30px 30px 10px 30px;
    font: 13px Roboto;
    background: #F9F9F9;
    border: 1px solid #ddd;
    right: 10px;
    z-index: 1000;
    position: fixed;
    box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
    -moz-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
    -webkit-box-shadow:  -2px -0px 8px rgba(43, 33, 33, 0.06);
	}
.contact-opener {
    position: absolute;
    left: -88px;
    transform: rotate(-90deg);
    top: 80px;
    z-index: 1000;
    background-color: #a01818;
    padding: 9px;
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.43);
    cursor: pointer;
    border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
    -moz-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
    -webkit-box-shadow:  -2px -0px 8px rgba(43, 33, 33, 0.06);

}

.floating-form-heading{
font-weight: bold;
color: Black;
font-family: Roboto;
border-bottom: 2px solid #ddd;
margin-bottom: 10px;
font-size: 22px;
padding-bottom: 3px;
}

• This reply was modified 9 years, 11 months ago by afarahani.

Hi Andy

I’ve created another MAIN MENU LINKS component by clicking Edit Element > Main Menu Links.

I’ve set the font size to 14 (same as the other Main Menu Links for the hover state). That fixed the default size issue being different from the Hover state..

But when changing the Font Color as well (to make the default color darker), it then cancels out the active color state?

Hi Vinay

Thank you for pointing me in the right direction, it worked but then i changed the name to gbutton

I used

#top .gbutton .avia-button .avia-size-large {
    border-radius: 20px !important;
    font-size: 13px;
    min-width: 139px;
    padding: 15px 30px 13px;
}

and placed the name gbutton in the custom css field of the button element.

but now it does not pick up the custom css at all, what am i missing here ?

Thank you for your patience

• This reply was modified 9 years, 11 months ago by waveshaper. Reason: new situation

okay done!
i have now bigger main menu size and bigger font in product pages
but still have a small font size in products description and contact forums
any advice ?

yes, but i took de Homev3 page as a template, i copied it, , i made no change to the font of the article what so ever, so im wondering why the font is different now from the rest of the page. how to tell the program to give the articles/the blogs exact same font as the main page? and what is the font / font size of the Home V3 page?

—-
ok, ive changed it now in the css via:
.entry-content p {
font-size: 16px;
}

i hope my client will be alright with it, if not, i let you know
cheers

• This reply was modified 9 years, 11 months ago by yampieters.