gk-Creativity wrong displays RS Events Pro Calendar page

Hi,

This problems are different both on Responsive and Mobile modes.
You can see this on screenshot video here or test it directly using this link.

Other templates (protostar for example) display RSEvents Pro! Calendar properly.

Please help me to repair this errors in template for displaying correctly responsive and mobile modes using Creativity template!

Hi! Is anybody from Gavick development here???

Hi

Have You been able to fix that ? This is how I see this popups:

Yes, I have solved this issue.

Hi

Great to hear that. Can You please share what was the solution in case some other users will have same problem ?

Hi,

I solve this issue modifying override.css file of template and some .php files of RSEventsPro!

RSEventsPro! allows to modify .php files according this article: https://www.rsjoomla.com/support/docume ... -feel.html

Hi

I was hoping on some more detailed informations, but I'm guessing it is not easy to list all of the changes.
Thank You anyway.

Hi,

Yes, It was a great "handmade" work, I did it for my personal design where the latest version of Font Awesome is integrated manually too. There is a section of my override.css file, but I don't sure this design will fit sites with other design. I create this site for my own job so I didn't comment each part of section unfortunately:

Code: Select all

/* © Kirill Svetitskiy | http://masterpozitiva.ru */

/* RSEvents Calendar */

.navbar-inner {
   background-image: none !important;
}

#rsepro-search > input {
    margin-top: 0.8em;
}

.rsepro-calendar img {
    box-shadow: -1px -1px 0px rgba(0,0,0,.2);
    margin-top: 3px;
}

.event_desc {
   text-align: justify;
   margin-bottom: 1.5em;
}

.offline_payment_img {
   box-shadow: -2px -2px 2px rgba(0,0,0,.2);
   margin: 5px 0px 20px 20px;
   width: 30%; vertical-align: top;
   float: right;
}

a.btn {
   padding: .7em;
}

a.btn, .btn-primary, .rs_invite_btn, .pager li>a, .btn:first-child, button#rsepro-filter-btn, .btn.pull-right, button.btn {
    background-color: rgba(0, 160, 0, 1) !important;
    background-image: none;
    background-repeat: no-repeat;
    border: rgba(194, 194, 194, 1) 1px solid;
    border-radius: 0 !important;
    color: #fff !important;
    margin: 8px 3px 5px 26px;
    height: auto;
    margin-left: 5px;
    padding: .8em;
    text-shadow: none !important;
    text-transform: uppercase;
}

a.btn:active, a.btn:focus, a.btn:hover, .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .pager li>a:active, .pager li>a:focus, .pager li>a:hover, .btn:first-child:active, .btn:first-child:focus, .btn:first-child:hover, button#rsepro-filter-btn:active, button#rsepro-filter-btn:focus, button#rsepro-filter-btn:hover, .btn.pull-right:active, .btn.pull-right:focus, .btn.pull-right:hover, button.btn:active, button.btn:focus, button.btn:hover, a.btn.btn-small.rsepro-close:focus, a.btn.btn-small.rsepro-close:hover  {
    background: #fff none repeat scroll 0 0 !important;
    border: 1px solid rgba(0, 160, 0, 1) !important;
    color: rgba(0, 160, 0, 1) !important;
}

button#rsepro-clear-btn {
    background: #fff none repeat scroll 0 0;
    border: 1px solid rgba(0, 160, 0, 1);
    color: rgba(0, 160, 0, 1) !important;
    height: 2.75em;
    margin-left: 3px;
}

button#rsepro-clear-btn:hover, button#rsepro-clear-btn:active, button#rsepro-clear-btn:focus,  a.btn.btn-small.rsepro-close:active  {
    background-color: rgba(0, 160, 0, 1) !important;
    color: #fff !important;
}

a.btn.btn-navbar.collapsed {
    height: auto;
}

button#rsepro-filter-btn {
    margin: 2px auto;
    height: 2.85em;
    padding-top: .65em;
}

.pager li>a {
    padding: 5px 14px;
    font-size: .85em;
}

.btn:first-child {
    background-color: rgba(0, 160, 0, 1) !important;
    background-repeat: no-repeat;
    border-radius: 0;
    color: #fff !important;
    margin: 8px 0 5px 26px;
    margin-left: 5px;
    padding: .8em;
    background-image: none;
    text-shadow: none !important;
    text-transform: uppercase;
}

.btn-group>.btn:first-child, .btn-group>.btn+.btn, .btn-small {
    background: #fff none repeat scroll 0 0 !important;
    border: 1px solid rgba(0, 160, 0, 1);
    border-radius: 0 !important;
    color: rgba(0, 160, 0, 1) !important;
    padding: .6em;
    margin-left: 3px;
}

.btn-group>.btn, .btn-group>.dropdown-menu, .btn-group>.popover {
    border-radius: 0;
}

.btn-group>.btn+.btn {
    margin-top: 3px;
    text-transform: uppercase;
}

a.btn.btn-small.rsepro-close {
   padding: .4em .4em .3em .4em;
}

i.fa.fa-times.fa-2x {
   color: #fff;
}

i.fa.fa-times.fa-2x:active, i.fa.fa-times.fa-2x:focus, i.fa.fa-times.fa-2x:hover  {
   color: rgba(0, 160, 0, 1);
}

i.icon-bar:active, i.icon-bar:focus, i.icon-bar:hover {
   color: rgba(0, 160, 0, 1);
}

div#rseform {
    box-shadow: 3px 3px 7px rgba(0,0,0,.2);
}

.rsepro-calendar table th {
    background-color: #68b5ff;
    border: 0 none;
    color: #fff;
}

.dropdown-menu>li>a:active, .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:active>a, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a, .nav-collapse .nav>li>a:active, .nav-collapse .nav>li>a:hover, .nav-collapse .nav>li>a:focus, .nav-collapse .dropdown-menu a:active, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus {
   background-color: rgba(0, 160, 0, 1);
   background-image: none !important;
}

.rs_invite_btn {
    padding: .5em 1em;
}

.nav>li>a:hover, .nav>li>a:focus {
    background-color: transparent !important;
}

.rsepro-calendar table td {
    font-size: 20px;
    padding: 2px;
    height: auto;
    position: static;
    vertical-align: top;
}

.rsepro-calendar .has-events ul a {
    white-space: normal;
    overflow: hidden;
    display: block;
    padding: 0 2px;
}

.rsepro-calendar .has-events .event {
    margin-top: 2px;
    font-size: 12px;
    padding: 0 5px;
}

.rsepro-calendar-events .popover {
    background-color: #fff;
    border: 1px solid #d8d8d8;
    max-width: 400px !important;
    padding: 1em;
    z-index: 999;
    position: absolute;
}

.rsepro-calendar .has-events ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.rsepro-calendar-tooltip-content {
    display: inline-block;
    margin-left: 0.5em;
    margin-top: -0.5em;
}

.rsepro-calendar-tooltip-description {
    margin-top: 2.5em;
    text-align: justify;
}

.popover-title {
    background: none repeat scroll 0 0 rgba(171, 222, 148, .4) !important;
    padding: 5px;
}

.rs_featured_event {
    background: none repeat scroll 0 0 rgba(171, 222, 148, .4) !important;
}

.rsepro-calendar table td.prev-month div>a, .rsepro-calendar table td.next-month div>a {
   color: #fff;
}

.rsepro-calendar table td div>a {
    display: block;
    position: relative;
    padding: 5%;
    color: rgba(0, 160, 0, .8);
    font-weight: bold;
    text-shadow: -1px -1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(255,255,255,.5);
}

.rsepro-calendar table td.curr-month.has-events div>a {
    color: #FF5800;
}

.rs_guests li {
    text-align: left;
    width: 10em;
}

.curr-month .rsepro-calendar-day {
   background-color: #FFF9F5;
}

/* Модуль Календаря на странице */

.itemIntroText .calendar_page {
   font-style: normal !important;
}

.calendar_page table.rs_calendar_module {
   font-size: 20px;
}

.calendar_page td.curr-month {
    background-color: #FFF9F5;
}
.calendar_page table.rs_calendar_module td.prev-month a, .calendar_page table.rs_calendar_module td.next-month a {
   color: #C6C6C6;
}

.calendar_page table.rs_calendar_module td.curr-month a {
   color: rgba(0, 160, 0, .8);
    font-weight: bold;
    text-shadow: -1px -1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(255,255,255,.5);
}

.calendar_page table.rs_calendar_module td.has-events a {
   background-color: #ECF8FF;
}

/* Копьютеры
--------------------------------------------------------- */

@media only screen and (min-width: 1030px) {
    .hidden-desktop {
    display: none !important;
    }
    a.rsttip.rse_event_link {
    font-size: 1.3em;
   }
}

/* Планшеты (tablet.css)
--------------------------------------------------------- */

@media only screen and (min-width: 580px) and (max-width: 1029px) {
    .hidden-phone {
    display: none !important;
    }
    .hidden-tablet {
    display: inherit !important;
    }
.rsepro-calendar .has-events ul a {
    white-space: normal;
    font-size: 1.3em;
   }

   .offline_payment_img {
      margin: 5px 0px 20px 20px;
      width: 40%;
      vertical-align: top;
      float: right;
   }

}

/* Небольшие планшеты (small.tablet.css) LANDSCAPE
--------------------------------------------------------- */

@media only screen and (min-width: 581px) and (max-width: 820px) and (orientation: landscape) {
    .hidden-phone {
    display: none !important;
    }
    .hidden-tablet {
    display: inherit !important;
    }
    .rsepro-calendar table th, .rsepro-calendar table td.week {
    border: 0 none;
    color: #fff;
   }
   .rsepro-calendar .has-events a {
    font-size: 14px;
   }
   .rsepro-calendar table td.curr-month.has-events div>a {
    font-size: 20px;
   }
   .rsepro-calendar table td.week>a {
    color: #BABABA;
   }
   .popover-title {
   font-size: 1em;
   font-weight: bold;
   }
.rsepro-calendar .has-events ul a {
    white-space: normal;
    font-size: .9em;
   }

   .offline_payment_img {
      margin: 5px 0px 20px 20px;
      width: 40%;
      vertical-align: top;
      float: right;
   }
}

@media only screen and (min-width: 581px) and (max-width: 820px) and (orientation: portrait) {

   .offline_payment_img {
      margin: 5px 0px 20px 20px;
      width: 100%;
      vertical-align: top;
   }
}

/* Мобильные ландшафт (mobile.css)
--------------------------------------------------------- */

@media only screen and (max-width: 580px) and (orientation: landscape) {
    .hidden-phone {
    display: none !important;
    }
   
    .rsepro-calendar table th, .rsepro-calendar table td.week {
    display: none !important;
   }

   .rsepro-calendar .has-events a {
    font-size: 20px;
   }

   .offline_payment_img {
      margin: 5px 0px 20px 20px;
      width: 40%;
      vertical-align: top;
      float: right;
   }

}

/* Мобильные (mobile.css)
--------------------------------------------------------- */

@media only screen and (max-width: 580px) and (orientation: portrait)  {
    .hidden-phone {
    display: none !important;
    }
   
    .rsepro-calendar table th, .rsepro-calendar table td.week {
    display: none !important;
   }

   .rsepro-calendar .has-events a {
    font-size: 20px;
   }

   .offline_payment_img {
      margin: 5px 0px 20px 20px;
      width: 100%;
      vertical-align: top;
   }
}

.rs_events_container {
    margin-top: 4em !important;
}

.btn_tickets {
    text-align: left !important;
}

/* End of RSEvents Calendar */

/* RSEvents Search */


.rsepro_search_form .slider {
    width: 140px !important;
    margin: 4em auto 3.8em 5em;
}

.tooltip.tooltip-min.top {
    margin-top: -4em;
}

.tooltip.tooltip-max.bottom {
    margin-top: 1em;
}

/* End of RSEvents Search */

Hi

Ok. Thank You very much for shearing this solution with us. I'm gonna leave this thread open in case someone will have some additional questions.

OK, you are welcome.