styles coding question

atelier · March 13, 2010, 12:22pm

Hi

I have a small question about styling individual table cells in a dynamically generated table, and I cannot get my head around it. Maybe something small, but it’s a blind spot now…

url here:
http://85.92.84.84/~kkvbse/index.php/site/kalender
As you can see, several things happen at the same time.
The site is EE driven. The calendar script pulls data from a certain weblog and makes them into links to the article on another page.

The CSS stylesheet switches classes for a) blank cells (date out of month range) b) normal cells with a date range within the current month, and and c) the one cell of today. And I’'m using a java-script tool-tip that shows the title when mouse-over.

So far so good. But, for some reason I do not manage to style the link itself, it follows the a tag I made for all links in my site. (blue, hover: yellow background, and underline)
I do not want that to happen here, and want a background image as well…

This is the raw code for the calendar script:

{if entries}
<td class='{switch}' align='center'>
{entries}
<div><a href="{title_permalink='site/artikel'}"title="På gång: {title}">{day_number}</a></div>
{/entries}
</td>
{/if}
{if not_entries}
<td class='{switch}' align='center'>{day_number}</td>
{/if}

I would like to have a background image in that cell when it contains a link. My thoughts are, is it possible to attach this_style to that div in that cell, with something like

this_style calendarCell a:link {color:#0000CD; background-color:#FFFF00; background:url('{site_url}/templates_kkvb/extra_css/bg_calendarcell.gif') no-repeat }

I seem not to find somewhere how to correctly write that code.
I hope someone can point me into the right direction…

Thanks

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · March 13, 2010, 2:24pm

Unfortunately, there is no way to make a CSS selector that depends on
what child element an element contains. That is something I have
wished for for a very long time, but it’s just not possible given the
way that CSS works.

What I would do is change the way you style the table. Rather than
styling the TD itself to create the background color(s), try styling
the link. For days that don’t have any events, wrap the bare number in
a span or a p, and style that. (Technically, any td that does not
actually contain a block-level tag like a p will have one silently
created by the browser, so you’re better off actually entering one and
styling it how you want, rather than relying on the implicit behavior
of the browser’s default stylesheet.)

The key is to set your inner element to display:block, and then use
padding to give it height (width will automatically be taken care of,
since display:block elements expand to fill their parent element).
Make sure the td has no padding or height of its own, and the
background of the link or span will fill the space in the same way
that a td background would.

Walter

On Mar 13, 2010, at 7:22 AM, atelier wrote:

Hi

I have a small question about styling individual table cells in a
dynamically generated table, and I cannot get my head around it.
Maybe something small, but it’s a blind spot now…

url here:
http://85.92.84.84/~kkvbse/index.php/site/kalender
As you can see, several things happen at the same time.
The site is EE driven. The calendar script pulls data from a certain
weblog and makes them into links to the article on another page.

The CSS stylesheet switches classes for a) blank cells (date out of
month range) b) normal cells with a date range within the current
month, and and c) the one cell of today. And I’'m using a java-
script tool-tip that shows the title when mouse-over.

So far so good. But, for some reason I do not manage to style the
link itself, it follows the a tag I made for all links in my site.
(blue, hover: yellow background, and underline)
I do not want that to happen here, and want a background image as
well…

This is the raw code for the calendar script:
{if entries}
<td class='{switch}' align='center'>
{entries}
<div><a href="{title_permalink='site/artikel'}"title="På gång:  
{title}">{day_number}</a></div>
{/entries}
</td>
{/if}
{if not_entries}
<td class='{switch}' align='center'>{day_number}</td>
{/if}
I would like to have a background image in that cell when it
contains a link. My thoughts are, is it possible to attach
this_style to that div in that cell, with something like
this_style calendarCell a:link {color:#0000CD; background- 
color:#FFFF00; background:url('{site_url}/templates_kkvb/extra_css/ 
bg_calendarcell.gif') no-repeat }
I seem not to find somewhere how to correctly write that code.
I hope someone can point me into the right direction…

Thanks

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

atelier · March 13, 2010, 3:02pm

Hi Walter
Thanks for the clear explanation.
My idea was to add the background_image to the cell because I do not know how many numbers (1 or 31) as date shall be there, so a background to a number could give unexpected results.

Do I understand you well if I do this: [warningmode] lot’s of code ahead [/warningmode]

the full script is like this:


{if entries}
<td class='{switch}' align='center'>
{entries}
<div><a href="{title_permalink='site/artikel'}" title="På gång: {title}">{day_number}</a></div>
{/entries}
</td>
{/if}
{if not_entries}
<td class='{switch}' align='center'>{day_number}</td>
{/if}

{if blank}
<td class='calendarBlank'>{day_number}</td>
{/if}

I change the code of the entrees to:

{if entries}
<td class='{switch}' align='center'>
{entries}
<div> class= calendarCell_link <a href="{title_permalink='site/artikel'}" title="På gång: {title}">{day_number}</a></div>
{/entries}

in the CSS I have:

.calendarCell_link a:link {color:#0000CD; background-color:#FFFF00; background:url('{site_url}/templates_kkvb/extra_css/bg_calendarcell.gif') no-repeat top right }
.calendarCell_link a:visited  { color:#0000CD; background-color:#FFFF00; background:url('{site_url}/templates_kkvb/extra_css/bg_calendarcell.gif') no-repeat top right }
.calendarCell_link a:hover { color:#fff; background-color:#00f;  }
.calendarCell_link a:active {color:#0000CD; background-color:#FFFF00; background:url('{site_url}/templates_kkvb/extra_css/bg_calendarcell.gif') 


.calendarCell{ 
font-weight: bold; 
font-size: 20px;
font-family:"Times New Roman",Georgia,Serif;
letter-spacing: .1em; 
text-decoration: none; 
text-align: center; 
vertical-align: middle; 
color: #333333; 
background-color: #FFFFF0; 
width: 70px; 
height: 70px; 
border:1px;
}

I hope I’ve got it right…

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

atelier · March 13, 2010, 3:05pm

typo, that should have been:

<td class='calendarCell_link'><div><a href="{title_permalink='site/artikel'}" title="På gång: {title}">{day_number}</a></div></td>

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

atelier · March 13, 2010, 3:54pm

Hi Walter
You helped me to re-think this issue.
I’ve made some new styles, like .calendarCell and .calendarToday. Now I’m back in control. Thanks.

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · March 13, 2010, 4:04pm

It’s hard for me to translate the EE stuff out of your example. So
I’ve posted a little demo page here:

http://scripty.walterdavisstudio.com/calendar.html

View source, and see how the layout hinges on the tag inside each TD,
not the TD itself.

This is hand-coded, so it’s a bit leaner than Freeway would make, but
probably not as bulletproof. Note that the table cells have no height
and no padding. The entire visual space within each TD is being
created by the tag inside it – either a SPAN or an A. This makes it
automatic for the hover style to “fill” the TD, since it’s being
created on the A, not the TD.

Walter

On Mar 13, 2010, at 10:02 AM, atelier wrote:

Hi Walter
Thanks for the clear explanation.
My idea was to add the background_image to the cell because I do not
know how many numbers (1 or 31) as date shall be there, so a
background to a number could give unexpected results.

Do I understand you well if I do this: [warningmode] lot’s of code
ahead [/warningmode]

the full script is like this:


{if entries}
<td class='{switch}' align='center'>
{entries}
<div><a href="{title_permalink='site/artikel'}" title="På gång:  
{title}">{day_number}</a></div>
{/entries}
</td>
{/if}
{if not_entries}
<td class='{switch}' align='center'>{day_number}</td>
{/if}

{if blank}
<td class='calendarBlank'>{day_number}</td>
{/if}

I change the code of the entrees to:

{if entries}
<td class='{switch}' align='center'>
{entries}
<div> class= calendarCell_link <a href="{title_permalink='site/ 
artikel'}" title="På gång: {title}">{day_number}</a></div>
{/entries}

in the CSS I have:

.calendarCell_link a:link {color:#0000CD; background-color:#FFFF00;  
background:url('{site_url}/templates_kkvb/extra_css/ 
bg_calendarcell.gif') no-repeat top right }
.calendarCell_link a:visited  { color:#0000CD; background- 
color:#FFFF00; background:url('{site_url}/templates_kkvb/extra_css/ 
bg_calendarcell.gif') no-repeat top right }
.calendarCell_link a:hover { color:#fff; background-color:#00f;  }
.calendarCell_link a:active {color:#0000CD; background- 
color:#FFFF00; background:url('{site_url}/templates_kkvb/extra_css/ 
bg_calendarcell.gif')


.calendarCell{
font-weight: bold;
font-size: 20px;
font-family:"Times New Roman",Georgia,Serif;
letter-spacing: .1em;
text-decoration: none;
text-align: center;
vertical-align: middle;
color: #333333;
background-color: #FFFFF0;
width: 70px;
height: 70px;
border:1px;
}

I hope I’ve got it right…

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

atelier · March 13, 2010, 5:40pm

Walter, amazing, you’re so fast with this…!

On 13 Mar 2010, 3:04 pm, waltd wrote:

It’s hard for me to translate the EE stuff out of your >example. …

The ‘EE stuff’ builds the table -as you would have guessed’ and the nice thing about their scripting language is that the ‘magic’ comes out of the Core, like how many days in current month etc. So the script is pretty lean. My problem (as FW user) was in understanding how I could tweak the hand-coded CSS. The folks at Ellis Labs provide only the absolute minimum, presuming that their users, well, can code. I finally ended up with handcoding an extra separate stylesheet, connected only to that page.

This kalender script is in particulary nice because we can clearly see which cell the link gets. It’s the part between {if entries} and {/entries}
That particulair cell gets a content of:

<div><a href="{title_permalink='site/artikel'}" title="På gång:> {title}">{day_number}</a></div>

So it’s now possible to style that cell as well. There might be collaps when a link is put inside the ‘today’ cell (in the live example, as we speak) so we need to code around that as well.
I finally had made it kindof running (as I wrote above), the only thing that is still missing is the background image in that cell. I’ll look good at your solution, see if I can learn from it.

Thanks again.

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options