How to get rating stars on same line as Price+Prime Logo? And Left align button?

daydull
(@daydull)

3 years, 5 months ago

Hi, I just started using Amazon Auto Links and am liking a lot of it. However my initial thoughts were to slightly tweak the default layout of a single product inserted into a post, but I’m having some trouble getting it exactly how I’d like it.

#1: Although the %rating% %price% %prime% were all on one line in the Default > Settings > Item Format box, the star ratings always kept appearing on a new, separate line. I played with applying CSS float:left to it, but it still wasn’t looking right.

I’ve currently got it moved around so it looks okay for now, but I’d just like to have Price, Prime logo, Ratings in that order on one line.

#2:
I’m also hoping to align the button to the left, so that it is right under (or maybe right above) the price/prime/ratings line. But I’m not sure how to align to the left without using float:left, which makes other things not look right.

#3:
Is there an easy way to set the font size in the plugin settings that I didn’t see? By default it was all much smaller than my normal text. I ended up fixing the text size by using .amazon-auto-links-product-body { font-size:14px !important; } but I was wondering if there was an easy way to do this in the preset options.

I’m not an expert in CSS etc as you can tell. Any help? Thanks!

(Here is a page on my site where I’ve been experimenting with the plugin’s looks: http://daydull.com/tips-tutorials/dark-souls-recommend-levels-for-areas-and-bosses/ The first Amazon product on that post is from this plugin.

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author miunosoft
(@miunosoft)

3 years, 5 months ago
Hi,

For the issue #1, if you are using a unit, go to Dashboard -> Manage Units -> Edit (of your unit) -> Item Format and place %rating% %price% %prime% in one line. I checked your site and it seem the rating star is placed before descriptions. It indicates that you have something like %rating% %description% … Change it to %rating% %price% %prime%. If this doesn’t work, most likely the rating element does not have inline-box CSS property.

As for the issue #2, try this CSS rule,
```
.amazon-auto-links-button-container .amazon-auto-links-button {
    margin-left: initial;
}
```
Regarding #3, sorry no. It requires custom CSS rules to adjust font sizes.

Let me know if you get further questions.
Thread Starter daydull
(@daydull)

3 years, 5 months ago

Thanks, the CSS for #2 worked great for left aligning the button. #3 I understand, not a big deal.

As for #1, (%ratings won’t stay on the same line with %price and %prime) – I mentioned in my post that I had temporarily moved it around when I posted. You might have missed that. Sorry for the confusion.

I’ve switched it back now so you can see how it looks with %rating% %price% %prime% all on one line after the description. Same link from the first post. When they’re all on one line in that order, the rating is moved up to be at the end of the description? I don’t understand why.

I also tried on one line: %price% %prime% %ratings (ratings at the end.) In that case it moves ratings down to a new line.

I inspected the css and the rating, prices, and prime all seem to have display: inline-block; applied to them

Thanks for the quick helpful reply last time 🙂

Plugin Author miunosoft
(@miunosoft)

3 years, 5 months ago

Remove the p tag around %price%.
Thread Starter daydull
(@daydull)

3 years, 5 months ago
I did not place a p tag around price, and there is not one shown in the “Item Format” box in the plugin settings. I see in the html inspector that one shows up there, but it’s not through something I am doing. I assume this plugin is doing it?

Here is the current contents of the “item format” box in the amazon auto links settings:
```
<div class="amazon-auto-links-product">
    <div class="amazon-auto-links-product-image" style="">
        %image%
        %image_set%
    </div>
    <div class="amazon-auto-links-product-body">
        %title%
        %description%
        %rating% %price% %prime%
        %button%
    </div>
</div>
```
Plugin Author miunosoft
(@miunosoft)

3 years, 5 months ago
Not sure why you get a p tag around prices.

Please try this,
```
.amazon-auto-links-product-body > p {
    display: inline-block;
}
```
Thread Starter daydull
(@daydull)

3 years, 5 months ago

That did not work, it ended up just slightly increasing the space underneath %price %prime line, above the Amazon buy button.

After some fiddling it seems something is inserting a <p> tag around %price and %prime wherever they are placed. For example if I order them %price %reviews %prime (all on one line in the settings) it renders them all on separate lines because %reviews is in the middle of %price and %prime. Maybe something to do with the <span> tags that are around them? I’m just guessing.

Oh well, I have just moved %reviews% back up into the paragraph with the description and it looks okay there I suppose.

If you have any other ideas I would try them, otherwise thanks for the help.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘How to get rating stars on same line as Price+Prime Logo? And Left align button?’ is closed to new replies.

Tags