• Resolved johnbrid

    (@johnbrid)


    Hi
    I am new to using widgets but need to put the freetobook widget on my website. The orange search button jumps up as you try to click on it (ie on hover). Is there something in the customizr style.css file making it do this and if so what do I put in my childs theme style.css to overwrite it.
    Thanks
    John

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter johnbrid

    (@johnbrid)

    I have done some more experimenting and put the freetobook review widget on as well. This one is also a link to their site but it does not move on hover. I know their search widget does not move on other sites so i am very puzzled.

    First, before you say need to put any Facebook widget on a site, I hope you’ll look into the privacy of people. I don’t recall the details but I watched people’s profile info being displayed. Facebook is very, very intrusive. And never mind Facebook’s privacy rules because they change those rules and you won’t keep up.

    That said, the first thing I’d look into is whether percentages are used in CSS. For example, I have a % for padding and the WordPress html/css checker always alerts me to watch for unexpected results. I am not sure if using ems do the same. That percentage might be in column sizing, padding around images, etc.

    Try the widget in various positions on your page and see if it changes. Maybe it’s ok in the footer but not the sidebar? That would tell you its an element within your sidebar.

    Thread Starter johnbrid

    (@johnbrid)

    Thanks for the reply Deb. Agree with you about facebook but it is not a facebook widget. It is a freetobook widget which is for accommodation providers.
    The widget behaves the same way in the right sidebar. I can even put a freetobook link in the html part of the body and it also behaves the same way.

    Thread Starter johnbrid

    (@johnbrid)

    I examined the code of the page and discovered which parent theme stylesheets were being used. I tried the common one first and searched for the word hover. Examined each one and looked for -10px or something similar.
    I found 4 such bits of code and tried them all. This one was the culprit and I have no idea what it does in the customizr theme but it messes up the freetobookwidget

    input[type="submit"]:hover {
    background-position: 0 -15px;
    }

    This bit of code in the advanced css section of customizr stops the button jumping up on hover.

    input[type="submit"]:hover {
    background-position: 0 0;
    }

    However when i put it into my child css the button still jumped. I then looked at the enqueue bit of the function.php of my child theme. It seems there issues over what you need to enqueue. I decided to enqueue bot parent and child. i had to change it from

    <?php
    
    function theme_enqueue_styles() {
    // enqueue parent styles
    		wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    }
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    
    ?>

    to

    <?php
    
    function theme_enqueue_styles() {
    // enqueue parent styles
    		wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    // enqueue child styles
    	wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
    }
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    
    ?>

    Thought this all might be helpful to someone else. It all seems to be working fine at thebeachfiley.co.uk//make-a-booking/

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Stop widget link from moving on hover’ is closed to new replies.