Altering the layout of event categories

[irishrunner16]

With the meta factory gone I’ve been able to do some customizations I didn’t know how to before (big win!). However, I am having some trouble getting the event categories output to display on one line (remove the line break after the label/before the categories).
Is it a matter of removing something from this code: http://pastebin.com/gAspLex5, or does something else need to be done? I’ve tried taking out the wrap_before and wrap_after without success.

Thanks,
Sean

[Casey]

Sean,
Thanks for getting in touch! This is because dd elements display as block-items by default. You’d need to change your CSS to something like this to get them to display inline:


.single-tribe_events #tribe-events-content .tribe-events-event-meta dd {
display:inline-block;
}


Give that a shot and see if it does the trick. Thanks! 🙂

-Casey-

[irishrunner16]

Casey, thanks so much! Didn’t know that about dd and dt elements – so thanks for the lesson!

Although the above didn’t do the trick for my scenario, it did point me in the right direction and got me where I needed to go. I ended up adding the following to my css and that got the categories (and label) displaying inline on my list view.

Thanks again!
Sean


#tribe-events #tribe-events-content-wrapper #tribe-events-content dt {
display:inline-block;
width: 0px !important;
height: 0px !important;
font-size: 0px;
overflow: hidden !important;
display: none;
position: absolute;
top: -10000px;
visibility: hidden;
}
#tribe-events #tribe-events-content-wrapper #tribe-events-content dd {
display:inline-block;
margin-left: 0px;
}


[irishrunner16]

PS – just realized that paste included styling that I added to hide the label entirely…figured I’d note that in case anyone else came across this and was wondering why it wasn’t showing up 🙂 So if someone wants the label, use this instead:

#tribe-events #tribe-events-content-wrapper #tribe-events-content dt {
display:inline-block;
}
#tribe-events #tribe-events-content-wrapper #tribe-events-content dd {
display:inline-block;
margin-left: 0px;
}

[Casey]

Great! Glad to hear that answered your question. Since, it looks like you’re all set here, I’ll go ahead and close out this thread.

Feel free to start another thread if you have further questions. Thanks! 🙂

-Casey-

[Author]

Posts