SOLVED - Styling of Repeat Links

[happyhacker]

If I click on an event from the Calendar and it is a repeated event the "Previous repeat" and Next repeat" links have an associated arrow image whch butts up against the text. It seems impossible to put margin or padding on either elements to create a space.

Putting a space before the text of the link in the language file does not work.

How could I do this?

[Geraint]

The firebug addon for firefox is excellent for this sort of style question. Right click on the element of interest to discover how it is styled and experiment with custom CSS

[happyhacker]

I use Firefox Firebug regularly. I'm afraid your code somehow makes it impossible to margin or pad them apart. I think you must have a J:Text (or something) that ties these two together. I have even tried to put a space before or after the text definitions (i.e.  Previous Repeat) to no avail. I have also tried to whitespace the image - no luck!

ev_prevrepeat a.blue is a background image. If you could tell me where that is defined in the code I could display:none it and perhaps put an image in the code with it's own class?

PS. The CSS style ev_prevrepeat or blue do not separate the two elements.

[Geraint]

Use a positioned background image with a suitable padding value to place the text apart from your arrow.

[crosswire]

I seem to have similar issue above
see http://www.odlc.utoronto.ca/index.php?option=com_jevents&task=icalrepeat.detail&evid=1183&Itemid=57&year=2012&month=5&day=22&uid=0c7b06c3e7230198de65e1f5166feba1 for example

[carcam]

Adding this code to your template css will solve the issue:

Code: Select all

.ev_prevrepeat a.blue {
    padding-left: 20px;
}
.ev_nextrepeat a.blue {
    padding-right: 20px;
}


[crosswire]

OK thanks it worked. I know i had it before but couldn't remember.

[antkill]

Thanks for the solution, I've same issue before at one of my client site, now it's good.