Support

Home Forums Seating Chart Add-on (EE3) Modify Seating Chart Layout with CSS

Modify Seating Chart Layout with CSS

Posted: August 8, 2013 at 5:16 pm


Therese Miller

August 8, 2013 at 5:16 pm

Hi,
We need to create a specific layout for seating plans and hoping to do so with css (this post: https://eventespresso.com/topic/interactive-seating-plan-addon/ seems to indicate that this is possible). I have had some success by editing the css definitions on the page in Firebug (see image)

However, much of the css appears to be inline? I’m thinnking we will need to be able to ‘class up’ the outer wrapper (probably by seating chart ID), so we can apply different layouts to different charts. Can you point me in the direction of which file(s) I need to customise to get this to work?

Cheers,
Therese


Josh

  • Support Staff

August 9, 2013 at 4:37 am

Hi Therese,

We generally do not recommend altering the files directly. There’s a jQuery method that lets you add classes:

http://api.jquery.com/addClass/

Also, the !important declaration can be used in cases where you have an inline CSS rule that you need to override.


Therese Miller

August 11, 2013 at 3:37 pm

Hi Josh,

Thanks for that. Is there a code to extract the seating chart id for the particular event? Ideally all I want to do is put class=”seating_chart_id_#” on <div id=”seating_chart_page”>, I figure this would allow us to apply styling on a chart by chart basis. (I’ve tested this in FireBug and it looks like it will work a treat!)


Dean

August 12, 2013 at 3:04 am

Using jQuery you could use the attr function and the javascript substring function on the event titles html

var getid = jQuery(‘.event_title’).attr(‘id’);
getid = getid.substring(12);

Will only work on the single registration page and it gets the ID from the event title, strips out the beginning bit to be left with the actual ID number only.

From there you can use it in further jQuery functions.

http://api.jquery.com/attr/
http://www.w3schools.com/jsref/jsref_substring.asp

The support post ‘Modify Seating Chart Layout with CSS’ 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