Forum

This forum is now read-only. Support is provided at https://wordpress.org/support/plugin/sermon-browser/

Please consider registering
guest
sp_LogInOut Log Insp_Registration Register
Register | Lost password?
Advanced Search
Forum Scope


Match



Forum Options



Minimum search word length is 3 characters - maximum search word length is 84 characters
sp_Feed Topic RSSsp_TopicIcon
Sermon Browser screen layout issues
16 March, 2013
12:01 am
David Barbee
Houston, MO
Member
Members
Forum Posts: 6
Member Since:
16 March, 2013
sp_UserOfflineSmall Offline

The screen layout of my sermon browser page doesn't look like it should.  The dropdown boxes are invisible, the calendars don't pop up, the sermons are not spaced right, and there is not line between them.  I tried the 2 fixes suggested in  https://www.sermonbrowser.com/f…..mons-page/ but they did not improve the layout.  The layout worked properly with the previous theme (twenty-twelve), but does not work with the new them (Pinpoint).

I am a novice Wordpress user and would appreciate any help you could provide.

 

David

http://houstonbbc.com/sermons/

16 March, 2013
5:02 am
Ben Miller
Appleton, WI, USA
Moderator
Members

Moderators
Forum Posts: 1628
Member Since:
18 June, 2009
sp_UserOfflineSmall Offline

David, I've taken a look at your site.  You've got WordPress installed on your site in a somewhat unique way; you do not have WordPress installed in the home directory of your site, but instead in a subfolder named "wordpress".  Normally that shouldn't be a problem, but I think I found a bug in Sermon Browser that is preventing the Sermon Browser style sheet from loading if your "WordPress Address" is different from your "Site Address".

Fixing this will require making a small change to one of the Sermon Browser .php files.  I know you said that you are a novice, so I'll try to provide easy step-by-step directions for making this change.  If you have any questions, feel free to ask.

The file we are changing is sermon.php, which is found at wp-content/plugins/sermon-browser/sermon.php. 

The easiest way to edit this file is to do so in the WordPress control panel.  (If you are familiar with FTP and editing files with text editors, feel free to skip down to the actual edits and make the changes whichever way you like.)  Click on Plugins, Installed Plugins.  On the Plugins page, click on All to see all the plugins that your currently have installed.  Find Sermon Browser, then click on the Deactivate link, which will stop Sermon Browser from working on it while we edit it.  Then click on the Edit link.

You will now be on the Edit Plugins screen, editing sermon-browser/sermon.php. Before we go any further, let me offer you a little word of warning.  This page allows you to make changes to the Sermon Browser code, and if you type in the wrong spot and hit the "Update File" button, you will cause Sermon Browser to quit working.  So you want to be careful in here and only make the changes I describe below.  If you accidentally type in the wrong spot, you can exit without saving (just click on the Dashboard link).  Then you can go back to the Edit Plugins screen and try again.  If something catastrophic does occur, just let me know and I should be able to help you get it working again.

You are looking for a function named sb_sermon_init.  You'll know when you find it because you'll see a line that starts with the text "function sb_sermon_init".  The function begins on line 185, but the WordPress edit plugins screen does not show you line numbers.  It's about a fifth of the way down the file from the top.  If you are having trouble finding it, you can search in your browser for "function sb_sermon_init". 

Once you find the start of that function, you are looking for 4 lines of code inside that function that look like this:

http://pastebin.com/EDDrgQSp

(Visit that link to see the code.)

You'll find these lines about 20 lines below the start of the function.  In these 4 lines, there are two places where you see the text "site_url".  You need to change both of these to "home_url".  The new lines will look like this:

http://pastebin.com/jTmPCC5s

After you make those two changes, click on the Update File button at the bottom of the screen.

When that is done and you see the "File edited successfully" message at the top of the screen, click on Plugins on the left-side menu.  Find Sermon Browser, and click on the Activate link to run it.

To test that Sermon Browser is up and running again, click on Sermons, Options.  If the Sermons, Options page loads correctly, that tells you that you didn't introduce any catastrophic errors.  :)

Next, take a look at your Sermons page, and see if it is looking better.  Let me know when you are done, so I can take a look.

 

If you have any questions about any of these instructions, or you have any trouble, please let me know.

Ben Miller, Pathways Church, Appleton, Wisconsin, USA
Read the new FAQ, last updated 11/21/2013
Announcing version 0.45.12

16 March, 2013
5:14 am
Ben Miller
Appleton, WI, USA
Moderator
Members

Moderators
Forum Posts: 1628
Member Since:
18 June, 2009
sp_UserOfflineSmall Offline

David,

Note: I just made some significant edits to the step-by-step above.  The text above is now correct (I believe), but if you read my instructions before you saw this, you might want to look again.  If you are reading this via e-mail, please visit the forum website for the step-by-step instructions, because the instructions you got in the e-mail are out-of-date.

Ben Miller, Pathways Church, Appleton, Wisconsin, USA
Read the new FAQ, last updated 11/21/2013
Announcing version 0.45.12

16 March, 2013
3:03 pm
David Barbee
Houston, MO
Member
Members
Forum Posts: 6
Member Since:
16 March, 2013
sp_UserOfflineSmall Offline

Ben,

Thank you for responding.  You have been a great help already.  It never occurred to me that changing the site url might be the cause.  The edits you suggested for sermon.php cleared up some of the issues, but not all of them.   The sermon list spacing is right and I now have a line between each sermon now. The edit also fixed the iTunes subscription buttons.  BTW: I edited sermon.php through cPanel file manager because the wordpress editor said I didn't have permission. (I don't know if that's relevant, but I know sometimes every little bit helps)

Now the issues seemed to be isolated to the search boxes.  The borders are still invisible.  Also, an issue has resurfaced that I have had before: The labels for the search boxes are not on the same line as the boxes. 

One other issue that still remains are the popup calendars on the "Add Sermons" part in the wordpress control panel.  The calendar icon shows, but it will not pop up when I click on it.  I can enter the date on my keyboard, but not via the popup.

Again, thank you for your assistance. It is greatly appreciated.

David 

16 March, 2013
10:30 pm
Ben Miller
Appleton, WI, USA
Moderator
Members

Moderators
Forum Posts: 1628
Member Since:
18 June, 2009
sp_UserOfflineSmall Offline

David, the remaining display issues around your filter search boxes are related to CSS style rules.  You have style rules in your theme that are formatting the search boxes this way.  I've never used your theme, Pinpoint, before, but from what I can tell by looking at your site, your theme probably has an admin screen where you can add custom CSS rules.  One of the custom CSS rules you have in there, looks like this:

http://pastebin.com/sRd6Nrzg

The line that says "border-color: #ffffff;" is the problem.  Delete that line.

That will make your borders around your search boxes visible.

There is another CSS rule that is causing your labels to be on a different line than the boxes.  However, I think this one is hard-coded into the theme.  The rule looks like this:

http://pastebin.com/YupshXAC

The problem lines are "margin: 0;" and "margin-bottom: 20px;".  If you don't want to edit your theme file (I don't recommend it), you'll need to add a rule, either to the custom CSS screen, or to the Sermon Browser style template, to override the rule. 

I'm short on time right now, so I'll have to get back to you later on what kind of rule you can add to override the first rule, if you need help figuring it out.

 

I hope that helps!

Ben Miller, Pathways Church, Appleton, Wisconsin, USA
Read the new FAQ, last updated 11/21/2013
Announcing version 0.45.12

17 March, 2013
2:27 am
David Barbee
Houston, MO
Member
Members
Forum Posts: 6
Member Since:
16 March, 2013
sp_UserOfflineSmall Offline

Ben,

I was able to edit the custom css file manually and change my border color to black.  I was also able to raise the search labels inline with the input boxes by changing the alignment to "top" in the Sermon Browser style css.  The layout is still not exactly right, but its getting more functional with each step.  If you have a better way to accomplish this, please let me know. 

The popup calendars are still not functioning in ie; but, after researching, I think this may be caused by a js conflict.  the popups do work in chrome and firefox, but are not positioned correctly. I will do more research and see if I can resolve this.

I am going to take a break for a couple days and focus on other priorities.  Your help has helped me make more progress than I have made in 2 months of google searches and banging my head against the wall.  Thank you!

David

19 March, 2013
5:15 pm
David Barbee
Houston, MO
Member
Members
Forum Posts: 6
Member Since:
16 March, 2013
sp_UserOfflineSmall Offline

Ben,

I learned enough about firebug to identify and fix the remaining layout issues.  I am now satisfied with the look of my Sermon Browser page.  Your help finding the site url problem and suggestions for adjusting the layout made the difference and got me going in the right direction. As far as I am concerned, this topic is resolved.

That being said...the only Sermon Browser problem that remains is the popup calendars that won't work in ie.  I think I will turn to the support team of my premium theme for help, unless you or someone else on this forum is willing to take a look at it.  From what I have gathered, it may be a jQuery conflict. I've noticed other parts of my website that use jQuery are not working correctly as well. I know less about jQuery than I do about wordpress. I had to stop researching because my head was about to implode.  I am a full time Pastor/full time hospice chaplain/wannabe website designer trying to put together a decent website for our church on a shoestring budget and relying on the gracious assistance of others when I get stuck.

Thanks again for all your help.

God bless

David

2 April, 2013
2:23 am
David Barbee
Houston, MO
Member
Members
Forum Posts: 6
Member Since:
16 March, 2013
sp_UserOfflineSmall Offline

Update:

I was able to get the date picker popup calendar to work in IE 10. In the datepicker.js file, I commented out the lines that create an iframe for IE compatibility. I don't know why this worked, but it did. Hopefully it will not cause other problems down the road. If anyone has an explanation, I would love to hear it; or if you have a better solution, please let me know.

David

2 April, 2013
2:54 am
Ben Miller
Appleton, WI, USA
Moderator
Members

Moderators
Forum Posts: 1628
Member Since:
18 June, 2009
sp_UserOfflineSmall Offline

David,

I haven't really looked into this much, but I was wondering: Have you tried downloading datePicker.js V2 from Kelvin Luck?

http://www.kelvinluck.com/asse.....atePicker/

It looks like the one included with Sermon Browser is V1.  I was just wondering if you tried updating it, and if you ran into any problems.

Ben Miller, Pathways Church, Appleton, Wisconsin, USA
Read the new FAQ, last updated 11/21/2013
Announcing version 0.45.12

2 April, 2013
4:00 am
David Barbee
Houston, MO
Member
Members
Forum Posts: 6
Member Since:
16 March, 2013
sp_UserOfflineSmall Offline

Ben,

Yes, I did download Kelvin Luck's datepicker.js v2.  I suspected the problem might be a result of the old version of datepicker conflicting with the new version of IE 10.  I removed the v1 datepicker.js and datepicker.css files from the Sermon Browser sb-includes folder and replaced them with the v2 files, but then the calendars would not show at all.  I don't have enough knowledge of jQuery (or programming for that matter) to figure out how to get v2 to work. I imagine the code in sermon.php or frontend.php may need to be changed to work with the new version, but I'm just guessing.

I have searched for the last couple weeks for a solution, but have not found a definite answer. I did find many reports of jQuery conflicts with IE.  I used IE developer tool to narrow the source of the problem.  The script would stop on the line in datepicker.js that says: jCalDiv.append(document.createElement(iframe)). I commented the whole IF statement out and it worked. Maybe there is a way to rewrite the old datepicker code to work with IE 10, but I don't know what to do either.  I have been reading up on html, JavaScript, jQuery, CSS, and PHP, but so much of it is still over my head.

Thanks for your interest.

David

Forum Timezone: Europe/London
Most Users Ever Online: 381
Currently Online:
Guest(s) 6
Top Posters:
Rich Brown: 358
Matt Schlueter: 93
Mindy: 72
Don Johnson: 65
anointed: 57
0be1: 55
Member Stats:
Guest Posters: 7
Members: 3188
Moderators: 1
Admins: 1
Forum Stats:
Groups: 1
Forums: 2
Topics: 1713
Posts: 7499
Newest Members:
marktest, deatles50, ValeriaGoodriz, dapedPup, oapedPup, Margarettoimb
Moderators: Ben Miller: 1628
Administrators: Mark Barnes: 435