The JEvent club layouts come in a range of fixed widths that you can select in the JEvents configuration page. However because of your site template you may need to tweak one of these widths slightly to fit the size of your template perfectly.
Consider the example of a site where the "Quite Narrow (695px)" width of the Iconic is a little too wide so you want to make this a little narrower - this is how you would go about this. This example is based on the Iconic layout but the same principal applies to the Extplus and Ruthin layouts.
What you need to do is customise one of the existing width files e.g. components/com_jevents/views/extplus/assets/css/w695.css which is the quite narrow version. Therefore copy this file to templates/YOUR TEMPLATE/html/com_jevents/extplus/assets/css/w695.css and then tweak this copied file (this way you will not loose your changes if you upgrade JEvents).
The standard widths are all calculated to be 70 pixels different to each other and therefore the day cells are 10 pixels different.
So if you want to make the width 28 pixels narrower (its best to stick to a multiple of 7 pixels) then
- Substract 28 pixels from all the widths that large numbers (i.e. close to the overall width of the layout) so the width of 710px becomes 682px.
- Find the widths that are about 1/7th of the overall width i.e. 695/7 i.e. approx 99 pixels and take off 4 from each of these.
- You'll then need to address the next month/last month and date block - .jev_toprow div.previousmonth , .jev_toprow div.nextmonth ,.jev_toprow div.currentmonth and .jev_listview div.currentmonth - take off a total of 28 between these. Take 12 off the currentmonth widths and 16 from previousmonth and nextmonth.
- A litte more complex is the multiday events - subtract 7 from the jevblocks1 widths, 14 from jevblocks2, 21 from jevblocks3 etc.
- Then last but not least - copy the image components/com_jevents/views/extplus/assets/images/back695.jpg to templates/YOUR TEMPLATE/html/com_jevents/extplus/assets/images/back695.jpg then edit this using a good graphics package (gimp is a good free option). You will need to ZOOM in a lot since the changes you need to make are pixel precise. Reduce the space between each vertical bar by 4 pixels and save the changes.
You should now have a pixel perfect width for your site.
If anything goes wrong do a side by side comparison of the original and your changed file and double check your mental arithmetic - GOOD LUCK!