Go Back   vb.org Archive > vBulletin 4 Discussion > vB4 Programming Discussions
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools Display Modes
  #1  
Old 09-05-2012, 05:03 AM
KrU$ty's Avatar
KrU$ty KrU$ty is offline
 
Join Date: Oct 2007
Posts: 180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default Help with modifying quote code

I'm trying to change around the way quotes are displayed. What I want is a top and bottom image that is aligned left and right respectively with the text wrapping around the images.

I got the left image wrapping ok but the right image is giving me trouble. Also, the left (and right) image seems to be having trouble with the padding css I put in. It does padding on the left of the image but not the bottom or right.

Here is the css:

Code:
.quote_left {
padding-left:20px;
}

.quote_right {
padding-right:20px;
}
and here is the main html for quotes from the bbcode_quote template. I've bolded the changes:

Code:
<div class="bbcode_container">
    <div class="bbcode_quote">
        <div class="quote_container">
<div class="quote_left"><img align="left" src="/images/quote-left.png" /></div>
            <vb:if condition="$show['username']">
                <div class="bbcode_postedby">
                    <img src="{vb:stylevar imgdir_misc}/quote_icon.png" alt="{vb:rawphrase quote}" /> {vb:rawphrase originally_posted_by_x, {vb:raw username}}
                    <vb:if condition="$postid"><a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}showthread.php?{vb:raw session.sessionurl}p={vb:raw postid}#post{vb:raw postid}" rel="nofollow"><img class="inlineimg" src="{vb:stylevar imgdir_button}/viewpost-{vb:stylevar right}.png" alt="{vb:rawphrase view_post}" /></a></vb:if>
                </div>
                <div class="message">{vb:raw message}</div>
            <vb:else />
                {vb:raw message}
            </vb:if>
<div class="quote_right"><img align="right" src="/images/quote-right.png" /></div>
        </div>
    </div>
</div>
Finally here is a link to an example:

http://thepixelpirate.net/showthread...-please-ignore
Reply With Quote
  #2  
Old 09-05-2012, 09:57 AM
kh99 kh99 is offline
 
Join Date: Aug 2009
Location: Maine
Posts: 13,185
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I'm not a CSS expert, but doing a search for "float image to bottom right" I find that there's no good way to do it. There's mention of doing it via javascript or by using a table, but I don't know how either of those would work (I guess there's no reason you couldn't use a table, if you can figure that one out. Here's one of the links I found that talks about the issue: http://stackoverflow.com/questions/4...ttom-right-div).

As for the padding, your CSS has left padding for quote_left and right padding for quote_right, and that seems to be what's there.
Reply With Quote
  #3  
Old 09-06-2012, 02:32 PM
KrU$ty's Avatar
KrU$ty KrU$ty is offline
 
Join Date: Oct 2007
Posts: 180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

OK, I got as far as getting the image to the bottom right, but the text does not wrap around it. Here is the code:

Example: http://thepixelpirate.net/showthread...-please-ignore

Code:
.quote_left {
padding:10px;
float:left;
}

.quote_right {
padding:10px;
float:right;
position: absolute; 
bottom:0;
right:0;
}
Code:
<div class="bbcode_container">
    <div class="bbcode_quote">
        <div class="quote_container">
<div class="quote_left"><img src="/images/quote-left.png" /></div>
<div class="quote_right"><img src="/images/quote-right.png" /></div>
            <vb:if condition="$show['username']">
                <div class="bbcode_postedby">
                    <img src="{vb:stylevar imgdir_misc}/quote_icon.png" alt="{vb:rawphrase quote}" /> {vb:rawphrase originally_posted_by_x, {vb:raw username}}
                    <vb:if condition="$postid"><a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}showthread.php?{vb:raw session.sessionurl}p={vb:raw postid}#post{vb:raw postid}" rel="nofollow"><img class="inlineimg" src="{vb:stylevar imgdir_button}/viewpost-{vb:stylevar right}.png" alt="{vb:rawphrase view_post}" /></a></vb:if>
                </div>
                <div class="message">{vb:raw message}</div>
            <vb:else />
                {vb:raw message}
            </vb:if>
        </div>
    </div>
</div>
Reply With Quote
  #4  
Old 09-06-2012, 03:14 PM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I don't think it's going to be easy. Read some of the threads linked here - http://stackoverflow.com/questions/4...ttom-right-div
Reply With Quote
  #5  
Old 09-06-2012, 10:00 PM
KrU$ty's Avatar
KrU$ty KrU$ty is offline
 
Join Date: Oct 2007
Posts: 180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Yeah, I read that one already. Thanks anyway.
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:57 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.08389 seconds
  • Memory Usage 2,209KB
  • Queries Executed 13 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)ad_showthread_firstpost
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (4)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (5)post_thanks_box
  • (5)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (5)post_thanks_postbit_info
  • (5)postbit
  • (5)postbit_onlinestatus
  • (5)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete