Printable View
I'm new to TYPOlight, but I'm trying to learn real hard. This one gives me headache (see attached).
I want to put an event list in the left side of the rather classic top/left/main column setup, right below the menu.
First of all, I can't seem to grasp how to target this list with a style sheet! What do I write in the selector and the CSS ID/Class respectively ???
Secondly, as you can see, the list repeats itself in the main column ... why does it do that?!?
Kind regards, pino
You can add an html id or class attribute when you edit it. For this change the CSS/ID fields. (Please note that the value may be overwritten if you include it in a content element).
Next view the generated source te determine how to target the items. This is the standard procedure for me :P
You probably added the module twice in the page layout, or you added it twice in the articles on that page. You must have included it twice in some way yourself... Check everything!
Thanks Vera for taking the time to help me out :-)
You were right about the double ... that's done.
But I still can't seem to reach the left column calendar with a style sheet. I have realy (!) tried to dig into the music academy example, but it's not exactly self explaining. I grasp the overall concept of a selector and a corresponding identifier, but I must be doing something wrong. I have succeeded in making a style sheet for the menu though.
For example, if I have an event with the record ID 3 ... is this ID supposed to be "targetable"?
I would like the calendar to have a formatting of its own (p, a, a:over and so on).
Could you give me an example of what to write in the selector, and what to write in the calendar, to make the two elements work together?
CSS does not know about database ID's. CSS can only see the HTML output, the same you see when you view the webpage source. If the calendar template output has an id attribute, then you can target that with your selector. Same goes for a class.
I am sure the templates include classes to target by default similar to mod_calendar. or .mod_calendar in css. You can try .mod_calendar { border: 1px solid red !important; } to see if the class is present, but again; viewing the HTML source is easier to find out. If the item you want to target has no CSS ID you can add it in the TL backend. Usually this is one of the last fields you can fill in under "expert settings". The CSS ID has nothing to do with the module ID (which is the database ID).
I won't give you any code in the interest of self study ;) But I'm sure you will figure it out if you follow the instructions above. You can use any resource on the internet to find out more about CSS. Lots and lots has been written.
Heeeeeyyy... :-D The apprentice succeeds (I think)!
Thanks again Vera. Well, I guess it wouldn't have figured the comma-thing out if I hadn't been persistent. The attached screen shot shows the syntax and how I interpret it. Would you say that it looks correct?
Kind regards, pino
Well, if it works, then you're ok. Well done!
One thing though: an id has a # sign in front of it in the selector, so you went wrong there. For example #exampleElement will target the only element that has id="exampleElement" as an attribute.
Okay ... does that mean that it should be
.mod_eventlist block #calendar, .teaser, .date, .day
... or does it have to have the "Element" thing too?
Could that explain why I cant make the Read more shrink in size? It doesn't obey when I use .more :-(
And then I miss some control functions to eliminate the space between the different parts in the block. Should I dig in some tl files to get at that, or is there some command that might do the trick?
Oh, oh ... one more thing how do I "regionize" thursday and Read more ???
ThankU again!