WordPress.org

Ready to get started?Download WordPress

Forums

My Calendar
Calendar not displaying right in page (4 posts)

  1. pgiovas
    Member
    Posted 1 year ago #

    I put the code on HTML in my page, but is not displaying right. I want the month to be displayed in the page as it displays in the widget.

    You can check it out here: http://clinicacrisalida.com/?page_id=87

    http://wordpress.org/extend/plugins/my-calendar/

  2. Joe Dolson
    Member
    Plugin Author

    Posted 1 year ago #

    Your theme seems to be applying some odd styling to tables that isn't being overridden. Add this to your My Calendar stylesheet:

    .entry-content .mc-main { width: 100%; height: auto; }

    That should work for you.

  3. pgiovas
    Member
    Posted 1 year ago #

    It doesn't work, I added it at the very beggining and still shows the same way. Here is the code for the My Calendar stylesheet:

    .entry-content .mc-main { width: 100%; height: auto; }

    /* These styles provide a minimal degree of styling, allowing most theme defaults to be dominant. */
    .mc-main .details {
    background: #fff;
    border: 1px solid #000;
    }
    .mc-main.mini .mini-event {
    background: #fff;
    border: 1px solid #000;
    padding: 5px;
    }
    .mc-main.mini .mini-event .details {
    background: none;
    border: none;
    }
    /* That's the end of all colors set (or set and removed) in this style sheet. */
    .mc-main caption {
    margin: 2px 0;
    font-weight:700;
    padding:2px;
    }
    .mc-main .my-calendar-date-switcher {
    padding: 4px;
    margin: 0 0 10px;
    }
    .mc-main .my-calendar-date-switcher input, .mc-main .my-calendar-date-switcher label, .mc-main .my-calendar-date-switcher select {
    margin: 0;
    padding: 0;
    }
    .mc-main .my-calendar-date-switcher .button {
    font-size: .9em;
    }
    .mc-main table {
    width:100%;
    line-height:1.2;
    border-collapse:collapse;
    }

    .mc-main td {
    vertical-align:top;
    text-align:left;
    width:13%;
    height:70px;
    padding:2px!important;
    }
    .mini td {
    height: auto!important;
    }
    .mc-main th {
    text-align: center;
    padding: 5px 0!important;
    letter-spacing: 1px;
    }
    .mc-main th abbr {
    border-bottom: none;
    }
    .mc-main h3, .mc-main h3 a {
    font: 700 10px Arial, Verdana, sans-serif;
    margin:3px 0;
    padding:0;
    width: 100%;
    clear: none;
    }
    .mc-main h3 img {
    vertical-align: middle;
    margin: 0 3px 0 0!important;
    }
    .mc-main .mc-list h3 img {
    vertical-align: middle;
    }

    .mc-main .list-event h3 {
    font-size:1.2em;
    margin:0;
    }
    .mc-main .calendar-event .details, .mc-main .calendar-events {
    position:absolute;
    left: 15%;
    width:70%;
    padding:5px;
    z-index: 3;
    }
    .mc-main .details .close {
    float: right;
    width: 16px!important;
    padding: 2px 2px 7px 7px;
    }
    .mc-main.mini .details .close {
    position: absolute;
    top: 8px;
    right: 8px;
    }
    .mc-main .calendar-events {
    width: 200px!important;
    left: 0px;
    }
    .mc-main .list-event .details {
    margin:5px 0;
    padding:5px 5px 0;
    }
    .mc-main .mc-list {
    margin: 0;
    padding: 0;
    }
    .mc-main .mc-list li {
    padding:5px;
    list-style-type: none;
    margin: 0;
    }

    .mc-main .mc-date {
    display:block;
    margin:-2px -2px 2px;
    padding:2px 4px;
    }
    .mc-main th {
    font-size:.8em;
    text-transform:uppercase;
    padding:2px 4px 2px 0;
    }
    .mc-main .category-key {
    padding: 5px;
    margin: 5px 0;
    }
    .mc-main .category-key ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    .mc-main .category-key li {
    margin: 2px 10px;
    }
    .mc-main .category-key span {
    margin-right:5px;
    vertical-align:middle;
    }
    .mc-main .category-key .no-icon {
    width: 10px;
    height: 10px;
    display: inline-block;
    }

    .mc-list li {
    text-indent:0;
    margin:0;
    padding:0;
    }

    .mc-main .calendar-event .event-time, .mc-main .list-event .event-time {
    display:block;
    height:100%;
    margin-right:10px;
    margin-bottom:10px;
    font-weight:700;
    font-size:.9em;
    }

    .mc-main p {
    line-height:1.5;
    margin:0 0 1em;
    padding:0;
    }

    .mc-main .vcard {
    font-size:.9em;
    margin:10px 0;
    }

    .mc-main .calendar-event .vcard {
    margin:0 0 10px;
    }
    .mc-main { position: relative; }
    .mc-main img { border: none; }
    .category-color-sample img {
    margin-right: 5px;
    vertical-align: top;
    }

    .mc-main .my-calendar-nav ul {
    height: 2.95em;
    margin:0;
    padding:0;
    }
    .mini .my-calendar-nav ul { height: 2em!important; }
    .mc-main .my-calendar-nav li {float:left;list-style-type: none!important; /* It really is pretty important. */;}
    .mc-main .my-calendar-nav li:before { content:''; }
    .mc-main .my-calendar-nav li a {
    display:block;
    text-align:center;
    padding:1px 20px;
    }
    .mini .my-calendar-nav li a {
    padding: 1px 3px!important;
    font-size: .7em;
    }
    .mc-main .my-calendar-next {
    margin-left: 4px;
    text-align:right;
    }

    .mc-main.mini .my-calendar-date-switcher label {
    display: block;
    float: left;
    width: 6em;
    }
    .mc-main.mini .my-calendar-date-switcher { padding: 4px; }
    .mc-main.mini td .category-icon { display: none; }
    .mc-main.mini h3 { font-size: 1.1em; }
    .mc-main.mini .day-with-date span, .mc-main.mini .day-with-date a {
    font: .9em Arial, Verdana, sans-serif;
    padding:1px;
    text-align: center;
    }
    .mc-main .mini-event .sub-details {
    margin: 0;
    border-bottom: 1px solid #ccc;
    padding: 2px 0 0;
    margin-bottom: 5px;
    }
    .mc-main .mini-event .details img {
    width: 100%;
    }
    .mc-main.mini .day-with-date a {
    display: block;
    margin: -2px;
    font-weight: 700;
    text-decoration: underline;
    }
    .mini td { height: auto!important; }
    .mini .my-calendar-nav ul { height: 2em!important; }
    .mini .my-calendar-nav li a {
    padding: 1px 3px!important;
    font-size: .7em;
    }
    .mc-main .nextmonth {
    opacity: .7;
    }
    .mc-main .vcard, #mc_event .vcard {
    font-size: .9em;
    padding: 10px;
    float: righ

  4. Joe Dolson
    Member
    Plugin Author

    Posted 1 year ago #

    It looks fine to me -- the colors I can't do anything about. Since you're using the Inherit stylesheet, it's expected that the stylesheet will inherit whatever styles your theme has established for a table within your content, which it is. You can alter the colors by modifying the stylesheet, or you can use one of the alternate stylesheets, which would provide more detail to the design of your calendar.

    The intention of the Inherit stylesheet is to do minimal styling of the calendar.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic