Help, HTML within Posts Messed Up

Pardon me if I am unaware of a bumping rule but with as many posts that go by here I am afraid this topic won’t get much exposure on page 15.

Help would be greatly appreciated.

It might help if you post a link to your site. The fix would depend on the theme you’re using.

https://www.aceoftech.com

I tried using all the html codes I know, and still no luck.

itwasluck, WordPress’ editor uses a limited selection of code, and anything outside of this selection can become corrupted by the visual editor.

I would recommend trying the Raw HTML plugin, It has been a big help for me in adding code to posts and pages.

But you should totally be able to edit your theme’s stylesheet to get the effects you want.

Try looking at that part of your site with Firebug, and see what kind of divs are around the offending elements that you can adjust in CSS to style it how you want it.

I see that on your site, the class for your rating element is “post-ratings”, so you could add a left margin or padding in CSS and it would line up with your text no problem.

It looks like the comments link is in a paragraph, so it is breaking down to it’s own line. If you lose the paragraph tags, or style them differently, you should be able to float it to the right, and get it on the same line as the rating bar.

You might have to open up the code for the plugin too, and add or remove a break or two to get it looking just right.

I would really try to resolve this by editing your style, and the plugins. Adding a little HTML is fine for a Page, but with Posts, it can get overwhelming!

Thanks for the help, but I am still confused, when I say HTML codes I know, well thats practically none. So when you say “lose paragraph tags” and remove a break or two” I’m not 100% sure of how I’m supposed to do that.

I can get a copy of my index.php code that I can find through my theme editor in wordpress if you want.

Sorry, the editor that WordPress uses, TinyMCE, doesn’t take much code. It is more similar to BBCode, like you can use in the forum.

Here is an example of simplified code that WordPress uses:

<strong>bolded text</strong>

Here is an example of standard HTML code that gets broken in WordPress:

<div align="center">centered text</div>

So to get anything like the second example to work in WordPress posts or pages, you have to install the Raw HTML plug in, and surround the raw code that you are writing in tags that Raw HTML recognizes. Raw HTML will then protect that code from TinyMCE.

Don’t edit your index.php file in your root directory. Make sure you are only editing files in the wp-content/themes/your-theme directory. Even there, you probably don’t need to edit that index.php file for anything.

You probably don’t need to edit anything in the plugin either, that would be an extreme measure.

For example, when I say add or remove a break, if you had installed a plugin that listed out the authors on your blog. It might look like this:

Bob
Steve
Mary

Let’s say the plug in is listing them out by adding a linebreak after each author. So if you wanted the authors to be in a row, separated by commas instead, you could replace that break with a comma and a space.

But you can probably do what you need to do by just editing the CSS of your theme. This will be the most painless and least destructive way to achieve what you want.

Start by reading this article in the documentation on editing a header. It is good info that will be applicable to what you are trying to do.

Look at this part, you could do something like that to style your ratings element.

Try this in theme’s stylesheet, it might bump your rating bar over:

.post-ratings {
	padding-left: 10px;
}

As for the comments link, you need to lose the paragraph tags around it, or edit CSS so it doesn’t break to the next line. If you look at how they are boxed up in Firebug, it will make more sense.

Here is a good reference for CSS if you need it:
https://www.cssbasics.com/