Forum

Thread tagged as: Question, Problem

Need coding help.

I want to remove the background color and shadow from the small icons on the page listed below. https://www.williamsburgmemorialpark.com/about/post.php?s=2014-10-01-memorial-restoration

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 desktop. As youâ€™ll see, the class Perch is using is .hentry.

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

Kelly Crossley 0 points

6 years ago

Robert Ketter 103 points

6 years ago

Kelly, Here is the best way to solve the problem. In the template that handles these images add class="xbs" to <img /> tag then add the following to your .css

img.xbs { box-shadow: none; background: none }

That will fix the issue.

Robert Ketter

Kelly Crossley 0 points

6 years ago

Thanks Robert. Unfortunately I'm still learning to code, so I could really use some helping placing the class. Keep in mind that I ONLY need to modify the icons on the site listed above, not the larger photo. I realize that I'll need to update the blog.css as well. Here's my modified post.html template code, which is what I believe is used with the Blog app to add posts.

<article class="hentry">
    <h1>
    <perch:blog id="postTitle" type="text" label="Title" required="true" size="xl autowidth" order="1" />
    </h1>
    <p class="meta">
        <time class="entry-published date" datetime="<perch:blog id="postDateTime" type="date" label="Date" time="true" format="Y-m-d H:i:s" divider-before="Meta information" />">
            <perch:blog id="postDateTime" type="date" time="true" format="%B %d %Y" /> 
        </time>
        <perch:if exists="authorGivenName">
            by <span class="p-author h-card"><perch:blog id="authorGivenName" type="hidden" /> <perch:blog id="authorFamilyName" type="hidden" /></span>
        </perch:if>    
        <perch:categories id="categories" set="blog" label="Categories" display-as="checkboxes">
            <a href="archive.php?cat=<perch:category id="catSlug" type="slug" />" class="p-category">
                <perch:category id="catTitle" type="text" />
            </a>
        </perch:categories>

    </perch:if>
    <div class="description e-content">
        <perch:blog id="postDescHTML" type="textarea" label="Post" order="2" editor="redactor" html="true" size="xxl autowidth" required="true" />
    </div>

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

</article>

<perch:blog id="excerpt" type="textarea" label="Excerpt" editor="redactor" html="true" order="1" suppress="true" size="m" />

<perch:blog id="image" type="image" width="50" height="50" crop="true" suppress="true" />

Robert Ketter 103 points

6 years ago

Kelly, This is the updated blog.css All I did was add the code I suggested above so there is no way it will modify anything... till you add the following...

class="xbs"

New CSS (blog.css)

/* this stylesheet contains some example styling for the blog pages. Feel free to edit or include this css in your existing stylesheet */

/* main structural elements */
#wrapper {
    width: 780px;
    margin-left: auto;
    margin-right: auto;
}

#content {
    float: left;
    width: 500px;
}

ul.hfeed {
    margin: 0;
    padding: 0;
    list-style: none;
}

li.hentry {
    margin-bottom: 20px;

}

li.hentry h2 {
    margin: 0;
    font-size: 100%;
}

div.hentry h2 {
    margin: 0;
}

div.hentry h2 a {
    text-decoration: none;
}

.hentry p.date {
    margin: 0;
    font-size: 95%;
    display: inline;
    font-style: italic;
    color: #999;
}

/* news and events excerpt below date */

li.hentry .entry-summary {
    font-size: 100%;
    color: #999;

}


li.hentry .entry-summary p {
    margin: 0;

}

/* this creates the image shadowing */
.hentry img {
    margin-top: 20px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 12px #666;
    margin-bottom: 10px
}
/* this removes the image shadowing on selected images */
img.xbs {
        box-shadow: none;
        background: none

}


.meta {

}

.meta h3 {
    font-size: 100%;
    margin: 0;
}

.meta ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.meta .cats {
    width: 50%;
    float: left;
}

.meta .tags {
    width: 48%;
    float: right;
}

/* this is text formatting added from wmp.css */

form { margin:0px }
img { margin:0px; border-style:none }
button { margin:0px; border-style:none; padding:0px; background-color:transparent; vertical-align:top }
p:first-child { margin-top:0px }
table { empty-cells:hide }
.f-sp { font-size:1px; visibility:hidden }
.f-lp { margin-bottom:0px }
.f-fp { margin-top:0px }
.f-x1 {  }
.f-x2 {  }
.f-x3 {  }
em { font-style:italic }
h1 { color:#235381; font-family:Times,'Times New Roman',serif; font-size:28px; margin-left:0px; text-align:left; margin-bottom:10px; font-style:normal; font-weight:normal }
h1:first-child { margin-top:0px }
h2 { font-weight:bold; font-size:16px }
h2:first-child { margin-top:0px }
h3 { font-weight:bold; font-size:14px }
h3:first-child { margin-top:0px }
p { font-size:16px }
strong { font-weight:bold }
.imageTitle { color:#fff; font-family:Times,'Times New Roman',serif; font-style:italic; font-size:16px; text-align:center }
.body { color:#808080; font-family:Times,'Times New Roman',serif; font-size:16px; line-height:20px; text-align:left }
.quote { color:#4976a6; font-family:Georgia,Palatino,Times,serif; font-size:20px; line-height:26px; text-align:center }
.credits { color:#235381; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:11px; text-align:center }
.nav { color:#235381; font-family:Times,'Times New Roman',serif; font-size:15px; line-height:20px; text-align:left }
.disclaimer { color:#808080; font-family:Times,'Times New Roman',serif; font-style:italic; font-size:12px; line-height:16px; text-align:left }
.style1 { color:#235381; font-family:Times,'Times New Roman',serif; font-size:28px; font-style:normal; font-weight:normal }
.subtitle { color:#808080; font-family:Times,'Times New Roman',serif; font-weight:bold; font-size:18px; line-height:22px; text-align:justify; margin-top:0px }
.tableBody { color:#808080; font-family:Times,'Times New Roman',serif; font-size:14px; text-align:center }
.propertyHead { color:#fff; font-family:Times,'Times New Roman',serif; font-style:italic; font-weight:bold; font-size:14px }
.alignLeft { text-align:left }
.tableHeading { color:#235381; font-family:Georgia,Palatino,Times,serif; font-size:14px; text-align:center }
.tableTotal { color:#f33; font-family:Georgia,Palatino,Times,serif; font-size:18px; text-align:center }
.specialsColor { color:#f00 }
.terms { color:#808080; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:12px; line-height:20px; text-align:left }

The template you posted is the right template for for posts but it does not contain the image tag which needs new class added. The (5) images which need the new tag are in the textarea (editor) when you are logged into perch. There by default it likely looks like a mini word processor. There should be a button in the editor that says 'View Html' If you do this you will find each of the (5) images. Just add the class="xbs" to each image before the src=..

before

<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;">

after

<img class="xbs" 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;">

Then do the happy dance. If you just cant work this out, setup an editor role and send login to robert (at) ketter (dot) us and I will do this for you FREE.

BTW, I am just north of you in Wild and Wonderful West Virginia, 20 minutes from Winchester.

Kelly Crossley 0 points

6 years ago

Awesome! Thanks Robert.

I'll be a little further north this weekend when I visit my kids at JMU. :)

Kelly Crossley 0 points

6 years ago

Robert, for some reason I can't get this to work. I was able to remove the background and drop shadow by styling the image from within the Perch Blog code, but I'd prefer to use a class instead. As you'll see, the first icon uses your code, the others are styled within the Blog code. What am I doing wrong?

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

Robert Ketter 103 points

6 years ago

Go to this blog.css which is in

https://www.williamsburgmemorialpark.com/css/blog.css

Starting on line #61

Find the following...

/* this creates the image shadowing */
.hentry img {
    margin-top: 20px;
    padding: 10px;

    background-color: #fff;

    box-shadow: 0 0 12px #666;
    margin-bottom: 10px
}

and add the following below it...

img.xbs {
    box-shadow: none;
    background: none
}

so when your finished it will look like this...

/* this creates the image shadowing */
.hentry img {
    margin-top: 20px;
    padding: 10px;

    background-color: #fff;

    box-shadow: 0 0 12px #666;
    margin-bottom: 10px
}

img.xbs {
    box-shadow: none;
    background: none
}

save and your done...

of course you will still need the....