WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
I have a couple issues. We're almost there though!
1. How do I remove the thin line under the main header.
2. How do I remove the shadow and box in our logo at the bottom of each post.
3. How do I remove the faint yellow and orange backgrounds behind the posts and comment section?
Thanks!
The blog I need help with is synergeticprocess.wordpress.com.
Hello synergicprocess
For 1 and 3, you must buy the CSS upgrade in order to edit visual style of theme.
The 2. i think it may be related to theme, but did you try editing so it have no border or shadow when inserting image? that attributes are editable.
Best Regards.
We do have the CSS upgrade. But we are not web designers, so I don't know the code
Go to appearance > custom design > CSS
1. How do I remove the thin line under the main header.
Add this CSS:
#main {<br />
border-top: none;<br />
}
2. How do I remove the shadow and box in our logo at the bottom of each post.
.site-main .entry-content img.wp-image-46 {<br />
border: none !important;<br />
box-shadow: none;<br />
-webkit-box-shadow: none;<br />
}<br />
3. How do I remove the faint yellow and orange backgrounds behind the posts and comment section?
#comments {<br />
background: none;<br />
}
doesnt look like it worked. Perhaps if I supply you the code I'm currently using you can see where I've gone wrong? And point me in the right direction?
Thanks!
.secondary #branding #searchform {
display: none;
position: absolute;
right: 40px;
top: 3.1em;
}
#site-description {
background-color: white;
border-color: #FFFFFF;
border-style: #FFFFFF;
border-width: opx 0;
color: #FFFFFF;
font-family: ff dax;
font-size: 0;
letter-spacing: 0;
padding: 0;
text-transform: uppercase;
}
.secondary.entry-title a {
color: #f6a212;
font-family: ff dax;
font-size: 23px;
text-decoration: none;
}
#site-image img {
border-color: #FFFFFF;
border-style: #FFFFFF;
border-width: 0;
clear: both;
height: 300px;
margin: 4px 0 -4px;
max-width: 100%;
}
#site-description {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #FFFFFF;
border-style: transparent;
border-width: opx 0;
color: #FFFFFF;
}
hgroup #site-title {
display: none;
}
.secondary #branding #searchform {
display: none;
position: absolute;
right: 40px;
top: 3.1em;
}
#page {
-moz-border-radius: 10px;
background: none repeat scroll 0 0 transparent;
padding: 10px 0;
}
#page {
-moz-border-radius: 10px;
background: none repeat scroll 0 0 transparent;
padding: 10px 0;
}
The example you CSS you just posted doesn't include any of the examples Beth sent you.
I looked at this post as an example:
http://synergeticprocess.wordpress.com/2013/02/28/hey-listen-up/
1. How do I remove the thin line under the main header.
I tested this CSS and it worked:
ciencias4all
designsimply#main {
border-top: none;
}To make it work for your blog, add that CSS to your Appearance → Custom Design → CSS editor and save changes.
2. How do I remove the shadow and box in our logo at the bottom of each post.
This example will work, but only if you inserted the image using this method: http://en.support.wordpress.com/images/#insert-an-image-you-have-already-uploaded (doing it that way should make it so the image gets a specific class name such as "wp-image-46"):
.site-main .entry-content img.wp-image-46 {
border: none !important;
box-shadow: none;
-webkit-box-shadow: none;
}However, it looks like you haven't inserted the image the same way in every post, and so the HTML is different and the CSS would need to be different too. To avoid that problem, you can set a unique class name in the HTML when you add the image.
For example, if you look at the Text tab when editing the "Hey, Listen Up" post, you'll see this HTML for the logo at the bottom of the post:
<a href="http://www.synergydesign.ca"><img class="noshadow" alt="Print" src="http://synergeticprocess.files.wordpress.com/2013/02/synergydesignlogo-footer1.jpg?w=150" width="150" height="45" /></a>
See the "noshadow" class? You can use that in your CSS instead of the class Beth used which was based on the image as it was inserted into another post:
.site-main .entry-content img.noshadow {
border: none !important;
box-shadow: none;
-webkit-box-shadow: none;
}Then you would need to make sure every image you wanted to remove the borders and shadow from had the "noshadow" class added to it in the Text tab (HTML) view.
3. How do I remove the faint yellow and orange backgrounds behind the posts and comment section?
Beth's example works for comments. If you look at the HTML for your posts, you'll also see that a background color is applied to the main post areas which have a class name of "hentry". In that case, you can simply add ".hentry" to the selector list for that CSS block to make it cover both areas:
.hentry,
#comments {
background: none;
}As for the CSS you pasted above, you've got various redundancies and errors.
You've got the #page selector twice, with identical properties and values: you need to delete the one of the two.
You've got the .secondary #branding #searchform twice too, again with identical properties and values: you need to delete the one of the two. And there's no point specifying the position of the searchbox when you say it shouldn't show, so it should be just this:
.secondary #branding #searchform {
display: none;
}You've got the #site-description selector twice, with different properties and values, and some of them don't make sense; for instance, what's the point of specifying color, font-family, letter-spacing and text-transform when you say font-size 0 (that is, no show)? and what's the point of specifying anything when you haven't entered a tagline in the first place? Do you or don't you want the tagline to show?
Similarly, in the #site-image img selector, there's no point specifying a border color when you say border-width 0 (that is, no show). If you want no border, you just write border:none. And there's no such thing as border-style: #FFFFFF; - the border style values are solid, double, dashed etc.
This is my first time doing code, and you guys have been helpful, but I guess I'm in over my head. For some reason it is still not working. Here is what I've got. I'm sure there are still a lot of mistakes, and it might be a lot to ask, but can you edit this properly for me?
Thanks in advance!
.secondary #branding #searchform {
display: none;
position: absolute;
right: 40px;
top: 3.1em;
}
#site-description {
background-color: white;
border-color: #FFFFFF;
border-style: #FFFFFF;
border-width: opx 0;
color: #FFFFFF;
font-family: ff dax;
font-size: 0;
letter-spacing: 0;
padding: 0;
text-transform: uppercase;
}
.secondary.entry-title a {
color: #f6a212;
font-family: ff dax;
font-size: 23px;
text-decoration: none;
}
#site-image img {
border-color: #FFFFFF;
border-style: #FFFFFF;
border-width: 0;
clear: both;
height: 300px;
margin: 4px 0 -4px;
max-width: 100%;
}
.site-main .entry-content img.wp-image-46 {
border: none!important;
box-shadow: none;
-webkit-box-shadow: none;
}
#site-description {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #FFFFFF;
border-style: transparent;
border-width: opx 0;
color: #FFFFFF;
}
hgroup #site-title {
display: none;
}
.secondary #branding #searchform {
display: none;
position: absolute;
right: 40px;
top: 3.1em;
}
#page {
-moz-border-radius: 10px;
background: none repeat scroll 0 0 transparent;
padding: 10px 0;
}
#page {
-moz-border-radius: 10px;
background: none repeat scroll 0 0 transparent;
padding: 10px 0;
}
#main {
border-top: none;
box-shadow: none;
-webkit-box-shadow: none;
}
#comments {
background: none;
}
sorry, I've made edits here and it looks like I've solved a couple things (with your help) :)
The only issue now is that dang logo at the bottom of the posts. I cant seem to get rid of that border and shadow.
.secondary #branding #searchform {
display: none;
}
#site-description {
background-color: none repeat scroll 0 0 #FFFFFF;
border: none;
font-family: ff dax;
font-size: 0;
letter-spacing: 0;
padding: 0;
text-transform: uppercase;
}
.secondary.entry-title a {
color: #f6a212;
font-family: ff dax;
font-size: 23px;
text-decoration: none;
}
#site-image img {
border-color: #FFFFFF;
border-style: #FFFFFF;
border-width: 0;
clear: both;
height: 300px;
margin: 4px 0 -4px;
max-width: 100%;
}
.site-main .entry-content img.wp-image-46 {
border: none!important;
box-shadow: none;
-webkit-box-shadow: none;
}
hgroup #site-title {
display: none;
}
#page {
-moz-border-radius: 10px;
background: none repeat scroll 0 0 transparent;
padding: 10px 0;
}
#main {
border-top: none;
box-shadow: none;
-webkit-box-shadow: none;
}
#comments {
background: none;
}
.hentry,
#comments {
background: none;
}
There's no need to post long blocks of CSS. Anyone looking at a web page can see the CSS by viewing the page source using browsers' built in web inspectors. You should only post CSS snippets if you are working on a specific example and using a small chunk of code.
The only issue now is that dang logo at the bottom of the posts. I cant seem to get rid of that border and shadow.
This is probably because you are using different HTML on different pages. Because of that, no CSS you apply will work the same for every single page. You can work around that by making the HTML for each logo consistent and then adding CSS to adjust the borders for all of them at once.
Follow these steps:
Go through every single page and update the HTML for the logo to include a specific class name you assign. For example, here is the current HTML for the logo that appears on the http://blog.synergydesign.ca/ page right now:
<a href="http://synergydesign.ca/"><img style="box-shadow:none;border:none;" alt="SynergyDesignLogo2013a" src="http://synergeticprocess.files.wordpress.com/2013/03/synergydesignlogo2013.jpg?w=150&h=51" width="150" height="51"></a>
Inside the "img" HTML element, add a class name such as "mylogo". Note that you can change the name to whatever you want as long as you pick the same name for every element you want to use CSS to adjust, "mylogo" is just one example.
Here is an updated version of the HTML above as an example:
<a href="http://synergydesign.ca/"><img class="mylogo" style="box-shadow:none;border:none;" alt="SynergyDesignLogo2013a" src="http://synergeticprocess.files.wordpress.com/2013/03/synergydesignlogo2013.jpg?w=150&h=51" width="150" height="51"></a>
Then go to Appearance → Custom Design → CSS editor and add the following CSS:
#main .mylogo {
box-shadow: none;
border: none !important;
}Make sure to adjust ".mylogo" to something else if you used a different class name in your HTML.
Save changes. Check each one to make sure the change worked.
This topic has been closed to new replies.
