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

  • Support Staff

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


Tony

  • Support Staff

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


Tony

  • Support Staff

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

  • Support Staff

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