New to the community? Start here

Date of Birth field issue in bp-social theme

Hi All. Date of Birth fields are not showing properly. For instance, the width of each field should be minimum. It does not make any sense to see the 1st of 3 fields, "day" is displayed too much wider than actually required! I require someone to align these 3 fields such that it really makes some sense..

I attached the screenshot for your reference. Please help me at the earliest. Also, look into the zig-zag alignment of different fields in my register page.

Thanks in advance,

Siva.

[attachments are only viewable by logged-in members]

Thu, 28 Jul 2011 19:33:16
  • Mason
    • DEV MAN’s Sidekick

    Hiya,

    Please add the following wherever you’re adding custom styles for your theme:

    #signup_form .datebox select {
    
width: 32% !important;
    
}

    You can adjust the 32% slightly to get it exactly how you’d like to resize the 3 fields.

    The alignment issue appears to be caused by the Terms of Service plugin. I’ll ask the theme designer if he has any suggestions on that one.

    Thanks!

  • psivait
    • Design Lord, Child of Thor

    Hi Mason,

    Thanks for your reply. I disabled the Signup Terms of Service plugin, and found that the issue has not solved. However, this plugin is the culprit for the alignment issue!

    So, we have 2 things to be considered here. One, being the alignment issue due to this plugin’s outdated nature. Second, I request some developer to help me on the DOB issue. I want the 3 DOB fields to appear differently based on its size of the values. I mean, Month field can be wider than the rest of the two. Year field should be wider than the Day field. Hope everybody understands my requirement. You can see this basic functionality in any popular website!

    Help is required at the earliest. Thanks again,

    Siva.

  • psivait
    • Design Lord, Child of Thor

    Hi Mason,

    My first priority is to fix the alignment issue. If you see the screenshot, Profile section is unnecessarily displaying at the down whereas it should be displayed from the top! Something is disturbing it to load at the middle of the page.. Could you please let me know on this part first?

    Thanks and Regards,

    Siva.

  • Mason
    • DEV MAN’s Sidekick

    Hiya,

    @T3Kaos, where you put the code is somewhat up to you. We recommend using child themes. Within each child theme is a specific stylesheet specifically for custom modifications like we’re discussing here.

    here’s some information on child themes:

    http://buddydress.com/2010/05/parent-and-child-themes-explored/

    You can also read some instructions in the theme itself by going to bp-social/style.css.

    @psivait, as I said, I’ll have to ask the developer about the TOS box issue. If you disable the plugin the alignment should return to normal.

    As for the date boxes, this is not a theme issue, but more of a limitation within BuddyPress. Standard IDs are not provided for the different fields (they are created when you create a custom field in BuddyPress Profile settings) so it’s difficult to provide for those values as they’re dynamically created.

    If I can look at your site, I can give you the IDs easily. If not, I’d recommend you get familiar with firebug so you can quickly identify and recode these areas:

    http://buddydress.com/2010/06/firebug-installing-discovering-and-using-the-tutorial/

    Thanks!

  • psivait
    • Design Lord, Child of Thor

    Hi Mason,

    As I said before, I am interested on the alignment issue only. If I disable TOS plugin, yes, the alignment issue will be solved. However, I need this plugin! So, let’s focus on fixing the alignment issue. Must be css fixes anyway..

    Thanks,

    Siva.

  • Richie_KS
    • HummingBird

    hi psivait

    do you have alive site i can check into?

    this issue mostly cause by the bp custom profile field css.

    how about adding this css to custom.css or base.css (remember to remove mason’s css fix first)

    #custom #signup_form select {
    
width: auto !important;
    
float: none !important;
    
}

  • psivait
    • Design Lord, Child of Thor

    Hi Richie,

    Thanks for the code. It really worked like a charm. I would be grateful to you if you could help me in the registration page’s alignment issue.. If you observe the screenshot, Profile section is coming in the middle, instead of loading from the top. It is disturbed because of the outdated WPMU’s signup Terms of Service (TOS) plugin.. Please help me on this.. Otherwise, no visitor could sign up and all my efforts could be down to zero..!!

  • psivait
    • Design Lord, Child of Thor

    Hi VeBailovity,

    I have no words to thank you! You have really saved me dude..!!

    In fact, it was in my outstanding task-list for a long time. I am glad that you helped me at the right time. The fix did by yours have suppose to be incorporated into the signup-tos plugin. Your fix will benefit all of them who depend on this outdated plugin.

    I would like wpmudev programmers to take care of their themes and plugins not to become outdated as it is happening to some of the plugins. It will really demotivate the members from using your service!

    Regards,

    Siva.

  • Vladislav
    • Dead Eye Dev

    I’m very glad we managed to solve your issue. The problem with the plugin wasn’t it being “outdated” or not – in fact, all the core code remained the same – but rather the place it was hooking up with the theme.

    Unfortunately, inserting anything from plugin into a theme is a moving target, and can work nicely with some themes and come up rather bad in other ones. This is a pretty common issue for most plugins that need to interact with themes.