Since the general programming forum was nixed, I hope that it's still okay to post such a question here.  Mods, if it doesn't belong here, feel free to move it.  Thanks.

Since I am not a web developer, I am having trouble getting this automatically generated RSS feed to match the style of my webpage.  What I used was a pre-written template and went from there.  So to be honest, I don't know jack crap about CSS, but I understand the basics of HTML (I need to be more like fastcall22).  This is the code to my RSS feed that rssdog generated:

<iframe width="100%" height="750" class="rssdog" src="http://www.rssdog.com/index.htm?url=http%3A%2F%2Fblog.shogun3d.net%2Ffeeds%2Fposts%2Fdefault%3Falt%3Drss&mode=html&showonly=&maxitems=5&showdescs=1&desctrim=0&descmax=0&tabwidth=100%25&showdate=1&linktarget=_blank&textsize=small&bordercol=%23000000&headbgcol=%23000000&headtxtcol=%23ffffff&titlebgcol=%23000000&titletxtcol=%23ffffff&itembgcol=%23000000&itemtxtcol=%237f7f7f&ctl=0"></iframe> 

For those of you that need it, this is a link to the website that generated it: http://rssdog.com/

And last but not least, this is a link to my website: http://shogun3d.net

Since I'm getting ready to make a submission of my game to id@xbox, I really would like to have my blog used to display project updates and so on.  I know, I'm really anal about stuff like that, but I want to make the best impression I possibly can because as a poor indie without a dime in his name and one paycheck away from losing everything, I have little to no room for error.

Any ideas?  Thanks.

Shogun

There are some non–obvious problems with this setup, but let’s cover some CSS basics first.

Every HTML element has a set of properties that describe how it should be laid out on a page and how it should rendered. They can be accessed with it’s style property in Javascript. You can write Javascript or add a style attribute to each HTML element to give your page the look and feel, but it quickly becomes tedious and cumbersome. Enter CSS. It allows you to apply styles to elements determined by rules. These rules can even be stored in a separate file, so you don’t have to clutter your HTML. Here’s a CSS cheatsheet. Now, on to style matching.

If you want to match styles, then open your browser’s developer tools and inspect random elements on the page. Poke at their CSS properties and find out what they’re made of. Take note of font-family, font-size, line-height, color, background, padding, and margin properties as they are a significant chunk of the look and feel.

--

Next, let’s talk about RSS. When querying an RSS feed, you are met with an XML document with a summary of recent posts. Here’s an example RSS feed. The problem is that this XML isn’t usable HTML. It will need to be transformed into HTML. You’ve opted to use rssdog.com do this for you. The query string parameters you pass to rssdog tells it which RSS feed to fetch and how to render that HTML, along with some basic styling. By using an iframe tag with this URL, the user’s browser will make a separate request on your homepage to rssdog with your parameters and rssdog will fill that space with the resulting HTML. Browsers are particular about cross–domain interactions for good reason, so while this iframe is a part of your homepage, it is a considered a separate web page and has protections against modification. More on this later.

--

So, options at this point:

1. Render the XML yourself, server side. This is the easiest option as you can embed the resulting HTML directly into your page and you can retain your styling. You will need to research what server side languages are available with your web hosting provider. You will then need insert a server side script on your homepage that will download the XML from the RSS feed (using CURL, for example), traverse the resulting XML document, and render the HTML.

2. Render the XML yourself, client side. Include some Javascript to invoke an XHR request to your feed, receiving the XML, and dynamically creating HTML elements from it. This requires that the server send a Access-Control-Allow-Origin header to grant access from shogun3d.net to blog.shogun3d.net.  Check your web hosting provider on how to send that header. After enabling the option, use the network tab on your developer tools to ensure that the header was sent. (Be sure to hard refresh to prevent your browser using a cached version of the page and headers.) The theme you have selected has jQuery included, so you can use jQuery.ajax to fetch your XML. Otherwise, you can use a raw XMLHttpRequest.

3. Manually sync your homepage with your blog. This is the most annoying option.

Wow, this is more complex than I thought!  It's times like this I wish I could just pay someone to do it for me.  But either way, I will get it done, one way or another because it's gotta get done.

I'll be honest here, I don't know jack crap about server side, jQuery, ajax, etc.  I only know about HTML5, Javascript and XML.  Everything else you said is like greek to me, so I'll have to take some online courses.

Thanks fastcall!

Shogun