Need help creating print styles for Monthly View

  • Resolved KeithAdv

    (@keithadv)


    9 years, 1 month ago

    I haven’t tried to create a print styles css sheet for a Web site yet, so bear with me, please.

    I have most of the stuff hidden that would interfere with nice printing for the monthly calendar except for one thing. When I view the print preview, each element that links to a URL displays both the element and the URL. For example:

    Children’s Choir 6:00 pm
(https://www.engagedbygrace
.org/event/childrens-choir-
2/?instance_id=7881)

    This makes all the copy run together and look terrible. All I want is the element (i.e., “Children’s Choir 6:00 pm”)

    The top-left of the calendar, where buttons list the current month along with forward and backward buttons, comes out looking like this:

    ? 2014 (HTTP://WWW.ENGAGEDBYGRACE.ORG/CHURCH-CALENDAR/ACTION~MONTH/EXACT_DATE~1412136000/REQUEST_FORMAT~HTML/)
? SEP (HTTP://WWW.ENGAGEDBYGRACE.ORG/CHURCH-CALENDAR/ACTION~MONTH/EXACT_DATE~1441080000/REQUEST_FORMAT~HTML/) ? OCTOBER 2015
NOV ? (HTTP://WWW.ENGAGEDBYGRACE.ORG/CHURCH-CALENDAR/ACTION~MONTH/EXACT_DATE~1446350400/REQUEST_FORMAT~HTML/)
2016 ? (HTTP://WWW.ENGAGEDBYGRACE.ORG/CHURCH-CALENDAR/ACTION~MONTH/EXACT_DATE~1475294400/REQUEST_FORMAT~HTML/)

    The only thing I need to show is the word “October”!

    Because I’m viewing print preview, there’s no Firebug to help me figure out which selectors to display:none.

    I would very much appreciate any help from anyone who has figured this out!

    Thank you very much.

    https://www.ads-software.com/plugins/the-events-calendar/

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

  • Hey @keithadv,

    To hide the URLs, try using the following bit of CSS:

    body a:after {
    content: none !important;
}

    As for getting the month names to display if they’re not currently, this is a bit trickier. I’m not sure sure why the output is rendering that way! Hopefully getting the link URLs hidden will help; it might reveal more clearly what elements need to have their content tweaked to get this looking better.

    — George

    Thread Starter KeithAdv

    (@keithadv)

    Brilliant, George!

    That fixed everything. And yes, after the URLs went away, I could easily tweak everything else.

    Thank you!

    I am wondering if someone could help me get a print function working for the Events Calendar here is my current CSS

    #tribe-events-content .tribe-events-calendar td, #tribe-events-content table.tribe-events-calendar {
    border: 1px solid #bbb;
    background-color: #eee;
    }
    /* Print Style Sheet */
    @media print {
    #tribe-events-content .tribe-events-calendar td, #tribe-events-content table.tribe-events-calendar {
    display: none;
    }
    .slider_wrapper2 {
    background-image: none;
    }
    .ai1ec-calendar-toolbar {
    display: none;
    }

    .ai1ec-day {
    padding: 2px;
    margin: 2px;
    }

    .ai1ec-day a {
    font-size: 10px !important;
    line-height: 10px;
    }

    .ai1ec-event-time {
    font-size: 10px !important;
    line-height: 10px;
    }

    body a:after {
    content: none !important;
    }
    }

    I need to change the side-bar header background colours within the event page. Its a green background at the moment. How do I change this?

    https://tamworthboxing.com/event/the-manor-boxing-dinner-show

    Plugin Author Brian

    (@brianjessee)

    Hi pads,

    To quote the forum guidelines:

    Posting your own topic is smiled upon.

    If you can create a new post of your own that would be appreciated ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Need help creating print styles for Monthly View’ is closed to new replies.