Персональная страница для uCoz как на Урааа. Как сделать страницу пользователя Как создать личную страницу пользователя

2015-09-15 13231 33 Денис Абдуллин

В чистом виде как на Урааа выкладывать что-либо редко получается ибо все сделано в единой системе, а пользователям следует предложить что-то универсальное . Разумеется, при любом раскладе возникнут вопросы и проблемы. Этот дизайн сделан для светлого фона, поэтому придется многое переделать «под себя». Впрочем, я постарался сделать что-то более универсальное и легко устанавливаемое.

Вот она персональная страница для uCoz как на Урааа . Не говорю, что придумал что-то оригинальное, просто делюсь современным стилем для персональной страницы. Нельзя не заметить, что круглые аватары по центру – некий тренд в мире интерфейсов.

Как сделать персональную страницу такой же,
как другие страницы сайта?

Этот вопрос, скорее всего, сформулирован не точно, не полно, но следует начать с него. Персональная страница на uCoz по умолчанию совершенно самостоятельная и маленькая, как будто бы она не часть сайта, а что-то ненужное. Тоже самое и с некоторыми другими страницами, такими как личные сообщения , но не будем о них сейчас. Итак как же сделать «персоналку» действительно частью шаблона.

Во-первых, выберете открытие «В текущем окне» персональной страницы в настройках модуля «Пользователя».

Во-вторых, скопируйте код каркаса в «Управление дизайном – Страницы сайта».

Теперь полностью замените код в «Управление дизайном – Пользователи – Персональная страница» на тот, что вы взяли из «Страниц сайта». В нем замените $CONTENT$ на первоначальное содержимое персональной страницы между и . Вы можете сразу заменить $CONTENT$ на код персональной страницы от Урааа (ниже).

Вот, что у нас получилось:

Персональная страница как на Урааа

Следующий код используйте в «Управление дизайном – Пользователи – Персональная страница». Замените $CONTENT$ на данный код по инструкции выше:

200?"200px":""+(this.scrollHeight+5)+"px");">
if (window.name.length>2){window.resizeTo(750,420);}
function uSocialConnect(obj){
var social = obj.id.split("-");
obj = $(obj);
if(obj.hasClass("is-connected")){
if(confirm("Вы действительно желаете отключить аккаунт?")){
obj.addClass("wait");
_uPostForm("",{type:"POST",url:"/index/sub/", data:{a:4,s:social}});
}
}else if(!obj.hasClass("wait")){
uSocialLogin(social);
}
return false;
}

.social-accounts { padding:10px 0 3px }
.social-accounts a { opacity:.4 }
.social-accounts .is-connected { opacity:1!important }
.social-accounts .wait i { background:url(/.s/img/icon/ajsml.gif) no-repeat center center!important }
.social-accounts a.cursor-default, .social-accounts a.cursor-default i { cursor:default!important }
.statusOffline {color:#979797}
.statusOnline {color:#5ac92e}

Sc-over {padding:0px 20px}
.sc-cover {background:url("https://wallpaperscraft.com/image/spots_background_light_blur_68629_1920x1080.jpg") #1d1d1d;background-size:cover;position:relative;height:180px;margin-bottom:60px}
.sc-cover-in {width:100%;position:absolute;left:0px;bottom:-50px;}
.sc-avatar {width:100px;height:100px;margin:0px auto}
.sc-avatar {border:4px solid #fff}
.sc-avatar img {width:100px;height:100px;object-fit:cover}
.sc-avatar, .sc-avatar img {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
.sc-top {text-align:right;padding:15px 0px;position:absolute;bottom:-50px;left:20px;right:20px;z-index:2}
.sc-group {float:left}
.sc-name {font-size:19px}
.sc-city {font-size:13px;color:#959595}
.sc-counter, .sc-counter:hover {display:inline-block;font-size:21px;padding:15px 7px;color:#000;text-decoration:none}
.sc-counter span {display:block;font-size:13px;}
.sc-tabs {max-width:420px;text-align:left;font-size:14px;border-bottom:1px solid rgba(0,0,0,0.1);padding-bottom:7px;margin:7px auto}
.sc-tabs div {float:left;width:110px;color:#959595}
.sc-bottom, .sc-button {padding:10px 0px}
.sc-button a, .sc-button a:hover {padding:7px 14px;font-size:13px;border:2px solid #3785dc;color:#3785dc;text-decoration:none;display:inline-block;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}