Jump to content
supercheaphobb

Frozen BS customer side customisation

Recommended Posts

Hi all,

  1. I can't find how to make the search box smaller, I have removed the excess text ( Use keywords to find the product you are looking for. ) but now need to make the box shorter
    Its div.panel-footer and the details are 245.167×61 - what I need to know is where is this located so I can edit it and if edited will it only apply to the search box
  2. Categories box - I want to reduce the padding between the categories. This seems to be .nav > li > padding: 10px 15px; <- but when I reduce the padding it then stuffs up the text on the nav bar
    Is this the wrong label to edit? or how do I make the spacing between the categories smaller without stuffing up another part of the site
  3. Documents Box - I am in need of the documents box to allow customers to find lost product manuals and spare parts list <- is there one that will work with Frozen BS else I guess I could put in a hyperlink to a dropbox folder
    If I have to go the route of hyperlinks, how do I duplicate the "Information Box" module but call it a "Documents Box"

Thanks Troy

 

Share this post


Link to post
Share on other sites

1) simlpe way reduce the content width.

2) Very simple limit the css changes to the cat's class only. If this is not a class on it's own just add and ID to the class and use that to limit css, stuck pm me link and do test change.

3) Use one of the many links add-on's available or simply copy existing box and rename it.

 


 

Share this post


Link to post
Share on other sites

Thanks @JcMagpie but as asked in my question

  1.  what I need to know is where is this located so I can edit it and if edited will it only apply to the search box 
  2. Not sure what to say here - using inspect element seems to show .nav > li  as the .css for categories but if you could give me the correct css name for this area I will try that
  3. Many thanks these options look promising

 

Share this post


Link to post
Share on other sites
5 minutes ago, supercheaphobb said:
  • what I need to know is where is this located so I can edit it and if edited will it only apply to the search box 
  • Not sure what to say here - using inspect element seems to show .nav > li  as the .css for categories but if you could give me the correct css name for this area I will try that
  • Many thanks these options look promising

1)

image.thumb.png.4ef03b157c54f446d7569188832867f2.png

2) Need to know which version you are using and if it's stock cat's but,

image.thumb.png.172cb4e2da8d89365c33883ad75a230b.png

If change affects more than this then you need to add ID to limit change to one section.


 

Share this post


Link to post
Share on other sites

Thanks @JcMagpie

  1. But that's content, I am referring to a box module and also height not width
    image.png.ca7d4364242ceadc443bd8eafb9e5199.png

     
  2. Version is Frozen BS - osCommerce Online Merchant v2.3.4.1 CE
    image.png.5dce4dec9ae440002784c988fcc15bef.png

    Clicking on the highlight all elements also show the below will be affected
    image.thumb.png.de20cedc288042f11627715f91dd698d.png

    Can you please explain how to add ID to limit change to one section.

Share this post


Link to post
Share on other sites

@supercheaphobb before making too many customisations, know that things are (usually) done for good reason.  In the case of the "padding" in the categories box (and elsewhere)...that reason is "tap targets" which is very important to users of small devices...


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

The answer to both you questions is the same. You are using CE Boostrap 3 , It uses stock bootstrap classes for both these box's so to change search box and cat's you will need to edit core files.

You don't have much to play with as far as box size as it's set by Bootstrap,

Both use the class "<div class="panel panel-default"> and this is set by boostrap so to make changes you will need to add ID

<div id="catsfix" class="panel panel-default"> or <div id="searchboxfix" class="panel panel-default">

You can then add css using the id and change margin and padding to some extent.

The whole point of Boostrap is these stock classes are designed to be used accross all devices sizes , I would not recomend changing these sock margins and paddings unless you have to.


 

Share this post


Link to post
Share on other sites

example, we add the id="test" to one section and change a color, you see it affects only one box and only one part of that box.

image.thumb.png.129d5c33524cddfd025af637ca2747d2.png


 

Share this post


Link to post
Share on other sites

Oh yes to answer you main question to edit class look for the template file used so for box search you need

public_html/includes/modules/boxes/templates/search.php

change <div class="panel panel-default">

to <div class="panel panel-default" id-"yourid">


 

Share this post


Link to post
Share on other sites

@JcMagpie Ok that is a very handy bit of info and something new I have just learned.

The search box gets smaller when I remove the from <br /> (line break) from "<?php echo MODULE_BOXES_SEARCH_BOX_TEXT . '<br />" in public_html/includes/modules/boxes/templates/search.php
So this issue is now resolved

image.png.c7b3d78315f692304def0229678b1572.png

I will apply your hint to categories just to reduce the padding a little, but public_html/includes/modules/boxes/templates/categories.php only deals with the heading of the categories box not the category listings

I have been unable to find the file the produces the categories list, can you please assist.

So once I find the file
I change this <ul class="nav nav-pills nav-stacked"> to <ul class="nav nav-pills nav-stacked" id-"mycat">

and the css would be

.nav > li > a #mycat
    position: relative;
    display: block;
    padding: 10px 15px;
}

image.png.8ba2670872bc96f06807328b7dfdd80d.png

Share this post


Link to post
Share on other sites
Posted (edited)
33 minutes ago, supercheaphobb said:

The search box gets smaller when I remove the from <br />

This is not recomended as It might produce unexpected results and/or errors without end tag.

The cat's I'm n0t sure is the honist answer as I have never made any changes to stock cat's but yes you need to find the file producing the html code and add the id, will be in the function or in class just have to have a poke around.

More trouble than it's worth to be honist.

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites
Posted (edited)

Ok find public_html/includes/modules/boxes/bm_categories.php

make this change to line 40,

 $OSCOM_CategoryTree->setParentGroupString('<ul class="nav nav-pills nav-stacked" id="test">', '</ul>', true);

 

Then add css to template file like so,

<style>
i#test {
    padding:20px;
}    
</style>

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites

Ok I cleaned up the line in search.php and it now reads

<div class="panel-footer"><a href="<?php echo tep_href_link('advanced_search.php') . '"><strong>' . MODULE_BOXES_SEARCH_BOX_ADVANCED_SEARCH . '</strong></a>'; ?></div>

So with out the <?php echo MODULE_BOXES_SEARCH_BOX_TEXT . '<br /> it produces the desired result

Off to look at bm_categories.php

Share this post


Link to post
Share on other sites
26 minutes ago, JcMagpie said:

Ok find public_html/includes/modules/boxes/bm_categories.php

make this change to line 40,


 $OSCOM_CategoryTree->setParentGroupString('<ul class="nav nav-pills nav-stacked" id="test">', '</ul>', true);

 

Then add css to template file like so,

<style>
i#test {
    padding:20px;
}    
</style> 

So template file you mean public_html/includes/modules/boxes/templates/categories.php ?

<div class="panel panel-default">
  <div class="panel-heading"><?php echo MODULE_BOXES_CATEGORIES_BOX_TITLE; ?></div>
  <style>
i#test {
    padding: 5px 15px;
}    
</style>
  <?php echo $category_tree; ?>
</div>

 

Share this post


Link to post
Share on other sites
13 minutes ago, supercheaphobb said:

So template file you mean public_html/includes/modules/boxes/templates/categories.php ? 

Yes 😊:thumbsup:

 

css like this,

I will get a lot of flack for this I'm sure. Best to not mix it in the html, add to start or end of file. Or if you wish put the css in your user.css and add some text to remember what it's for.

I personaly use the templete files as custom files and keep css relavent only to that add-on in that file. Other will disagree with this approach, so stick it in the user.css if you like.

<div class="panel panel-default">
  <div class="panel-heading"><?php echo MODULE_BOXES_CATEGORIES_BOX_TITLE; ?></div>
    <?php echo $category_tree; ?>
</div> 

<style>
i#test {
    padding: 5px 15px;
}    
</style>

 


 

Share this post


Link to post
Share on other sites

Finally got it to work and put it in put it in user.css now to go give it a better name

#test > li > a {
    padding: 5px 15px;
}   

Share this post


Link to post
Share on other sites
Posted (edited)

With regards to tap targets it's recommended that items are at least 48px in height and width (you'll potentially be marked down SEO/Mobile Fiendly wise if smaller).

It's ok if you have it smaller on desktop views but when you start getting to smaller device views that's when you should have it back to the original.

I would add some media queries around your CSS so it only affects larger devices, to do this amend the css you added to the following.

@media (min-width: 992px) {
  #test > li > a {
      padding: 5px 15px;
  }
}

With the above added, the padding will only reduce on displays with a minimum width of 992px which are considered Large devices by Bootstrap like desktops.

More information on breakpoints can be read here https://getbootstrap.com/docs/4.0/layout/overview/

And more information on Tap Targets and Accessibility in general can be read here https://developers.google.com/web/fundamentals/accessibility/accessible-styles

Edited by peterbuzzin

If it still don't work, hit it again!

Senior PHP Dev with 18+ years of commercial experience for hire, all requirements considered, see profile for more information.

Is your version of osC up to date? You'll find the latest osC version (the community-supported responsive version) here.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×