This is the extended version of the CSS Changes & Customisations Document which will help you find the bug and apply a fix. Whilst also showing some further tips and tricks with CSS. (we are assuming you have already read the before mentioned document if not, click here)
1. Install Firefox and Firebug
Head over to http://www.mozilla.org to download and install Firefox, next
Head over to https://getfirebug.com/ via your Firefox Browser to install Firebug
2. Load your website
Next head on over to your website and press Control & F12 (Comannd & F12 for Macs) or Right click Inspect with Firebug. This now loads firebug on your browser showing the source of your website! In our screen shot you will see a monthly Alternative view without a border around the event entry:
3. Find the code
As we are using the Alternative Layout, there should be a border! so why isn't their? to look into it, we right click the 20:00 and click inspect element with Firebug. This loads that up directly in the Firebug HTML tab. It should load up some thing similar to:
4. Locate Controling CSS
So, that is showing we have set the style of the above event entry to have a border left and bottom color yet it's still not shown. Why? well we need to look deeper now into your sites template.css / the css files being loaded. To the right of the HTML pane is a small vertical panel, this is where the CSS is shown. So look in their under 'Style' . See the below image:
As you can see the border is set to 0 and none, which means show 0 line and make it nothing not solid just nothing. This is our issue, the sites css file is telling all these HTML elements not to have a border which is the sites design is fine, but for a calendar... not so fine. So we need to tell it otherwise. Rather than applying it all the elements which would make your site look a mess! look back a the HTML you will see:
<div class="eventstyle" style="">
<span title="" class="editlinktip hasjevtip"> <a href="/index.php/icalrepeat.detail/2013/06/22/132/-/event" class="cal_titlelink">20:00 Premiere Die Päpstin</a> </span>
</div>
5. Apply CSS Fix.
From here with have our class, 'eventstyle' as we apply the border to the block holding the text/link we apply it one up in this case. So to force the CSS changes we add:
.eventstyle {
border-width: 0px 0px 2px 5px !important;
border-style: solid !important;
}
To our JEvents Cpanel -> Custom CSS. This says, give eventstyle a border with 0px top, 0px right, 2px bottom and 5px to the left. We also need to specify a style, as it current set to none remember? so have a width with no style is just as good as a border with no width. In this case we want a nice solid border to give clarity of the color.
We hope that wasn't to hard, but any questions please do not hesitate to ask us in the forums :).
For those of you who want a few extra tips! Try applying 'display:none' to a html element like:
.jev_back {display:none}
This hides the back link in the event detail link. (as of JEvents 3.0.13)