WordPress.org

Support

Support » Plugins and Hacks » My Calendar » [Resolved] Calendar not displaying right in page

[Resolved] Calendar not displaying right in page

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Joe Dolson

    @joedolson

    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.

    pgiovas

    @pgiovas

    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

    Plugin Author Joe Dolson

    @joedolson

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Resolved] Calendar not displaying right in page’ is closed to new replies.
Skip to toolbar