We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

Changing class selector used in widget | Forum

Peter
Peter Jan 19 '16
Hi folks, 


I tried to change images size for UsersWidget that's shown on Main page. The trouble is that if i change .ow_avatar img class in theme base.css it messes up images across the whole website where that class's been used.. I would like to know if there is the way I can change that class in UsersWidget to another one, let's say ow_avatar2, so I wouldn't have to modify original one but would just specify parameters for new class .ow_avatar2 in .css


I hope I explained it well enough..


Thank you for any help

Peter
Peter Jan 20 '16
Can anyone help with this please?
Darryl B Leader
Darryl B Jan 20 '16
Try this. I tried it on my test site, and seems to work for the users widget for latest, and online. Copy and paste it into you themes custom css. I changed the size from 40px to 60px just to test it. There may be other settings that you may want to add. This is just for size.

div div .ow_lp_avatars .ow_avatar {
    height:60px;
    width:60px;
}
div div .ow_lp_avatars .ow_avatar a img {
    height:60px;
    width:60px;
}
Darryl B Leader
Darryl B Jan 21 '16
If you have the round avatar images, and you wanted to do something a little more slick. You can try this. This adds a border, and a will transition to a square on hover,
**Updated the css below. This will get the transition to be smooth both ways in case anyone reading the post is giving it a shot on their site**

div div .ow_lp_avatars .ow_avatar {
    height:60px;
    width:60px;
}
div div .ow_lp_avatars .ow_avatar a img {
    height:60px;
    width:60px;
    border-radius:50%;
    border:3px outset silver;
    -webkit-transition: ease-out .5s;
    -moz-transition: ease-out .5s;
    -o-transition: ease-out .5s;
     transition: ease-out .5s;
}
div div .ow_lp_avatars .ow_avatar a img:hover {
    border-radius:0%;
}
The Forum post is edited by Darryl B Jan 21 '16
Peter
Peter Jan 21 '16
Many thanks Darryl, it did the big part of the job! I have added and modified few more classes in css and than achieved exactly what I wanted. 

Thanks again for your valuable answer! You've made my day..