Thread: Button sizes...

Results 1 to 7 of 7
  1. #1
    Join Date
    Feb 2012
    Posts
    394
    Plugin Contributions
    0

    Default Button sizes...

    [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

  2. #2
    Join Date
    Jul 2012
    Posts
    13,534
    Plugin Contributions
    16

    Default Re: Button sizes...

    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.
    ZC Installation/Maintenance Support <- Site
    Contribution for contributions welcome...
    Upgraded to Zen Cart V1.5.3 from V1.5.1 from V1.5.0 from V1.3.9h

  3. #3
    Join Date
    Feb 2012
    Posts
    394
    Plugin Contributions
    0

    Default Re: Button sizes...

    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

  4. #4
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    8,197
    Plugin Contributions
    66

    Default Re: Button sizes...

    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:
    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&amp;cPath=188_157&amp;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'">&nbsp;Previous&nbsp;</span></a></div>
    <div class="navNextPrevList"><a href="https://craftjam.co.uk/index.php?main_page=index&amp;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'">&nbsp;Return to the Product List&nbsp;</span></a></div>
    <div class="navNextPrevList"><a href="https://craftjam.co.uk/index.php?main_page=product_info&amp;cPath=188_157&amp;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'">&nbsp;Next&nbsp;</span></a></div>
    </div>
    <!--eof Prev/Next top position-->
    You'll add the following to that new stylesheet, identifying the button's style within the parentheses:
    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 {}
    Note also that if you're changing the size of the button you might also need to style its :hover condition as well.

  5. #5
    Join Date
    Feb 2012
    Posts
    394
    Plugin Contributions
    0

    Default Re: Button sizes...

    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

  6. #6
    Join Date
    Jul 2012
    Posts
    13,534
    Plugin Contributions
    16

    Default Re: Button sizes...

    Quote Originally Posted by rainbow_pixie_star View Post
    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.

    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.
    ZC Installation/Maintenance Support <- Site
    Contribution for contributions welcome...
    Upgraded to Zen Cart V1.5.3 from V1.5.1 from V1.5.0 from V1.3.9h

  7. #7
    Join Date
    Feb 2009
    Location
    UK
    Posts
    562
    Plugin Contributions
    0

    Default Re: Button sizes...

    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
    Simon

 

 

Similar Threads

  1. Adding "Sizes" & "Colors" button in Product Page
    By zoombee in forum Basic Configuration
    Replies: 2
    Last Post: 10 Dec 2010, 01:51 PM
  2. Attribute Sizes: Not Listing All Sizes Specified?
    By Impressions in forum Setting Up Categories, Products, Attributes
    Replies: 0
    Last Post: 28 Aug 2009, 06:45 PM
  3. fixed sizes and list of sizes
    By ideasco in forum Setting Up Categories, Products, Attributes
    Replies: 0
    Last Post: 10 Dec 2008, 10:48 PM
  4. How do I add a button for product sizes?
    By yoda321 in forum Setting Up Categories, Products, Attributes
    Replies: 2
    Last Post: 8 Nov 2007, 07:08 AM
  5. front page category button sizes...
    By moobi in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 20 Jul 2007, 07:33 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR