Individual article styling on home page

hallstu · 2011-02-16 16:32:25

Hi guys, hopefully this will be an easy one but I think I need another pair of eyes…

Basically I want a different html background colour for each article. I have managed to do this when looking at the individual articles themselves, but wonder if there’s a way to reflect this on the homepage, where I am displaying the latest article?

In my default template I have the following code to override my default background colour on a per article basis:

<code>
<style type=“text/css” media=“screen”>
html { background: #<txp:if_individual_article><txp:if_custom_field name=“bg”><txp:custom_field name=“bg” /></txp:if_custom_field></txp:if_individual_article>; }
</style>
</code>

And have added a custom field of ‘bg’ so when I write a new post, I simply add the hex code for the colour I want the background to be. It works perfectly in the individual articles, but on my home page I am displaying the single latest article and it doesn’t pick up the override. I understand that the default page is not an individual_article, so I get where the problem is, just can’t think of a way to get it to work.

Any ideas? I’m not precious about what I’ve done, am happy to scrap the <code><txp:if_individual_article></code> way if there’s a better way!

FYI the articles have only pictures of them, just in case you’re wondering…

Thanks all.

colak · 2011-02-16 16:46:55

Hi Stu

try

<style type="text/css" media="screen">
<txp:if_individual_article>html { <txp:if_custom_field name="bg">background: #<txp:custom_field name="bg" />;</txp:if_custom_field>}</txp:if_individual_article>
<txp:if section name="">html { <txp:article_custom limit="1"><txp:if_custom_field name="bg">background: #<txp:custom_field name="bg" />;</txp:if_custom_field></txp:article_custom> }</txp:if section>
</style>

hallstu · 2011-02-16 18:09:50

Hi, thanks for your quick response. Unfortunately that isn’t working, but at least you’ve reminded me about the <txp:if section name=”“> so I think that will help. I’ll play around with ifs and elses…

Thanks

hallstu · 2011-02-16 18:15:39

Sorry, I should be more helpful with my responses… the above suggestion from Yiannis outputs:

<txp:if section name=”“>html { background: #a8af7b; }</txp:if section>
</style>

on the homepage and:

on the individual article pages, so I feel we’re nearly there. Thanks again.

colak · 2011-02-16 18:31:36

found the mistake… some underscores missing… sorry:)

<style type="text/css" media="screen">
<txp:if_individual_article>html { <txp:if_custom_field name="bg">background: #<txp:custom_field name="bg" />;</txp:if_custom_field>}</txp:if_individual_article>
<txp:if_section name="">html { <txp:article_custom limit="1"><txp:if_custom_field name="bg">background: #<txp:custom_field name="bg" />;</txp:if_custom_field></txp:article_custom> }</txp:if_section>
</style>

hallstu · 2011-02-16 18:53:55

Great, that’s done it, thanks very much! Now to work out how to change the background colour using the pagination. It works on mysite.com and mysite.com/articletitle, but it keeps the same colour on mysite.com/?pg=2 and on all pagination from the homepage…

Never mind, that’s another problem, thanks again for your solution.

johnstephens · 2011-02-16 19:59:43

This code will output an unnecessary style element on any article for which no background color is specified.

Maybe something like this would work? [Code is nested for readability, but you can easily remove the whitespace to your heart’s delight.]

<txp:if_individual_article>
	<txp:if_custom_field name="bg">
			<style type="text/css" media="screen">
				html { background: #<txp:custom_field name="bg" />; }
			</style>
	</txp:if_custom_field>
</txp:if_individual_article>
<txp:if_section name="">
	<txp:article_custom limit="1">
		<txp:if_custom_field name="bg">
			<style type="text/css" media="screen">
				html { background: #<txp:custom_field name="bg" />; }
			</style>
		</txp:if_custom_field>
	</txp:article_custom>
</txp:if_section>

colak · 2011-02-17 07:37:27

johnstephens wrote:

Using John’s code and replacing article_custom with article… not sure how the comment forms will behave though.

<txp:if_individual_article>
	<txp:if_custom_field name="bg">
			<style type="text/css" media="screen">
				html { background: #<txp:custom_field name="bg" />; }
			</style>
	</txp:if_custom_field>
</txp:if_individual_article>
<txp:if_section name="">
	<txp:article limit="1" allowoverride="0">
		<txp:if_custom_field name="bg">
			<style type="text/css" media="screen">
				html { background: #<txp:custom_field name="bg" />; }
			</style>
		</txp:if_custom_field>
	</txp:article>
</txp:if_section>

hallstu · 2011-02-18 09:53:05

Hi John, thanks also for your help. To be honest I don’t mind the style being output on every article, as there will never NOT be a colour specified. But I do see your point and it’s interesting to see different methods so I appreciate your help.

Thanks again guys.

Textpattern CMS

Textpattern CMS support forum

#1 2011-02-16 16:32:25

Individual article styling on home page

#2 2011-02-16 16:46:55

Re: Individual article styling on home page

#3 2011-02-16 18:09:50

Re: Individual article styling on home page

#4 2011-02-16 18:15:39

Re: Individual article styling on home page

#5 2011-02-16 18:31:36

Re: Individual article styling on home page

#6 2011-02-16 18:53:55

Re: Individual article styling on home page

#7 2011-02-16 19:59:43

Re: Individual article styling on home page

#8 2011-02-17 07:37:27

Re: Individual article styling on home page

#9 2011-02-18 09:53:05

Re: Individual article styling on home page

Board footer