changing the background on plugins

What elements are you trying to change, and to what color?

Add this to the Custom CSS field (Appearance > Customiz’it! > Custom CSS):

.post-82 tr:nth-child(odd) td, .post-82 tr:nth-child(odd) th,
.post-82 tr:nth-child(even) td, .post-82 tr:nth-child(even) th {
   background-color: transparent;
}

This should make the background of the plugin’s code transparent.

Also the box that allows you to choose a service and service provider should be right next to each other, but that’s not happening, any advice for that?

It’s because the browser is trying to make the two table cells the same height. You can make the cells the same width by adding this CSS rule:

.entry-content > table tr:nth-child(2) td {
   vertical-align: top;
   width: 50%;
}

You’ll note, though, that the paragraph underneath is bunched up under the Service section. It would look better on a separate table row, spanning both columns.

Don’t know how you could put the excerpt on a separate row, since I don’t know how the plugin works. You could write a little JavaScript/jQuery function that takes the excerpt out, creates a new table row with a cell that spans 2 columns, and inserts the excerpt into that new cell. With jQuery it shouldn’t be that hard, and you could install a scripting plugin like Header and Footer to hold your script.

As far as other appointment managers go, I haven’t had a need for one, so I can’t make any recommendations. But plugins are easy to install and uninstall, so it shouldn’t hurt to try others out, it just takes time.

How do you manipulate all the different parts of the site? Is there a guide somewhere here? I found this guide but the codes never seem to work when I try and plug them in to css.

You’ll want a basic understanding of CSS. There’s a good tutorial here. Then you’ll need to understand the different ways to build a CSS selector, and then learn about CSS specificity.

Finally, it’s really important to learn how to use a web debugging tool like Firebug (a free extension for FireFox) or Chrome Developer Tools (comes built-in with Chrome). With a web debugging tool, you’ll be able to see what CSS rules are in effect for different web elements, and you can manipulate the CSS “on-the-fly,” so you can see immediately how your changes will affect the look.

The code that you paste from a guide probably isn’t going to work because the selectors you’re using aren’t specific enough, which is why you want to read the article on CSS specificity. And using a web debugger, as I mentioned earlier, will let you see what CSS selectors are currently being used so you can tailor your modified CSS to override the existing CSS.

I assumed the link “book us” and make an appointment” were just duplicates of each other, how come that change doesn’t affect both pages? don’t changes in css affect the entire site?

The CSS rule that I posted is specific to the Make An Appointment page, because I didn’t want the rule to unintentionally affect tables which you might have on other pages. One of the unfortunate things that this plugin does not do is assign IDs or class names to the table elements, which makes it very hard to create general CSS rules which affects only the tables that belong to the plugin. For example, if you were to insert your own table on the same page, it would be affected by the CSS rule.

Note that all of the selectors in the first rule begin with .post-82. In WordPress, each post or page is assigned a unique post ID, and the article element will always be assigned a class using the ID (e.g., post-82). So this makes it easy to create CSS that only affects elements on a specific page. If you were to take those class names off the selectors, then that rule would affect every table on your site, even those tables not created by the plugin. It would have been nice if the plugin developer assigned a class, like my-appointment, to each top-level table, so then that class name could be made part of the selector, and the CSS rule would only affect tables created by that plugin.

So, if you want the rule to affect the Book Us page, you can take the .post-82 class specifier off the front of each of the four selectors, which will then affect all tables on the site:

tr:nth-child(odd) td, tr:nth-child(odd) th,
tr:nth-child(even) td, tr:nth-child(even) th {
   background-color: transparent;
}

Or, you can add additional selectors for the Book Us page, which will leave all your other tables on other pages alone. If you use a web debugger, you’ll see that the post ID for the Book Us page is 26, so you can modify the rule to look like this:

.post-26 tr:nth-child(odd) td, .post-26 tr:nth-child(odd) th,
.post-26 tr:nth-child(even) td, .post-26 tr:nth-child(even) th,
.post-82 tr:nth-child(odd) td, .post-82 tr:nth-child(odd) th,
.post-82 tr:nth-child(even) td, .post-82 tr:nth-child(even) th {
   background-color: transparent;
}

Also why do I now have all those border lines at the bottom of the page?

Those appear to be sections that aren’t being use or where the display is hidden until something happens. For example, there’s a section for processing PayPal payments, and another section for displaying a confirmation. Not a very attractive design, in my opinion.