vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)
-   -   Rounded avatar? (https://vborg.vbsupport.ru/showthread.php?t=308619)

BBNZowner 02-19-2014 10:25 PM
Rounded avatar?
 
Hi there, I've seen on a few forums people have a mod or template edit which makes all avatars rounded into a circle - I'm sure I've seen something here about it to but can't find the thread anymore.

Any idea how to do this?


I've tried editing the postbit.css as so (ive tried a few things here, heres one example):
Code:
.postbit .postuseravatarlink img {
    height: 150px;
    width: 175px;
    border-radius: 50px;
    border: 0px none;
    float: right;
}
no result
I'm still pretty useless at figuring exactly what to do for things like this haha, chances are im nowhere near the right place

Lynne 02-19-2014 10:47 PM
We would need a link to a thread on your site, and an image of what you want, in order to help with CSS issues.

BBNZowner 02-19-2014 11:18 PM
1 Attachment(s)
I'm currently testing on the completely default template, with no changes. So the CSS is all original from that one (I'd provide a link, but my current forum template is locked to a customised one for users).

I've attached an image of what id like to achieve (badly edited as I've forgotten to bookmark the forum running it and away from photoshop :P).

Basically, any uploaded avatars show up as a circle instead of the original picture shape.

ozzy47 02-19-2014 11:24 PM
Perhaps this mod, https://vborg.vbsupport.ru/showthread.php?t=305608

BBNZowner 02-20-2014 01:51 AM
I will have a look at the mod, thanks

edit: Not quite what I had in mind, too much going on with that for my forum.

TheLastSuperman 02-20-2014 02:27 AM
Hmm making it a circle can be done w/ CSS but all would need to be the same size avatar... gosh I've seen something before css wise that did what you said and made whatever image a perfect circle it may have used some .js as well can't recall but here's a snippet that rounds corners of avatars in posts see if you can tinker with this some (paste @ bottom of additional.css):

Code:
.postuseravatar img {
        -moz-border-radius-top{vb:stylevar right}: 10px !important;
        -moz-border-radius-top{vb:stylevar left}: 10px !important;
        -webkit-border-top-{vb:stylevar right}-radius: 10px !important;
        -webkit-border-top-{vb:stylevar left}-radius: 10px !important;
        border-top-{vb:stylevar right}-radius: 10px !important;
        border-top-{vb:stylevar left}-radius: 10px !important;
        -moz-border-radius-bottom{vb:stylevar right}: 10px !important;
        -moz-border-radius-bottom{vb:stylevar left}: 10px !important;
        -webkit-border-bottom-{vb:stylevar right}-radius: 10px !important;
        -webkit-border-bottom-{vb:stylevar left}-radius: 10px !important;
        border-bottom-{vb:stylevar right}-radius: 10px !important;
        border-bottom-{vb:stylevar left}-radius: 10px !important;
}
^ Change the 10px to 50px or your value.

Edit: Ohh and when you're tinkering w/ css and you use additional.css to "overwrite" a default definition, well if it already had a border-radius defined (any css) and you overwrite in additional.css w/o using !important it may not display your changes SO if you ever run into a scenario where you know it should work but it's not simply add !important to the end to ensure it knows "hey this is important to show just like this".

BBNZowner 02-20-2014 03:00 AM
That has done exactly what I wanted, thanks!


All times are GMT. The time now is 11:42 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.01245 seconds
  • Memory Usage 1,725KB
  • 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
  • (2)bbcode_code_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (7)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