| Author |
 Topic  |
|
|
Sharon
VP-CART Super User
357 Posts |
 Posted - January 14 2015 : 09:39:11
|
I have written a print stylesheet so that we can easily produce PDFs of the extended product description page. I am really struggling.
There are 3 main parts of the page that I do not want to print but cannot work out how to prevent them from doing so.
This is the code from the template for one section
<div class="productoptions">
[ADD_PRODUCTFEATURES]
</div>
<div class="cb"></div>
<div class="productbuy al">
[add_quantity]
[add_orderbutton]
[add_product]
</div>
and another
<div id="productexdbottom">
<div>[add_addthis][add_polyvore]</div>
<div>[ADD_WISHLIST]</div>
<! IMPACT commented out unwanted items -->
<!-- <div>[add_question]</div> -->
<div class="productcompare">
[add_comparelinks]
</div>
[add_tabs]
</div>
Thirdly, the tell a friend form always prints on the next page.
Last but not least I have this at the start of my stylesheet but the print is really small.
body {
font-family: Georgia, serif;
font-size: 20px;
background: none;
color: black;
}
Whether I use 20px or 12pt, no difference.
I''ve searched for help with this but have been struggling for days. Any help would be appreciated. |
|
|
carfin
VP-CART Expert
United Kingdom
948 Posts |
Posted - January 14 2015 : 10:53:23
|
Hi Sharon,
you should be able to hide the class object you don''t want to print by adding them into your printstyle.css file that you created as set their display value to none eg the first part from your post
/* ======== hide product features etc ======== */
.productoptions {
display:none;
}
or your second
/* ======== hide wish list, compare etc ======== */
#productexdbottom .productcompare {
display:none;
}
Your font on the page is probably being set by the #main class and not the body tag. Look for or add in
/***** MAIN CONTENT SECTION *****/
#main {
font-size:12px;
}
We have a custom print stylesheet too, and it took a lot of trial and error to set up the way we wanted. Any problems, just ask.
Regards,
Carrol
www.deanston-electrical.co.uk
|
 |
|
|
serjtankian
VP-CART Super User
Armenia
378 Posts |
Posted - January 14 2015 : 11:39:58
|
hmm.. sounds nice article, will try this with my test store
*serj* |
|
|
|
manilow
VP-CART New User
France
134 Posts |
Posted - January 15 2015 : 03:10:26
|
Sharon,
Include the sections you don''t want to print in the following css tag:
@media print {
.productoptions, .otherclass1, #anydiv {display:none !important;}
}
In this way, the classes .productoptions and .otherclass1 and #anydiv will be displayed on screen, but not when printed.
I use shopmerge.asp to open a new window with a printable version of the product using a special template tmp_datasheet.htm. Example:
http://www.aquathermia.com/p368-filtre-cintropur-nw500.htm
Clic on the printer icon to see an example. The print and close links on top of the opened window are not printed in the same way as mentionned above.
Kind regards,
Erik
www.aquathermia.com |
|
|
|
Sharon
VP-CART Super User
357 Posts |
Posted - January 15 2015 : 05:13:28
|
Thanks Carrol (what would I do without your help?) & also Erik.
I am using a separate style sheet referenced in shoppage_header.htm
<link rel="stylesheet" type="text/css" media="print" href="templates/default-2cols/css/print.css" />
I have tried display:none for the following
.productoptions
#productexdbottom .productcompare
it never works,
yet it works fine for
#form
#header .utility-box
#content .utility-bar
table#horiz_nav
.sidebarcell
#footer
Font-size sorted by using #main, thanks Carrol.
h6 {
font-size:18px;
font-style:italic;
padding: 0px;
} Works a dream
h1 {
font-size:24px;
font-style:italic;
padding: 0px;
} Has no effect whatsoever on the product cname
This is my third day of suck it & see, trial & error, stress & frustration
Any more ideas would be most welcome |
|
|
|
Sharon
VP-CART Super User
357 Posts |
Posted - January 15 2015 : 05:57:22
|
These have all worked
/*Facebook etc buttona*/
.addthis_button .img_addthis {
display:none;
}
/*Comparison etc*/
.productcompare {
display:none;
}
/*Description & email tabs*/
.shadetabs {
display:none;
}
.productbuy {
display:none;
}
Still stumped with the Tell a friend form. |
|
|
|
carfin
VP-CART Expert
United Kingdom
948 Posts |
Posted - January 15 2015 : 08:56:01
|
You could try adding this to the print css
.tell_friend_form_container {
display:none;
}
Erik''s suggestion of putting all the classes and id''s in one statement is better than loads of separate ones.
I''ll have another think about the rest.
|
|
|
|
Sharon
VP-CART Super User
357 Posts |
Posted - January 15 2015 : 10:21:07
|
Hi Carrol,
I tried
.tell_friend_form_container & also .tell_friend_container with display:none;
Neither worked.
Everything is a bit tatty at the moment as I''m working on a trial & error basis. When it works I''ll tidy it up (honest).
Very difficult at the moment as my broadband is playing up so I have decamped to the pub but am still trying. Have made some big improvements but it''s the tell a friend that is driving me nuts.
Thanks for your help, it''s keeping me sane. |
|
|
|
Sharon
VP-CART Super User
357 Posts |
Posted - January 15 2015 : 11:19:31
|
Got it!!!
.tellfriendiframe {
display:none;
}
Did the trick
Now to sort the h1 problem....
|
|
|
|
diegomilito
VP-CART Expert
Argentina
779 Posts |
Posted - January 16 2015 : 02:07:42
|
sharon, can u show me the page you ve worked with the new styles css ? i just want to see how it looks like perhaps i am also interested in doing such thing.
diego. |
|
|
|
carfin
VP-CART Expert
United Kingdom
948 Posts |
Posted - January 16 2015 : 04:21:30
|
Hi Sharon,
I''ve had a look at the styling of cname on both display products and the extended description pages, and both have different styles. These classes are copoied from the original layout.css file
/** for display of cname on shopproductformat.asp **/
#main {
float:left;
width:540px;
font-size:12px;
margin:3px 0 0;
padding:0;
}
/** for display of cname in capital letters on shopexd.asp **/
#main h1 {
background:url(../images/main-content-title.png) no-repeat;
font:bold 14px/18px Arial, Helvetica, sans-serif;
color:#fff;
text-transform:uppercase;
margin:10px 0;
padding:11px 0 11px 14px;
}
Regards,
Carrol
www.deanston-electrical.co.uk |
|
|
|
Sharon
VP-CART Super User
357 Posts |
Posted - January 16 2015 : 08:26:30
|
Thanks Carrol
#main h1 was the one I needed.
It''s all coming together now & I''m getting pleased with it. This all so that I can put a ''PDF Page'' button for staff & customers to print a product data sheet.
==============================================================
Diego, when it''s all finished I''ll email you a link to a good example page & a copy of the css file.
|
|
|
|
carfin
VP-CART Expert
United Kingdom
948 Posts |
Posted - January 16 2015 : 09:13:27
|
Glad to hear that Sharon :)
I had to do exactly the same thing for our staff. A nightmare at the time but worth it in the end.
Cheers |
|
|
|
Sharon
VP-CART Super User
357 Posts |
Posted - January 22 2015 : 03:56:10
|
Back to this old chestnut. I have really made inroads and am quite pleased with the results.
I am using pdfcrowd''s save to pdf link which lets you add a parameter to use your site''s print stylesheet. This meant that a lot more things had to be tweaked to stop them printing & I have got them all except one.
On the extended description page the shaded area on the description tab (not the tab itself) is displaying. I am pretty sure this is image tab_content_top.gif as in tabcontent700.css in the stylesheets folder. This is the only place I can find it.
.tab_content_container {
background:url(../images/tabs/tab_content_top.gif) no-repeat top right;
margin-bottom:1em;
margin-top:0;
min-height:200px;
height:auto !important;
padding:0;
}
I have tried .tab_content_container { display:none; } & also background-image:none; - the whole product description disappears from the print.
This only prints when using the pdfcrowd link. not when PDFing in the browser print options. Yet, on the browser generated PDF there is a gap where the image would be.
tabcontent700.css also includes this & I cannot understand why there would be a @media rule for print here.
@media print {
.tabcontent {
display:block !important;
}
}
I know this is along shot but wondered if anyone else can tell what is happening here. |
|
|
|
carfin
VP-CART Expert
United Kingdom
948 Posts |
Posted - January 23 2015 : 08:13:00
|
Hi Sharon,
I''m not at my works pc so I don''t have access to the stylesheets but maybe you could try finding #producttabs or #xproductextdesc in the css files to see if there is a background colour defined there. Your tabs styling is inherited from these <div> ids I think.
Regards,
Carrol
www.deanston-electrical.co.uk |
|
|
|
carfin
VP-CART Expert
United Kingdom
948 Posts |
Posted - January 26 2015 : 09:59:53
|
You are right Sharon. The tab shading is from a background image. You cannot set this to none because of the on/off nature off tab displays. Add a colour instead eg
.tab_content_container {
background-color:#FFFFFF;
margin-bottom:1em;
margin-top:0;
min-height:200px;
height:auto !important;
padding:0;
}
This should work.
Regards,
Carrol
www.deanston-electrical.co.uk |
|
|
|
Topic |
|
All Forums
Stopping certain elements from printing
New Topic
Printer Friendly
TrustGuard - PCI Security Scanner
