Tricky CSS question: name of the section in the border left solid

candyman · 2007-05-16 17:55:08

I have a problem that, I think, involves CSS and txp forms too.
I’m trying to realize a blog with different sections (cinema, sport, literature… and so on) and I’d like to customize the light band on the left side of any article…

that I obtain with this:

.article
{
	border-left: 50px solid #f6f5ee;
	padding: 0 0 0 10px;
	line-height: 150%;
	text-align: justify;
}

… with the name of the section inside, like the following (section: cinema)

How can obtain, with CSS, an effect like this?

Thanks in advance.

Last edited by candyman (2007-05-16 18:16:16)

zero · 2007-05-16 18:43:15

You won’t get cinema text to do that, you will need an image.

Off the top of my head without trying it, I’d say something like:
img.cinema {position: absolute; left: -25px; }

And add to .article {position: relative; }

candyman · 2007-05-16 18:45:49

Thanks, Zero, but the problem is that I can’t assing different images to the different sections… :|

zero · 2007-05-16 19:43:43

Try this: name your images as cinema.png, sport.png etc. Then use something like this:
<txp:section><img src=”<txp:section />.png”></txp:section>

candyman · 2007-05-16 19:53:42

In the article form, do you mean?

I’ll give a try and let you know. TNX!

els · 2007-05-16 20:19:18

Or you can use an image replace method, like the zem_ir plugin.

candyman · 2007-05-16 20:26:49

Thanks Els, that’s could work. I try.

zero · 2007-05-16 21:06:57

candyman, yes in a form.

Els, I don’t use many plugins so thanks for the link. It looks very useful!

candyman · 2007-05-18 08:14:44

Or you can use an image replace method, like the zem_ir plugin.

This is very useful to replace, for example, the site name with an image but I can’t assign the different sections with their relative images.
How can I use something like this:

<txp:section><img src=”<txp:section />.png”></txp:section>

using the zem_ir plugin if the sections.png (e.g.: sport,png, cinema.png, literature.png…) don’t exist but are dinamically generated by the plugin?

Last edited by candyman (2007-05-18 08:15:22)

els · 2007-05-18 15:41:13

The plugin converts text into an image, so you don’t need existing images. Upload a font and use something like

<txp:zem_ir position="top center" font="public_html/fonts/font.ttf" angle="90" fontsize="14" color="#000" backgroundcolor="#fff" wraptag="h2" padding="4"><txp:section title="1" /></txp:zem_ir>

Read the plugin help, it’s all explained (Admin > Plugins, click ‘View’).

candyman · 2007-05-18 16:13:22

I obtain this:

Error: The server is missing the specified font '/web/htdocs/www.maidireblog.it/http:/www.maidireblog.it/fonts/abtechia.ttf'.

Where must I put the TrueType fonts? I used the plugin parameter font with this absolute path:

font=“http://www.maidireblog.it/fonts/abtechia.ttf”

Thanks for your patience.

candyman · 2007-05-18 16:45:16

Tried also:

fontdir="http://www.maidireblog.it/fonts/" font="abtechia.ttf"

getting this:

Error: The server is missing the specified font 'http://www.maidireblog.it/fonts/abtechia.ttf'.

els · 2007-05-18 17:11:51

It took me some time to figure that out too ;) Anyway, don’t use the url, it should be a path. I assume the font is in a directory ‘fonts’ that is in the root? You can try this:

font="web/htdocs/fonts/abtechia.ttf"

If you still get an error, it will show you what is wrong, e.g. if it says The server is missing the specified font 'web/htdocs/web/htdocs/fonts/abtechia.ttf' you’ll know that web/htdocs/ should be left out.
Trial and error will get you where you want ;)

candyman · 2007-05-18 19:00:28

Tried with:

font="web/htdocs/fonts/abtechia.ttf"

getting this:

Error: The server is missing the specified font '/web/htdocs/www.maidireblog.it/web/htdocs/fonts/abtechia.ttf'.

Should I modify the preset plugin code or, according to you, the problem is another? I can’t figure it out.

p.s I saw that /web/htdocs/www.maidireblog.it/ is the TXP preset option for plugin cache and files in my blog: must I change this?

els · 2007-05-18 19:03:55

Try if this works:

font="fonts/abtechia.ttf"

Textpattern CMS

Textpattern CMS support forum

#1 2007-05-16 17:55:08

Tricky CSS question: name of the section in the border left solid

#2 2007-05-16 18:43:15

Re: Tricky CSS question: name of the section in the border left solid

#3 2007-05-16 18:45:49

Re: Tricky CSS question: name of the section in the border left solid

#4 2007-05-16 19:43:43

Re: Tricky CSS question: name of the section in the border left solid

#5 2007-05-16 19:53:42

Re: Tricky CSS question: name of the section in the border left solid

#6 2007-05-16 20:19:18

Re: Tricky CSS question: name of the section in the border left solid

#7 2007-05-16 20:26:49

Re: Tricky CSS question: name of the section in the border left solid

#8 2007-05-16 21:06:57

Re: Tricky CSS question: name of the section in the border left solid

#9 2007-05-18 08:14:44

Re: Tricky CSS question: name of the section in the border left solid

#10 2007-05-18 15:41:13

Re: Tricky CSS question: name of the section in the border left solid

#11 2007-05-18 16:13:22

Re: Tricky CSS question: name of the section in the border left solid

#12 2007-05-18 16:45:16

Re: Tricky CSS question: name of the section in the border left solid

#13 2007-05-18 17:11:51

Re: Tricky CSS question: name of the section in the border left solid

#14 2007-05-18 19:00:28

Re: Tricky CSS question: name of the section in the border left solid

#15 2007-05-18 19:03:55

Re: Tricky CSS question: name of the section in the border left solid

Board footer