WordPress.org

Ready to get started?Download WordPress

Forums

changing the background on plugins (12 posts)

  1. carrion215
    Member
    Posted 2 months ago #

    Hi all, I have a plugin (appointment+) and I've been going crazy trying to figure out how to edit the background color of it. Thanks to this thread I was able to use firebug to get a lot going on the website, but this plugin is not being cooperative. Any ideas or a push to the right thread would be appreciated. I realize this is a plugin but I would imagine it's the same process to change the background. Thanks in advance.

  2. CrouchingBruin
    Member
    Posted 2 months ago #

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

  3. carrion215
    Member
    Posted 2 months ago #

    the website is here
    I wanted to change the background of the page. The entire website has a black background but because of the plugin running on this page, the background is white. Is there a way to change the background of the plugin, or make it 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? Any/all help is greatly appreciated. Thanks.

  4. CrouchingBruin
    Member
    Posted 2 months ago #

    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.

  5. carrion215
    Member
    Posted 2 months ago #

    YOU'RE AWESOME!!! I hate bothering anyone with noob questions so I try to find the answers for myself but that was killing me. It worked great. Since this plugin seems to be running this page and the response from the developers isn't that good, how would I go about placing this on a separate table row?
    Would things just go smoother if I found myself a new appointment plugin? This was just the first one I found that worked for a customizable amount of time, I'm all ears for recommendations.

  6. CrouchingBruin
    Member
    Posted 2 months ago #

    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.

  7. carrion215
    Member
    Posted 2 months ago #

    Thanks so much for all your help, if it's not too much trouble I have a few more.
    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.
    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?
    Also why do I now have all those border lines at the bottom of the page?
    Thanks again

  8. CrouchingBruin
    Member
    Posted 2 months ago #

    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.

  9. carrion215
    Member
    Posted 2 months ago #

    I was using firebug to try and locate the code for the table you helped me with, but no luck. I'm a noob. Once again thank you so much for your help, I feel like you just gave me a class on css lol. I'm gonna be reading that guide you linked for me.

  10. carrion215
    Member
    Posted 1 month ago #

    Sorry to bug you again but I have a quick question and since you seem to be the most knowledgeable person I have come across here maybe you can help me. I am looking to set up a price guide on my website like they have here http://www.junkluggers.com/pricing/ They are using wordpress but I can't figure out the plugin, even when using firebug. Any help is appreciated. Thank you.

  11. CrouchingBruin
    Member
    Posted 1 month ago #

    I don't think it's a plugin, I think someone just wrote some custom HTML, javascript, & CSS.

  12. carrion215
    Member
    Posted 1 month ago #

    Like I thought, you knew the answer lol! Thanks a lot for all your help

Reply

You must log in to post.

About this Topic