Customizing the CSS of the RSS Feed Output Only

[108]

Hi,

Is there a way to set CSS parameters for the serendipity RSS feed independent of the CSS for the actual blog itself?

Thanks,
108

[kleinerChemiker]

RSS feeds do not have CSS.

[garvinhicking]

Hi!

kleinerchemiker is right; CSS is not involved, since the client/webpage that displays the RSS is in charge of applying CSS rules to the output.

You can however edit the feed*.tpl template files and insert any HTML code you like with CSS inline styling.

Note though that many clients and websites filter out (m)any CSS inline styles when displaying RSS feeds.

Regards,
Garvin

[108]

Thanks for the info!

I am having trouble figuring out which feed*.tpl file is being used with my blog. There are a lot of them. Any suggestions?

Another question; Is there any way to strip out certain code from the data that is broadcast by serendipity in it's RSS feed? I have "full color" entries made in the WYSIWYG editor that need to render in full color when accessing the blog via the direct link "/serendipity/index.php", but I want the RSS feed broadcast to strip out any text color parameters that are included in the blog entries.

Is this possible?

Thanks!
108

[Don Chambers]

As has already been mentioned, there are smarty template files (*.tpl) that are used to emit your feed. Which file is being used is a function of what your feed reader has been instructed to use. Most newer feed readers are using feed_2.0.tpl. Text color should not really be rendered in your RSS feed unless that info is part of your entries.

[108]

Text color should not really be rendered in your RSS feed unless that info is part of your entries.

As has already been mentioned, that information is part of my entries.

I have attempted to make alterations to each one of the feed*.tpl files in the /default/ dir by changing certain code in each file one file at a time (such as adding a custom message after the version # of serendipity in place of the URL for S9Y.org) so that I can find the message in the raw RSS feed code and narrow down which .tpl file is being utilized, but none of the changes I'm making to any of the template files are showing up in the raw code of the RSS feed.

So the only logical deduction I can make is that my installation of serendipity is using a feed*.tpl file that is located in a directory other than /default/. Any suggestions as to how I might figure out which template file is being used?

Also, any changes that I make to the atom.css file seem to go unnoticed. In fact, whenever I access my RSS feed URL directly in a web browser to get the code, the header notifies me that "This XML file does not appear to have any style information associated with it." Any ideas as to why this might be happening?

Thanks!
108

[garvinhicking]

Hi!

Remember that RSS-Feeds are cached! Write a new blog entry to force the cache to be updated, that's the easiest way. You can also add a nocache-Parameter to rss.php in the URL, but I don't know the exact url variable name by heart right now.

atom.css is only used for the atom-versions of a feed, it does not apply to RSS-Feeds.

[108]

Thank you!!

Now for the final question: How does one go about inserting STYLE information into the .tpl file? Do you just throw it in there or do you need to specify headers for that portion of the code? And if so, how should it be written?

I tried adding this header to the .tpl file:

Code: Select all

<?xml-stylesheet type="text/css" href="http://stoneycurtisband.com/News/serendipity/templates/default/rss.css" ?>

And then creating a file names "rss.css" in same dir and filled it with this:

Code: Select all

@charset "utf-8";
/* CSS Document */

rss {
background-color: #000000;
}

But the only document it creates a black background on is the display of the XML code (whenever the .rss file is accessed directly via a browser). When displayed by a feed viewer, the background is still white, even though all of the text styles and colors are displayed.

Any ideas?

Thanks!
108

[108]

With further dissecting of the blog, I've figured out that the RSS feed is only being used for a simple overview of the posts in the blog. Once the "Read More »" link (which is probably generated by the site that is reading the RSS feed) is selected for a certain entry, it links to "serendipity/index.php?/archives/[entry name].html", which of course is generated based on serendipity.css.php... the same CSS that is used to display the blog.

So I'm back to where I started, trying to figure out how to edit the "engine" that creates the virtual html files in the archives directory so as to make them use a different entries.tpl file.

Help!

[Don Chambers]

I think you got side tracked on the RSS concept.... the rss feeds are supposed to be format-free versions of your entries.. the actual entries are generated by different files.

First, for lots of reasons, go to the admin/backend and select Adminstration ->Configuration -> Appearance and Options -> URL Rewriting. Select a URL rewriting scheme if available to you... I prefer apache mod_rewrite. If that is available to you, it will remove the index.php? from your permalinks and is more SEO friendly.

entries use the smarty file entries.tpl file to render final output. You can copy this file from /templates/default/ to your actual template folder as a starting point.

[108]

Thanks, Don.

I do understand the RSS concept, I'm just utilizing the RSS feed of my serendipity installation in a unique manner that suits my needs.

I've deactivated URL rewriting in my admin panel, as I don't want any search engines picking up my serendipity pages. These are intended to be used as in embedded object on a single web page only. I don't want people linking to them.

My entries are already utilizing the entries.tpl file from my template folder, so you lost me there.

Maybe showing you the actual blog, feeds, etc would be helpful in communicating what I'm trying to do .

Here is a link to the blog itself (keep in mind that I have heavilly butchered my index.tpl & entries.tpl files as well as the style.css file, so it's doesn't look anything like the default):

http://stoneycurtisband.com/News/serendipity/index.php

This page is intentionally rendered with a transparent background as per my style.css, because the IFrame into which it is loaded has a dark background. (For reasons too complicated to explain here, the blog must render with a transparent background.)

The index.php file renders perfectly, exactly as I want it to. The RSS feed renders exactly the same as the index.php. Only problem with that is, the feed is always displayed on a page with a white background. What I want is for the RSS feed to be sent out the same except with a non-transparent, black background.

The RSS viewer I am using is located here:

http://www.reverbnation.com/page_object ... st_1145058

If you click on any of the "Read More »" links under the entry titles, you are taken to a rendering of the article on a page with a transparent (in this case, white) background. Because the color formatting of the text in each of the entries is designed to be rendered on a dark/black background, I need the background of the RSS feed pages to be black as well.

Does this explain any better what I'm trying to do?

Thanks,
Chris

[garvinhicking]

Hi!

Ah! Now I think I understand.

And I think you cannot solve this situation, because you want your blog to have different CSS styles depending on whether it's loaded inside an iframe or not.

This cannot really be done; even though you could pass parameters to your blog when called in the iframe, you cannot really propagate this variable to all followup entries.

Have you tried applying the style inside the iframe in the CSS of your parent page, instead of in the CSS of your blog page? You need to find a way CSS-wise to make the blog work with and without the iframe concept, so that only your parent page is responsible for properly formatting the page, and not the blog page itself.

Maybe you can figure out a way to include the blog not as an iframe, but include the stuff that usually is outside of the iframe to be within serendipity, so that you do not need an iframe at all.

Regards,
Garvin

[yellowled]

You need to find a way CSS-wise to make the blog work with and without the iframe concept, so that only your parent page is responsible for properly formatting the page, and not the blog page itself.

Well, if I get this right, there's always the possibility of adding all styles which should be different if displayed in an iframe in a second version to the style.css, using iframe as a selector.

I.e. if body usually is supposed to have a white background, but a black one in an iframe:

Code: Select all

body { background: #fff; }
/* other styles */
iframe body { background: #000; }

But that doesn't seem desirable since it's prone to error and would really blow up the style.css.

YL

[108]

Have you tried applying the style inside the iframe in the CSS of your parent page, instead of in the CSS of your blog page? You need to find a way CSS-wise to make the blog work with and without the iframe concept, so that only your parent page is responsible for properly formatting the page, and not the blog page itself.

Ok, I went over to StackOverflow.com and got something going. Only problem is, I don't know how to, or if I even can, implement it within the blog framework.

First, I change the background parameter in the serindipity style.css to #000000, instead of transparent. This takes care of the display issue in the entry links from the RSS feed.

The blog is loaded into it's iFrame on it's parent website with the following js code:

Code: Select all

function OK_loadit2(url,layerObjNS, width, bgColor) {  //note the added bgColor param
 if (document.layers){
         document.layers[layerObjNS].load(url, width);
    } else{
         if (window.frames.length > -1){
             window.frames[layerObjNS].location.href = url + "?bgcolor=" + bgColor;
}

I added in the "bgColor" parameter to the script, as it didn't have it initially. This allows me to add a parameter to the HTML code I use to call the script and load the iFrame with the blog:

Code: Select all

<div id="Logo1"><img src="/images/Logo1_214x150.png" onload="OK_loadit('/Home/serendipity/index.php','L_Home','*');OK_loadit2('/News/serendipity/index.php','L_News','*','transparent');return document.MM_returnValue"></div>

Notice the 'transparent' parameter I've included in the code. This adds a "?bgcolor=transparent" query to the URL when the blog is called.

Now all I need to do is use (self.location.search) in the target page to set the background color of the page with the following CSS entry:

Code: Select all

background color=self.location.search

This would work great if it were an HTML page being loaded into the iFrame, but unfortunately "index.php" is a complex .php blog app that doesn't have a stylesheet contained therein.

So the question becomes, is it possible to implement this method with serendipity? And if so, where... or how?

Perhaps I could assign a variable in php (within index.php) to equal the query string, include some logic which would set that variable to "#000000" if the query<>"transparent", and then set the background color parameter within the style.css to equal the variable. Is that a possibility?

Thanks,
Chris

[garvinhicking]

Hi!

That's what I meant with an additional parameter, but the task of carrying that through on to other links and pages is worth a few days of development and REALLY cumbersome.

And idea that comes to my mind is to make the blog run on 2 domains: www.blog.com and iframe.blog.com. Then inside the serendipity.css.php (or with an event plugin) you could emit different CSS depending on the hostname ($_SERVER['HTTP_HOST']) that has been called. then in the iframe you would use a different host than you usually use.

Serendipity supports running on multiple domains as long as the base path is identiclal (i.e. always /blog or /), and when you enable "autodetect HTTP-hostname" in the s9y configuration.

Regards,
Garvin