[TYPO3] RO_chBgColor & optionSplit

[Johannes Künsebeck]

Anders Kongsted wrote:
> Hi,
> 
> Thanks! I didn't know that I could use hover on table's.... :|

doesn't work in ie (only for <a>)

> 
> But anyway, thanks... I used the CSS-way..... :o)
> 
> //Anders
> 
> Georg Rehfeld skrev:
>> Hi Anders,
>>
>> Anders Kongsted wrote:
>>> I'm trying to create a TMENU where the BGcolor has to be different on
>>> each item when it is active. It work with NO and ACT, but I would like
>>> to have a RO-effect too.
>>>
>>> Is that possible?
>>
>> For sure. I see 2 relatively simple ways to achive this:
>>
>> 1) use ACTRO (which generates some JS, I think, never used that myself)
>>
>> compare
>> http://typo3.org/documentation/document-library/references/doc_core_tsref/4.1.0/view/10/2/
>>
>>
>> 2) simply use CSS
>>
>> As I see you are using TMENU and CSS anyway (and I'm a CSS guy), I'll
>> suggest that way, see below
>>
>>> My code until now:
>>>
>>> ############################################################
>>> # Menu objects:
>>> temp.menu1 = HMENU
>>> temp.menu1.1 = TMENU
>>> temp.menu1.1 {
>>> expAll = 1
>>> NO {
>>>  allWrap.insertData=1
>>>  allWrap = <div class="menu"> | <br />
>>>  ATagParams = onmouseover="changecolor(this, '{$pageColor}');"
>>> onmouseout="changecolor(this, '{$menuBGColor}');"
>>
>> I don't think this ATagParams line is neccessary. If you would use
>> ACTRO, TYPO3 would insert the neccessary JS for you. If you follow the
>> CSS way I suggest this line isn't needed anyway.
>>
>>>  wrapItemAndSub = | </div>
>>> }
>>>
>>> ACT < .NO
>>> ACT = 1
>>> ACT {
>>>  allWrap.insertData=1
>>>  allWrap = <div class="menuACT{field:uid}"> | <br />
>>>  wrapItemAndSub = | </div>
>>> }
>>> }
>>>
>>>
>>> temp.menu1.2 = TMENU
>>> temp.menu1.2 {
>>> NO {
>>>   allWrap = | <br />
>>> }
>>> }
>>> ############################################################
>>>
>>> And then there are some CSS to change the colors. Example:
>>> ###################
>>> div.menuACT8 {
>>>       width: 100%;
>>>       background: #ec008c;
>>>       margin-bottom: 3px;
>>> }
>>> ###################
>>>
>>> Regard
>>> Anders Kongsted
>>
>> As you have set up a special class for every of your active menu items a
>> CSS file snippet similar to this should do the job:
>>
>> /* Format menu items and their hovers/rollovers */
>> div.menuACT8 {
>>       background-color: yellow;
>> }
>> div.menuACT8:hover {
>>       background-color: orange;
>> }
>>
>> div.menuACT9 {
>>       background-color: grey;
>> }
>> div.menuACT9:hover {
>>       background-color: green;
>> }
>>
>> div.menuACT10 {
>>       background-color: purple;
>> }
>> div.menuACT10:hover {
>>       background-color: red;
>> }
>>
>>
>> HTH, Georg