vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB5 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=264)
-   -   Postbit CSS Styling (https://vborg.vbsupport.ru/showthread.php?t=322990)

Cmoney31 07-06-2016 04:30 AM
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.

http://image.prntscr.com/image/274f7...6db667d2ce.png

I posted an image above showing what I'm looking for, thanks :)

Cmoney31 07-08-2016 03:43 AM
Edited the post, still trying to figure out how to do this

noypiscripter 07-08-2016 01:25 PM
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.

Cmoney31 07-09-2016 02:41 AM
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!

noypiscripter 07-09-2016 02:35 PM
It's still possible but using JS and not just CSS. You can insert JS using template hooks system.


All times are GMT. The time now is 04:01 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01576 seconds
  • Memory Usage 1,717KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)bbcode_code_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (5)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.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
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete