CSS DOUBTS

Hi!

I´m testing the event booking extension and I have a couple of doubts I can´t resolve by myself.

I attach two screenshots, one of the demo site and one of my site (to compare) so you can see what I need.

I change a lot of css code through firebug Mozilla Firefox extension but I haven´t found how to do these changes.

For the first title, try If you need to limit this to a specitic layout, at a #eb-category-page-timeline or #eb-category-page-table etc. in front.

For the second one, could you post a link to the sample page on your site? The demo site seems to have no current events, and all my events are done for the school year on my personal site, so I don't have anything to firebug right now

Hi James!

Thank you very much for your quick answer!

Mi site is actually in local, in my computer :dry:

I´ll try to upload a copy to my web server.

I wonder if Tuan or any moderator could add a new timeline event example in the demo site to check it.

Thanks again for your kind help

Regards!

I updated dates of the events. It is now being showed on demo site

If you need assist, please setup your site to a server and I can ask my developer to look at it and guide you with the modification

As usual, thanks James for your help with the support questions

Tuan

If using the timeline layout, I would use the following:

Tuan Pham Ngoc wrote: I updated dates of the events. It is now being showed on demo site

If you need assist, please setup your site to a server and I can ask my developer to look at it and guide you with the modification

As usual, thanks James for your help with the support questions

Tuan

Good morning!

Thank you very very much Tuan!!

We´re testing the site locally. Shortly we´ll setup the site online.

Regards!

James Riley wrote: If using the timeline layout, I would use the following:

]

Hi James!

Thank you very much to you too!!

Please could you tell me what program do you use to see the code? I´m using firebug Mozilla Firefox extension but it doesn´t show me the code like your screenshot

One last question. What about DETAILS button? how can I change its css code? I can´t find it either.. :blush:

Thanks once more for your kind help

Regards..

I had combined 2 screenshots in PhotoShop and annotated using Illustrator to add everything in red -- the boxes, arrows and text -- prior to posting :whistle:
I just use FireFox's built-in "Inspect Element" tool (right-click on the element I want to investigate -> Inspect Element) for my code hacking and CSS hunting. While it doesn't show everything like in my screenshot automatically, there is a lot you can do with it without having to install a separate extension like FireBug (although FireBug is worth installing too! ).

As for the Details button, here's the code and the CSS that is coloring it on the demo site:



It uses the global, site-wide .btn-primary CSS code. So, to change only the Event Booking details button:
Drop the ".eb-taskbar" you want the change to be site-wide, Modify as necessary if your template uses a different css selector (eg. "a.btn-primary" instead of just ".btn-primary") or add to the selector if you only want to change it on a specific view (eg. add #eb-category-page-timeline to the beginning to change it only on the timeline category view).

Hi James!

I appreciate A LOT your fantastic help..

I´m going to try your css code.

I use built-in Inspect Element too but sometimes it doesn´t show me the css code I want to change. Excuse me.. I´m not an expert like you are :blush:

Thank you very very much again for your kind help!!

Regards!

Hi again!

I´ve tried the css code and it works perfectly

I´ve been investigating why It doesn´t show the same css code like the demo site, and I realized that it takes bootstrap code of my template

I´ve attached you screenshots so you can see what I mean.

As you can see, the border color works perfectly but the background color it doesn´r work because it has background-image in the bootstrap css code.

I can add the code to .eb-taskbar .btn-primary and modify the color of background-image

The question is why it takes the background-image code and it doesn´t show the button like the demo site but it doesn´t matter.. it works!

Regards!