[lowndeb]

lowndeb

#9796

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.

[lowndeb]

lowndeb

#44593

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

Catalog Search

</button>

[lowndeb]

lowndeb

#44594

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>

[Kenneth John Odle]

Kenneth John Odle

#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}

[lowndeb]

lowndeb

#44596

Thank you so much! Your help has been wonderful.