Learning Report #6

Media Sharing & Printing

In this learning report I discovered a way how to share my site with a widget and create a printing CSS screen that would print only what I wanted to print.

What I Learned

Trying to stay righteous, I decided to check out LDS.org and see what social sharing widget they had. I was in luck, they used a sharing widget called AddThis. I then googled AddThis and stumbled to the site AddThis.com and chose how I wanted my widget to look. They gave me the code to paste into my site and I was done!

I stumbled into a problem when I pressed the print button; it printed everything! It printed my top navigation with the list of everything, my side navigation, the AddThis widget, and my footer list. This is not what I or the user will want. I needed to find a way. I asked my father-in-law to help me with this problem. We came to the conclusion to create a CSS page for printing. After creating a printing CSS page everything worked out great! To have the AddThis widget hide in the print as well I created a div around it and had the site hidden

Explanation/Examples

Here is the CSS for my print screen and the link reference

body{
font-family: "Calibri","Sans Serif";
margin: 0;
padding: 0;
background-color: white;
}

#header{
visibility: hidden;
display: none;
}

#nav{
display: none;
visibility: hidden;
}

#centerbox{
overflow: auto;
color: white;
background-color: white;
width: 100%;
height: 100%;
min-width: 900px;
max-width: 1050px;
}

#side_menu div{
visibility: hidden;
display: none;
}

content div{
padding-left: 1.5em;
padding-top: 1em;
padding-right: 1.5em;
}

#addthis{
display: none;
visibility: hidden;
}

#content{
font-family: "Calibri","Sans Serif";
color: #000066;
background-color: white;
width: 80%;
float: left;
min-width: 900px;
max-width: 900px;
min-height: 405px;
}

#content .resume{
margin-left: -1.5em;
}

#aside{
visibility: hidden;
display: none;
}

#footer{
display: none;
visibility: hidden;
}