Center Book Covers

Hi Sydney

I generally don’t add too much to the styling. It’s better to let the theme handle all of that. You’d probably want to add a little CSS to your theme to get the right effect, so can you describe exactly what you’re trying to do?

By default, the plugin adds a small margin and floats everything left so that all the covers line up properly on a single line. In theory, you’d get a center positioning if you just change the margins a little, but it depends on how many covers you want to place on one line.

I see what you’re saying. Can you tell me, however, when I go into the theme’s style.css, what I would use, say in the child theme, to override the current buy the book layout. I don’t know what the elements/classes are called,I mean. So, how do I change the css? Or where do I find the style sheet for the buy the book? Like if I wanted to say

.bookcover {

or whatever it’s called.

If you take a look at https://www.marlissmelton.com/dev, you’ll see on various pages I’m using Buy the Book in sidebars, sometimes both sides, and usually, only one book per line, which leaves too much space to the right of the book cover. It would look very elegant if I could center books without having to go through and change the size of all the book cover images to make them fill the space.

Thanks in advance for your assistance.

Okay, there’s two solutions to this.

The first is that you make the images bigger so that they fill the whole space. The widget should still work as normal.

This isn’t ideal, of course, so here’s how you can modify the CSS to make it work with the image sizes you have right now.

You need to be very careful about the CSS selectors, because you need to distinguish between the pages that show a single column of books on either side, and the pages where the normal formatting appears with multiple books on each line. I don’t think you’ll be able to have a mix of the two – not until I make some changes to the CSS of the plugin, anyway.

So here’s one page with a column of books: https://www.marlissmelton.com/dev/communications/

The specific CSS selector to get the cover elements of the Buy This Book widget on the left hand side is as follows:

.page-id-29 #sidebar2 .buybook .toggle

This is all you need to start moving stuff around. But the problem here is that in order to make the slideout work, some of the CSS has to be set a certain way, and it won’t be possible to just use margin:auto to center each element.

So here’s what you do – your sidebars are a set width right now. So to center an element in there, you just have to give it a margin on the left to push it out into the middle. Here’s the CSS:

.page-id-29 #sidebar2 .buybook .toggle { margin-left: 16px; }

What this will do is apply that style to the Buy This Book widgets on that sidebar in that page only. The rest of the site won’t be affected.

Here’s how you get the other side:

.page-id-29 #sidebar1 .buybook .toggle { margin-left: 45px; }

That 16px and 45px is the size of the margin on the left, obviously. You can adjust it to whatever seems to work best. The important thing to remember is to only apply this to the pages where you have columns of books, not rows. It’ll probably look pretty funny otherwise.

This isn’t true centering, unfortunately, but it’ll work for now. I’ll add some CSS improvements to my to-do list for the plugin, so that you won’t need to do this any more. Ideally, it should be possible to add any number of books and then choose the layout, but I suspect I’ll have to write a new version of the plugin entirely to make it work.

Anyway if you don’t know how to get the page IDs or if you have any other questions, just let me know here.

Thanks, that works great. Oddly enough, I don’t know how to see the permalink numbers, the page IDs, and I was just searching for an answer on Google and not coming up with one. I know how to change them from one permalink structure to another but not how to see the ID numbers once I’ve made them into words. If you could tell me that, I’ll be all set.

Thanks again so much. I love your Buy the Book application.

Found the ID numbers in the address bar once I clicked to edit a page. Thanks. I’m all set.

Hey – just FYI, if you have google Chrome, you can right click on your site and hit ‘Inspect Element’. That’ll show you the source HTML, and the <body> tag should have a class listing there like so:

<body class="page-id-19 page blog">

Or something like that.

The ‘page-id-X’ class is the one you want to use for each page when you’re changing the CSS. You’ll be able to see this regardless of what kind of permalink structure you use.

Any other issues, just let me know. ??