Style Pagination Output

[malljess]

I am attempting to format the pagination style at the bottom of the page. I am getting a style that I do not like - it has the silver boxes and the font is lage and not the type I want. It seems that it is the default style. How do I change it?

[Jim]

You will need to edit the style sheet that contains the styles used for the Pagination area. You can find out what styles are being assigned by viewing the html of a page where the pagination is displaying. The styles are listed near the top of the html source or they may be in an included css file.
Depending on where you find them you will need to edit either the page template or the included css file and make the changes you want.

You can edit the template under Merchandising > Custom Templates > Pages or Includes depending on whether you need to edit the page template or a css file.

[malljess]

Thanks for the response; however, I continue to get the default buttons, which are silver and not conducive for my site. Here is the code I get off the source page. I see the input class is search_button. I see on other websites that use Shopsite it is an a href=, which can be styled. Please advise.

<span class="currentpage"><input class="search_button" type="submit" name="which_submit" value="Prev">
| <b>Page:</b><input class="search_button" type="submit" name="which_submit" value="1">
<input class="search_button" type="submit" name="which_submit" value="2">
<input class="search_button_selected" type="submit" name="which_submit" value="3">
<input class="search_button" type="submit" name="which_submit" value="4">
<input class="search_button" type="submit" name="which_submit" value="5">
...<input class="search_button" type="submit" name="which_submit" value="8">
| <input class="search_button" type="submit" name="which_submit" value="Next">
</span>

[Jim]

What page template are you using? Is it one ShopSite provided or was it developed by you or by a custome template designer?
What is the url to your store where we can see what it looks like.

[malljess]

I am using a template that I developed. You can see the site at nmhrc.com. Any help is appreciated.

[Jim]

You need to name the styles in your css the same thing as the styles in the html. in your css you have .searchbutton but in the html the style is search_button and for the current page, search_button_selected.

I saved the page to my local machine and made a few changes to this section of code including adding ", .search_button, .search_button_selected and changing the color to "red" and when I reload my local version of the page the numbers on the button as well as the Next have red text.

Code: Select all

.searchbutton, .search_button, .search_button_selected {   background-image: url("picts/button.gif");
      background-color:#F0F0F0;
      FONT-FAMILY: arial, verdana, helvetica, sans-serif;
      color: red;
      font-size: 8pt;
      height: 20px;
      width: 35px;
      cursor:hand;
      font-weight: bold;
      text-align: center;
      BORDER: #000066 1px solid }

I'm not great of css so I don't understand the differnce between #search_button and .search_button but you have a section

Code: Select all

#search_button  {text-decoration:; line-height: 18px; cursor: hand; FONT-FAMILY: Calibri; border: none; WIDTH: 145PX; padding: 0.0em 0.0em; margin: -0.0em -0.0em; color: navy; background: #F4F4F4; font-size: 15px; text-align: left; }
#search_spacing {line-height: 1px;}

which may be what you are modifying. If that is the what you are modifying try changing it to .search_button instead of #search_button and see if that makes a difference. Note that the current page button has the style search_button_selected so you would need to add that also.

[malljess]

Jim,

Thank you. I got it functioning.

One last question - why do I need to put the tag [-- SEARCHRESULT_FORM FORM_ONLY --] or [-- SEARCHRESULT_FORM --] for the prevnext tage to work. do not want the search box at the bottom.

If I do have it - is the anyway to format the search box and button differently. I know how to change the search button style. But can I place the search button to the left of the search box and not on the bottom?
Thanks again.

[malljess]

I figured out how to disable the search box. However, my second question remains. Can I format it differently?

[Jim]

I don't think there is a way when using the template tags to put the search button before the search field. You might be able to just copy the output of the template tag from a page that uses the tag and then use that code in your template in place of the tag. You could then arrange the form elements how you want them.

<personal opinion> Why would anyone want a button before the input field? It is not user friendly at all. It requires the user to get to the field using a mouse movement, switch to the keyboard to enter the text, then use the mouse to get back over the field to click the submit button. If it is after the field they can simply use the mouse to get to the input box, enter their text, hit the tab key and the enter key and be done. Much less switching between mouse and keyboard and a lot quicker.</personal opinion>