Printable View
[Note: remember to include site URL, ZC version, list of plugins, PHP version, etc ... read the Posting Tips shown above for information to include in your post here. And, remove this comment before actually posting!]
Hello,
Where would you go to change the size of the css buttons?
In particular I am wanting to change the size of these three...
Previous Return to the next product list Next.
Or even if there is a way to remove these three as I do not feel they are needed at all?
Thank you#
Amy
Objects are sized by css or at the original size in the absence of html properties for the object.
Providing a link to the page(s) in question is a way for someone to be able to best describe what is needed for the object(s) on the associated site.
Otherwise, a clear description of what is installed, modifications made and the desired result would help someone that can either reproduce the same output or is familiar with that configuration to help.
Basically, the more pertinent information that is provided, the easier it is to get an answer.
Hi,
Didn't provide the site as I assumed you just changed the size of a css button in a style sheet somewhere.
Here is the link to 1 product... https://craftjam.co.uk/index.php?mai...oducts_id=3500
As you can see there are 3 buttons... Previous, return to... and Next.
these are the ones that I would like smaller or removed.
I am using responsive classic
Thank you
Amy
You can control the look (i.e. color/size, etc.) of the buttons by creating an additional stylesheet named stylesheet_css_buttons_extras.css in your template's /css directory. Note that the name I suggested will cause it to be loaded after the base template's stylesheet_css_buttons.css, so it's overriding any definitions in that base css-file.
Here's the pertinent snippet of HTML you are wanting to style:
You'll add the following to that new stylesheet, identifying the button's style within the parentheses:Code:<!--bof Prev/Next top position -->
<div class="navNextPrevWrapper centeredContent">
<p class="navNextPrevCounter">Product 2/62</p>
<div class="navNextPrevList"><a href="https://craftjam.co.uk/index.php?main_page=product_info&cPath=188_157&products_id=3499"><span class="cssButton normal_button button button_prev" onmouseover="this.className='cssButtonHover normal_button button button_prev button_prevHover'" onmouseout="this.className='cssButton normal_button button button_prev'"> Previous </span></a></div>
<div class="navNextPrevList"><a href="https://craftjam.co.uk/index.php?main_page=index&cPath=188_157"><span class="cssButton normal_button button button_return_to_product_list" onmouseover="this.className='cssButtonHover normal_button button button_return_to_product_list button_return_to_product_listHover'" onmouseout="this.className='cssButton normal_button button button_return_to_product_list'"> Return to the Product List </span></a></div>
<div class="navNextPrevList"><a href="https://craftjam.co.uk/index.php?main_page=product_info&cPath=188_157&products_id=3001"><span class="cssButton normal_button button button_next" onmouseover="this.className='cssButtonHover normal_button button button_next button_nextHover'" onmouseout="this.className='cssButton normal_button button button_next'"> Next </span></a></div>
</div>
<!--eof Prev/Next top position-->
Note also that if you're changing the size of the button you might also need to style its :hover condition as well.Code:span.cssButton.normal_button.button.button_prev {}
span.cssButton.normal_button.button.button_return_to_product_list {}
span.cssButton.normal_button.button.button_next {}
Hi,
Thanks for that. However is there no easier way as it seems like a lot of messing about just to change the size of something?
I looked at the code and was wondering as i can see you have used the link in there to the product i gave you. Does this mean that I would need to add the link to every product alongside that also? I have a couple of thousand products!
Thank you
Amy
The filename suggested to hold the css rule you will make is auto-loaded on each page and after the original stylesheet that contains the content to be modified. Therefore, loading that one time to your server will modify every page that has the entire "grouping" identified which would be expected to be on every page.Quote:
Originally Posted by rainbow_pixie_star
It is possible to create a file to be specific to a given product, but as you pointed out, you don't need nor want to do that. There is a readme file on stylesheet naming that you can review if you are/were interested in the following directory: includes/templates/template_default/css
Basically though, you do this one time and it is expected to apply to all of your product pages.
I don't believe your query of how to remove the Prev/Next buttons was answered,
Admin > Configuration > Product Info > Previous Next - Navigation Bar Position > [value] 0