Update: This report is obsolete. Online stuff changes from time to time, and for this topic a revision would be impractical.
Read more about archived posts, if you like.
As I try to explain in part 1, the code that structures your blog ("This is a blog post" "This is a heading" etc.) has to be associated with style definitions that are elsewhere. In this case, "elsewhere" is in the template for your blog.We'll be adding new style definitions to your template but not changing any existing ones. First, however, we have to tag your hack so as to associate it with the new formatting.
Return to the static blog page where you pasted your script and open it in the html editor.
The actual script is included inside a <script.../script> tag. To tag that for formatting, put it between the following tags:
<span class="rss-journey"> [<script.../script>] </span>[<script.../script>] refers to the first part of what you've already pasted.Publish this. There will be no change yet, but the span class now allows you to format the feed your script is rendering on that page.
The code that will format your css looks something like this:
/* RSS Journey
----------------------------------------------- */
/* Date, if included. */
.rss-journey .rss-date {
font: $(body.font);
color: #b5c88f;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 1px;
line-height: normal;
}
/* Controls indentation */
.rss-journey ul, .rss-journey ol {
padding-left: 0;
}
/* Formatting of each feed item (blog post)*/
.rss-journey .rss-item {
margin: 0;
margin-top: 1.5em;
line-height: 17px;
}
/* Space between paragraphs within feed items*/
.rss-journey .rss-item p {
margin-bottom: .95em;
margin-top: 0;
}
/* Formatting of blog-post titles in feed*/
.rss-journey .post-title {
margin: 0;
font: $(post.title.font);
margin-bottom: 0px;
margin-top: 3em;
line-height: normal;
}
/* Formatting of blog-post-title links in feed*/
.rss-journey .rss-item a {
color: $(post.title.color);
text-decoration: none;
}
/* Formatting of visited blog-post-title links in feed*/
.rss-journey .rss-item a:visited {
color: $(post.title.color);
text-decoration: none;
}
/* Formatting of blog-post-title links in feed
on mouse hover */
.rss-journey .rss-item a:hover {
color: #6f9d1c;
text-decoration: none;
}
/* Formatting of regular links in feed*/
.rss-journey .rss-item .special-link a {
font-size: 14px;
color: $(post.title.color);
text-decoration: underline;
margin: 0;
}
/* Formatting of regular links,
hover */
.rss-journey .rss-item .special-link a:hover {
color: #6f9d1c;
text-decoration: underline;
}
Note how ".rss-journey" corresponds to the tag you put around the script in your post. That's how blogger tells your browser where to apply the formatting.
When I say "The code that will format your css looks something like this," I mean that the actual values I specify are just examples, some of which probably won't even work in your template. You are going to have to try different things out and see how they render.
Still, you can start out by pasting the above into your template and seeing what happens. But before you do anything, back up your template (Design > Edit HTML; the "Download Full Template" option). If you mess up you can restore the template to its pre-hacked state.
Then find a section inside the CSS code--I put mine before the /* Main section--and paste in the code. (It doesn't really matter what order it is in, but keeping it in its own section is neater and makes it easier to find later.)
Paste the code there, save the changes, and navigate to the static page you've set up for your your blog journey to see what it's done. Or if the page is already open in another browser window or tab, refresh the page.
Then go back and iteratively tweak the CSS until it makes your feed look how you want it to.
(Unfortunately, since you are using a static blog page you can't use the "preview" option but must save and refresh to see the result of every change)
The syntax for formatting is specialized but not complex. Under each style name (e.g. "rss-journey .rss-item") are lines of formatting commands comprising the name of the command, a colon, a value for the command, and a semicolon. (The spaces are optional).
Commands have names like "margin-top," "font," and "line-height."
Even if you are unfamiliar with CSS you can quickly discover the effect of each command by plugging its name and "CSS" (for "cascading style sheets") into your favorite Web search engine.
Here are my comments about each of the elements of the above styles interpolated with the styles.
/* RSS Journey
----------------------------------------------- */
/* Controls indentation */
.rss-journey ul {
padding-left: 0;
}
Comment: Experiment with this value above until you are satisfied with the indentation.
/* Formatting of each item*/
.rss-journey .rss-item {
margin: 0;
margin-top: 1.5em;
line-height: 17px;
}
Comment: This controls things like the amount of extra space between each of the blog posts in your feed, and also characteristics like font attributes and line spacing for the blog-post content in the feed. In my template, many of these attributes are automatically inherited from the style for my blog posts, which is how I wanted things to look.
/* Space between paragraphs within feed items*/
.rss-journey .rss-item p {
margin-bottom: .95em;
margin-top: 0;
}
/* Formatting of blog-post titles in feed*/
.rss-journey .post-title {
margin: 0;
font: $(post.title.font);
margin-bottom: 0px;
margin-top: 3em;
line-height: normal;
}
Comment: Here, and in the related styles below, I have copied the formatting from that for my blog-post header, because I want the blog posts in my feed to resemble the real thing. Odds are these won't resemble anything on your blog.
Note also that this part uses some variables, such as "$(post.title.font)." These are defined in my template but probably not in yours. I include them as examples, but you can define these attributes in the more-traditional way. If you don't know what that is, google "css font," "css color,", etc.
/* Formatting of blog-post-title links in feed*/
.rss-journey .rss-item a {
color: $(post.title.color);
text-decoration: none;
}
/* Formatting of visited blog-post-title links in feed*/
.rss-journey .rss-item a:visited {
color: $(post.title.color);
text-decoration: none;
}
/* Formatting of blog-post-title links in feed
on mouse hover */
.rss-journey .rss-item a:hover {
color: #6f9d1c;
text-decoration: none;
}
/* Date, if included. */
.rss-journey .rss-date {
font: $(body.font);
color: #b5c88f;
font-size: 11px;
font-weight: normal;
text-transform: uppercase;
margin-bottom: 1px;
line-height: normal;
}
Comment: I formatted this based on the formatting for the date in my real blog posts. The formatting for yours is probably different.
/* Formatting of regular links in feed*/
.rss-journey .rss-item .special-link a {
font-size: 14px;
color: $(post.title.color);
text-decoration: underline;
margin: 0;
}
/* Formatting of regular links,
hover */
.rss-journey .rss-item .special-link a:hover {
color: #6f9d1c;
text-decoration: underline;
}
Comment: These format all the links except for the title of each blog post.
You can modify other tags and styles that occur inside of your feed similarly. For instance, to add special formatting to block quotes in the feed (without affecting regular block quotes elsewhere in your blog), use
.rss-journey blockquote {
}
You probably won't need to do this, though, and in any case won't have any additional tags to modify unless you use the Full or Bump Break feed.
If this gets too crazy, you can always delete the whole /* RSS Journey*/ section and start over. If you accidentally mess up something else, you can restore the template that you downloaded to your computer.
Once you are satisfied with how you've made things look, your last step is to proofread the feed for anomalies and typos introduced by your pipe.
The next section explains how to fix them.
No comments:
Post a Comment