Categories
Categories:   All Categories
Suggested keywords
x
New

Change layout from vertical to horizontal

JEvents (Free Access)
  JEvents (Free Access)
lillianfidler
  lillianfidler
  Wednesday, 03 February 2016
  8 Replies
  1.4K Visits
0
Votes
Undo
Hi, can someone assist me with the following?

I need to change the calendar layout from vertical to horizontal.

You can see the layout here:
http://www.thecovehouse.ca/reservations

Thanks so much,

Lillian
Oldest First  
carcam
carcam
Wednesday, 03 February 2016 13:14
·
#164476
0
Votes
Undo
Hi Lilian,
you can try using some CSS to get that or you can create a template override for the module.
lillianfidler
lillianfidler
Wednesday, 03 February 2016 13:18
·
#164477
0
Votes
Undo
Would I put the following in a custom css for the module?

td, th {
display: table-cell;
vertical-align: inherit;
}

except change it to horizontal-align?
carcam
carcam
Wednesday, 03 February 2016 15:03
·
#164478
0
Votes
Undo
Actually you should use the table classes: mod_events_monthyear and mod_events_table and the CSS should be something like:



.mod_events_monthyear,.mod_events_table{

    float:left;

}

.mod_events_table{

  margin-top: 30px!important;

  margin-left: -80px!important;

}


And you will need to play with margins to make it look as you want I'm afraid.

Best!!
lillianfidler
lillianfidler
Wednesday, 03 February 2016 15:22
·
#164479
0
Votes
Undo
Thanks so much! and this should go in my regular template custom css file, right?
carcam
carcam
Wednesday, 03 February 2016 16:35
·
#164480
0
Votes
Undo
Actually I would use the JEvents Custom CSS area to place the code. That way you are 100% sure it's loaded after all JEvents CSS rules.
lillianfidler
lillianfidler
Wednesday, 03 February 2016 16:53
·
#164481
0
Votes
Undo
That worked perfectly! Thank you.

Just one small thing - if you have a look at http://www.thecovehouse.ca/reservations

you'll see that there are big gaps between July and August, August and Sept, september and october...

Any idea how to shape that up? :.)
carcam
carcam
Wednesday, 03 February 2016 17:00
·
#164482
0
Votes
Undo
Try this code instead of the first one:



.mod_events_monthyear, .mod_events_table {

    float: left;

    width: 170px;

    margin-right: 20px !important;

}

.mod_events_table {

    margin-top: 30px !important;

    margin-left: -190px !important;

}


Anyway, this is dirty tricks in CSS and I do recommend you create a template override for that with proper HTML strucutre ;).

Best!!
lillianfidler
lillianfidler
Friday, 05 February 2016 13:32
·
#164483
0
Votes
Undo
That works beautifully! thank you.
  • Page :
  • 1
There are no replies made for this post yet.