Print styles: how do I display "aside" widgets?

  • Matt Scheidler

    (@matt6303)


    11 years ago

    I have some important content that is being displayed in an <aside> widget.

    How can I target this in my print CSS to allow the contents of the widget to print? I can get the entire sidebar to print by targeting #secondary, but can’t seem to figure out how to target this specific widget. If someone knows what the CSS should look like that would be great.

    <aside id=”text-6″ class=”widget widget_text”>
    <h3 class=”widget-title”>Title</h3>
    <div class=”textwidget”>Content</div>
    </aside>

Viewing 5 replies - 1 through 5 (of 5 total)
  • simple1

    (@simple1)

    11 years ago

    have you tried targetting #text-6?

    WPyogi

    (@wpyogi)

    11 years ago

    This is the CSS that removes elements from print:

    .author-avatar,
	#colophon,
	#respond,
	.commentlist .comment-edit-link,
	.commentlist .reply,
	.entry-header .comments-link,
	.entry-meta .edit-link a,
	.page-link,
	.site-content nav,
	.widget-area,
	img.header-image,
	.main-navigation {
		display: none;
	}

    So perhaps something like:

    .widget-area aside#text-6 {
   display: block;
}

    It’d be easier to answer with a link to your site.

    WPyogi

    (@wpyogi)

    11 years ago

    BTW, I hope, hope, hope that you are using a child theme?

    Thread Starter Matt Scheidler

    (@matt6303)

    11 years ago

    Thanks for the replies.

    I’m having this issue on multiple sites, actually.

    All are using custom child themes based on Twenty Twelve.

    The following works fine in my print stylesheet, but of course ALL widgets print:

    #secondary {
    display: block;
    }

    That’s how I’m proceeding at present on all sites. For most client sites this is acceptable.

    For some, however, I’d like to be able to have specific widgets print rather than all of them, but the suggestion from WPyogi above does not work.

    Actually even this less-specific statement targeting the entire sidebar does not work:

    .widget-area {
    display: block;
    }

    Has anyone had firsthand success in adding specific widgets to a print stylesheet?

    WPyogi

    (@wpyogi)

    11 years ago

    As mentioned above, it would be easier to help with a link to a live site.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Print styles: how do I display "aside" widgets?’ is closed to new replies.