Link to home
Start Free TrialLog in
Avatar of NEILPH
NEILPHFlag for New Zealand

asked on

How can I show RSS links as text and not show other links on a web page?

Is this impossible?

My website .html page is designed to be printed. To make it look tidy I have removed all links using this CSS...
a:link
{
display: none;
}

Now I am adding WordPress blog posts (via RSS tool Feedburner\Buzzboost) to this printed page. I have discovered that unfortunately, WordPress post titles appear as links (see my example http://www.isc.co.nz/feedflop.htm .)

What I need is for no links to display, EXCEPT that WordPress post titles should display not as links but as plain (maybe bold or underlined) text. I can see 4 possible solutions but they are proving to be  beyond my skills.

SOLUTION 1?
Wrap a CSS ID or Class around the blog post title to let it display, while using a:link{display: none;} to remove links from the rest of the page. However, this doesn't appear to work, probably because apparently a:link{display: none;} is a global page style, and anyway the blog post title would still look like a link, although I could maybe use a:link {text-decoration:none;color:#000000;} to hide this fact from the user before they print the page.

SOLUTION 2?
Buzzboost is a Feedburner tool that turns blog RSS feeds into HTML. You simply place the Buzzboost javascript on the page where you want the output to appear.

Feedburner\Buzzboost has a rich set of CSS styles as you can see at the following links...
http://www.google.com/support/feedburner/bin/answer.py?hl=en&answer=78991
http://www.google.com/support/feedburner/bin/answer.py?answer=78974&ctx=sibling

I already use the Feedburner CSS to format blog posts on my page. The promising feature is that I don't need to surround the Buzzboost javascript with a <div> or <span>.

Could I therefore embellish a Feedburner style to turn the blog post title from a link into plain text before it hits my page?

I've experimented using the following Feedburner style but it's not promising. The a:link{display: none;} overrides it, hiding the headline (post title)...

div.feedburnerFeedBlock ul li span.headline {
font-weight:bold;
}

SOLUTION 3?
Could I add more javascript to the Buzzboost javascript that appears on my page, to turn the blog post title from a link into plain text before my a:link{display: none;} comes into effect?

Here is the existing script <script src="http://feeds.feedburner.com/co/KWjC?format=sigpro" type="text/javascript" ></script>

SOLUTION 4?
I could modify the template inside my WordPress site so that post titles are not links. A WordPress expert suggests this is not an ideal solution as I may have to keep changing it every time there is a new version of WordPress.
Avatar of tokyoahead
tokyoahead

solution 1 still works.

the headline has the class "headline".

you can remove the formatting by adding the following to the end of the CSS contents:



.headline a:link {
    text-decoration:none;
    color:#000000;
}

Open in new window

Avatar of NEILPH

ASKER

Thanks.

I've added that to http://www.isc.co.nz/feedflop.htm and updated it online for you. You can also see the code below.

I'm not hugely skilled at CSS so maybe I've got it wrong. In the past I've successfully supressed links by using a:link{display: none;} but as you'll see at the bottom of the online page, the ordinary non-blog-originated link to ISC Website is still visible. And the second blog title 'q' is visible as a link while the first one "Martin Chuzzlewit" isn't visible.


<html>
<head>
<title>News</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<meta name="generator" content="BBEdit 7.1.4">
<style type="text/css">
 
p
{
	font-family: Times New Roman, Times, serif;  
	font-size: 12px;
	line-height: 115%;
	margin: 10px;
}
 
 
div.feedburnerFeedBlock {
margin-left:0;
}
 
div.snap_preview {
margin-left:0;
}
 
div.snap_preview p {
margin-left:0;
}
 
div.feedburnerFeedBlock ul {
margin-left:0;
padding-left:0;
list-style-type: none;
}
 
 
/* to control column width hide wordpress non-embedded youtube */
.vvqbox {
display: none;
}
 
a:link
{
display: none;
}
 
.headline a:link {
    text-decoration:none;
    color:#000000;
}
 
 
</style> 
 
 
</head>
<body>
<table width="100%"border="0"cellspacing="0"cellpadding="0"name="holdit">
  <tr id="masterContainer"valign="top"align="left"> 
    <td width="33%"> 
      <p>From WordPress blog via feedburner buzzboost.<br>
        I want the post title "Martin Chuzzlewit" to appear at the top of this 
        post as ordinary HTML text not as a link.<br>
        Likewise for the one line post at the bottom has the title 'q'.</p>
      <p>At the same time I want any non-WordPress links to not show at all.<br>
        There is an ordinary link at the bottom of this page between A and B.<br> 
        This should not show.<br>
      </p>
          
      <p>
        <script src="http://feeds.feedburner.com/co/KWjC?format=sigpro" type="text/javascript" ></script>
      </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
	  <p>A&nbsp;<a href="http://www.isc.co.nz">ISC website</a>&nbsp;B</p>
    </td>
  </tr>
</table>
</body>
</html>

Open in new window

If I change the last part of the CSS to this it works fine:


a:link
{
display: none;
}

.headline a:link {
    text-decoration:none;
    color:#000000;
    display:inline;
}

remember that a code below overrides a code above.
so if you first disable all links, you have to re-enable them below for the specific .headline class.
Avatar of NEILPH

ASKER

I've just reposted http://www.isc.co.nz/feedflop.htm placing the link styling where you last suggested [see snippet below].

When I look now I see both blog post titles\headlines showing as links, with the first one "Martin Chuzzlewit" disguised by your text-decoration styling.

So they are still links. Do you think that disguising the post titles by text-decoration styling is the best I can hope for, rather than turning them into pure text?

I also unfortunately, see at the bottom of the page that the ISC Website link is showing when a:link{display: none;} should have stopped it. If I want the decoration to affect only the blog headlines shouldn't I put them within a <div> or <span> so that all links outside that will not show?
 <style type="text/css"> 
 
p
{
	font-family: Times New Roman, Times, serif;  
	font-size: 12px;
	line-height: 115%;
	margin: 10px;
}
 
 
 
div.feedburnerFeedBlock {
margin-left:0;
}
 
div.snap_preview {
margin-left:0;
}
 
div.snap_preview p {
margin-left:0;
}
 
div.feedburnerFeedBlock ul {
margin-left:0;
padding-left:0;
list-style-type: none;
}
 
 
/* to control column width hide wordpress non-embedded youtube */
.vvqbox {
display: none;
}
 
 
a:link
{
display: none;
}
 
.headline a:link {
   text-decoration:none;
   color:#000000;
   display:inline;
}
 
 
</style> 

Open in new window

you cannot remove the link unless you run a php script (or javascript or whatever else) over it to actually strip the HTML tags.
CSS cannot accomplish this.

I cannot see the ISC website link.

If you hide all links and then in the next statment show only specific ones again, you are good. the current CSS does that. I cam not sure why you still see the other link. maybe you have to clear your cache once or force reloading the page including the CSS (I think CTRL-Reload does this)
Avatar of NEILPH

ASKER

Hi tokyoahead, I've just realised it's you who helped me with the earlier question I had leading up to this one.

I turned off my PC and network and then rebooted, and I definitely see 3 links at http://www.isc.co.nz/feedflop.htm. The ISC website link is at the very bottom of the page below the Feedburner logo.

It's nice that you say I can hide all links by using a:link{display: none;} and reveal certain ones  by using .headline a:link {   text-decoration:none;   color:#000000;
   display:inline;}. I'm surprised  though because www.w3.org/TR/CSS2/visuren.html seems to contradict it. It says this of display: none "This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants. "

Referring to your first sentence: I like the option of using javascript to strip the blog headlines, turn them into text and then display them, and empty the non-blog headlines. Do you have any code suggestion that would make this work? It would of course, act as an alternative to  using CSS to achieve my ends.

1. I still cannot see the link. I cannot see a feedburner logo either. Tried FF3, IE8, O9. nothing. all the links are as they should be, only two there, both titles. I would recommend to go to your browser settings and clear the cache. restarting the PC or the network does not have any effect.
2. a class is not a descendant. a descendant is a nested element inside the previous, such as <div><a href..></div>. so if you set display:none to a <div>, you cannot set a display:inline to a link inside the <div>. But you CAN define a display:inline to a div of a different class that is not nested inside the other.

div {
  display:none;
}
div a{
  display:inline;   // this will not work, since the a is a descentant and addressed as such.
}
.headline {
  display:inline; // this will work, since its a class, not a descendant.
}

3. Unfortunately I do not know Javascript enough to help you there.


Avatar of NEILPH

ASKER

Well, that had an effect. I'm using IE8 in Vista. In IE8 I went to Internet Options->Browsing History and deleted Temporary Internet Files and History, but not cookies. I then went to Settings and changed "Check for new version of stored pages" from "automatically" to "every time I visit the page".

Now at  http://www.isc.co.nz/feedflop.htm, the Feedburner logo has gone, and both the blog post titles are identically decorated. BUT the ISC website link is still there at the bottom of the page. Very odd. It's getting near dinner time here in New Zealand, so tomorrow I'll go to an internet cafe and see what shows on the page.

I didn't appreciate how much the default settings at IE7and 8 have been muddling the situation. Not good when I am developing and testing sites.

I understand now [I think] what you're saying about the display inheritance. In your example...
div {
 display:none;
}

...would display NO links anywhere in the page. However, .headline is a class and therefore anything of that class on the page WILL be displayed.

How does this style for Class .headline know where to find the <body> code to act on? I would have thought it would need a span wrap around the blog code, something like...

 <span class="headline">      
<script src="http://feeds.feedburner.com/co/KWjC?format=sigpro" type="text/javascript" ></script>
</span>





.headline {
  whatever
}

this will affect all things that have a class="headline" in them. not around them.

if you want to affect all links INSIDE an element that is of the class headline, you do

.headline a {
   whatever
}

I HIGHLY HIGHLY recommend you to change to firefox for developing.
Avatar of NEILPH

ASKER

There seems to me to be a weakness about using Firefox for developing: a majority of users still use IE.

The website has got to work in IE.

What better way to test it than to develop in IE.
developing and testing are two different things. I develop everything in FF and make sure it looks good with IE.

if IE is not able to show you the page every time in the way you saved it on the server but instead shows you what it looked last time, then you are disabling your development. On my IE your page looks fine without showing the feedburner logo, because I use it only occasionally to check back after developing it with FF.

you better develop your pages so that they look the same in all major browsers. that is neither hard nor impossible. It might restrict you on tricks and tweaks, but at the same time teaches you accessibility and guarantess that the website will still work when the next version of IE comes out.

don't use a pen to make a pen. make it with the proper tools and take out another pen from time to time to check if you are on the right track.
Avatar of NEILPH

ASKER

I understand what you're saying and I know other developers are equally keen on FireFox. So there must be extra advantages to it beyond simply negating the disadvantage caused by IE's caching, etc. I can overcome that in IE by changing its caching settings, etc.

Are you able to point me at an online article stating the advantages of FF over IE as a development tool?

By the way, this morning when I looked at my page again online the Feedburner logo has disappeared. So now it looks like "we're working off the same page" [attempt at humour].

Returning to the original problem I think the situation is:
- I must put Wordpress feeds through Buzzboost because otherwise the line break and paragraph formatting is removed. (I've tried otherwise using Pipes or PHP)
- the title of any WP post put through Buzzboost remains as a link. I would have to use Javascript to turn that into text

Therefore, I need to ask an expert for help in writing suitable javascript. So if it's OK with you I'll close this question and award you points.
ASKER CERTIFIED SOLUTION
Avatar of tokyoahead
tokyoahead

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of NEILPH

ASKER

Thanks tokyoahead