» »

Светлый вид личных сообщений Groz для ucoz


Нашел на одном сайте, ресурс был ушатный и думал не работает код, но оказалось Светлый вид личных сообщений для ucoz отлично все функций исполняет, только вот дизайн был на нем не очень. Реально не чем было заняться и решил там немного разобраться и поучиться, что как делать. И вот через пять минут он уже приобрел овод, и что то зацепило и решил его как смогу доделать, чтоб можно было поставить на сайт. А то изначально, на нем какие то стрелки были и весь ужасный, так же тени распределены очень грубо. Что пришлось их удрать и сделать немного в другой гамме и закруглить все углы, чтоб нашел свою форму.

Установка:

Личные сообщение ставим этот скрипт со стилями а старый убираем.

Код
<html>  
<head>  
<title>$TITLE$</title>  
</head>  

<body>  
<p><div class="webo4la_lichnii_coobchenii" style="margin-left:150px;">Личные сообщения</div></p>  
<center><table cellpadding="0" cellspacing="0" border="0" width="77%" align="center" class="webo4ka_ramka"> <tr> <td width="55%" align="left" valign="top">  
<div class="webo4ka_menu_border"> <div class="webo4ka_menu">  
<a href="/index/14"><span>Принятые</span></a>  
<a href="/index/14-0-1"><span>Отправленные</span></a>  
<a href="/index/14-0-0-1"><span>Отправить ЛС</span></a>  
<a href="/index/14-0-5"><span>Массовая рассылка</span></a>  
<a href="/index/15-1"><span>Список пользователей</span></a>  

<a href="/"><span>Главная</span></a>  
<a onclick="_uWnd.alert('Администрация сайта не отвечает на вопросы заданные по ЛС,для этого есть Форум!!!','',{w:300,h:50,tm:10000}); return false;"><span><b>Читать всем!</b></span></a>  
</div></div><br>$BODY$</td></tr></table></center>  
</body>  
<script>$('#loading').fadeOut('slow');$('.pmCatLinkActive').next().parent().hide();</script>  
</html>  

<style>  
   
body{background:#FFF;font-family:tahoma;font-size:11px;}  
td{font-family:tahoma;font-size:11px;}  
#content{border:1px solid #e6e6e6;border-top:none;margin-left:250px;margin-right:250px;}  
a:link {text-decoration:none; color:#838383; font-size:11px; }  
a:visited {text-decoration:none; color:#838383; font-size:11px; }  
a:hover {text-decoration:underline; color:#838383; font-size:11px; }  
a:active {text-decoration:none; color:#838383; font-size:11px; }  

#PMtoUser {padding:2px 4px; border: 1px solid #c3c3c3; background: #f9f9f9; margin: 1px; color: #ddd; text-shadow: 0.1em 0.1em 0.05em #FFF; border-radius: 5px;}  
#PMtoUser:focus {border: 1px solid #555; background: white; color: #555; cursor: pointer; text-shadow: 0.1em 0.1em 0.05em #FFF;}  
#pmSubject {width:100% !important; padding:2px 4px; border: 1px solid #c3c3c3; background: #f9f9f9; margin: 1px; color: #ddd; text-shadow: 0.1em 0.1em 0.05em #FFF; border-radius: 5px;}  
#pmSubject:focus {border: 1px solid #555; background: white; color: #555; cursor: pointer; text-shadow: 0.1em 0.1em 0.05em #FFF;}  
#message {height:135px;width:100%; padding:2px 4px; border: 1px solid #c3c3c3; background: #f9f9f9; margin: 1px; color: #ddd; text-shadow: 0.1em 0.1em 0.05em #FFF; border-radius: 5px;}  
#message:focus {border: 1px solid #555; background: white; color: #555; cursor: pointer; text-shadow: 0.1em 0.1em 0.05em #FFF;}  
.codeButtons {padding: 2px 4px;border: 1px solid #696767;background: #737373;margin: 1px;color: #FFF;text-shadow: 0.1em 0.1em 0.05em #636363;border-radius: 5px;}  
.codeButtons:hover {border: 1px solid #6B6666;background: #D0D0D0;color: #0E0E0E;cursor: pointer;text-shadow: 0.1em 0.1em 0.05em #FFF;border-radius: 5px;}  

input {padding:2px 4px; border: 1px solid #555; background: #f2f2f2; margin: 1px; color: #555; text-shadow: 0.1em 0.1em 0.05em #FFF;}  
input:hover {border: 1px solid #555; background: #fff; color: #555; cursor: pointer; text-shadow: 0.1em 0.1em 0.05em #FFF;}  
.sml1{padding:2px 4px; border: 1px solid #c3c3c3; background: #f9f9f9; margin: 1px; color: #ddd; text-shadow: 0.1em 0.1em 0.05em #FFF;}  
#allSmiles{padding:2px 4px; border: 1px solid #c3c3c3; background: #f9f9f9; margin: 1px; color: #ddd; text-shadow: 0.1em 0.1em 0.05em #FFF;}  
.securityCode {padding:2px 4px; border: 1px solid #c3c3c3; background: #f9f9f9; margin: 1px; color: #ddd; text-shadow: 0.1em 0.1em 0.05em #FFF;}  
.securityCode:focus {border: 1px solid #555; background: white; color: #555; cursor: pointer; text-shadow: 0.1em 0.1em 0.05em #FFF;}  
.unread{color:#ff0000; text-shadow: 0px px 1px #fff;}  
hr{color:#ddd;}  

body {background:#e9e9e9; margin-top:55px !important;margin:0;padding:0;}  
.webo4ka_ramka {border:15px solid #E9E9E9;-moz-box-shadow:2px 2px 2px 2px #555;-webkit-box-shadow:2px 2px 2px 2px #555;box-shadow: 1px 1px 1px 7px #929292; border-radius: 5px;}  
.webo4la_lichnii_coobchenii {color:#565656;font-size:15pt;font-weight:bold;font-family:tahoma;text-align:left; text-shadow:1px 1px 1px #fff;}  
.webo4la_lichnii_coobchenii:hover {color:#555;font-size:15pt;font-weight:bold;font-family:tahoma;text-align:left;}  

.webo4ka_menu_border {border-bottom:1px solid #E9E9E9;border-right:1px solid #ccc; border-left:1px solid #ccc;}  
.webo4ka_menu a {color:#F5F5F5; text-decoration:none;}  
.webo4ka_menu a:hover {color:#F5F5F5;}  
.webo4ka_menu a span {line-height:22px;background:#404040;padding:4px 6px;border-right:1px solid #ccc; border-radius: 5px;}  
.webo4ka_menu a span:hover {background:#747474; border-radius: 5px;}  
   
</style>


Принятые:



Отправленные



Отправить ЛС



Массовая рассылка

Светлый вид личных сообщений для ucoz

Так же вы можете кнопки поменять или оставить как есть, ведь они при наведение меняются в оттенке и там такой эффект присутствует, а так думаю на любой светлый сайт подойдет с огромным количеством тем на материал.
13.11.2015 Просмотров: 496 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Комментарий: 7
ZruBkul
ZruBkul 15.11.2015 23:181
0
Так намного лучше смотрится, чем был изначально, который вы можете найти в интернете.
FeStemBer
FeStemBer 15.11.2015 23:302
0
Кнопки бы еще по дизайну поставить, то здесь светлые и как то сливаются с формой. Пробовал ставить на сайт, они не изменились, их нужно менять в самом коде.
Kosten
Kosten 15.11.2015 23:343
0
Если нужны другие кнопки, которые совсем не связаны сайтом и его дизайна, то ЗДЕСЬ вы можете выбрать те которые вам нужно. Но не забывайте, просто поставить кнопку, но ее можно в стилях совершенно изменить. Просто код на кнопку и стили идут и там все понятно. К примеру ставил желтую и изменил на синее и при наведение она не меняет цвет а прогибается. Но это нужно правильно выставить оттенок, вид материала уже заливал с такой кнопкой на сайте.
Сопрано
Сопрано 16.11.2015 02:584
+1
Но видать так сделали и смотрится нормально с этими кнопками.
Сопрано
Сопрано 16.11.2015 02:595
0
Но другой вопрос, вообще можно сделать совершенно под другой цвет, дизайн устраивает, а сам оттенок нормальный, но что то хочеться оригинального.
AnTron
AnTron 16.11.2015 03:066
0
Хороший сайт, где администратор направил кнопки взять, там все по CSS и не только кнопки.

Trantel, вообще только вижу его в светлом дизайне, но если еще в темный сделать, просто сообщение основном не делают цветными, хдесь на первом месте, чтто нормально работало. И стандартные можно сделать. А лучше вам прописать на нем стиль и поставить фон.
Kosten
Kosten 16.11.2015 03:107
0
Но темные есть на такую функцию, хотел прозрачным сделать, да времени не хватает, просто видел на одном в прозрачном фоне. Что залил на форум, там и код есть, возможно кому нужно, то все для веб мастера, эта страница пользователей есть.

Так как они идут не одной страницей а всеми для пользователя, но кроме самой персональной. И если у вас в темной гамме, то прозрачная красиво смотрится, светлую лучше не трогать, хотя все будет зависит от самого фона, который будет представлен.
avatar