Return to Support

Change Search Button Color in Widget

Home Forums Graphene WordPress theme Support Change Search Button Color in Widget

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #9796
    lowndeb
    Member

    I did some searching online for the code needed to create a search button.

    <button ONCLICK="window.location.href='http://opac.libraryworld.com/opac/signin?libraryname=Acton%20Public%20Library'" style="background-color:#ffffff"> <img src="http://acton.lib.me.us/wp-content/uploads/2015/03/ActonLibraryLogo_2014_books_trans.jpg" alt="search catalog" />
    Catalog Search
    </button>

    The button looks right when I test it but when I put it into the Widget for my front page the button color comes out blue. I have tried changing the colors in the Block Buttons area in Graphene options but it doesn’t seem to change the blue background. Where else do I need to go to change the colors for this button? Here is my site – the button is on the home page, left side: http://acton.lib.me.us/

    Thank you for your help.

    #44593
    lowndeb
    Member
    <button ONCLICK="window.location.href='http://opac.libraryworld.com/opac/signin?libraryname=Acton%20Public%20Library'" style="background-color:#ffffff">
    Catalog Search
    </button>

    #44594
    lowndeb
    Member

    Sorry about that, trying to figure out how to post my code here for you to see without it running the code . . . I think I figured it out.

    <button ONCLICK="window.location.href='http://opac.libraryworld.com/opac/signin?libraryname=Acton%20Public%20Library'" style="background-color:#ffffff"> <IMG align="center" src="http://acton.lib.me.us/wp-content/uploads/2015/03/ActonLibraryLogo_2014_books_trans.jpg" alt="search catalog">
    Catalog Search
    </button>

    #44595
    Quote:
    I think I figured it out.

    You got it. I fixed it for you in your first post to avoid problems.

    You merely want to use the image (“ActonLibraryLogo_2014_books_trans.jpg”) as a clickable link, right?

    If so, you can do it this way, which avoids unnecessarily mixing HTML, CSS, and JavaScript:

    <a href="http://opac.libraryworld.com/opac/signin?libraryname=Acton%20Public%20Library">
    <img src="http://acton.lib.me.us/wp-content/uploads/2015/03/ActonLibraryLogo_2014_books_trans.jpg" alt="Search Catalog" />
    </a>

    If you want the button instead of the graphic, use this method:

    <form method="link" action="http://opac.libraryworld.com/opac/signin?libraryname=Acton%20Public%20Library">
    <input type="submit" value="Catalog Search" />
    </form>

    Or, even easier:

    <a class="block-button" href="http://opac.libraryworld.com/opac/signin?libraryname=Acton%20Public%20Library">
    Catalog Search
    </a>

    To change the color, use this in custom CSS or child theme stylesheet:

    .block-button, .block-button:visited { style-options}

    #44596
    lowndeb
    Member

    Thank you so much! Your help has been wonderful.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.