Check boxes & text in Eventbrite Multi theme appear on two separate lines

  • Unknown's avatar

    Forms in the Eventbrite Multi template don’t appear correctly. For checkbox inputs, the check box is on one line, and the text is on the following line. (It’s in the right horizontal position, but displaced downward vertically). Can I fix this?

    (This is a private site for now.)

    thanks

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    I looked at the WordPress help on CSS and played with the inspector in Safari. I found that if I play with this CSS, I can fix that problem:

    .contact-form input[type=’checkbox’] {
    float: none;
    margin-bottom: 13px;
    }

    But if I put it into my custom CSS, it doesn’t do anything. I think I’m beyond the limit of my CSS abilities:) Suggestions?

    thanks

  • Hi there,

    Do you have a link to the page/post in question? I’m happy to take a closer look.

  • Unknown's avatar

    http://coltonforselectman.com/contact/

    it’s private, but I assume you can get around that. Note that the checkboxes are above the text they relate to.

  • Hi there,

    I see what you mean. I am going to have my engineering team take a closer look here, and I will update you when I know more.

    Thanks for your patience. :)

  • Unknown's avatar

    Any update about this? thanks

  • Hi Hal.

    I have checked and our dev team is aware of the issue and working on a fix. There is a bit of a delay as this was reported over the weekend, but will be fixed soon.

    I will update you once the code has been updated. Thanks!

  • Unknown's avatar

    OK, I was just checking because I already got the survey to tell them how well you helped me:)

    Can you help with this, too? I put
    p {
    margin: 0 0 10px;
    font-size: 100px;
    }

    in the Custom CSS, but it doesn’t change the font size, except in the Sidebar Text widget. It does change margins, so I’m confused.

    thanks

  • What element are you trying to change on your theme? Based on what you’ve written, it looks like you are not targeting the correct element, which would explain the result you are getting. If I know what you trying to change, I can help with that.

  • Unknown's avatar

    Any of the <p> tags on home page, for example the one that starts “Belmont faces many tough challenges”. I have it marked as <p>, but I have to put in the id to make it work.

    If I edit font-size in the CSS editor, the sidebar text changes size, but nothing else. If I edit the margins, all of the <p>’s change. So I think I’ve targeted the right thing, but the <p> isn’t updating its text.

  • So I think I’ve targeted the right thing, but the <p> isn’t updating its text.

    That is partially correct, and why you see the margins change. However, there is a CSS rule with more specificity (priority) that prevents the size declaration in your code from being applied. In this case, it is the CSS you see inline with the HTML on the post itself.

    You can view this CSS by clicking on the “text” tab on the upper corner of the text editor window. This will change your editor to HTML mode, where you can see things like this:

    <p id="size2">Belmont faces many tough challenges in the coming years, challenges that I am willing and able to lead the Town to address. These include:</p>

    These kind of inline styles (id=”size-2″ ) overrule the custom CSS you are trying to add, and in this case, all you need to do is remove the instances of wherever you see them on the page.

    If I can ask a follow-up question, are you copying text from another application, like MS Word?

    Hope that helps. Please let me know if you have any further questions.

  • Unknown's avatar

    Thanks for the tip, but I know that. I tried it with changes to the style definition of P but without the use of the ID. It didn’t help, so I put it back to ensure that the type was right.

    I’ve reset it: the paragraph “Belmont faces many tough challenges” on the home page has just a plain <p> tag with no id. The definition of the P style includes the font-size keyword, but it seems to have no effect. It only changes the text in the sidebar text widget. Can you tell me why I can change the margin but not the font-size in the definition of P?

    I don’t think I pasted text from Word, but I do work in the Text view, so I look over the HTML to be sure it’s reasonably clean. And it’s simple enough that I can do that.

    I know the basics, but I’m not a pro. That’s why I appreciate your help.

  • Hi Hal – To change the font size of that specific paragraph, try:

    .event-text p {
    font-size: 1px;
    }

    Adjust the 1px until it looks how you want it to. Does that work for you?

    If you paste from Word, you can use the Paste From Word button in the Visual editor to make sure no messy stuff gets in:
    http://en.support.wordpress.com/microsoft-word/#using-word-cleanly

    We’ve got a great series on the Daily Post teaching our users basic CSS. You should check these out! They’re a big help:

    http://dailypost.wordpress.com/2013/06/21/css-intro/

    An Intro to CSS: Finding CSS Selectors

    Intro to CSS: Previewing Changes with the Matched Rule Pane

  • Unknown's avatar

    That worked, thanks. Is there a way that I can find out what all the styles are called? I’d never have guessed to do that.

    thanks for your help

  • Hi Hal – Yep, if you check out the Daily Post series on CSS I linked to, it explains how to identify styles in your browser and target them. It takes a bit of practice but once you get started with it, it’s not nearly as complex as it first appears.

    In particular, this section explains how to use Firebug in Firefox to identify “selectors”:

    An Intro to CSS: Finding CSS Selectors

  • Unknown's avatar

    Any update on the alignment of the check boxes and field labels?

    thanks

  • Hi Hal – None yet, sorry. I’ll let you know when there is.

  • Unknown's avatar

    Howdy Hal,

    Thanks for bringing this bug to our attention. Just a note to say this has been fixed!

    Cheers,
    Caroline

  • The topic ‘Check boxes & text in Eventbrite Multi theme appear on two separate lines’ is closed to new replies.