PVII Support Forums + General Web Design, CSS, and Dreamweaver Discussions

PVII Forums » PVII Product Support

How to Set Up "print.css" in LBM

(18 posts) (2 voices)

Started 3 weeks ago by wcamp
Latest reply from Sinclair

wcamp

offline
Member

Hello:

I've completed a series of pages for a new site using Layout Builder Magic. I now need to create a style sheet for their printing.

The LBM pages are set up at 25% for the left column and 75% for the right column. Nothing in the left column is to be printed.

My attempts to eliminate the entire left column haven't been successful. I don't know how to proceed.

Assuming that it's possible, how can I set the print.css declarations to make everything except that left column to fill the full width of every page?

Here are the URLs for the page and the print.css sheet:

https://www.warrencampdesign.com/heartyBoys/parables/parable.4d.midnightFriendPersistentWidow.html

https://www.warrencampdesign.com/heartyBoys/parables/p7lbm/parablesPrint.css

Many thanks in advance.

Warren
_______

Posted 3 weeks ago
Sinclair

offline
Member

This may be a starting point for you, keep things simple, remove your rules from the print stylesheet and try these....

.lbm-column.width-25, .lbm-video-wrapper, img, .img_centeredBox {
display: none;
}

.lbm-column.width-75 {
width:auto;
}

Maybe that'll get you going

HTH

Posted 3 weeks ago
wcamp

offline
Member

YTH. That's was what I needed to "get me going"! Thank you very much. I'm happy to now see what's needed to get my changes to render.

Two follow-up questions, please.

1. At the top of the printed page is an empty area above "par•a•ble [noun] . . ." In that space, I'd like the image that belongs there to be displayed.

Here's that code: . . .
<div class="lbm-column width-75">
<div class="centered"> <img src="images/parablesTitle.jpg" width="406" height="43" class="scalable-rounded shadowed centered" alt="Opening page of Warren Camp's 'Parables of Jesus' Bible-study website"> <br>
<br>
<p class="arial">par•a•ble [noun] a simple story

Can an image appear if I've already ruled that "img" is NOT displayed?

I attempted this declaration for "parablesTitle.jpg" but it doesn't work:

img_parablesTitle.jpg {
display: contents;
}

2. There's a large empty space after the second paragraph and the top of my ".indented" tag that starts with
Passion and Persistence. In the "print.css" style sheet, I've removed the displaying of the video container tag titled ".centeredMax500" but the space remains. What do I need to do to eliminate that space?

I hope I've explained both inquiries clearly.

Thanks for helping me with this.

Warren
______

Posted 2 weeks ago
Sinclair

offline
Member

In a hurry but....

1: Apply a class of showit to the img tag in addition to the other classes already there. Then in your stylesheet, remove what you attempted and in it's place, try this....

img.showit {
display: block;
}

Just use the css I give you for now, remove anything you've added, it's easier to debug, if still needing something doing, if no-one else chimes in, I'll look again tomorrow when I have more time.

HTH

Posted 2 weeks ago
wcamp

offline
Member

That works well and the page looks good with that image at its top. Thank you.

I've removed my recent entries on the style sheet. Sorry if you didn't want me to proceed after getting your last post. I didn't realize that you were suggesting that I wait.

I'll not do more on that style sheet until I hear from you or others.

Warren
_______

Posted 2 weeks ago
Sinclair

offline
Member

It makes things easier to debug by not having too much to sift through, it's not just the print stylesheet that affects things but all of your stylesheets that have a bearing, so, the less rules to look at the 'easier' it is.

Just a thought, for those printing, they probably don't need to waste ink on the shadows, you could add this to the print stylesheet......

* {-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}

If you don't want the videos caption printed, apply a class of noprint to it, then in the print stylesheet, add this......

.noprint {display:none;}

You could use that class on other elements as you see fit.

HTH

Posted 2 weeks ago
wcamp

offline
Member

Good ideas, Sinclair! I've used both. Thank you for each and your other explanation.

I've since modified the sizes of the header tags and <p> tag. Lemmeeeeno if they were made correctly. The printing look as intended.

Currently, there are two larger-than-preferred gaps on the first page: (1) beneath the "img.showIt" title image atop the page and (2) the area I described above in item "2". Is there a way to eliminate/reduce those empty spaces when printing?

Might there be something else you'd suggest that I modify on the .print.css" page?

Wondering Warren

Posted 2 weeks ago
Sinclair

offline
Member

Some of the issues may be caused by this rule (which is malformed).......

tml, body, div, h1, h2, h3, h4, h5, p, a, img, ul, li, {
margin: 0;
padding: 0;
border: 0;
}

That should be (no comma after li).......

tml, body, div, h1, h2, h3, h4, h5, p, a, img, ul, li {
margin: 0;
padding: 0;
border: 0;
}

I'd then check things out, then, if you really want to zero the margins on all these elements, you may get more joy by making the margin declaration !important like so.....

margin: 0 !important;

I'd do these steps first, checking after each step/combinations of steps.

Some spaces are caused by <br> elements, somerimes doubled up, in those cases, select one of the <br> elements, apply a class of nullit and add this rule (one can't do a display:none; on those <br>'s)....

br.nullit {
content: "" !important;
display: block !important;
margin: 0 !important;
}

That might help you along.

Posted 2 weeks ago
wcamp

offline
Member

Thanks, Sinclair, for educating me on these three "tricks of the trade."

I first corrected the initial entry on "print.css." I removed the unwanted dangling comma. As a result, the space between paragraphs (my "item 2" above) was reduced as desired.

Regarding "zeroing the margins of tags," I don't see a need to do that so I didn't work on that. (Do you see a need?)

To reduce the large space beneath the top image that has two <br> elements beneath it, I did as you suggested and that large space was reduced appreciably.

I've taken screenshots of your suggestions and will keep them handy for future referencing.

Many thanks for your continued support, Sinclair.

Warren
_______

Posted 2 weeks ago
Sinclair

offline
Member

It doesn't look quite right to me, things don't quite 'flow', paragraphs not enough separation, still gaps where I think you wanted them further reduced, not qqite like you'd hope for, you could try these to replace all of yours.....

body, p, p.arial {font-size: 100% !important;} /* Change to, say, 95%, ALL your text will adjust relatively */

h1 {font-size: 140% !important;}
h2 {font-size: 135% !important;}
h3 {font-size: 130% !important;}
h4 {font-size: 125% !important;}

h1,h2,h3,h4 {font-weight:bold !important}

div {margin-top:0! important; margin-bottom:0 !important; padding:0 !important}

* {-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}

br {
content: "" !important;
display: block !important;
margin: 0 !important;
}

.lbm-column.width-25, .lbm-video-wrapper, img, .img_centeredBox {
display: none;
}

.lbm-column.width-75 {
width: auto;
}

img.showIt {
display: block;
}

.noPrint {
display: none;
}

a {color: #000;} /* remove this whole line if you'd like */

Now, no need to apply the nullit class to <br> elements, this'll happen automagically, note, there's a couple of comments in the css you may want to read.

I think it now has a better 'flow' and looks better all round but make a copy of your previous just in case you prefer it.

HTH

Posted 2 weeks ago
wcamp

offline
Member

Many thanks, Sinclair! Your redo of "print.css" works very well, in my opinion. I've used all of your suggested rules.

I've done some further tweaking that I hope gains your approval. First, I modified the values on the <h> tags' font size.

I also put left and right padding to the page, as well as to the shaded text container called "centeredPoem."

I've assigned this updated "print.css" sheet to a different page on this new site that I'd like you to check. Do my changes meet your approval?

https://www.warrencampdesign.com/heartyBoys/parables/parable.1a.seedAndSoil.html

Warren
_______

Posted 2 weeks ago
Sinclair

offline
Member

Looks prerty good to me :)

Posted 1 week ago
wcamp

offline
Member

I thank you very much, Sinclair, for helping create this straightforward "print.css" style sheet. You've been extremely helpful.

Sincerely,

Warren
_______

Posted 1 week ago
wcamp

offline
Member

Sinclair, hello:

I realized that my Landing page differs from the other "parables" pages in the directory: It's a three-column LBM setup while the remaining pages are all two-column LBM pages.

I don't know how to proceed for that Landing page to be printed. Do I create a different "print.css" sheet for the Landing page? If so, how exactly do I cite the center column as appearing full width without the left and right columns being printed?

Please advise me of my best approach to take. Thank you.

https://www.warrencampdesign.com/heartyBoys/parables/index.html

Warren
_______

Posted 1 week ago
Sinclair

offline
Member

Attach the stylesheet to the page and lets see where things are

Posted 1 week ago
Sinclair

offline
Member

Oh, sorry, I see it is attached to the page.

This rule.....

.lbm-column.width-75 {
width: auto;
padding-left: 20px !important;
padding-right: 20px !important;
}

Change to.....

.lbm-column.width-75, .lbm-column.width-50 {
width: auto;
padding-left: 20px !important;
padding-right: 20px !important;
}

HTH

Posted 1 week ago
wcamp

offline
Member

I see. So, instead of creating a different style sheet for the two layouts, I add to the universal style sheet the rules for both full-width column setups. Each web page prints whichever column layout appears on that page.

Thank you, Sinclair, for your prompt and very helpful e-reply

I continue to learn from you.

Warren
_______

Posted 1 week ago
Sinclair

offline
Member

Well, either approach would be ok but there's very little difference in the pages and in this case adding the .lbm-column.width-50 to go width:auto; too doesn't affect things adversely for either page.

If the page was totally different, then probably a new print stylesheet would be prudent.

HTH

Posted 1 week ago

PVII Forums » PVII Product Support

RSS feed for this topic

Reply

You must log in to post.

PVII Forums

How to Set Up "print.css" in LBM

Reply

CSS Affinity Boardroom Theme

Image Gallery Magic 2