Support

Home Forums Event Espresso Premium Attendee List css Styling with [EE_ANSWER] shortcode

Attendee List css Styling with [EE_ANSWER] shortcode

Posted: March 22, 2014 at 6:22 am

Viewing 12 reply threads


Pim Stumpel

    March 22, 2014 at 6:22 am

    Hi there,
    i managed to add extra fields to my Attendee list, but i was wondering how i can change the CSS so that The name and extra field are shown on one row. So Name aligned left and second field aligned center or right.
    This is a link to an example of a list i have: http://www.test.dinghycoach.nl/entries/

    So i would like:
    nr 1 Roelof Bouwmeester aligned left like it is right now and his number 4000 aligned right on the same row. Could you help me out?

    I hope you have all the info you need.

    cheerss

    Pim


    Lorenzo Orlando Caum

    • Support Staff

    March 22, 2014 at 3:57 pm

    Hi Pim,

    The information is separated by a line break (
    ) and can’t be edited individually with CSS.

    http://cl.ly/image/372W3w3f3e3e


    Lorenzo


    Pim Stumpel

      March 25, 2014 at 5:43 am

      Oke that sounds clear, can i make a different class for, in my example, the numbers? Then i would have 2 different classes. So i can edit it in css as well? If so can you show me what i should change in the php file?

      cheers


      Josh

        March 25, 2014 at 3:00 pm

        Hi Pim,

        If you look in your customized attendee_list.php template you’ll likely find something like this:

        $custom_question_1 = '<br />'.do_shortcode('[EE_ANSWER q="12" a="'.$id.'"]');

        which can be changed to something like this:

        $custom_question_1 = '<span class="attendee-answer">'. do_shortcode('[EE_ANSWER q="12" a="'.$id.'"]') . '</span>';

        Then you can add something like this in your custom stylesheet:

        .attendee-answer {
          float: right
          display: inline-block;
        }

        There may be a few other tweaks that are necessary to pull this off, and here are a few guides that may help:

        http://css-tricks.com/video-screencasts/15-introduction-to-firebug/
        http://htmldog.com/guides/cssbeginner/


        Pim Stumpel

          March 26, 2014 at 8:13 am

          Hi again,

          thanks for all the information, sounds clear to me.
          My CSS skills are quite good, so that must go fine.
          Buttt where can i find the Style.css file in event-espresso?
          I have been looking everywhere but can’t seem to find it…

          and i guess i need to move it to the uploads section again, but where exactly?

          cheers

          Pim


          Anonymous

            March 26, 2014 at 8:29 am

            Hi Pim,

            Rather than editing the styles.css file for Event Espresso, I would recommend a plugin such as My Custom CSS to add your own styling to a custom style-sheet.

            The styles added using this will then override the Event Espresso default rules.

            Does that help?


            Pim Stumpel

              March 26, 2014 at 8:52 am

              Hi there,

              I did as you told, and got the my custom css plugin, i changed the file in attendee_list.php and added the code in the plugin what looks like this:

              .attendee-answer {
              color: #000;
              float: right
              display: inline-block;}
              Than saved it and checked but the numbers aren’t showing at all.
              They weren’t showing when i didn’t put in the css details but also didn’t show after i did fill the css details in the my custom css plugin.

              Any suggestions?

              cheers


              Anonymous

                March 26, 2014 at 9:04 am

                Did you also add the correct code that Josh posted to the attendee_list.php template?

                For example:

                $custom_question_1 = '<span class="attendee-answer">'. do_shortcode('[EE_ANSWER q="12" a="'.$id.'"]') . '</span>';

                In the correct place you would like the numbers displayed? You will also need to set the questions id (q=”12″) to the correct ID for your custom question.


                Pim Stumpel

                  March 26, 2014 at 9:58 am

                  Hi again,

                  yes i posted the correct code, and the ID has to be set on 12.
                  I want it to be on the right side of the same row.
                  So Name first as normal, and than on the same row on the right i would like the q=12.

                  cheers


                  Lorenzo Orlando Caum

                  • Support Staff

                  March 26, 2014 at 2:23 pm

                  Hello,

                  I’ve taken a look at your page from my end and I’m seeing the content all on one line. Is it working for you?


                  Lorenzo


                  Pim Stumpel

                    March 26, 2014 at 3:48 pm

                    Hi Lorenzo,

                    Thank you for your quick response again!
                    I just checked again but i don’t see anything there:(..
                    Dont know how its possible that you do see it.
                    The only thing i see is a normal list with the names of the attendees and not the numbers(q=12).
                    I tried it on Chrome, Safari and firefox as well.
                    Are we looking at the same page? I mean this page:
                    http://www.test.dinghycoach.nl/entries/

                    Any ideas?

                    cheers


                    Josh

                      March 26, 2014 at 4:33 pm

                      I don’t see the attendee answer, but the extra markup is there:

                      <span class="attendee-answer"></span>

                      Which may mean q=12 isn’t the right number. It might be q=14. You’ll need to confirm this and check the ID of the question you want the answer displayed for.


                      Pim Stumpel

                        March 27, 2014 at 4:50 am

                        Hi there,

                        It worked! You were right, we changed the order of questions so it had a different ID number, now it works perfectly!:)

                        Thank you so much for the great support!

                        cheersss

                        Viewing 12 reply threads

                        The support post ‘Attendee List css Styling with [EE_ANSWER] shortcode’ is closed to new replies.

                        Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

                        Event Espresso - Staging Server