Forums - Print Thread - Calendar Search Page

Forums » List all forums » » Forum: General Discussion » » » Thread: Calendar Search Page - Reducing text box width?
Print at Oct 5, 2025, 12:08:12 PM	View all posts in this thread on one page

Posted by jdbrechtel at Mar 14, 2013, 1:42:12 PM

Calendar Search Page - Reducing text box width?
Greetings.

Really enjoying the functionality of this product. I researched plenty of calendar/event plugins for a WordPress site I am building and this was as good as it gets out of the box for what I am specifcally trying to build.

I am a solid Web site developer/designer and CSSer and I've gotten a good handle laying this product out on the site I'm building, but am stuck on the below.

After you get your calendar settings initialized, is there a way to modify the search page that is coordinated with it. Specifically, reducing the text box width immediately after the "Search for:" text?

I was able to embed the search page/functionality in <iframe> tags successfully, but trying to reduce the width of it (at 290px wide presently, textbox is holding that back).

Thanks,
Jack

Posted by support at Mar 16, 2013, 2:40:07 AM

Re: Calendar Search Page - Reducing text box width?
Ok, since you seem on-the-ball, I'll tell you that there is an undocumented way to do this. We haven't tested it a lot yet, but you seem like a good first candidate.

When you created your iframe, you probably put in something like this for the source:
http://www.localendar.com/elsie?JSP=PublishedCalendarSearch&calendar_id=12345

Add this to the end:
&user_css=http://mysite.com/css/style.css
Of course, referring to your own custom style sheet.

Here are the IDs of some items you may want to write some CSS for. Your CSS should be included after ours, and hence replace it.

The div that is putting a big border around the search form has id: lc_generic_header

And the id of the search query box is: search_query

if you included custom CSS with something like
#search_query {
width:100px;
}
#lc_generic_header {
margin:2px;
padding:2px;
background:#fff;
}

you *might* get exactly what you're after
----------------------------------------
Marc Higgins
Support Associate, localendar.com
Follow us on Twitter! http://www.twitter.com/localendar_news