You are here: Home Support Forums Tags
Categories
Tags
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.3K 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
Newest First  
lillianfidler
lillianfidler
9 years ago
·
#164483
0
Votes
Undo
That works beautifully! thank you.
carcam
carcam
9 years ago
·
#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
9 years ago
·
#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
9 years ago
·
#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
9 years ago
·
#164479
0
Votes
Undo
Thanks so much! and this should go in my regular template custom css file, right?
carcam
carcam
9 years ago
·
#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
9 years ago
·
#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
9 years ago
·
#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.
  • Page :
  • 1
There are no replies made for this post yet.

Members Area

Show your support

Unlike many Joomla calendars we do not charge to download JEvents - please show your support for this project by becoming a member of the JEvents Club Club members get access to early releases, exclusive member support forums, and Silver and Gold members can use many exciting JEvents addons

Your membership will ensure that JEvents continues to be the best events calendar for Joomla.