Technology Tools for Ministry

Community

Web-Empowered Church User Community
All Categories > Ministry Tools > eBible Extension > Styles for Verse of the Day
Total Posts: 7 - Pages (1): [1]
Author: Barry Gresens
Posted: Dec 03 2007 - 02:03 PM
Subject: Styles for Verse of the Day
I am trying to modify the styles of the Verse of the Day plugin. I have successfully used the styles.css example to modify the verse number and verse text via the verseNum and verse style classes. However, there are many other pieces of text on the VODT plugin and it is not clear what classes must be modified for each text chunk to accomplish this. The styles.css example is not well documented and there is no help for this in the User's Manual as far as I can see.

Typically at this point I would just view the source code for the page and find the class names myself, but the source code is generated dynamically using Javascript and, for some reason, I cannot download the javascript file using IE. So...I am stuck.

I would like to modify the style of all the text on the VODT plugin. Is there a reference for doing this?

-Barry Gresens
user picture Author: Christoph Koehler
Posted: Dec 04 2007 - 04:10 PM
Subject: re: Styles for Verse of the Day
Barry,

Using Firefox with the Firebug extension, I got the source code for the VotD plugin:
CODE:

<b>December 4 - <a href="http://www.ebible.com">eBible.com</a>Verse of the day</b><br />
<a href="http://ebible.com/bible/NASB/1+Corinthians+6%3A19" style="color:#0000ee;font-size: 1.3em;font-weight:normal;">1 Corinthians 6:19</a><a href="http://ebible.com/bible/study/NASB/1+Corinthians+6%3A19">study</a><br>
<span id="nasb28487" class="verse"><span class="verseNum">19</span>Or <span class="footnote">1 Cor 6:3</span>do you not know that <span class="footnote">John 2:21; 1 Cor 3:16; 2 Cor 6:16</span>your body is a <span class="footnote">Or <em>sanctuary</em></span>temple of the Holy Spirit who is in you, whom you have from <span class="footnote">Or <em>God? And you...own</em></span>God, and that <span class="footnote">Rom 14:7f</span>you are not your own?</span><br />
<span style='font-size: 0.9em;'>"
<a href="http://ebible.com/user/about_title/NASB">NASB</a> from <a href="http://www.ebible.com">eBible.com</a></span>"

This may help, though there are many hardcoded tags like <b> and <em>. If you need to override one of the inline styles, you can do that with !important, like so:
CODE:

.someclass {
  font-size: 1.1em !important;
}


Also remember that each VotD plugin is enclosed by a div with class tx-wecebible-pi1 which you could use to change the styles.

Hope that helped, let me know if you have any more questions!

Christoph
Author: Barry Gresens
Posted: Dec 04 2007 - 05:00 PM
Subject: re: Styles for Verse of the Day
Thanks a bunch. This gives me exactly what I need!
Author: Heath Kouns
Posted: Jan 03 2008 - 09:57 AM
Subject: re: Styles for Verse of the Day
Barry,

Where are you adding the code? style.css or typoscript?
Could you post the code that you used to modify the output?

Thanks

Heath
user picture Author: Christoph Koehler
Posted: Jan 03 2008 - 11:17 AM
Subject: re: Styles for Verse of the Day
Heath,

You can do either. Add it to your styles.css file or include the styles manually using TS like so:
CODE:

page.headerData.50 = TEXT
page.headerData.50.value (
<style type="text/css">
.ebibleSnippetContainer {
  background-color: #000000;

}
</style>

Just add this TS to the page template of the root page or whatever page requires the new styles.

Let me know if you have any more questions!

Christoph
Author: Heath Kouns
Posted: Jan 03 2008 - 01:24 PM
Subject: re: Styles for Verse of the Day
As a quick test...I entered the script (as you typed it) in the setup typoscript on the home page at
http://gsbcfamily.org/home/
after clearing the cache...there appears to be no change...

I figured that .ebibleSnippetContainer only applied to the popup box with the verse (not V.O.D) so I added a test reference to the main page but the background was not black...

What I want to do on the Verse of Day feature:
-eliminate the "eBible.com" link from the eBible.com Verse of the day title line...ebible is already listed at the end...
-reduce verse font size to same size as main site body text
-reduce "NASB from ebible.com" text size so that it appears on a single line.

Is this possible or is the text string generated by ebible.com?

Heath
user picture Author: Christoph Koehler
Posted: Jan 04 2008 - 02:23 PM
Subject: re: Styles for Verse of the Day
Heath,

The example style I posted didn't really have any meaning, I just put it as an example.
The VOTD plugin content is totally up to ebible.com. Here's the source for it that I could find:
CODE:

<div class="tx-wecebible-pi1">
  <script src="http://ebible.com/api/votd?source=NASB" type="text/javascript"/>
  <b>January 4 - <a href="http://www.ebible.com">eBible.com</a> Verse of the day</b><br/>
  <a style="color: rgb(0, 0, 238); font-size: 1.3em; font-weight: normal;" href="http://ebible.com/bible/NASB/Isaiah+53%3A6">Isaiah 53:6</a>
  <a href="http://ebible.com/bible/study/NASB/Isaiah+53%3A6">study</a><br/>
  <span class="verse" id="nasb18718">
  <span class="verseNum">6</span>All of us like sheep have gone astray,<br/>Each of us has turned to his own way;<br/>But the L<span class="smallcaps">ORD</span> has caused the iniquity of us all<br/>To <span class="footnote">Lit <em>encounter Him</em></span>fall on Him.</span><br/>
  <span style="font-size: 0.9em;">
  <a href="http://ebible.com/user/about_title/NASB">NASB</a> from <a href="http://www.ebible.com">eBible.com</a></span>
</div>


Unfortunately there are a lot of hardcoded styles in there, but that should help you out.

Let me know if you need any more help!

Christoph
Total Posts: 7 - Pages (1): [1]
Click here for a complete list of threads
You must login to post a message to this conference.