Results 1 to 2 of 2
  1. #1
    Join Date
    Sep 2008
    Location
    DownUnder, overlooking South Pole.
    Posts
    976
    Plugin Contributions
    6

    Default How to make a banner fit into a sidebox at varying widths.

    Not a question but a solution.

    I have a fluid responsive site, where the widths of my side columns are set as fluid percentages and thus flex at varying screen widths. I received a banner from a sponsor/advertiser that was of fixed dimensions and I needed a way to fit the image wholly within the sidebox at varying screen widths, so that all adjoining sideboxes would line up fully justified rather than raggedly stepped. The sidebox used was the banner box.

    In tpl_banner_box.php
    changed
    Code:
      if ($banner = zen_banner_exists('dynamic', $banner_box_group)) {
       $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent centeredContent">';
        $content .= zen_display_banner('static', $banner);
       $content .= '</div>';
    to this
    Code:
      if ($banner = zen_banner_exists('dynamic', $banner_box_group)) {
       $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent centeredContent"><div class="mySideboxBanner">';
         $content .= zen_display_banner('static', $banner);
       $content .= '</div></div>';

    And in stylesheet.css added the following somewhere amongst the #banners:

    Code:
    .mySideboxBanner img { /* tpl_banner_box.php */
    	width:100%;
    	height:auto;
    }
    And it works.


    I did something similar with BannerFour in tpl_main_page, where I wanted a wide banner to fit into the center column (also set as fluid percentages) at smaller widths, by changing
    Code:
      if (SHOW_BANNERS_GROUP_SET4 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET4)) {
        if ($banner->RecordCount() > 0) {
    ?>
    <div id="bannerFour" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
    to
    Code:
      if (SHOW_BANNERS_GROUP_SET4 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET4)) {
        if ($banner->RecordCount() > 0) {
    ?>
    	<div class="banners">
    	  <div id="bannerFour"><?php echo zen_display_banner('static', $banner); ?></div>
    	</div>
    And adding the following somewhere amongst the #banners in stylesheet.css:

    Code:
    .banners {
    	clear:both; /* to avoid a button */
    	width:100%; /* sets width to equal centre column width */
    	height:auto;
    	margin:0em auto; 
    	text-align:center; /* recovered from #banners */
    	font-size:0.84em; /* recovered from #banners */
    }
    
    #bannerFour img { /* tpl_main_page */
    	max-width:100%; /* will not increase the size of a banner, only decrease it to fit*/
    	height:auto; /* needed to maintain image proportions */
    }
    and deleting various #banners from elsewhere in stylesheet.css.

    And this works too.

    Hope this helps.

  2. #2
    Join Date
    Sep 2006
    Location
    Brooklyn, New York
    Posts
    35
    Plugin Contributions
    0

    Default Re: How to make a banner fit into a sidebox at varying widths.

    Great No questions just putting the location of the file for my future reference

    YourSite/includes/templates/my_custom_template_foldername/sideboxes

 

 

Similar Threads

  1. How do I slice the banner to fit all screen resolutions?
    By humbll in forum Templates, Stylesheets, Page Layout
    Replies: 18
    Last Post: 19 Jan 2011, 09:08 PM
  2. How to make the outside boxes wider so sideboxes can fit?
    By ousooners in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 19 Aug 2009, 12:43 AM
  3. can you make header and page different widths?
    By 1kell in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 18 Nov 2008, 12:16 PM
  4. Rearranging the Sidebox Banner to fit inside the main page.
    By inoprints in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 17 Sep 2007, 02:26 AM
  5. How do I make this fit?
    By Anir24 in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 12 Aug 2007, 10:21 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