border around "we also recommend"

Hi

Recently installed the cross-sell mod, and my "we also recommend" text is white text on white background.

I'd like to have the border around the "we also recommend" that I have around the product name (higher up the page)

I've used developers tools, as well as Firebug, but getting my self veeeeeeeery confused as to which page to edit.... :frusty:

Could someone direct me to which style sheet to use & (gently tell me) how to modify it so that the "we also recommend.." text is surrounded by the border?

here is a link to one of the pages - the cross-sell product images are right at the bottom of the page...

http://partykitnkaboodle.com.au/index.php?main_page=product_info&cPath=21_32&products_id=30

thank you:smile:

S

#crossSell
.centerBoxWrapper
.centerBoxHeading

These are the different properties applied to that text.

div .side_left_2
div .side_right_2
div .side_top_2
div .side_bot_2
div .left_top_2
div .right_top_2
div .left_bot_2
div .right_bot_2

These are the properties applied to the title of the heading. (if I'm understanding correctly, you want the orange bg box)

You're looking at replacing wherever WE ALSO RECOMMEND is with this:

<div class="side_left_2">
<div class="side_right_2">
<div class="side_top_2">
<div class="side_bot_2">
<div class="left_top_2">
<div class="right_top_2">
<div class="left_bot_2">
<div class="right_bot_2">
<h1 id="productName" class="productGeneral">Boisterous Barnyard Themed Party for 8</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

This might not be the best implementation, humbly speaking, I'd make the thing a sliding door (left side of the button, and right edge) so that it's only two images, and can adjust to width (only.) /how-to-make-########-buttons-with-css.html

-Tim

Hi...thanks for the reply

I edited my tpl_modules_xsell_products.php (was that the right one to edit?) as below:

?>

<!-- bof: tpl_modules_xsell_products --> <div class="side_left_2"> <div class="side_right_2"> <div class="side_top_2"> <div class="side_bot_2"> <div class="left_top_2"> <div class="right_top_2"> <div class="left_bot_2"> <div class="right_bot_2"> <div class="centerBoxWrapper" id="crossSell"> <h2 class="centerBoxHeading"><?php echo TEXT_XSELL_PRODUCTS; ?></h2> </div> </div> </div> </div> </div> </div> </div> </div> <?php /** * require the list_box_content template to display the cross-sell info. This info was prepared in modules/xsell_products.php */ require($template->get_template_dir('tpl_columnar_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_display.php'); ?> </div> <!-- eof: tpl_modules_xsell_products --> <?php } ?>

however, now the background surrounding the images is orange as well :huh:

Um - I'm not sure what you meant by....

This might not be the best implementation, humbly speaking, I'd make the thing a sliding door (left side of the button, and right edge) so that it's only two images, and can adjust to width (only.)

S

Google "sliding door method" for the standard tutorial on this common way of making expandable boxes.

Morning (well it's morning here :smile:) gjh42 & thank you for your speeeeeeeeeedy reply

I am Googling "sliding door method" as we speak....
(another steep learning curve for me ahead:D...I know pretty well less than nothing about CSS)

Could you please confirm that I'm editing the correct style sheet ?
(tpl_modules_xsell_products.php)

and why would I be getting the colour background behind the images area?

Thank you thank you thank you & have a great day

S

All stylesheets will be in /includes/templates/your_template/css/.

You can edit the main stylesheet.css, or if there is a stylesheet for the mod, try editing that.

The PHP files can be edited if you need to change something about the function that the stylesheet can't affect.

The orange bg behind the images (and the light orange stripe down the left) is because you have a div (.side_left_2) that starts before the box wrapper div. You need to relocate the

<div class="centerBoxWrapper" id="crossSell">

above

<div class="side_left_2"> <div class="side_right_2"> <div class="side_top_2"> <div class="side_bot_2"> <div class="left_top_2"> <div class="right_top_2"> <div class="left_bot_2"> <div class="right_bot_2">

Better, you can replicate the header styling using the sliding door method with only the original

<h2 class="centerBoxHeading"><?php echo TEXT_XSELL_PRODUCTS; ?></h2> plus a wrapper div: ```php <!-- bof: tpl_modules_xsell_products --> <div class="centerBoxWrapper" id="crossSell"> <div class="centerBoxHeadingWrapper> <h2 class="centerBoxHeading"><?php echo TEXT_XSELL_PRODUCTS; ?></h2> </div> <?php /** * require the list_box_content template to display the cross-sell info. This info was prepared in modules/xsell_products.php */ require($template->get_template_dir('tpl_columnar_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_display.php'); ?> </div> <!-- eof: tpl_modules_xsell_products --> ```

ooooooooooh dear! HELP

I tried to amend ..... um, all I did was play with tpl_modules_xsell_products.php. I'm sure i didn't touch any other file

didnt work.....now have lost half of my top banner :yuck: at the top of my site

I uploaded the back up file for tpl_modules_xsell_products.php

but my site is still 1/2 broken....

could you please direct me as to how to fix this?
I really have no idea how I managed this?

Starting to panic........

S

Select the heading area to see your heading text.

Your stylesheet_main.css has

h2.centerBoxHeading {font-size:12px; line-height:14px; color:#FFFFFF; padding:13px 0 12px 14px; text-transform:uppercase; font-weight:bold; margin:0;}

which specifies white text without specifying a background-color or -image.
Add

background-color: #ffaaaa;

to get a color (adjust to taste).
Then you can work on the sliding doors for the nice round-corner box.

Hi Glenn

I am soo soo sorry - you are talking to a total doofus when it comes to this bit of the great ZenCart experience....

Um I did a win merge comparison of the style sheet, and it's identical to that of a backup I did a week or so ago.

If there is a problem with the background colour, should they not be different?

My concern is, now when you click on my site, and any page therein, you get a momentary "flash" of how it really looks (ie banner - and I should've mentioned also all the formatting of all the boxes, etc) and then it reverts to it's present state. This momentary "flash" seems like a very strange thing to happnen?

As I said earlier, I really don't know what I've done to make it so :cry:

I do really appreciate your time & help, but I'm afraid that I don't understand (but I really want to)

S

You have a bunch of stylesheets - stylesheet_main.css is the one with that information. Have you checked all of them?

I haven't been able to see any "momentary flash" of something different (and I have an old computer, though I do have a DSL connection).

Whatever the other conditions, try editing stylesheet_main.css and change the h2.centerBoxHeading
to include
background-color: #ff8811;```
h2.centerBoxHeading {font-size:12px; line-height:14px; color:#FFFFFF; background-color: #ff8811; padding:13px 0 12px 14px; text-transform:uppercase; font-weight:bold; margin:0;}

Wow Glenn thank you so much - that worked - you are a lifesaver...

I can breathe again

I seriously don't understand why that file changed like that...I really didn't touch that one at all.

Now I have to get some courage to fix the "we also recommend" txt & add that darn border - revisiting your kind instructions --- although, to be honest, after what's happened this morning, I'd be even content to change the white text of "we also recommend" to just black text (yes, I'm a scaredy cat, especially today....but of course - not quite sure where to alter that either :wacko:

But hey - thank you so very much again - you are very very knowledgeable :clap:

S

That line specifies a lot of characteristics of that heading; you can change any of the properties shown or add new ones.

sorry, by ""that line" - are referring to the line in your post regarding the h2.centerBoxHeading?

again apologize for my silly questions. (I am learning tho)

I'm still trying to understand why the inclusion of background-color: #ff8811 reinstated the rest of my banner & the all the formatting .... as in "what information is looking at what"?

S

The heading was always there, but in white on white it was not possible to detect many of its characteristics. Giving it an explicit background-color shows the dimensions of the heading and makes the text clearly visible.

Yes, the h2.centerBoxHeading {... in stylesheet_main.css is the line I was referring to.

A PHP or HTML file can have HTML elements like <h1> or <div> with class or id tags. When those tags are given properties in a stylesheet, the user's browser will use that property information to control the way the output is displayed on their computer. This is a grossly oversimplified outline - read more at https://www.w3schools.com to learn how and why CSS works.

Over simplified is good for me :)....I'm sort of getting the gist of it!!
Slowly making sense of it all...

I'll visit the site you suggested & try to learn more....

Many thanks & I really appreciate your time:hug:

S