if you qualify, read on, valued reader! if you dont qualify, read on, valued reader! if you dont want to hear me nitpick petty details, then just skip to the solution. here is an example of a comment form with misaligned borders: here is the thesis options menu where you enable this option: if you show the allowed html tags, and your main content column width is outside the range of approximately 438px 508px, then chances are your borders are effed up. Complicating the issue further is the fact that your borders will appear more effed up or less effed up, depending on the web browser youre using.

How to Write An Ap English Literature Essay

Every other web browser rendered the width of the top part the lt textarea gt element as either 686px or 687px, while ie8 rendered it at 682px! wtf, microsoft? 2 ie8 in compatibility mode was not rendered exactly the same as it was in ie7. For your reference, ive created a simple html node tree of the comment form elements. Think of this as the raw html source code, with all the content, irrelevant attributes, and closing tags removed.

The only information this node tree is meant to convey is the hierarchical nesting of html elements. Check it out: if you take a look at lines 14 and 15, youll find the sibling elements who just cant seem to get along. In plain english, that means that lt textarea gt and lt span class allowed gt are the two elements whose borders dont line up. therefore, our goal is to make these two elements the same width. if you havent spent much time tweaking the css styles for thesis, you probably dont know that the 2 primary stylesheets are dynamically built by your server, based on the font size youve defined in the thesis design options menu, under content area. So for example, thesis wants the border of its comment form to be 1px, regardless of what your font size is, but it also wants to define everything in em units which is usually the preferred unit for maximizing cross browser compatibility and displaying properly across many different devices and display resolutions. Therefore, if you set your content font size to 16 where 1em 16px , then thesis will build a stylesheet that defines the border of its comment form to be 0.063em. Multiply 16 pixels/em 0.063em , and you get a border width of 1.008px, which rounds to 1px.

The only reason im mentioning this about thesis is because my illustration below shows the lt textarea gt padding defined in /wp content/themes/thesis/custom/layout.css as 3px on each side, but your layout.css file will define it in em units. Thesis will adjust the em value to ensure that all font sizes result in 3px of padding on all sides of the lt textarea gt. And 0px of padding on the sides of the lt span class allowed gt it has 7px of padding on the top and bottom, but this doesnt affect our border issue. From looking at the illustration, you can see that our two elements will line up when the following equation is true: .96 parent width + 6px .973 parent width even though the equation above has only one solution, we can actually take advantage of sub pixel rounding to get a range of acceptable solutions. In order for these two elements to be the same width, the parent element p.comment_box needs to be in the range of approximately 415px 485px. After taking the 23px into account, this means our content column width which you can define in the thesis design options menu needs to be in the range of approximately 438px 508pxotherwise the borders will break. If you left your content column width at the thesis default value of 480px, then your borders should be okayat least in some browsers.

The chances of your borders lining up in ie8, however, are extremely slimdue to the fact that internet explorer is absolutely the shittiest browser in the world. With terrible browsers like internet explorer still in use, we need to find a solution that doesnt require any unit conversions e.g. This wont guarantee that all browsers render the comment form at the same width, but it will guarantee that the borders line up. time: 2016 02 20 0:13 utc 1455952573 reporting this problem: the problem you have encountered is with a project web site hosted by sourceforge.net. This issue should be reported to the sourceforge.net hosted project not to sourceforge.net. if this is a severe or recurring/persistent problem, please do one of the following, and provide the error text numbered 1 through 7, above:

user name

if you are a maintainer of this web content, please refer to the site documentation regarding web services for further assistance.

This option may be re enabled by the project by placing a file with the name .htaccess with this line: y our community talks in your comments section. To facilitate this conversation, you want your comments section to be easy to follow because it will encourage interaction and loyalty. Out of the box, thesis theme gives you the ability to enable threaded comments, which promotes conversation, and provides a slew of other options that let you tweak this area of your blog. However, what if you want to further customize how your comments are displayed? since the structure of the code in the comments section is neatly broken down, there are some simple css tricks that will help you enhance your thesis comments section and keep your discussion flowing.

To help you understand these css tricks, let’s take a look at three changes i made to my own blog. Ready? here we go! thesis is compatible with wordpress’ threaded comments system settings → discussion . The problem is, if you get a lot of comments per article, it may be tough to keep up with all of the discussions…mostly because of how cramped text can look. To solve this, i added some css to the custom.css file that splits up each comment into their own separate box. With this trick, each conversation will be contained in their own little silo in the comments section.

Hepatitis B Review Article

You can copy/paste the css below to create awesome thesis comment styles like these! if you want a similar effect to that pictured above, all you need to do is paste these three lines of code in your custom.css file: before we continue, let’s take a look at what this code does: .custom comment_list adds an outer border color to the entire comments box, and the padding will add space to all sides of this box. .custom comment_list dd adds bottom spacing to every comment so they are broken up. .custom comment_list.comment adds a background color that should contrast with the outer box. The best way to encourage discussion in your comments section is reply to your readers. Since you want them to know you replied, it’s a best practice to make your own comment stand out from the rest.

Professional Ksa Writing Service

Luckily, thesis makes styling your own comments simple because it automatically detects comments left by the author and assigns a special css class that you can edit yourself. To get started editing, here’s the core code: well, you can do anything you like. For example, you could add a background image, a border, change the background color, and etc.

It’s easy to modify your author comments with thesis’ built in css targeting. To further increase conversation, you should encourage your readers to reply to each others’ comments. To achieve this, first, you’ll want to enable threaded comments settings → discussion . When you have them enabled, you empower your readers to reply to each other because thesis automatically adds a reply link at the bottom of each comment. The question is, how do you persuade your readers to click reply? that’s simple…just make your reply link noticeable! as always, with thesis, this is easy because there’s a css class that allows you to easily stylize your reply link.

For example, the code below will add a gray box around your reply link, which will make it pop out more. Then, the other two pieces of code will make the box rounded for anyone using mozilla based or webkit based browsers firefox, chrome, and safari. Thesis gives you the flexibility to customize any aspect of your comments section. Today, i showed you how you can improve the usability and interface of your comments section with 3 simple adjustments that are easy to install and customize.