Restyle the output of a hosted blog system
Hi There,
We're very new to jQuary and this is our first go at using it on a site.
We have a client who is using Squarespace (a hosted blogging platform) that wants to re-style the main page that displays the list of posts. We would like to be able to do two things:
- Restyle the layout of the posts on the main page only
- Apply the link from the H2 title to any images in the post text
The reason why we thought of using jQuery was because the same class name that styles the posts on the listing page, also styles the post itself. So while we can restyle the main page just using CSS, the changes are occuring on the post page as well.
As a test, we've been trying to toggle class="journal-entry" to class="journal-entry-list" to apply some new styling but can't seem to get anything to work. Here's the code from the document we've been using to test - obviously there's something wrong but we just can't see it.
-
<html>
<head>
<title>Change Class</title>
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
.journal-entry-list { font-family: sans-serif; color: #84b1df; }
.journal-entry { font-family: "Courier New", Courier, Monaco, monospace; }
</style>
<script type="text/javascript">
$(function)() {
$(".journal-entry").toggleClass("journal-entry-list")
}
</script>
</head>
<body>
<div id="item3385793" class="journal-entry">
<div class="journal-entry-text">
<h2 class="title">
<a href="/home/underworldrise-of-the-lycansopens-march-12th.html"></a>
</h2>
<div class="body">
<h2>The title of the post</h2>
<p>text from the post</p>
</div>
</div>
</div>
</body>
</html>
Also, here's the full journal code output by Squarespace which shows the link in the div class="journal-entry-text" (7 lines down) that we'd like to apply to any image contained in the div class="body" (12 lines down)
Any help would be much appreciated.
Cheers
Ben
-
<div class="journal-entry-wrapper post-text ">
<div id="item3385793" class="journal-entry">
<div class="journal-entry-float-day"><span class="name">Thursday</span></div><div class="journal-entry-float-date"><span class="month">12</span><span class="date">Mar</span></div>
<div class="journal-entry-text">
<h2 class="title">
<a href="/home/post-blank.html"></a>
</h2>
<div class="body">
<p><span class="full-image-block ssNonEditable"><span><img src="/storage/contentimages/imgae-blank.gif?__SQUARESPACE_CACHEVERSION=1237579576407" alt=""></span></span>
</p><h2>text here</h2>
<h3>text here</h3><p></p>
<p class="journal-read-more-tag"><a href="/home/post-blank.html">Click to read more ...</a></p>
</div>
</div>
<div class="journal-entry-tag journal-entry-tag-post-body">
<div class="journal-entry-tag-post-body-line1"><span class="permalink-item"><a class="permalink" href="/home/post-blank.html"> <img title="Permalink" alt="Permalink" class="inline-icon permalink-icon" src="/universal/images/transparent.png">View More </a></span> </div>
<div class="journal-entry-tag-post-body-line2"></div>
<div class="journal-entry-tag-post-body-line3"></div>
</div>
<div class="clearer"></div>
</div>
</div>