rx-print.css

harun.bspt2014@gmail.com

I’ll build this as a serious print stylesheet for RX Theme: clean article printing, hidden UI parts, medical-content readability, page breaks, tables, code blocks, images, URLs, and WordPress-specific selectors.

Friend, create this file:

assets/css/rx-print.css

Then paste this full advanced print CSS inside it.

/*!
Theme Name: RX Theme
File: assets/css/rx-print.css
Purpose: Advanced print stylesheet for RX Theme
Author: RxHarun
Description: Clean, readable, SEO/article-friendly print layout for posts, pages, medical articles, tables, images, references, and WordPress content.
*/

/* =========================================================
   RX THEME PRINT CSS
   ========================================================= */

@media print {

  /* =========================================================
     1. Global Print Reset
     ========================================================= */

  *,
  *::before,
  *::after {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  html {
    font-size: 12pt;
    line-height: 1.5;
    background: #fff !important;
    color: #000 !important;
    overflow: visible !important;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background: #fff !important;
    color: #000 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-size: 12pt !important;
    line-height: 1.55 !important;
    overflow: visible !important;
    -webkit-print-color-adjust: economy;
    print-color-adjust: economy;
  }

  @page {
    size: A4 portrait;
    margin: 16mm 14mm 18mm 14mm;
  }

  @page :first {
    margin-top: 18mm;
  }

  /* =========================================================
     2. Main Layout Clean Print Width
     ========================================================= */

  .site,
  .rx-site,
  .site-content,
  .rx-site-content,
  .content-area,
  .rx-content-area,
  .site-main,
  .rx-site-main,
  main,
  article,
  .post,
  .page,
  .entry,
  .entry-content,
  .rx-entry-content,
  .rx-article,
  .rx-single-content {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
  }

  .container,
  .rx-container,
  .wrap,
  .wrapper,
  .rx-wrapper,
  .inner,
  .rx-inner,
  .grid,
  .rx-grid,
  .row,
  .rx-row,
  .col,
  .rx-col {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* =========================================================
     3. Hide Non-Printable UI Elements
     ========================================================= */

  header,
  .site-header,
  .rx-site-header,
  .main-header,
  .rx-main-header,
  .topbar,
  .rx-topbar,
  .navbar,
  .rx-navbar,
  nav,
  .navigation,
  .main-navigation,
  .rx-navigation,
  .menu,
  .rx-menu,
  .mobile-menu,
  .rx-mobile-menu,
  .hamburger,
  .menu-toggle,
  .search-form,
  .rx-search-form,
  .site-search,
  .rx-site-search,
  .header-search,
  .rx-header-search,
  .breadcrumb,
  .breadcrumbs,
  .rx-breadcrumbs,
  .sidebar,
  .rx-sidebar,
  aside,
  .widget-area,
  .rx-widget-area,
  .comments-area,
  .rx-comments-area,
  .comment-respond,
  .rx-comment-respond,
  .post-navigation,
  .posts-navigation,
  .pagination,
  .rx-pagination,
  .page-links,
  .rx-page-links,
  .related-posts,
  .rx-related-posts,
  .author-box,
  .rx-author-box,
  .share,
  .sharing,
  .social-share,
  .rx-social-share,
  .social-links,
  .rx-social-links,
  .newsletter,
  .rx-newsletter,
  .subscribe,
  .rx-subscribe,
  .ad,
  .ads,
  .advertisement,
  .rx-ad,
  .rx-ads,
  .rx-advertisement,
  .popup,
  .modal,
  .rx-modal,
  .cookie-banner,
  .rx-cookie-banner,
  .back-to-top,
  .rx-back-to-top,
  .scroll-top,
  .rx-scroll-top,
  iframe,
  video,
  audio,
  canvas,
  svg.icon,
  .icon,
  .rx-icon,
  .wp-block-video,
  .wp-block-audio,
  .wp-block-embed,
  .no-print,
  [data-print="false"],
  [aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
  }

  footer,
  .site-footer,
  .rx-site-footer,
  .footer-widgets,
  .rx-footer-widgets {
    display: none !important;
  }

  /* =========================================================
     4. Typography for Clean Medical Article Printing
     ========================================================= */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #000 !important;
    font-family: Georgia, "Times New Roman", Times, serif !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    margin-top: 1.2em !important;
    margin-bottom: 0.45em !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  h1,
  .entry-title,
  .rx-entry-title {
    font-size: 24pt !important;
    margin-top: 0 !important;
    margin-bottom: 0.55em !important;
    border-bottom: 1px solid #000 !important;
    padding-bottom: 0.25em !important;
  }

  h2 {
    font-size: 18pt !important;
    border-bottom: 1px solid #999 !important;
    padding-bottom: 0.15em !important;
  }

  h3 {
    font-size: 15pt !important;
  }

  h4 {
    font-size: 13pt !important;
  }

  h5,
  h6 {
    font-size: 12pt !important;
  }

  p,
  li,
  dd,
  dt,
  blockquote,
  figcaption,
  td,
  th {
    font-size: 12pt !important;
    line-height: 1.55 !important;
    color: #000 !important;
  }

  p {
    margin: 0 0 0.85em !important;
    orphans: 3;
    widows: 3;
  }

  strong,
  b {
    font-weight: 700 !important;
  }

  em,
  i {
    font-style: italic !important;
  }

  small {
    font-size: 10pt !important;
  }

  mark {
    background: transparent !important;
    color: #000 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
  }

  hr {
    border: 0 !important;
    border-top: 1px solid #999 !important;
    margin: 1.5em 0 !important;
    height: 0 !important;
  }

  /* =========================================================
     5. Article Meta
     ========================================================= */

  .entry-meta,
  .rx-entry-meta,
  .post-meta,
  .rx-post-meta,
  .byline,
  .posted-on,
  .cat-links,
  .tags-links {
    display: block !important;
    color: #333 !important;
    font-size: 10pt !important;
    line-height: 1.4 !important;
    margin: 0 0 1em !important;
  }

  .entry-meta a,
  .rx-entry-meta a,
  .post-meta a,
  .rx-post-meta a {
    color: #000 !important;
    text-decoration: none !important;
  }

  /* =========================================================
     6. Links and URL Printing
     ========================================================= */

  a,
  a:visited {
    color: #000 !important;
    text-decoration: underline !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after {
    content: "" !important;
  }

  .entry-content a[href^="http"]::after,
  .rx-entry-content a[href^="http"]::after,
  article a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    font-weight: 400;
    text-decoration: none;
    word-break: break-all;
  }

  .entry-title a::after,
  .rx-entry-title a::after,
  h1 a::after,
  h2 a::after,
  h3 a::after,
  .wp-block-button a::after,
  .button::after,
  .btn::after {
    content: "" !important;
  }

  /* =========================================================
     7. Lists
     ========================================================= */

  ul,
  ol {
    margin: 0 0 1em 1.4em !important;
    padding: 0 !important;
  }

  li {
    margin: 0 0 0.35em !important;
    padding: 0 !important;
  }

  ul ul,
  ol ol,
  ul ol,
  ol ul {
    margin-top: 0.35em !important;
    margin-bottom: 0.35em !important;
  }

  dl {
    margin: 0 0 1em !important;
  }

  dt {
    font-weight: 700 !important;
    margin-top: 0.6em !important;
  }

  dd {
    margin: 0 0 0.5em 1.2em !important;
  }

  /* =========================================================
     8. Tables
     ========================================================= */

  table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 1em 0 !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  thead {
    display: table-header-group !important;
  }

  tfoot {
    display: table-footer-group !important;
  }

  tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  th,
  td {
    border: 1px solid #666 !important;
    padding: 6pt 7pt !important;
    vertical-align: top !important;
    text-align: left !important;
    color: #000 !important;
  }

  th {
    font-weight: 700 !important;
    background: #eee !important;
  }

  caption {
    caption-side: top !important;
    text-align: left !important;
    font-weight: 700 !important;
    margin-bottom: 0.4em !important;
    color: #000 !important;
  }

  .wp-block-table,
  .rx-table-wrap,
  .table-responsive {
    overflow: visible !important;
    display: block !important;
    width: 100% !important;
  }

  .wp-block-table table {
    width: 100% !important;
  }

  /* =========================================================
     9. Images and Figures
     ========================================================= */

  img,
  picture,
  figure {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0.75em auto !important;
    border: 0 !important;
  }

  figure {
    margin: 1em 0 !important;
    max-width: 100% !important;
  }

  figcaption,
  .wp-caption-text,
  .gallery-caption {
    color: #333 !important;
    font-size: 10pt !important;
    line-height: 1.4 !important;
    text-align: center !important;
    margin-top: 0.35em !important;
  }

  .alignleft,
  .alignright,
  .aligncenter,
  .alignwide,
  .alignfull {
    float: none !important;
    display: block !important;
    max-width: 100% !important;
    margin: 1em auto !important;
  }

  .wp-block-image,
  .wp-block-gallery,
  .gallery {
    display: block !important;
    width: 100% !important;
  }

  .gallery-item {
    display: block !important;
    width: 100% !important;
    margin: 0 0 1em !important;
  }

  /* =========================================================
     10. Blockquotes, Pullquotes, Notes
     ========================================================= */

  blockquote,
  .wp-block-quote,
  .wp-block-pullquote,
  .rx-note,
  .rx-alert,
  .rx-box,
  .rx-medical-note,
  .rx-clinical-note,
  .rx-warning,
  .rx-info {
    border: 1px solid #999 !important;
    border-left: 4px solid #000 !important;
    padding: 0.75em 1em !important;
    margin: 1em 0 !important;
    color: #000 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  blockquote p:last-child {
    margin-bottom: 0 !important;
  }

  cite {
    display: block !important;
    font-size: 10pt !important;
    margin-top: 0.5em !important;
    color: #333 !important;
  }

  /* =========================================================
     11. Code Blocks
     ========================================================= */

  pre,
  code,
  kbd,
  samp {
    font-family: "Courier New", Courier, monospace !important;
    color: #000 !important;
    background: transparent !important;
  }

  pre {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow: visible !important;
    border: 1px solid #999 !important;
    padding: 0.75em !important;
    margin: 1em 0 !important;
    font-size: 10pt !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  code {
    font-size: 10pt !important;
    border: 1px solid #ccc !important;
    padding: 0.05em 0.25em !important;
  }

  pre code {
    border: 0 !important;
    padding: 0 !important;
  }

  /* =========================================================
     12. WordPress Blocks
     ========================================================= */

  .wp-block-cover,
  .wp-block-media-text,
  .wp-block-columns,
  .wp-block-column,
  .wp-block-group,
  .wp-block-buttons,
  .wp-block-button,
  .wp-block-separator,
  .wp-block-spacer {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .wp-block-cover {
    padding: 0 !important;
  }

  .wp-block-cover__inner-container {
    color: #000 !important;
    width: 100% !important;
  }

  .wp-block-button__link,
  .button,
  .btn,
  input[type="button"],
  input[type="submit"] {
    color: #000 !important;
    background: transparent !important;
    border: 1px solid #000 !important;
    padding: 0.35em 0.6em !important;
    text-decoration: none !important;
  }

  .wp-block-spacer {
    height: 0 !important;
  }

  .has-background,
  .has-text-color,
  .has-link-color {
    background: transparent !important;
    color: #000 !important;
  }

  /* =========================================================
     13. Forms
     ========================================================= */

  form,
  input,
  textarea,
  select,
  button {
    font-family: Georgia, "Times New Roman", Times, serif !important;
    color: #000 !important;
  }

  input,
  textarea,
  select {
    border: 1px solid #777 !important;
    background: transparent !important;
  }

  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    display: none !important;
  }

  label {
    font-weight: 700 !important;
  }

  /* =========================================================
     14. Medical Article Special Sections
     ========================================================= */

  .rx-definition,
  .rx-causes,
  .rx-symptoms,
  .rx-diagnosis,
  .rx-treatment,
  .rx-prevention,
  .rx-faq,
  .rx-references,
  .rx-summary,
  .rx-key-points,
  .rx-disclaimer,
  .medical-disclaimer,
  .rx-medical-disclaimer {
    display: block !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  .rx-key-points,
  .rx-summary,
  .rx-disclaimer,
  .medical-disclaimer,
  .rx-medical-disclaimer {
    border: 1px solid #000 !important;
    padding: 0.8em 1em !important;
    margin: 1em 0 !important;
  }

  .rx-disclaimer,
  .medical-disclaimer,
  .rx-medical-disclaimer {
    font-size: 10pt !important;
    line-height: 1.45 !important;
  }

  .rx-faq-item,
  .schema-faq-section,
  .wp-block-rank-math-faq-block,
  .yoast-faq,
  .rank-math-question,
  .rank-math-answer {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .rank-math-question,
  .schema-faq-question,
  .rx-faq-question {
    font-weight: 700 !important;
    margin-top: 1em !important;
  }

  .rank-math-answer,
  .schema-faq-answer,
  .rx-faq-answer {
    margin-bottom: 1em !important;
  }

  /* =========================================================
     15. References and Citations
     ========================================================= */

  sup,
  sub {
    font-size: 8pt !important;
    line-height: 0 !important;
  }

  .references,
  .rx-references,
  .citation,
  .rx-citation,
  .footnotes,
  .wp-block-footnotes {
    font-size: 10pt !important;
    line-height: 1.45 !important;
  }

  .references li,
  .rx-references li,
  .footnotes li,
  .wp-block-footnotes li {
    margin-bottom: 0.45em !important;
    word-break: break-word !important;
  }

  /* =========================================================
     16. Page Break Control
     ========================================================= */

  h1,
  h2,
  h3,
  h4,
  img,
  figure,
  table,
  pre,
  blockquote,
  .rx-box,
  .rx-note,
  .rx-alert,
  .rx-key-points,
  .rx-summary {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  h1,
  h2,
  h3 {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  p,
  blockquote,
  ul,
  ol,
  dl {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .page-break,
  .rx-page-break,
  [data-page-break="before"] {
    page-break-before: always !important;
    break-before: page !important;
  }

  .page-break-after,
  .rx-page-break-after,
  [data-page-break="after"] {
    page-break-after: always !important;
    break-after: page !important;
  }

  .avoid-break,
  .rx-avoid-break,
  [data-avoid-break="true"] {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* =========================================================
     17. Print Header Info from Article
     ========================================================= */

  .entry-title::after,
  .rx-entry-title::after {
    content: "";
    display: block;
    margin-top: 0.25em;
  }

  .rx-print-url::before {
    content: "Source: ";
    font-weight: 700;
  }

  .rx-print-url {
    display: block !important;
    font-size: 9pt !important;
    margin: 0.5em 0 1em !important;
    color: #333 !important;
    word-break: break-all !important;
  }

  .rx-print-only,
  .print-only,
  [data-print="true"] {
    display: block !important;
    visibility: visible !important;
  }

  /* =========================================================
     18. WooCommerce / Shop Hide for Print
     ========================================================= */

  .woocommerce-breadcrumb,
  .woocommerce-result-count,
  .woocommerce-ordering,
  .woocommerce-product-gallery,
  .woocommerce-tabs,
  .related.products,
  .upsells.products,
  .cross-sells,
  .cart,
  .single_add_to_cart_button,
  .add_to_cart_button,
  .product_meta,
  .storefront-sorting {
    display: none !important;
  }

  .woocommerce div.product,
  .woocommerce-page div.product {
    width: 100% !important;
  }

  .woocommerce div.product .summary {
    float: none !important;
    width: 100% !important;
  }

  /* =========================================================
     19. Elementor / Page Builder Cleanup
     ========================================================= */

  .elementor-location-header,
  .elementor-location-footer,
  .elementor-nav-menu,
  .elementor-menu-toggle,
  .elementor-widget-social-icons,
  .elementor-widget-video,
  .elementor-widget-google_maps,
  .elementor-widget-shortcode,
  .elementor-button-wrapper,
  .elementor-button {
    display: none !important;
  }

  .elementor,
  .elementor-section,
  .elementor-container,
  .elementor-column,
  .elementor-widget-wrap,
  .elementor-widget-container {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
  }

  /* =========================================================
     20. Performance-Safe Print Utility Classes
     ========================================================= */

  .rx-print-hide {
    display: none !important;
  }

  .rx-print-show {
    display: block !important;
  }

  .rx-print-inline {
    display: inline !important;
  }

  .rx-print-inline-block {
    display: inline-block !important;
  }

  .rx-print-center {
    text-align: center !important;
  }

  .rx-print-left {
    text-align: left !important;
  }

  .rx-print-right {
    text-align: right !important;
  }

  .rx-print-small {
    font-size: 10pt !important;
  }

  .rx-print-large {
    font-size: 14pt !important;
  }

  .rx-print-border {
    border: 1px solid #000 !important;
  }

  .rx-print-no-border {
    border: 0 !important;
  }

  .rx-print-mt-0 {
    margin-top: 0 !important;
  }

  .rx-print-mb-0 {
    margin-bottom: 0 !important;
  }

  .rx-print-page-break {
    page-break-before: always !important;
    break-before: page !important;
  }

  .rx-print-avoid-break {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* =========================================================
     21. Accessibility and Readability
     ========================================================= */

  abbr[title]::after {
    content: " (" attr(title) ")";
    font-size: 9pt;
  }

  acronym[title]::after {
    content: " (" attr(title) ")";
    font-size: 9pt;
  }

  .screen-reader-text,
  .sr-only {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  /* =========================================================
     22. Remove Sticky, Fixed, Overlay Problems
     ========================================================= */

  [style*="position: fixed"],
  [style*="position:fixed"],
  [style*="position: sticky"],
  [style*="position:sticky"],
  .sticky,
  .is-sticky,
  .fixed,
  .rx-sticky,
  .rx-fixed,
  .sticky-header,
  .rx-sticky-header {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
  }

  /* =========================================================
     23. Avoid Empty Print Spaces
     ========================================================= */

  .empty,
  .rx-empty,
  .hidden,
  [hidden] {
    display: none !important;
  }

  .lazy,
  .lazyload,
  .lazyloaded {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* =========================================================
     24. Print-Friendly Article End
     ========================================================= */

  .entry-content::after,
  .rx-entry-content::after,
  article::after {
    content: "Printed from RX Theme";
    display: block;
    margin-top: 2em;
    padding-top: 0.8em;
    border-top: 1px solid #999;
    font-size: 9pt;
    color: #555;
    text-align: center;
  }
}

/* =========================================================
   END RX PRINT CSS
   ========================================================= */

Then enqueue it in your theme. Add this in your enqueue file, for example:

wp_enqueue_style(
    'rx-print',
    get_template_directory_uri() . '/assets/css/rx-print.css',
    array(),
    wp_get_theme()->get( 'Version' ),
    'print'
);

Best file place:

rx-theme/
└── assets/
    └── css/
        └── rx-print.css

This file should stay separate from your main CSS because print CSS is loaded only when printing, so it keeps RX Theme faster for normal visitors.

Leave a Reply

Your email address will not be published. Required fields are marked *