Because we are not using a MyReviewPlugin bundled theme, review site properties, such as star ratings, don’t automatically appear on the site. We have to add these manually, which is good because we get more control over the appearance of our site.
Using the Graphical Positioning Tool
Adding review site properties to our site with MyReviewPlugin is pretty darn cool!
Let’s use the "Graphical Positioning" tool, which is as easy as drag-and-drop. It’s located at the top of: MyReviewPlugin »» Setup Embeds.
So, now that I have added "Post Icon" (which is MyReviewPlugin’s name for thumbnails), "Editor’s Rating Table", and "Custom Data Table", let’s look at the post.
Hmmm, these are not floated right as I intended them. Well, I told you that you will have to know CSS to get this job done. It is inevitable that you will run into issues like this when making a website.
Tweaking the CSS
The culprit in this case is the theme TwentyTen because it clear: both; all heading tags.
I removed clear: both; from TwentyTen’s style.css. Now, let’s see what we have.
This still doesn’t look right. The post text now merely squeezed itself in the space to the left of the image and the tables.
Using MyReviewPlugin CSS Options Editor
It’s not TwentyTen’s fault this time, though. The tables are too wide. Luckily, MyReviewPlugin comes with a comprehensive and very user-friendly CSS options editor. You can reach it by going to: MyReviewPlugin »» Setup Embeds. And clicking on the "Appearance Settings" in the top right corner.
(Note: Alternatively, you can simply edit plugins/MyRP/defaults.css)
On this page, you can adjust most of the CSS settings of MyReviewPlugin’s visual elements. We’ll edit the CSS here to fix the layout of our top-right aligned visual elements.
After setting the width of "Editor’s Rating Block" and "Custom Fields Block" to 265px, we now have a better layout in our post:
That’s more like it!
Add "Visit Site" Button to the Bottom of the Post
By the way, the thumbnail is clickable. It redirects to our affiliate link. But we also want to add a "Visit Site" button to the bottom of the post — this is important for conversions!
Go back to the "Graphical Positioning" system and drag "Visit Site Link" to the "Below" area. You’ll get something like this:
Again, we have to tweak this to make it look better. The options for the "Visit Site" link are in: MyReviewPlugin »» Settings »» Visit Site.
After selecting a blue button and centering it, here’s what I have:
Now the "Visit Site" button is in the center of the post and looks pretty good.
I don’t like the "This entry was posted in..blah blah" below it, but we’ll take care of that in the optional advanced tweaks page.
Now, let’s add the ability for our users to rate products in comments…
