Welcome to Geeklog, Anonymous Saturday, July 27 2024 @ 11:49 am EDT
Geeklog Forums
Can this be done with CSS?
Theophile
Anonymous
I've been looking for a way to set up my theme's CSS so that I can use BLOCKQUOTE classes to differentiate Scripture quotes from all other kinds of quotes. I currently use an image of a quotation mark, but I'd like to do something different for Scripture to visually represent it in a different way.
I came up with an idea and used the GIM to create a mockup of what I had in mind. I don't know enough about CSS to know if this is even possible. Here's the mockup:
http://monopedilos.com/images/example.png
The idea is that the watermarked text would be specified somewhere in the BLOCKQUOTE tag.
Is this possible? I'd appreciate any help on this... thanks!
I came up with an idea and used the GIM to create a mockup of what I had in mind. I don't know enough about CSS to know if this is even possible. Here's the mockup:
http://monopedilos.com/images/example.png
The idea is that the watermarked text would be specified somewhere in the BLOCKQUOTE tag.
Is this possible? I'd appreciate any help on this... thanks!
3
6
Quote
Status: Banned
machinari
Forum User
Full Member
Registered: 03/22/04
Posts: 1512
if you had an image for every scripture reference you have, then yeah.. but that would be an incredible waste of space.
Write a function using ImageMagick, or the like, to create an image dynamically based on text (the scripture reference) passed to the function. Have that resulting image (consistently named) picked up by your CSS, which in turn will set it as the background image of your blockquote.
viola
Write a function using ImageMagick, or the like, to create an image dynamically based on text (the scripture reference) passed to the function. Have that resulting image (consistently named) picked up by your CSS, which in turn will set it as the background image of your blockquote.
viola
4
2
Quote
Status: offline
beewee
Forum User
Full Member
Registered: 08/05/03
Posts: 969
Location:The Netherlands, where else?
Dynamic text replacement is perhaps another option, it uses php and javascript to generate a png image of a text to replace the text. You can use any font you like, as long as you upload it to the webserver.
Have a look at A List Apart here: http://www.alistapart.com/articles/dynatext/
Dutch Geeklog sites about camping/hiking:
www.kampeerzaken.nl | www.campersite.nl | www.caravans.nl | www.caravans.net
Have a look at A List Apart here: http://www.alistapart.com/articles/dynatext/
Dutch Geeklog sites about camping/hiking:
www.kampeerzaken.nl | www.campersite.nl | www.caravans.nl | www.caravans.net
3
4
Quote
Status: Banned
machinari
Forum User
Full Member
Registered: 03/22/04
Posts: 1512
Quote by beewee: Dynamic text replacement is perhaps another option
it's not another option so much as it is the same option. It's actually what I said 
However, the function showcased at alistapart.com uses the GD library, and of course it is already written for you. so yeah, have at it!
4
5
Quote
Theophile
Anonymous
Thanks for the ideas!
However, my problem is that I have absolutely no css/php experience. I found some code that would create the border and shading. It is available here:
http://webdesign.about.com/od/css/a/aa022805.htm
How would I implement the script that beewee linked to?
Thanks!
However, my problem is that I have absolutely no css/php experience. I found some code that would create the border and shading. It is available here:
http://webdesign.about.com/od/css/a/aa022805.htm
How would I implement the script that beewee linked to?
Thanks!
6
5
Quote
Status: offline
beewee
Forum User
Full Member
Registered: 08/05/03
Posts: 969
Location:The Netherlands, where else?
I think you better start learning HTML and CSS first, have a look at www.w3schools.com. It's not that hard to learn. And use a text editor, not something like Dreamweaver, or you'll never learn HTML.
The script is really simple: if you put a text between H3 tags (by example), and you set the script to replace H3 tags, it simply replaces your text with a png image. That's it.
@Mach: sorry, next time I'll take more time to figure out your posts.
Dutch Geeklog sites about camping/hiking:
www.kampeerzaken.nl | www.campersite.nl | www.caravans.nl | www.caravans.net
The script is really simple: if you put a text between H3 tags (by example), and you set the script to replace H3 tags, it simply replaces your text with a png image. That's it.
@Mach: sorry, next time I'll take more time to figure out your posts.
Dutch Geeklog sites about camping/hiking:
www.kampeerzaken.nl | www.campersite.nl | www.caravans.nl | www.caravans.net
4
7
Quote
Theophile
Anonymous
Thanks for the reply! I'm still confused, though, because the script is php. What would I put in my style.css to tell it to call the php script?
6
4
Quote
Status: offline
eyecravedvd
Forum User
Full Member
Registered: 06/09/03
Posts: 152
That can be done all by CSS with out having to do any major coding. I've done something similar at here, but it could easily be done via CSS. It's just a matter of playing with the css attribs.
Basically you'd want something along these lines.
.box {
width: 100%;
background: #C5C5C5;
border: 1px solid #E5E5E5;
font: 8pt black Tahoma, sans-serif;
text-align: justify;
}
.scripture {
padding: 3px;
}
.book {
text-align: right;
font: 15pt #E5E5E5 Tahoma, sans-serif;
}
<blockquote>
<div class="box">
<div class="scripture">
scripture goes here
</div>
</div>
<span class="book">Name of Book</span>
</blockquote>
Of course you may have to play with that because I can't test it where I currently am, but that should point you in the right direction you'll want to select your own fonts and colors as well.
Shane | www.EyeCraveDVD.com
Basically you'd want something along these lines.
Text Formatted Code
.box {
width: 100%;
background: #C5C5C5;
border: 1px solid #E5E5E5;
font: 8pt black Tahoma, sans-serif;
text-align: justify;
}
.scripture {
padding: 3px;
}
.book {
text-align: right;
font: 15pt #E5E5E5 Tahoma, sans-serif;
}
<blockquote>
<div class="box">
<div class="scripture">
scripture goes here
</div>
</div>
<span class="book">Name of Book</span>
</blockquote>
Of course you may have to play with that because I can't test it where I currently am, but that should point you in the right direction you'll want to select your own fonts and colors as well.
Shane | www.EyeCraveDVD.com
4
5
Quote
Theophile
Anonymous
Ah, thanks!!
That gets it really close. My last question is, what would have to be done to that code to get the .book part to be layered under neath the .scripture part? So that the text would go on top of the book.
That gets it really close. My last question is, what would have to be done to that code to get the .book part to be layered under neath the .scripture part? So that the text would go on top of the book.
4
6
Quote
Theophile
Anonymous
Okay, I got it working, with a massive amount of help from a friend!
These are the relevant CSS entries:
position:relative;
width:90%;
border:solid 1px #ddd;
/* add other things after this line like color of text and background color */
padding:4px;
margin-left: 30px;
color:black;
background-color:#eee;
}
.scr1 { /* class for div 1 around the scripture reference ( for the reference to be underneath, this div *must* be BEFORE the div containing the scripture text $
position:absolute;
padding:0px;
left:0px;
top:0px;
width:100%;
height:100%
}
.scr2 { /* class for div 2 around the scripture reference */
display:table;
padding:0px;
width:100%;
height:100%
}
.scr3 { /* class for div 3 around the scripture reference (contains the reference text itself) */
display:table-cell;
text-align:right;
vertical-align:bottom;
padding:0px 4px 0px 0px;
/* add other things after this line like color of text */
font-size: 24pt;
font-style: italic;
font-weight: bold;
color: #cacaca;
}
.sct { /* class for div around the scripture text itself */
position:relative;
}
And here is the html required to make it work:
<div class='scr1'><div class='scr2'><div class='scr3'>Deuteronomy 25:19</div></div></div>
<div class='sct'>
Therefore it shall be, when Yahweh thy God hath given thee rest from all thine enemies round about, in the land which the Yahweh thy God giveth thee for an inheritance to possess it, that thou shalt blot out the remembrance of Amalek from under heaven; thou shalt not forget it.
</div>
</div>
And here's the end result:
Renaming Christmas...
Now my last step is creating a php script that will replace simple strings with the more complex html tags to simplify entering it each time. I understand str_replace will be my friend, btu I have no idea how to go about this.
Assuming I can write a valid script, how do I tell the storytext.thtml to try to use the new script for string replacement?
Thanks!!
These are the relevant CSS entries:
Text Formatted Code
.sc { /* class for div around whole scripture quote */position:relative;
width:90%;
border:solid 1px #ddd;
/* add other things after this line like color of text and background color */
padding:4px;
margin-left: 30px;
color:black;
background-color:#eee;
}
.scr1 { /* class for div 1 around the scripture reference ( for the reference to be underneath, this div *must* be BEFORE the div containing the scripture text $
position:absolute;
padding:0px;
left:0px;
top:0px;
width:100%;
height:100%
}
.scr2 { /* class for div 2 around the scripture reference */
display:table;
padding:0px;
width:100%;
height:100%
}
.scr3 { /* class for div 3 around the scripture reference (contains the reference text itself) */
display:table-cell;
text-align:right;
vertical-align:bottom;
padding:0px 4px 0px 0px;
/* add other things after this line like color of text */
font-size: 24pt;
font-style: italic;
font-weight: bold;
color: #cacaca;
}
.sct { /* class for div around the scripture text itself */
position:relative;
}
And here is the html required to make it work:
Text Formatted Code
<div class='sc'><div class='scr1'><div class='scr2'><div class='scr3'>Deuteronomy 25:19</div></div></div>
<div class='sct'>
Therefore it shall be, when Yahweh thy God hath given thee rest from all thine enemies round about, in the land which the Yahweh thy God giveth thee for an inheritance to possess it, that thou shalt blot out the remembrance of Amalek from under heaven; thou shalt not forget it.
</div>
</div>
And here's the end result:
Renaming Christmas...
Now my last step is creating a php script that will replace simple strings with the more complex html tags to simplify entering it each time. I understand str_replace will be my friend, btu I have no idea how to go about this.
Assuming I can write a valid script, how do I tell the storytext.thtml to try to use the new script for string replacement?
Thanks!!
5
4
Quote
All times are EDT. The time is now 11:49 am.
- Normal Topic
- Sticky Topic
- Locked Topic
- New Post
- Sticky Topic W/ New Post
- Locked Topic W/ New Post
- View Anonymous Posts
- Able to post
- Filtered HTML Allowed
- Censored Content