Google Custom Search box and button is squished

Homepage › Community Forums › Epik Theme Support › Google Custom Search box and button is squished

Tagged: 

  • This topic has 5 replies, 2 voices, and was last updated 11 years ago by Wes.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 27, 2013 at 8:18 pm #4384
    hotsaucedaily
    Customer

      Hi Wes and all,

      I’ve used the Google Custom Search code for awhile now, successfully (on Thesis).

      When adding the code into a Text Widget (in sidebar 1) with Epik, the display is squished, and the button doesn’t display the search image.

      You can view the squished result here on my dev site (notice the bottom border of the box is missing, and the button is, well, borked:

      http://standard.hotsaucedaily.com/

      The exact same Google code displays properly on my live site here:

      http://hotsaucedaily.com/

      I’m thinking Genesis or Epik is limiting the size of the Text Widget box in the sidebar, but I can’t find where to fix it.

      Any advice to fix this? Thanks in advance!
      ~Brian

      April 27, 2013 at 10:08 pm #4386
      Wes
      Moderator

        No it’s actually Google’s css that is causing the issue. Here is the css that shows up for that part –

        .cse .gsc-search-button input.gsc-search-button-v2,
        input.gsc-search-button-v2 {
        width: 13px;
        height: 13px;
        padding: 6px 27px;
        min-width: 13px;
        margin-top: 2px;
        }

        The above code is referencing this stylesheet – http://www.google.com/cse/style/look/v2/default.css

        You could override it by adding something like this to your style.css file –

        .cse .gsc-search-button input.gsc-search-button-v2,
        input.gsc-search-button-v2 {
        width: 28px;
        height: 26px;
        padding: 4px;
        min-width: 13px;
        margin-top: 0;
        }

        You’ll probably need to add !important in order for it to override Google’s css.

        April 28, 2013 at 8:59 am #4391
        hotsaucedaily
        Customer

          Thanks, Wes. That really helped.

          Except now I have a tiny square search button:

          square

          Instead of a nice rectangle like this:

          rectangle

          I have played with all of the padding and margin settings, to no avail. Also note the rectangle version has a bottom border in the input field, whereas the current version is missing that bottom border. I fixed the bottom border by adding:

          .gsib_a {
          padding-top: 2px !important;
          }

          ~Brian
          http://standard.hotsaucedaily.com/

          April 28, 2013 at 8:42 pm #4396
          Wes
          Moderator

            Try this – 

            .cse .gsc-search-button input.gsc-search-button-v2,
input.gsc-search-button-v2 {
    height: 26px !important;
    margin-top: 0 !important;
    min-width: 13px !important;
    padding: 5px 26px !important;
    width: 68px !important;
}

            This is what it will look like if you add the above code – http://i.imgur.com/4XWFaJo.png

            Let me know if that works

            April 29, 2013 at 6:32 am #4399
            hotsaucedaily
            Customer

              Success. Thank you Wes! Really appreciate that.

              April 29, 2013 at 1:55 pm #4406
              Wes
              Moderator

                You’re Welcome!

              • Author
                Posts
              Viewing 6 posts - 1 through 6 (of 6 total)
              • The topic ‘Google Custom Search box and button is squished’ is closed to new replies.