[Pro] Perch coding problem?

I want to remove the background color and shadow from the small icons on the page listed below. There’s some Perch CSS code (blog.css) that’s causing this, but I can’t remove it entirely because I need that code to add this style to the larger photos I import through the Perch. As you’ll see, the class Perch is using is .hentry.

Here is the content code that I add through the Perch interface:

<h1>Don’t Let the Memory of Your Loved One Fade Away.&nbsp;</h1>
<p>
	If your family member was buried at Williamsburg Memorial Park more than five years ago, chances are good the bronze memorial you paid thousands of dollars for has lost its luster.
</p>
<p>
	Don’t worry, this isn’t a defect. It’s the harsh reality of what happens to bronze metal over time. Every year, millions of bronze memorials are subjected to the ravages of weather and pollution. The result is dull, discolored, and faded memorials. Doesn’t your loved one deserve better?&nbsp;
</p>
<p>
	Fortunately, the folks at Matthews Bronze have developed an affordable process that will restore your family’s memorial to its original, like-new condition for a fraction of the original cost. Memorial restoration starts as low as $400 and includes removal, restoration, re-installation, and even shipping.
</p>
<h2>
<hr>
</h2>
<h2>Here's How it Works</h2>
<table>
<tbody>
<tr>
	<td>
	</td>
	<td>
	</td>
	<td>
		&nbsp;
	</td>
</tr>
<tr>
	<td>
		<img src="/perch/resources/csr-w640h480.png" alt="Customer Service Icon" style="font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; font-size: 15px; font-style: normal; font-variant: normal;">&nbsp;
	</td>
	<td>
		&nbsp;&nbsp;
	</td>
	<td>
		Call our office at 757-565-2006 to place your order. Be sure to have your loved one’s name, lot number, and a valid credit card.
		<br>
		<br>
	</td>
</tr>
<tr>
	<td>
		<p>
			<img src="/perch/resources/raisememorial-w640h480.png" alt="Raising Memorial Icon" style="font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; font-size: 15px; font-style: normal; font-variant: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
		</p>
	</td>
	<td>
	</td>
	<td>
		<p>
			Once you’ve placed your order, we’ll make arrangements to raise your memorial and ship it to the nearest Matthews plant.
		</p>
	</td>
</tr>
<tr>
	<td>
		<p>
			<img src="/perch/resources/diamond-2-w640h480.png">
		</p>
	</td>
	<td>
	</td>
	<td>
		<p>
			At the plant, your memorial will be professionally refinished by hand, then treated with Diamond Shield®—a new protective coating developed specifically for bronze memorials and designed to withstand even the harshest environments.
		</p>
	</td>
</tr>
<tr>
	<td>
		<p>
			<img src="/perch/resources/handtruck-1-w640h480.png">
		</p>
	</td>
	<td>
	</td>
	<td>
		<p>
			After your memorial is restored, Matthews will ship it back to us so it can be re-installed on your family lot.
		</p>
	</td>
</tr>
<tr>
	<td>
		<p>
			<img src="/perch/resources/camera-w640h480.png" alt="Camera Icon" style="font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; font-size: 15px; font-style: normal; font-variant: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
		</p>
	</td>
	<td>
	</td>
	<td>
		<p>
			When the installation is complete, we’ll contact you so you can see the results. If you’re out of town, we’ll be happy to e-mail you a photo of your restored memorial.
		</p>
	</td>
</tr>
</tbody>
</table>
<h2>
<hr>
</h2>
<h2></h2>
<h2>
</h2>
<h2>Frequently Asked Questions</h2>
<p style="margin-left: 20px;">
</p>
<p style="margin-left: 20px;">
	Q. How long does the restoration process take?
	<br>
	A. Restoration time can vary depending on the condition of your memorial and the plant’s workload, but on average the complete process usually takes about four weeks.
	<br>
	<br>
	Q. Is the vase included?
	<br>
	A. Yes.
</p>

Is there anywhere in here that I can add some CSS styling to counter the effects of the .hentry style?

http://www.williamsburgmemorialpark.com/about/post.php?s=2014-10-01-memorial-restoration


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Kelly,

Use

 imageclasses="hentry, KellysClass" 

in your Blog entry template, this should give you the option in your dashboard of choosing the class for your image. This code goes in the post.html template inside the blog folder.

<div class="hentry">
	<h2><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" type="text" required="true" size="xl" /></a></h2>
	<p class="entry-published date"><perch:blog id="postDateTime" format="%d %B %Y" /> 
		<perch:if exists="authorGivenName">by <perch:blog id="authorGivenName" /> <perch:blog id="authorFamilyName" /></perch:if>
	</p>
    <perch:if exists="image">



        <div><img src="<perch:blog id="image" type="image" width="320" height="240" crop="true"  imageclasses="hentry, KellysClass" 



label="Image" />" alt="<perch:blog id="postTitle" />" /></div>
    </perch:if>
    <div class="description entry-content">
    	<perch:blog id="postDescHTML" type="textarea" encode="false" editor="markitup" textile="true" size="xxl" required="true" />
    </div>
</div>

<perch:blog id="excerpt" type="textarea" label="Excerpt" textile="true" order="1" suppress="true" size="s" />
<perch:blog id="image" type="image" width="50" height="50" crop="true" suppress="true" />

Then you can write your own css.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thinking about it you want that in the text area if the images added in the body of the post, so actually …


    <div class="hentry">
        <h2><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" type="text" required="true" size="xl" /></a></h2>
    <p class="entry-published date"><perch:blog id="postDateTime" format="%d %B %Y" /> 
        <perch:if exists="authorGivenName">by <perch:blog id="authorGivenName" /> <perch:blog id="authorFamilyName" /></perch:if>
    </p>
    <perch:if exists="image">

        <div><img src="<perch:blog id="image" type="image" width="320" height="240" crop="true" label="Image" />" alt="<perch:blog id="postTitle" />" /></div>
    </perch:if>
    <div class="description entry-content">
        <perch:blog id="postDescHTML" type="textarea" encode="false" editor="markitup" textile="true" size="xxl" imageclasses="hentry, KellysClass" required="true" />
    </div>
</div>

    <perch:blog id="excerpt" type="textarea" label="Excerpt" textile="true" order="1" suppress="true" size="s" />
    <perch:blog id="image" type="image" width="50" height="50" crop="true" suppress="true" />

Simon


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Simon.

Okay, I think I understand. I need to use the code above in the post.html template, but I’m unclear on where this goes.

 imageclasses="hentry, KellysClass" 

BTW, in the original post.html template, Perch is using:

<article class="entry">

Does it matter?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I would imagine it would go here,

<div class="description e-content">
    	<perch:blog id="postDescHTML" type="textarea" label="Post" order="2" editor="markitup" markdown="true" size="xxl auto width" imageclasses="hentry,KellysClass" required="true" />
    </div>

This line should be towards the bottom of post.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Simon, I’ve looked in my post.html template to replace the larger amount of code you offered and I can’t find where it is. The giveaway is this line:

<div><img src="<perch:blog id="image" type="image" width="320" height="240" crop="true" label="Image" />" alt="<perch:blog id="postTitle" />" /></div>

My post.html template has this line:

            <img src="<perch:blog id="image" type="image" width="450" height="350" crop="true" label="Image" order="4" />" alt="<perch:blog id="postTitle" />" />
        </div>   

Are you sure you’re not referring to a different template?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Which version of the Blog app are you using?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m using Perch 2.7.2 with Blog 4.5.2.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Kelly this code is for the text area part of the template.

This code is from post.html in the blog template included with 4.5.4, downloaded this morning.

Heres the perch page that gives more information


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oh, you were modifying the default template. Gotcha. So BOTH parts of the code need to go in the blog.html template, correct?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

BTW, this is one of the things that bothers me about Perch. Normally, upgrading the Perch Core is not a problem.

But often times I find that they rework the code in their apps (probably to add features), which causes a lot of compatibility issues with older code that may have been used in the site—especially special code placed within FWP using Crowbar.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m a bit lost now Kelly,

the default template (blog folder) in Perch that is in perch_blogv2.4.5>add_ons>apps>perch_blog>templates> gets copied to perch>templates> and then is not modified by core updates. It is also used in preference to any default template with the same name i.e the one you copied if you left it in place.

The copied template folder “blog” contains “post.html” I’m modifying that by adding to post.html

 imageclasses="hentry, KellysClass"

in the line I pointed to in my last post.

This creates a drop down menu to the image picker which allows you to add separate classes to images.

Simon


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No, it’s definitely me who’s lost. So the only thing I need to add to my post.html template is this line?

imageclasses="hentry, KellysClass"

And then simply edit my blog.css accordingly? If so, that is way cool and much easier than I expected. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes that’s it. Sorry for making it sound complicated!!
S


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No worries.

As for my Perch rant, that had a LOT to do with the upgrade from Blog 4.xx to 4.5 and was before they had notes detailing the major structural changes that took place: Installation - Perch CMS documentation


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I ended up using a slightly different solution, but I’m going to try yours a little later. Thanks!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options