[Solved] Modify the space between closing the footer and closing the body

[jlbrown1]

I am not sure if this is a CSS issue or not…but here it is. :-)

My site is http://www.saddlebackstables.net. One of the plugins I am using is Weather Underground to provide local forecast info. In their plugin, there is a checkbox to add their tagline to the bottom of all pages. When I look at their php file, it is basically add_action(‘wp_footer’, array($this, ‘showlink’)).

I would like my copyright information to appear centered directly below after skipping one line. When I view the source in Google after the page is rendered, their information being inserted by the checkbox is inserting after the footer is closed but before the body is closed. I am not sure where to add my text to make it be on the next line. Using my theme, I put it directly before the </body> tag, and it is in the right location, I just would like to reduce the space to one line between the WP Underground text and my copyright text.

Thanks!

[Paulie_D]

You have a generic margin-bottom on p tags

p, ul, .video, .action-box h3, .photo-frame {
    margin-bottom: 30px;
}

If you do something like

p.wp_wundergound {
    margin-bottom: 0; /* or your chosen value*/
}

That should fix it…if I have understood what you are after.

[jlbrown1]

How did you find that generic margin-bottom on p tags? I am trying to learn to diagnose/troubleshoot myself…

Second question. What am I doing wrong? Here is my style.css with your addition and there appears to be no change…it is already applied if you want to revisit http://www.saddlebackstables.net.

@import url(“../equestrian/style.css”);

/* Weather Underground */
p.wp_wundergound {
margin-bottom: 15px;
}
.wp_wunderground caption {
text-align: center;
font-size: large;
filter: alpha(opacity=100);
opacity: 1;
}
.wp_wunderground th {text-align: center;}
.absolute-footer .wp_wunderground caption {
padding-bottom:15px;
}

/* Invoice */
.table-striped tbody tr:nth-child(odd) td {background-color: #1a5625;}
ul.alert.alert-error {color: yellow;}

[Paulie_D]

How did you find that generic margin-bottom on p tags? I am trying to learn to diagnose/troubleshoot myself…

I just used the ‘Inspect Element’ options found in most browser’s Dev Tools.

I did that on the p of the widget/plug-in and it showed the CSS applying to that element.

Then I just look for something that could cause that gap…probably margin or padding.

I could see that it had the margin-bottom I indicated. With the Dev Tools you can turn the individual properties on and off to see what happens.

Now, changing the general rule would have site-wise implications due to the fact that its;a general rule…so we need to make a more specific rule only affecting that p with the class already assigned to it..

Et voila!

[Paulie_D]

it is already applied if you want to revisit http://www.saddlebackstables.net.

It isn’t actually appearing in the CSS as yet, as far as I can see.

You may have to flush the caches etc. in your WP(?) set-up.

[jlbrown1]

I double-checked, it is definitely in the style.css. I resaved the file just to make sure (I edited it by going in WP and choosing Appearance –> Editor. I added this to the main style.css.

I do not have any caching plug-ins installed…so I am unsure what to do next…

[jlbrown1]

LOL! I figured it out. I cut and pasted your code and just changed it to 15px. I didn’t notice you had misspelled the element! Hahaha!

p.wp_wundergound {
margin-bottom: 0; /* or your chosen value*/
}

Should have been p.wp_wunderground (ground instead of gound).

Everything is working well now. I really appreciate your help and taking the time to write that post explaining to me how to troubleshoot using the Inspect Element. I have been using that extensively, but I haven’t got it all figured out yet. This is my first website, so I am new to it all.

Not sure how to mark this resolved…someone needs to teach me that next!

Have a great day!

Regards!

[Author]

Posts