[Pro] Is it possible to style Javascript output?

Freeway
1

Hi all and thanks for your attention.

I use an rss feed service (rssinclude.com) and cannot work out how to style the output. Can someone please advise if it’s actually possible (rss include say it is), and if so point me in the right direction?

I work around styling currently by pasting the markup item in a styled paragraph, but I would like a little more control!

Specifically can someone advise how to create style classes for the output? I have tried simple styles “rssincl-itemdate” for instance with no result.

I would like to be able to reduce the font size for the date element “rssincl-itemdate”, and add a “width 100%” class to the image to make it scaleable (or is there another way of doing that?).

The input code looks like this (actual example):

<p class="Content"><script type="text/javascript" src="http://output56.rssinclude.com/output?type=js&amp;id=1035824&amp;hash=22ceec41cbe15510fdf4aada0dea91ef"></script>
</p>

The output curently looks like this:

document.write("    <div id="rssincl-box-1035824">n    
<div class="rssincl-content">n                    
<div class="rssincl-entry">n    
 <p class="rssincl-itemdate">n  November 5, 2015  </p>n                                                                                                                                                                                    <div class="rssincl-itemimage">n                           
<a href="http://sunshinecoast.peterhyndman.com/2015/11/cluster-housing.html" target="_blank"><img src="http://4.bp.blogspot.com/-1EG1nakT7FU/VhZnM18frAI/AAAAAAAAPAM/56BUo04LP3Y/s640/Oct-Nov-5.jpg" alt="Cluster housing." title="Cluster housing."n    width="295.00" height="166"      /></a>   </div>n                                                                                                   
<p class="rssincl-itemtitle">n     <a href="http://sunshinecoast.peterhyndman.com/2015/11/cluster-housing.html" target="_blank">n      Cluster housing.    </a>n                        </p>n                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <div class="rssincl-clear"></div>n            </div>n                        </div>n       
 <!-- RSSbox id#1035824 powered by RSSinclude.com -->n    </div>n");

Any help at all will be greatly appreciated!

Cheers,
Peter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

2

Can you post a link to a ‘live’ example - that will make it much easier for us to answer your questions.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

3

Thanks Dave, I will set up a live situation in an hour or two, so I guess we shall “meet again” in the morning! :slight_smile:

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

4

Here is a live example - I hope I haven’t confused the issue by switching to a php feed - it’s what I will be using live so the question is the same.

http://dailyphotoportal.com/testbox.html

Regards,

Peter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

5

I work around styling currently by pasting the markup item in a styled paragraph, but I would like a little more control!

As far as I can tell from your example you want to set up some styles in FW. Easiest way would be to include the following in Page>Html Markup in the Before section

<style type= "text/css">
.rssincl-itemdate {font-size: 14px; }
.rssincl-itemtitle {color: red; etc}
</style>

Sizing of the image is a bit more tricky because there are inline size attributes on it already but something like

<style type= "text/css">
.rssincl-itemimage > img {width: 100% !important; }
</style>

But you will also have to style the image item’s container to give it a size

<style type= "text/css">
div.rssincl-itemimage {width: 100%; }
</style>

And then you can put them all together

<style type= "text/css">
.rssincl-itemdate {font-size: 14px; }
.rssincl-itemtitle {color: red; etc}
div.rssincl-itemimage {width: 100%; }
.rssincl-itemimage > img {width: 100% !important; }
</style>

Obviously you will need to fiddle with the values but if you put the raw feed on the page and add the styling in Page>html Markup you should be able to get there.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

6

You might need more specificity on the image

.rssincl-itemimage > a > img {width: 100% !important; }

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

7

Thanks very much Dave, I had just begun experimenting with exactly that (styling a markup box) and with some success (I am no coder!)- I was thinking there may be a more “Freewayesque” solution… but will now continue along your recommendations.

The !important tag may well solve my image issues too… I will report back.

Regards,

Peter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

8

Brilliant Dave! I can’t thank you enough! I have no idea what the " a>" did, but it all works in principal.

Now if only I could get out of the habit of spending days looking to do things the easy way!

After a few more days of play I may have my simple site up again!

Cheers,

Peter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

9

I was thinking there may be a more “Freewayesque” solution…

The problem is that your feed is external to FW so FW is not ‘aware’ of its existence - hence the Page>Html Markup solution.

There are methods in FW to create more complex styles in the Styles palette (Ernie is a Master at this) but for now this should work for you.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

10

I do aspire to bring the feeds “in-house” one day… I’m on a twenty year learning curve I think!

P

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options