Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    175
    Thanks
    3
    Thanked 1 Time in 1 Post

    Apply css using id and class together?

    I'm building a site in Joomla with Community Builder and am working on the registration form and profile edit layout.

    The fields are added through the community builder back end and the fields are loaded both in the registration form as well as in the profile edit form, these fields have the same id in either form.

    My registration form is built in a drop down jquery tab and only a few of the fields are displayed at registration. There is no privacy options displayed on the registration form

    The profile edit form shows all of the fields as well as display privacy options for each field. The problem arises where the privacy options are in a plugin that automatically display the options as part of the field, there is no way to separate the field from the privacy options which makes it hard to style. Since the reg form is custom and not auto loading the fields I simply omit the privacy boxes, however I still need to add a margin-right by field id to correctly line up the options in the profile edit page without affecting the styling of the reg form.

    My original idea was to set the margins by field id in the style sheet for the profile edit display, then add a copy of the field id style using a class called .inputbox1 stating the margin as 0 to be used in the reg form so the example would look like this:
    #cb_state {
    margin-right:188px;
    }
    #cb_state .inputbox1 {
    margin-right:0px;
    }

    However this doesn't work. Am I going about this wrong?
    How can I set the style for the field id on the profile edit page one way and the style for that same field id on the registration form another?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Can you assign a different id to the different forms? If so then you can make your styling more specific via:

    Code:
    #profileform #cb_state {
    margin-right:188px;
    }
    
    #regform #cb_state{
    margin-right:0;
    }
    If you can't change the id of the form, you could alternatively assign an id (or class) to the page, and use the page id similarly.

    ( Your css #cb_state .inputbox1 will only apply to an element with class 'inputbox1' within an element with id 'cb_state')

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    175
    Thanks
    3
    Thanked 1 Time in 1 Post
    Can I do this by div id instead of page id?
    For example, my registration form is wrapped in a div like this:
    Code:
    <div id="mypanel" class="ddpanel" style="position: absolute; margin:41px 0px 0px 728px; z-index: 99999;">
        <div id="mypanelcontent" class="ddpanelcontent" style="background: url(images/jointabback.png) no-repeat;">
            <div style="margin: 0px 0px 0px 12px; height: 321px; line-height: 15pt;">
    		<form action="http://www.erecoverydev.com/index.php?option=com_comprofiler" method="post" id="cbcheckedadminForm" name="adminForm" enctype="multipart/form-data"> <input name="id" value="0" type="hidden" /> <input name="gid" value="0" type="hidden" /> <input name="emailpass" value="0" type="hidden" /> <input name="option" value="com_comprofiler" type="hidden" /> <input name="task" value="saveregisters" type="hidden" /> <?php echo cbGetSpoofInputTag( 'registerForm' ); ?> <?php echo cbGetRegAntiSpamInputTag( $cbGetRegAntiSpams = null ); ?>
    So could i set the css like this?:
    #cb_state {
    margin-right:188px;
    }
    #mypanel #cb_state {
    margin-right:0px;
    }

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Posts
    175
    Thanks
    3
    Thanked 1 Time in 1 Post
    NM, i just tested it and it worked.
    Thanks for the help.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Yes, that should be fine. #mypanel #cb_state is more specific than #cb_state so it will take precedence.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •