CAT | css
While developing I use FireFox as my main browser. Mostly during the end of the project IE bugfixing is scheduled.
Today I was having difficulties (again) with z-indexes in IE7. Solution? Very easy using jQuery…
Just have this in your script and it will be okay:
$(function() { var zIndexNumber = 1000; $('div').each(function() { $(this).css('zIndex', zIndexNumber); zIndexNumber -= 10; }); });
Wanna know more? Read the article that brought me my solution!
Weel – it took a while to achieve this through all other work, but we finished it enough to have it launced: Stylence – for internet and TYPO3 development in style! There is a lot to improve. But you have to start in order to improve right?!
I haven’t tried this one yet – but according to what they promiss it must be great.
17
Defining a first, middle and last content element in one column using TypoScript
0 Comments | Posted by henjo in css, design, typo3, usabillity
Ever needed to use a different class for a first element in a column? And a specific one for the middle elements and – making it the royal treat – one for the last element as well?
I have been wondering about this for a while – tested some stuff here and there and finally I came up with this solution. I hope it will be helpful to you in one of your projects as well!
tt_content.stdWrap.outerWrap = |<div style="display:none;"></div>
lib.contentBar = COA
lib.contentBar {
10 < styles.content.get
stdWrap.split {
token = <div style="display:none;"></div>
cObjNum = 1||2 |*| 3||4 |*| 5||6
1.current = 1
1.wrap = <div class="first">|</div>
2.current = 1
2.wrap = <div class="middle">|</div>
3.current = 1
3.wrap = <div class="middle">|</div>
4.current = 1
4.wrap = <div class="middle">|</div>
5.current = 1
5.wrap = <div class="last">|</div>
6.current = 1
}
}
Questions? Leave a reply!
Have a better solution? Leave a reply, please!
I especially do not like the splitter part, because of the extra code. I used ###SPLITTER### at first, but that left me with a ###SPLITTER### marker on the pages I didn’t use the replacement…
There must be a better way – so please!
6
The fastest way to a print version in Typo3 using defaults… (no extensions!)
0 Comments | Posted by henjo in (x)html, css, typo3, usabillity
Let’s go down to it right away:
- Open your main (plugins) template in Typo3, in full glory (you can figure out what that means!)
- Add in the ‘Include Static’ section: plugin.alt.print (98)
- this adds the page type 98 to your site
- Now you can use the constants to add some special cs/html to make it feel the way you like it to be
- plugin.alt.print.file.stylesheet = fileadmin/templates/res/print.css
- plugin.alt.print.file.template = fileadmin/templates/print.html
- Now add the following code in the TS where you built your (footer) menu:
- stdWrap {
append = TEXT
append.value = print
append.typolink.title = printversion of this page
append.typolink.parameter.dataWrap = {TSFE:id},98
} - This will add a link entitled print to the menu and will generate the correct pagetype.
- stdWrap {
- This works with SimulateStatic (print.34.98.html) as a charm!
- And why not with the rest? It will!
Have fun!
Consider a donation if blablabla
10
Getting your font-sizes right…
0 Comments | Posted by henjo in (x)html, css, design, ie, usabillity
Ever wondered why IE shows bigger headings than other browsers? If you are like me and walking your website releases the FF – Safari – IE7 – IE6 way, you’ll notice fontsizes are screwed up here and there. Of course you can write different stylesheets, what I did for a while. But recently I ran into this article that actually explains a good deal how to get stuff right, the nice way.
Enjoy reading!
We all know this is considered good SEO strategy, but going around Typo3 we have to tweak it a little to do what we want it to do.
What we want to achieve is:
1. a page title (the title tag) with the name of the company & the title of the page
2. a h1 tag on the page doing exactly the same, but which is displayed as the company logo
3. make sure customers while adding content not setting default h1’s on the site (1 should be enough
)
Getting #1 down:
- this will work out of the box, as long as you fill in the sitetitle field in the template (there are ways to alter how this is displayed of course, some using typoscript, some using php or an extention)
#1 is down..
On to the second one!
- make sure your h1 tag in your html template is marked as a typoscript object (when using TemplaVoila) or have it parsed as a marker (automaketemplate, autoparser)
- put the following code in your typoscript:
lib.logo = TEXT
lib.logo {
dataWrap = {page:title} — PutTheCompanyNameHere
}
- the logo object is placed inside the h1 tag
- give the h1 item the logo
- use CSS to have the span inside h1 not to be shown and voila!
#2 is down as well…
To make it real hard in the end – we need #3 to go down as well…
It’s a though one. Hard to understand. I hope you can follow this:
- go to your TS template
- go to the constant editor
- select content and
- set ‘default header’ to 2
…
That was it. I hope this was helpfull, if you have questions leave a comment. If you found it helpful: leave one too!
I have been asked today to get fonts compiled to use with sIFR. To be honoust I didn’t know what was expected of me and after a little conversing it became clear: to use the extention gb_sifr you need to have a .swf containing all the characters of the font you want to use.
After some research I found OpensIFR; a tool to create the needed file. In less then 10 minutes time I was able to produce a list, nice looking, sIFR replaced and all. Nice.
I read this post on how to do some work on getting your site mobile friendly. Great post. Must read. http://www.mikeindustries.com/blog/archive/2005/07/make-your-site-mobile-friendly
A short tip:
don’t wrap first cell’s using something like:
td.firstCell { white-space: nowrap; }
Basecamp
Get me at Technoratie
Typo3










