Go Back   vb.org Archive > vBulletin 5 Connect Discussion > vB5 Design and Graphics Discussions
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools Display Modes
  #1  
Old 07-06-2016, 04:30 AM
Cmoney31 Cmoney31 is offline
 
Join Date: Jul 2016
Posts: 4
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default Postbit CSS Styling

I'm trying to move the online status icon next to the username. Does anyone know how to do this? I can move it to that space, but not keeping it responsive with each individual username, as they vary in length.



I posted an image above showing what I'm looking for, thanks
Reply With Quote
  #2  
Old 07-08-2016, 03:43 AM
Cmoney31 Cmoney31 is offline
 
Join Date: Jul 2016
Posts: 4
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Edited the post, still trying to figure out how to do this
Reply With Quote
  #3  
Old 07-08-2016, 01:25 PM
noypiscripter's Avatar
noypiscripter noypiscripter is offline
 
Join Date: Jul 2013
Posts: 468
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

It is impossible without modifying the HTML markup in the template (which is not recommended) because the length of the username is not fixed. But it is possible to put the online icon before the username using pure CSS. Do you only want to do this on small screens?

Code:
/* give space for online icon in the username */
.l-small .b-userinfo__details .author { margin-left: 15px; }

/* change the container of the online and signature icons from relative to static to allow online icon to be moved relative to outermost container */
.l-small .b-userinfo__icons { position: static; }

/* move online icon before the username */
.l-small .b-userinfo__icon.online, .l-small .b-userinfo__icon.offline {
    position: absolute;
    left: 83px;
    top: 12px;
}

/* move signature icon to where it was */
.l-small .js-userinfo__signature {
    position: absolute;
    right: 9px;
    top: 9px;
}
This code is based on the Default vB5 Style. Since it looks like you already made some CSS customizations on your site based from your screenshot, you may need to tweak the above CSS to make it work on your end.
Reply With Quote
  #4  
Old 07-09-2016, 02:41 AM
Cmoney31 Cmoney31 is offline
 
Join Date: Jul 2016
Posts: 4
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

On all screens really, I just took a smaller screenshot for easier viewing. But okay, its a shame it can't be done without modifying the HTML markup. Thanks though!
Reply With Quote
  #5  
Old 07-09-2016, 02:35 PM
noypiscripter's Avatar
noypiscripter noypiscripter is offline
 
Join Date: Jul 2013
Posts: 468
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

It's still possible but using JS and not just CSS. You can insert JS using template hooks system.
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 05:35 AM.


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.03682 seconds
  • Memory Usage 2,193KB
  • Queries Executed 11 (?)
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
  • (1)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_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