Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: Access and style the HTML code for the article.
Interesting stuff!
However, my challenge is inserting the SPAN tags in the first place.
Offline
#17 2005-11-02 13:17:40
- matgorb
- Member
- Registered: 2005-06-12
- Posts: 31
Re: Access and style the HTML code for the article.
How do you define a line?
Is a line a line in the article editor? or is a line a paragraph?
I think what you want is to replace the p by a span
so instead of having a
<p>
some content
</p>
<p>
some more content in a new paragraph
</p>
you’ll get a
<span>
some content
</span>
<span>
some more content in a new paragraph
</span>
Is that correct?
What is the point, whatever you do to your span you can do it the p. Could you precise?
Offline
Re: Access and style the HTML code for the article.
Sorry, I totally should of presented the link before: http://jonathanclarke.com/
See how the paragraph text has a white background? Well, to achieve that I’ve added % before and after every parargraph in the article editor. Which, as you know, renders proper XHTML SPAN tags.
Nevertheless, adding % is a bit of a chore, so I was wondeirng if I could set-up Txp to autmatically insert them?
Offline
#19 2005-11-02 13:35:07
- Mary
- Sock Enthusiast
- Registered: 2004-06-27
- Posts: 6,236
Re: Access and style the HTML code for the article.
What about lists and headings? Are you adding spans around them too? Or no? Or maybe you won’t be using them at all?
Offline
Re: Access and style the HTML code for the article.
List and heading I can add backgrounds to using the H and L tags…
Offline
#21 2005-11-02 15:22:12
- matgorb
- Member
- Registered: 2005-06-12
- Posts: 31
Re: Access and style the HTML code for the article.
Textpattern add <p></p> to every paragraph except if they are list or headings, this is at block level.
What you do is inline level.
However, you can add a display:inline; to you paragraphe and style them this way
something like this
<p style="background-color:red;display:inline;font-size: 10pt;line-height: 20pt;">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</p>
<p style=“background-color:red;display:inline;font-size: 10pt;line-height: 20pt;”>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</p>
so let’s say your text goes in a column named central_column you could have something like:
div#central_column p
{
background-color:red;
display:inline;
font-size: 10pt;line-height: 20pt;
}
Last edited by matgorb (2005-11-02 15:25:59)
Offline
Re: Access and style the HTML code for the article.
Ah!
display:inline; – that’s perfect!
Thanks!
Offline
Re: Access and style the HTML code for the article.
Almost got it, one last question though. When using display: inline, all the paragraphs run together. Is there anyway to maintain the normal p spacing?
Offline
Re: Access and style the HTML code for the article.
Sorry I should provide a more clarity. I’m using the advice above to style this page (http://www.shoppersaver.co.uk/clothing) so that all paragraphs have a background colour. Unfortunately, using displa: inline also causes the paragraphs to run into each other. Does anyone know if this can be avoided?
Last edited by jonathanclarke (2005-12-29 22:25:43)
Offline
Re: Access and style the HTML code for the article.
Jonathan,
Greetings! I see that you are having quite a time trying to figure out how to achieve this hack. I do have a friendly, constructive piece of advice for you.
As per the definitive guide to HTML and XHTML, published by O’Reilly, a span tag is primarily for special cases where you may want to alter the appearance of only a portion of a tag’s contents – usually text.
Since you are trying to achieve the effect for the entire paragraph and all the lines in it, you don’t need to use it. You can make the existing wraptags and CSS do exactly what you want.
Now, for the more pressing point. As a professional design student and intern, I would encourage you to double-think styling your text in this way. Unless the effect which you are trying to achieve is very avant-garde or cutting-edge, and being used in a very limited fashion, I wouldn’t advise styling your backgrounds or text as they are presented in any of your examples. The text became incredibly confusing and unless you are trying to say something metaphorically by doing this, it many times defeats the purpose of putting any text in the page at all.
The second point is purely theoretical.
Again, I should stress that this is purely my opinion, and I do not mean malice by my critique.
tb
Last edited by timmy (2006-01-03 02:17:53)
Offline
Re: Access and style the HTML code for the article.
Thanks Timmy, point taken.
Offline