Welcome Notice

Wanting to join the rest of our members? Feel free to sign up today.

Register Log in
  • This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

[Answered] Avatar Frames

Status
Not open for further replies.
Getting some error ......
using default style XF 1.5.9
Any Solution for tHis @ADmin

Capture.PNG

Code used in Template: message_user_info :

{xen:if '{xen:helper ismemberof, $user, 3}', 'avatarOutline_admin'}
{xen:if '{xen:helper ismemberof, $user, 4}', 'avatarOutline_moderator'}
{xen:if '{xen:helper ismemberof, $user, 2}', 'avatarOutline_registered'}">

Code used in EXTRA.css :
.messageUserBlock div.avatarOutline_registered
{
background: #FFFFFF url('/images/1.png') no-repeat;
}
.messageUserBlock div.avatarOutline_moderator
{
background: #FFFFFF url('/images/2.png') no-repeat;
}
.messageUserBlock div.avatarOutline_admin
{
background: #FFFFFF url('/images/3.png') no-repeat;
}
 
ok its just few simple template edits and this tut is for Audentio theme

1.Login to Admin CP and do in Appearance >> styles >> your style >> templates .
2.Search for template "message_user_info"
3.Find

Code:
<div class="avatarHolder {$avatarCollapseStateClass}">
Replace

Code:
<div class="avatarHolder {$avatarCollapseStateClass}
{xen:if '{xen:helper ismemberof, $user, 3}', 'avatarOutline_admin'}
{xen:if '{xen:helper ismemberof, $user, 4}', 'avatarOutline_moderator'}
{xen:if '{xen:helper ismemberof, $user, 11}', 'avatarOutline_contributor'}
{xen:if '{xen:helper ismemberof, $user, 6}', 'avatarOutline_vip'}
{xen:if '{xen:helper ismemberof, $user, 2}', 'avatarOutline_registered'}">
where numbers 3,4,11,6,2 are the usergroup numbers

4.Now in extra.css add

Code:
.messageUserBlock div.avatarOutline_registered
{
background: #FFFFFF url('http://i.imgur.com/kFFmXYE.png') no-repeat;
}
.messageUserBlock div.avatarOutline_vip
{
background: #FFFFFF url('http://i.imgur.com/2AYGEpN.png') no-repeat;
}
.messageUserBlock div.avatarOutline_contributor
{
background: #FFFFFF url('https://i.imgur.com/XdzmSNS.png') no-repeat;
}
.messageUserBlock div.avatarOutline_moderator
{
background: #FFFFFF url('http://i.imgur.com/w6G8G7p.png') no-repeat;
}
.messageUserBlock div.avatarOutline_admin
{
background: #FFFFFF url('https://i.imgur.com/bn96CZe.png') no-repeat;
}
5.Improve your css for better look and style yourself ,and while writing css as per your usergroups it should be in a format of lower group to higher otherwise you will have issues..

i had done this successfully on my localhost see attachment

View attachment 13279

PS: if anyone has free time to create frame for xenforo.rocks , then do it i will apply it here :D
I do this on UI.X 1.4.2.0 and happens this, Screenshot please help me, i love this thing. Thank you XenForo Rocks.
 

XenForo Rocks

Team Member
Administrator
Moderator
+Lifetime VIP+
Contributor
ViP
True Member
Suppliers
Registered
I do this on UI.X 1.4.2.0 and happens this, Screenshot please help me, i love this thing. Thank you XenForo Rocks.
Ahh I wish I could have this much time to look on it but that is releated to CSS and also no one is able to write CSS for you by just viewing the screenshot we need link to site to view and write CSS code accordingly

---- Automatically Merged Double Post ----

I do this on UI.X 1.4.2.0 and happens this, Screenshot please help me, i love this thing. Thank you XenForo Rocks.
Also
Improve your css for better look and style yourself ,and while writing css as per your usergroups it should be in a format of lower group to higher otherwise you will have issues..
 
Last edited:

XenForo Rocks

Team Member
Administrator
Moderator
+Lifetime VIP+
Contributor
ViP
True Member
Suppliers
Registered
use this

CSS:
.messageUserInfo {
    float: left;
    width: 185px;
    background-color: transparent;
    background-position: top left;
    background-repeat: no-repeat;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    padding-bottom: 12px;
}

.messageUserBlock {
    background-color: white;
    border: 1px none black;
    border-radius: 2px;
    text-align: center;
    position: relative;
    padding-top: 20px;
}

.messageUserBlock div.avatarHolder {
    background-color: transparent;
    padding: 8px;
    border-radius: 2px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    text-align: center;
    position: relative;
    padding: 14px 0 14px 0;
    width: 135px;
    background-repeat: no-repeat;
    margin: auto;
}
and this is the result i get Screenshot
 
use this

CSS:
.messageUserInfo {
    float: left;
    width: 185px;
    background-color: transparent;
    background-position: top left;
    background-repeat: no-repeat;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    padding-bottom: 12px;
}

.messageUserBlock {
    background-color: white;
    border: 1px none black;
    border-radius: 2px;
    text-align: center;
    position: relative;
    padding-top: 20px;
}

.messageUserBlock div.avatarHolder {
    background-color: transparent;
    padding: 8px;
    border-radius: 2px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    text-align: center;
    position: relative;
    padding: 14px 0 14px 0;
    width: 135px;
    background-repeat: no-repeat;
    margin: auto;
}
and this is the result i get Screenshot
Sorry, but this do nothing, see,
Print #1 (Forum)
Print #2 (Extra.css)
CSS:
.messageUserBlock div.avatarOutline_registered
{
background: #FFFFFF url('http://i.imgur.com/kFFmXYE.png') no-repeat;
}
.messageUserBlock div.avatarOutline_vip
{
background: #FFFFFF url('http://i.imgur.com/2AYGEpN.png') no-repeat;
}
.messageUserBlock div.avatarOutline_contributor
{
background: #FFFFFF url('https://i.imgur.com/XdzmSNS.png') no-repeat;
}
.messageUserBlock div.avatarOutline_moderator
{
background: #FFFFFF url('http://i.imgur.com/w6G8G7p.png') no-repeat;
}
.messageUserBlock div.avatarOutline_admin
{
background: #FFFFFF url('https://i.imgur.com/bn96CZe.png') no-repeat;
}

.messageUserInfo {
    float: left;
    width: 185px;
    background-color: transparent;
    background-position: top left;
    background-repeat: no-repeat;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    padding-bottom: 12px;
}

.messageUserBlock {
    background-color: white;
    border: 1px none black;
    border-radius: 2px;
    text-align: center;
    position: relative;
    padding-top: 20px;
}

.messageUserBlock div.avatarHolder {
    background-color: transparent;
    padding: 8px;
    border-radius: 2px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    text-align: center;
    position: relative;
    padding: 14px 0 14px 0;
    width: 135px;
    background-repeat: no-repeat;
    margin: auto;
}
 

XenForo Rocks

Team Member
Administrator
Moderator
+Lifetime VIP+
Contributor
ViP
True Member
Suppliers
Registered
Sorry, but this do nothing, see,
Print #1 (Forum)
Print #2 (Extra.css)
CSS:
.messageUserBlock div.avatarOutline_registered
{
background: #FFFFFF url('http://i.imgur.com/kFFmXYE.png') no-repeat;
}
.messageUserBlock div.avatarOutline_vip
{
background: #FFFFFF url('http://i.imgur.com/2AYGEpN.png') no-repeat;
}
.messageUserBlock div.avatarOutline_contributor
{
background: #FFFFFF url('https://i.imgur.com/XdzmSNS.png') no-repeat;
}
.messageUserBlock div.avatarOutline_moderator
{
background: #FFFFFF url('http://i.imgur.com/w6G8G7p.png') no-repeat;
}
.messageUserBlock div.avatarOutline_admin
{
background: #FFFFFF url('https://i.imgur.com/bn96CZe.png') no-repeat;
}

.messageUserInfo {
    float: left;
    width: 185px;
    background-color: transparent;
    background-position: top left;
    background-repeat: no-repeat;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    padding-bottom: 12px;
}

.messageUserBlock {
    background-color: white;
    border: 1px none black;
    border-radius: 2px;
    text-align: center;
    position: relative;
    padding-top: 20px;
}

.messageUserBlock div.avatarHolder {
    background-color: transparent;
    padding: 8px;
    border-radius: 2px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    text-align: center;
    position: relative;
    padding: 14px 0 14px 0;
    width: 135px;
    background-repeat: no-repeat;
    margin: auto;
}
Better do search in templates and look for style properties and change it from style properties with respect to my given css code , else send me admin logins will do it for you :)
 

XenForo Rocks

Team Member
Administrator
Moderator
+Lifetime VIP+
Contributor
ViP
True Member
Suppliers
Registered
Hey, how i send PM (Private Message) to you? I want send you the admin logins. Thank you.
hey all done on your website though for others who want the css that i had used is below and its better as it doesn't break anything at mobile devices :)

CSS:
@media only screen and (min-width: 481px) {

.messageUserBlock div.avatarOutline_registered
{
background: #FFFFFF url('http://i.imgur.com/kFFmXYE.png') no-repeat;
}
.messageUserBlock div.avatarOutline_vip
{
background: #FFFFFF url('http://i.imgur.com/2AYGEpN.png') no-repeat;
}
.messageUserBlock div.avatarOutline_contributor
{
background: #FFFFFF url('https://i.imgur.com/XdzmSNS.png') no-repeat;
}
.messageUserBlock div.avatarOutline_moderator
{
background: #FFFFFF url('http://i.imgur.com/w6G8G7p.png') no-repeat;
}
.messageUserBlock div.avatarOutline_admin
{
background: #FFFFFF url('https://i.imgur.com/bn96CZe.png') no-repeat;
}
    .messageUserInfo {
    float: left ;
    width: 185px !important;
    background-color: transparent;
    background-position: top left !important;
    background-repeat: no-repeat !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    padding-bottom: 12px !important;
}

.messageUserBlock {
    background-color: white !important;
    border: 1px none black !important;
    border-radius: 2px !important;
    text-align: center !important;
    position: relative ;
    padding-top: 20px !important;
}

.messageUserBlock div.avatarHolder {
    background-color: transparent !important;
    padding: 8px !important;
    border-radius: 2px !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    text-align: center !important;
    position: relative;
    padding: 15px 0 30px 0 !important;
    width: 135px !important;
    background-repeat: no-repeat !important;
    margin: auto;
}
.message .messageInfo {
    margin-left: 190px !important;
}
}
---- Automatically Merged Double Post ----

thread locked also i had posted one better solution for avatar frames here https://www.xenforo.rocks/resources/avatar-frames.4459/

regards
 
Last edited:
Status
Not open for further replies.

Similar threads