Main Page CenterBox Issues

[traytray]

I hope this isn’t challenging.

The Goal:

To have two CenterBoxes on the Main Page. One for Shop Our Sale (was Specials) and one for New Arrivals (was New Products).

I want to separate the two headings, naturally. I’d like Shop Our Sale to be first (as designated in Admin), and have two rows of three images, followed by the heading New Arrivals and two rows of three images. I do not want a third heading. There is a third black heading peeking out and when it is removed, the images width will line up with the heading bar.

To be consistent with other images in Category listings, the product descriptions should be underneath the product image instead of on top.

Most important, Shop Our Sale and New Arrivals have to both remain open at the same time and always be open whenever someone goes to the Main page. If this is not possible, I would eliminate New Arrivals from the Centerbox and just have Shop Our Sale.

Finally, all of my other Category Listings have a border around the image. The border is always the same, only the location differs. The top one is for additional Shop Our Sale items and the second one is for all other Categories.

.specialsListBoxContents>a>img {
border: 3px outset #EEEEEE;
border-radius:5px;
margin-bottom: 0.75em;
box-shadow: 3px 3px 3px 3px #a1a1a1;
padding: 2em;
}

.centerBoxContentsProducts>a>img {
border: 3px outset #EEEEEE;
border-radius:5px;
margin-bottom: 0.75em;
box-shadow: 3px 3px 3px 3px #a1a1a1;
padding: 2em;
}

What would be the CenterBox that controls Shop Our Sale images and New Arrival images?


I successfully changed the names (Specials is now ‘Shop Our Sale’ and New is now ‘New Arrivals’), and now I need to adjust the placement of the black bar headings. I’ve been looking in Firebug, and the red markings represents my heading bars, but I have no clue how to move them or separate them. They are combined. If the heading was smaller it would read Shop Our Sale New Arrivals. One after the other, with a small space between the two.

includes/templates/piccadilly_posh/templates/tpl_index_default.php

echo '<div id="moduleMenu">';
while (!$show_display_nav->EOF) {
switch ($show_display_nav->fields['configuration_key']) {
case 'SHOW_PRODUCT_INFO_MAIN_FEATURED_PRODUCTS':
echo '<span class="navOne moduleSpan"><a href="javascript:void(0)" rel="featuredProducts" class="navOne moduleBox">Featured</a></span>';
break;
case 'SHOW_PRODUCT_INFO_MAIN_SPECIALS_PRODUCTS':
echo '<span class="navThree moduleSpan"><a href="javascript:void(0)" rel="specialsDefault" class="navThree moduleBox">Shop Our Sale</a></span>';
break;
case 'SHOW_PRODUCT_INFO_MAIN_NEW_PRODUCTS':
echo '<span class="navTwo moduleSpan"><a href="javascript:void(0)" rel="whatsNew" class="navTwo moduleBox">New Arrivals</a></span>';
break;
}
$show_display_nav->MoveNext();
}
//echo '<span id="navFour" class="moduleSpan"><a href="javascript:void(0)" id="navFour" rel="viewAll" class="moduleBox">All</a></span>';
echo '<br class="clearBoth" />';
echo '</div>';
// eof module navigation

$show_display_category = $db->Execute(SQL_SHOW_PRODUCT_INFO_MAIN);
while (!$show_display_category->EOF) {
?>

<?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_FEATURED_PRODUCTS') { ?>
<?php
/**
* display the Featured Products Center Box
*/
?>
<?php require($template->get_template_dir('tpl_modules_featured_products.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_featured_products.php'); ?>
<?php } ?>

<?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_SPECIALS_PRODUCTS') { ?>
<?php
/**
* display the Special Products Center Box
*/
?>
<?php require($template->get_template_dir('tpl_modules_specials_default.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_specials_default.php'); ?>
<?php } ?>

<?php if ($show_display_category->fields['configuration_key'] == 'SHOW_PRODUCT_INFO_MAIN_NEW_PRODUCTS') { ?>
<?php
/**
* display the New Products Center Box
*/
?>
<?php require($template->get_template_dir('tpl_modules_whats_new.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_whats_new.php'); ?>
<?php } ?>

I hope there is someone out there that can tackle this. Thank you.

http://designerperfumesnob.authsafe.com/

[gjh42]

Add to the bottom of your stylesheet

#moduleMenu .navTwo {float: right;}

[gjh42]

The display of centerbox contents in your template is controlled by javascript, not CSS, so you will probably need a js solution to allowing both to be open at the same time. When javascript is disabled in the browser for your site, neither of the centerboxes can open, and there is no way to see the specials or new arrivals. That is not good failsafe planning; the default should be for both/all to be open, if only one above another, and line up nicely in tabs when js is enabled.
If the particular script that controls these centerboxes does not control anything else that you want, you should be able to remove the script and leave the centerboxes controllable by CSS alone. Then they could be styled as you wish.

[traytray]

Add to the bottom of your stylesheet

#moduleMenu .navTwo {float: right;}

This adjustment moved the bar a little, so they are no longer aligned, but it didn't really accomplish anything.

I'm not really sure I understood your second post. I'm perfectly happy with just the Specials on the main page. Is there a simple way I can do that with CSS, and remove the New Arrivals bar, and that third bar, or is that JS?

Still looking for a fix for the product description to go under the image rather then on top, and which content box would I use for the border image for the specials?

Thank You.

http://designerperfumesnob.authsafe.com/

[gjh42]

This adjustment moved the bar a little, so they are no longer aligned.

"A little"? When I tested it, the heading moved all the way to the right, and that is what I see now after your adjustments. The two are still aligned (on the same line). There is no third black bar that I can see; are you talking about the outline partially beneath the two headings? That is a border for #moduleMenu.

Your solution to the two boxes will be in adjusting the javascript, and you need to ask in the Picadilly Posh template support thread. Anne is good about helping with her templates.
Once the boxes are displaying as you like, the details can be worked out. Have you looked at admin settings for the centerboxes?

[traytray]

You said:

A little"? When I tested it, the heading moved all the way to the right, and that is what I see now after your adjustments. The two are still aligned (on the same line). There is no third black bar that I can see; are you talking about the outline partially beneath the two headings? That is a border for #moduleMenu.

This is very interesting. I am looking at IE9 and Firefox and in both browsers I see two distinct black bars, one on top of the other with a third one just peeking out from under the second. The third one shows the white scallops and you can see the stitching and some of the black background.

The adjustment I referred to has the second bar more to the left by just a little. What browser do you use? How can I show you a picture of what I see?

[gjh42]

Now I'm seeing what you described (in Firefox), after refreshing the screen again. Both "tabs" are full width, Shop Our Sale above New Arrivals, with the third bar below them. That third bar is the stock centerbox heading background:

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
    background: url("../images/sidebox-bk-1.png") repeat-x scroll 0 0 transparent;
    color: #FFFFFD;
    font-size: 12px;
    font-weight: bold;
    height: 50px;
    margin: 0;
    padding: 15px 0.2em 0.5em;
}

The first two are the tab backgrounds:

.moduleBox {
    background: url("../images/sidebox-bk-1.png") repeat-x scroll 0 0 transparent;
    height: 50px;
    margin-top: -29px;
    padding-left: 5px;
    width: 637px;
}

You really just need to post in the template support thread, as Anne is the one who knows how this is supposed to work. I don't have experience with javascript.

[traytray]

I feel much relieved that we see the same thing. I submitted a post in the template support thread. Thank you!