Add ToolBox to Product Pages

  • Unknown's avatar
    urbanela · Member ·

    I am trying to create a toolbox with a list that will allow my users to click an item in the list that will go to an automatic download. For example, see the ‘Tools’ menu on this website: http://www.landscapeforms.com/en-US/product/Pages/STRATA-Beam-Bench.aspx

    This is what I am trying to create so that my clients can download different product information for every product. The categories will be as follows: Technical Sheet, Cut Sheet, DWG, Sketchup, Installation Manual

    Every product page will have the same category tool box however, every tool box will have different documents that will need to be uploaded for that particular product if that makes sense. I’m thinking some sort of widget may be able to do this, not sure.

    Help!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, what comes to mind with this would be to put the dimension drawing in a div and assign a CSS class to that div and then put the tool box download links into another div with a CSS class and then you would create the necessary CSS to make each of those divs about half the width (45%). The following would be the basics.

    This would be what the HTML in the product page would look like. 

    <div class="dims">IMAGE CODE HERE</div>
<div class="tool-box">CODE FOR TOOL BOX LINKS HERE</div>

    This would be the basics for the CSS. 

    .dims, .tool-box {
width: 45%;
}
.dims {
float: left;
}
.tool-box {
float: right;
}
@media screen and (max-width: 600px) {
.dims, .tool-box {
width: 100%;
float: left;
}
}

    The last rule above sets both of the divs back to 100% width at 600px on screens/windows narrower than 600px since things get too crowded below that width.

    Adjustments may need to be made to all this. If you wish to set up one of your pages like this and then let us know which one, we can then fine-tune things to get it like you want it.

  • Unknown's avatar
    urbanela · Member ·

    Thank you! It’s definitely a start, just needs to be tweaked a bit. Take a look at the TOOLS bar on this website page:

    http://www.landscapeforms.com/en-US/product/Pages/35-Chill-Lounge.aspx

    I would like to achieve something similar so we need to shrink the width of the box to about half of the size and see how else it can look more similar. I tested the tool box on this page: https://urbaneladesign.com/products_plus_bench

    Appreciate all of your help!

    Thank you!

  • Unknown's avatar
    urbanela · Member ·

    Can we also make less of a gap between the TOOLS icon pic and the tool box border?

  • Unknown's avatar
    siobhyb · Member ·

    Hi @urbanela,

    I took a look at the code you’ve added and, as a first step, please can you remove the following tags that are surrounding the HTML?

    <pre></pre>

    In addition, I noticed that you’ve added float: centre; in your custom CSS, which is invalid CSS. The value of float should be either left or right.

    Can you resolve those two things and we can then take another look?

    Thanks!

  • Unknown's avatar
    urbanela · Member ·

    Hi,

    I changed the CSS to float left but I’m not sure what you want me to remove with regards to 

    ?

Thanks,

Mel
  • Unknown's avatar
    siobhyb · Member ·

    Hi Mel,

    Firstly, navigate to the editor for your test page.

    You should find two tabs to the upper right of the editor: Text and HTML.

    Go to the HTML editor to see the code that’s been added for your page and scroll down to the HTML you’ve added:

    <pre></pre>
<div class="dims">IMAGE CODE HERE</div>
&nbsp;
<div class="tool-box">CODE FOR TOOL BOX LINKS HERE</div>

    Remove the pre and code tags before your custom HTML, as they’re causing a couple of problems.

    The next step to replicate the site you linked to is to replace CODE FOR TOOL BOX LINKS HERE with HTML that defines a list of links.

    That HTML will look a lot like this:

    <div class="tool-box">
	<ul class="tool-box-links">
		<li><a href="example.com">Example.</a></li>
		<li><a href="example.com">Example.</a></li>
	</ul>
</div>

    In the above HTML, replace Example. with the text you wish to display in your lists and example.com with the URL you wish to link to.

    Add as many link items as you wish by duplicating the examples.

    The following CSS will then style each link item:

    .tool-box-links li {
    height: 40px;
    width: 167px;
    border: 1px #666666 solid;
    margin-bottom: 5px;
    padding-left: 15px;
    cursor: pointer;
    padding-top: 8px;
    color: #666666;
}

    We’ll likely still need to make a few tweaks but give that a go and let me know when you’re ready for me to take another look. :)

  • The topic ‘Add ToolBox to Product Pages’ is closed to new replies.