The Omni Group Forums

The Omni Group Forums (http://forums.omnigroup.com/index.php)
-   OmniWeb Feature Requests (http://forums.omnigroup.com/forumdisplay.php?f=28)
-   -   Custom CSS for RSS feeds (http://forums.omnigroup.com/showthread.php?t=139)

marc 2006-04-17 05:39 AM

Custom CSS for RSS feeds
 
OK, perhaps this is too big a change for 5.5, but now that we can finally assign a custom CSS to a site via [B]Site Preferences[/B], this would be a simple way to allow us to view RSS sites however we please, probably with one of [URL="http://www.hicksdesign.co.uk/journal/"]Jon's[/URL] stylesheets. ;)

Applying a custom sytlesheet to RSS feeds would offer a lot of flexibility -- as a per-feed setting, as some feeds are lists suited to the bookmark-mode, or globally to switch to using OW as more of a news reader than the current UI lends itself.
[INDENT][SIZE="1"]Of course my complaints about the UI could be partially addressed by re-arranging the Info Panel to allow more room for the Description/Comment field, by supporting font sizing in that field (standard Cmd +/-) and perhaps by allowing us to resize the panel.[/SIZE][/INDENT]
If it's not immediately obvious, the idea would be that by applying a stylesheet OW would switch over from displaying the RSS in the bookmarks-mode, to rendering the feed in WebKit using those CSS formatting rules (of course.)

Ideally, you'd be able to click on an RSS link and either have the feed rendered [B]or[/B] shown as a bookmark window (depending on preferences, and perhaps a contextual menu item/modifier key to get complicated!) [B]and then[/B] have the option to save the feed by dragging it into the bookmark source list, or using the bookmark/subscibe command.

Maybe I'm oversimplifying, but I think this would be a fairly unobtrusive way to make OW's RSS support much more powerful, and flexible than other browsers (well, broadly on par with Firefox, but much nicer!)

narmada 2008-12-09 11:01 PM

How to hover over an HTML table cell and have it pop up an image (larger than the cell) using only CSS ? I know there must be a way to do this. Basically I have an empty table cell (though I can put text or a blank image or something in it), and when the user hovers over it, I want an image to pop up over the cell (and nearby cells if it's larger than the cell size). So the top left of the image will appear to be in the top left of the table cell and the overflow will cover cells to the right and below as appropriate.

hintofsilence 2009-03-30 11:51 AM

How to hover over an HTML table cell and have it pop up an image...
 
[QUOTE=narmada;52298]How to hover over an HTML table cell and have it pop up an image (larger than the cell) using only CSS ? I know there must be a way to do this. Basically I have an empty table cell (though I can put text or a blank image or something in it), and when the user hovers over it, I want an image to pop up over the cell (and nearby cells if it's larger than the cell size). So the top left of the image will appear to be in the top left of the table cell and the overflow will cover cells to the right and below as appropriate.[/QUOTE]

narmada,

I don't know if you've already found a solution for this, but it's actually quite simple and fairly logical. CSS allows a TON of flexibility on this. Here's how you can "skin" table cells and add a hover state at the same time.

[CODE]
table#TableName {
width: 600px;
height: 600px;
}

td.cell1 {
width: 150px;
height: 40px;
font-size: 12px;
color: #000;
}

td.cell1 a {
color: #000;
text-decoration: none;
}

td.cell1 a:hover {
color: #333;
}

td.cell1 a span {
display: none;
}

td.cell1 a:hover span {
/*background-image: url(images/YourImage.jpg) no-repeat;*/
width: 200px;
position: absolute;
top: 0;
left: 0;
display: block;
}
[/CODE]

So then the HTML generating the table would look something like this...

[CODE]<table id="TableName" cellspacing="0" cellpadding="0"><!--Spacing, positioning, padding and colors can all be defined in the CSS, so it's unnecessary to do it here, too-->
<tr>
<td class="cell1" valign="top"><a href="">Your Cell Data Here<span>Details to appear in the hover state.</span></a></td>
<td class="cell1" valign="top"><a href="">Your Cell Data Here<span>Details to appear in the hover state.</span></a></td>
<td class="cell1" valign="top"><a href="">Your Cell Data Here<span>Details to appear in the hover state.</span></a></td>
</tr>
</table>
[/CODE]

So the normal "a span" we want to be invisible, unless someone is actively hovering over the cell data within the table. The "a:hover span" is where the actual floating image/text box is going to appear, and what CSS rules it should obey. I hope this at least gets the ball rolling for you. I've used this method many times, and it's very effective.


All times are GMT -8. The time now is 04:06 AM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2024, vBulletin Solutions, Inc.