Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Forum How-To (http://forum.bytesforall.com/forumdisplay.php?f=9)
-   -   Styling the Comment Fields... (http://forum.bytesforall.com/showthread.php?t=8975)

eric41 Aug 17, 2010 05:57 AM

Styling the Comment Fields...
Hi. I want to mention first that I have, over the past months, gotten invaluable help from this forum and would be pretty far behind where I am now without the benefit of especially Flynn, lmilesw and juggledad..so many thanks, and when I get paid this week, I plan to go ahead and make the overdue donation so I can finally enjoy the coveted Gold Forum!

Now for my question:

I am using 3.4.6, and I am working on a site for which I have created a condensed layout, so I'm having to do some touch-up styling on the various comments features. I now have everything styled & configured correctly to match the new layout EXCEPT the comment elements for users as opposed to admin comments.

The following CSS insert...

ul.commentlist li {
margin: 0px 210px 0px 108px; padding: 0;

...shrank the admin comments perfectly, but the user comments still stretch the width of the page. What do I need to make the user comments match everything else here?

You can see what I mean here - just scroll to the comments at bottom.

Thanks again for all the great help and support here!

lmilesw Aug 17, 2010 07:52 AM

I'm not sure what you are trying to do but your site is not looking good in Firefox. The selector you are looking for however is probably.
HTML Code:

ul.commentlist li.thread-even

eric41 Aug 17, 2010 08:09 AM

I'm aware of the cross-browser issues & I'll look into those soon..that's kind of new territory for me. But for the moment, I have added the following code via CSS Inserts, using the selector you provided...

ul.commentlist li.thread-even {
margin: 0px 210px 0px 108px; padding: 0;

..which has the same margin values as the ones with the other selector I used. As I mentioned, the first piece of code fixed the admin reply box but not the user reply box. Unfortunately, adding the bit of code above did not change anything. Do I have it correctly above?

eric41 Aug 17, 2010 08:27 AM

Hmm..strangest thing; removing the 1 pixel border between single comments at Style & Configure Comments>Border between single comments fixed the problem! It also appears just fine in Firefox. That's a relief.

However, the text above the first post comment that says, "2 Comments to...", where can I style/edit that? I just want to move it over to line up with the rest. You can use my link to the page above if necessary. Thank you for the reply, lmilesw!

lmilesw Aug 17, 2010 08:44 AM

It still doesn't look right in Firefox. Why don't you just set the width to 800px instead of 1280px? Then you won't have to deal with all the crazy padding.

eric41 Aug 17, 2010 09:30 AM

Well, my header is an image map placed in the page body, so every time I tweaked the page body dimensions, the header got out of whack, and I couldn't get it all to line up. I will go with your advice for sure though from here on out.

Are you able to point me in the right direction on spacing the "2 comments to..." over some to line up with the comments boxes? Thank you!

lmilesw Aug 17, 2010 09:48 AM

As a test I put all the following code where you would normally put %image in ATO>Style & edit Header Area and it seemed to work fine.

HTML Code:

<img id="Image-Maps_2201008121050162" style="border: 0px; padding: 0px;" usemap="#Image-Maps_2201008121050162" src="http://www.fitfabulousforever.com/wp-content/uploads/2010/02/Header.jpg" border="0" alt="" hspace="31" vspace="-1" width="884" height="210" /></div>
<map id="_Image-Maps_2201008121050162" name="Image-Maps_2201008121050162">
<area shape="rect" coords="676,0,819,21" href="http://www.fitfabulousforever.com/live-chat" />
<area shape="rect" coords="17,141,69,162" href="http://www.fitfabulousforever.com" />
<area shape="rect" coords="74,141,130,162" href="http://www.fitfabulousforever.com/about" />
<area shape="rect" coords="134,141,200,162" href="http://www.fitfabulousforever.com/my-blog" />
<area shape="rect" coords="205,141,258,162" href="http://www.fitfabulousforever.com/shop" />
<area shape="rect" coords="262,141,352,162" href="http://www.fitfabulousforever.com/testimonials-2" />
<area shape="rect" coords="357,141,424,162" href="http://www.fitfabulousforever.com/recipes" />
<area shape="rect" coords="430,141,494,162" href="http://www.fitfabulousforever.com/contact-2" />

<area shape="rect" coords="792,167,812,186" href="http://www.facebook.com/pages/Fit-Fabulous-Forever/10150131176825484?ref=ts" />
<area shape="rect" coords="817,167,837,186" href="http://www.fitfabulousforever.com/rss" />
<area shape="rect" coords="843,167,863,186" href="http://www.twitter.com/galecompton" /></map>

eric41 Aug 17, 2010 09:57 AM

Uh, which following code miles?

lmilesw Aug 17, 2010 10:02 AM

Sorry about that. It is there now.

eric41 Aug 17, 2010 11:51 AM

Miles, thanks very much for that, but I'm a little confused. Were you offering that as a way to plant the header in an area that wouldn't be affected when I adjust the page body dimensions? Previously, I was putting it at CSS Inserts, but the problem there was that I couldn't figure out how to apply it only to certain pages which is important for the site. When putting it at ATO>Header Area, is there a way to apply it only to certain pages and put an additional image map header there that would apply to other pages?

Also, did you come up with anything on how to space over the comments header ("2 comments on...") line so that it lines up with my page body background?

Thanks again for taking the time!

lmilesw Aug 18, 2010 07:47 AM

I didn't realize you only wanted it on certain pages. In that case you can use a selector similar to the following. To get the page id just view the source and search for "body class" you will see the "page-id-xx".
HTML Code:


All times are GMT -6. The time now is 08:40 PM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.