Futura: каталог аниме форумов

Объявление

SECTOR-15
2022 г. Швейцария. Город Монтрё, ныне Мардо. Мир недалекого будущего. Научные открытия, технологии, достижения цивилизации – каждый месяц в мире становится известно о том или ином новейшем достижении современности. Городок Мардо шагает гораздо быстрей всех остальных своих соседей из других стран.
Бесконечное приключение
Сто двадцать девять лет назад известные земли этого мира покорились уникальному в своем роде существу именовавшему себя Демоном. Более ста лет находились они под узурпаторской властью демона Даха`ага. Приспешники и создания Даха`ага, именуемые низшими демонами, мучали и истязали покоренные народы. Но в один день, небо осветила победоносная вспышка.
07ARK: Oberon
Общество будущего сделало своей целью очиститься от тысячелетий кровавой истории. Равные возможности и всеобщая справедливость - таков курс нового человечества. Человечество бросило вызов даже той несправедливости, которая зависела исключительно от случая. Неизлечимо больные от рождения, жертвы несчастных случаев - политика нового общества не позволяла просто развести руки и сказать: "Прости, но такова жизнь!" Именно для них был создан проект "Ковчег".
Shinsei School
Хоккайдо – самый северный остров Японии, очаровывающий красотой заснеженных горных вершин, диких лесов и скованных льдами берегов с обнаженными ветром и водой скалами. Именно здесь, где богатейшая природа поражает воображение разнообразием форм и буйством красок, вдали от шумных мегаполисов и мирской суеты, было основано уникальное в своем роде учебное заведение – школа Shinsei.
30.06 В связи с отсутствием Чибимун примерно до сентября, главной по тарелочкам пока будет урса (⁄ ⁄•⁄ω⁄•⁄ ⁄) Так что функционируем в обычном режиме, не забывая про тему исправлений!
12.01 С новым годом, ребятки! немного юбилеев, новых крутых дизайнов и мандаринок в ваш дом ヽ(・∀・)ノ
17.10 Чибимун тут болела серьезно, периодами училась и впадала в реальную жизнь, а на ролевых все так же ничего не меняется. Но вы не теряйте, котики!
27.08 Новый дизайн, спасибо великолепной полтергейст ♥
18.08 Чиби уходит в отпуск до 24 числа (даже заходить не будет возможности), так что не грустите и новые ролочки не делайте :")
07.05 Светло, розово (и немного непривычно), но все по-старому футурно, не переживайте! А за дизайн спасибо большое cannibals circus. Надеюсь, он растопит ваши холодные сердца и подарит чуточку тепла и весны вам, господа любители посплетничать ♥
02.04 Стряхну пыль с колонки новостей (тут должна быть шутка про то, что какая активность на аниме сообществе, такие и мы), напомню неравнодушным про тему исправления в каталоге, где Чибимун горячо желает видеть ссылки на новые форумы, поскольку сама не успевает все отслеживать. Спасибо, что остаетесь с нами, ребятки, даже в такие тяжелые времена. Всех люблю, не стесняйтесь писать, обращаться с вопросами и проявлять признаки жизни ♥
Футура — это форум поддержки аниме ролевых. Мы оказываем помощь на различных уровнях для различных категорий людей: от рядовых игроков до администрации всевозможных проектов. Футура объединяет все форумы аниме тематики и их игроков в одном месте, так что мы всегда будем вам рады!

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Futura: каталог аниме форумов » CSS, HTML, скрипты » Украшение и дизайн


Украшение и дизайн

Сообщений 1 страница 15 из 15

1

2

Замена форум, участники и т.д на картинки
by Lazary

в style_cs.css

Код:
#pun-navlinks a {
display: inline-block;
height: 20px;
width: 70px;
margin-left: 10px;
}

#navindex a {background: url(адрес_изображения) no-repeat top center;}
#navuserlist a {background: url(адрес_изображения) no-repeat top center;}
#navsearch a {background: url(адрес_изображения) no-repeat top center;}
#navprofile a {background: url(адрес_изображения) no-repeat top center;}
#navpm a {background: url(адрес_изображения) no-repeat top center;}
#navadmin a {background: url(адрес_изображения) no-repeat top center;}
#navlogout a {background: url(адрес_изображения) no-repeat top center;}
#navlogin a {background: url(адрес_изображения) no-repeat top center;}
#navregister  a {background: url(адрес_изображения) no-repeat top center;}

#navindex a:hover {background: url(адрес_изображения) no-repeat top center;}
#navuserlist a:hover {background: url(адрес_изображения) no-repeat top center;}
#navsearch a:hover {background: url(адрес_изображения) no-repeat top center;}
#navprofile a:hover {background: url(адрес_изображения) no-repeat top center;}
#navpm a:hover {background: url(адрес_изображения) no-repeat top center;}
#navadmin a:hover {background: url(адрес_изображения) no-repeat top center;}
#navlogout a:hover {background: url(адрес_изображения) no-repeat top center;}
#navlogin a:hover {background: url(адрес_изображения) no-repeat top center;}
#navregister a:hover {background: url(адрес_изображения) no-repeat top center;}

#pun-navlinks a span {display: none;}

если вы не хотите, чтобы при наведении картинка менялась, убираете вторую часть кода от #navindex a:hover до #navregister a:hover
Настройка

#pun-navlinks a -  настройка общего вида
height: 20px; - высота изображений.

width: 70px; - ширина изображений. Если ширина изображений разная, необходимо удалить эту строку, и указать ширину для каждого элемента отдельно.
Пример:
#navindex a {background: url(адрес_изображения) no-repeat top center; width: 70px; }
#navuserlist a {background: url(адрес_изображения) no-repeat top center; width: 75px;}
и т.д.
! Для a:hover ширину указывать не нужно. Свойство наследуется.

margin-left: 10px; - расстояние между ссылками.

ссылки
#navindex a - Главная
#navuserlist a - Пользователи
#navsearch a - Поиск
#navprofile a - Профиль
#navrules a - Правила
#navpm a - ЛС
#navadmin a - Администрирование
#navlogout a - Выход
#navlogin a - Вход
#navregister a - Регистрация
#navextra1 a - для добавленных ссылок, где цифра, это порядковый номер положения в меню.
#navawards - Награды

a:hover - соотв. картинке при наведении.

#pun-navlinks - скрывает текстовые надписи


Оставляем цифру Новых сообщений
html-низ

Код:
<script><!--Оставляем цифру Новых сообщений. -->
var clr=($("#navpm a").css("color"));var chng="&nbsp;(";
var subs="</span><span style=\"color:"+clr+";\" id=\"news_messag\">(";
$("#navpm a").html($("#navpm a").html().replace(chng,subs));
$("#news_messag").appendTo("#navpm");
</script>

+1

3

Сворачивание информации под N-кнопок в профиле топика
by Deff

http://s2.uploads.ru/gVCmQ.png

html-верх

Код:
<!-- HTML верх -Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<style>img.post-img-Sp {margin:6px 3px;}
div.tipsy.tipsy-s.Sp-imgSp-img .tipsy-inner{font-size:11px;letter-spacing:1px;}
</style>
<script type="text/javascript" src="http://forumfiles.ru/files/0010/b4/f8/57844.js"></script>

html-низ

Код:
<!-- HTML низ -Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<script>
var a1 = 1	// 0 - спойлер-аккордеон, 1 - вертикальный спойлер; 3 - обычный спойлер
var a2 = 1	// 0 - Скрытие первой вкладки; 1 - Показ первой вкладки; 
var a3 = 1 // Резкость Открытия: 0 - Плавно; 1 - Резко;
var LiArr=new Array(
//При наличии двух косых => // в начале пункта, - пункт не скрывается.
//"pa-author",     //Ник-Нейм
//"pa-avatar",     //Аватар
//"pa-title",      //статус
// 1 кнопка - ссылка на Картинку
//В квадратных скобках, прямо к ссылке можно добавить своё описание (по желанию)
"http://s3.uploads.ru/nk0pT.png[о пользователе]",
"pa-posts",      //Кол-во сообщений:
"pa-respect",    //Уважение:
"pa-from",       //Откуда
"pa-reg",        //Зарегистрирован
"pa-invites", //Приглашений
"pa-sex",        //Пол
"pa-age",        //Возраст
"pa-positive",   //Позитив
"pa-icq",        //Аська
"pa-ip",         //IP Юзера
"pa-time-visit", //Провел на форуме:
"pa-last-visit", //Последний визит:
//"pa-online",     //Пользователь online - Не засовываем в спойлеры
// 2 кнопка- ссылка на Картинку
"http://s2.uploads.ru/5YoSC.png[о персонаже]",
"pa-fld1",       //Доп.Поле.1
// 3 кнопка- ссылка на Картинку
"http://s2.uploads.ru/f5IdO.png[награды]",
"award",      //Награды(только для rusff и ork)
//"gift",         //Подарки(только для rusff и ork)
//Конец Списка,
"_End"); SetProvilSpoil(a1,a2,a3);
</script>
<!--Конец//=Cпойлер cкрытия Инфы под N-кнопок в Профиле Топик-->

Настройка
var a1 = 1 // 0 - спойлер-аккордеон, 1 - вертикальный спойлер; 3 - обычный спойлер
var a2 = 1 // 0 - Скрытие первой вкладки; 1 - Показ первой вкладки;
var a3 = 1 // Резкость Открытия: 0 - Плавно; 1 - Резко;

Все пояснения, в принципе, есть в самом скрипте. Ссылку на картинку и описание можно менять.
В скрипте пункты расположены так же, как и по умолчанию на форумах mybb, пункты в списке можно переставлять; не зависит от их начального положения.

Пункт активен - //"pa-online" сейчас вытащен из спойлеров.
Для этого необходимо было поставить перед ним  две косых //.(Это для последующих установок, к примеру скриптов: офлайн - онлайн картинкой, (аналогично можно вытащить из участия в спойлере и любой другой пункт:
//"award",      //Награды
//"gift",         //Подарки

Для дизайнеров
Селектор для стиля вкладки ul.post-ul-Sp
Селектор для картинки-кнопки .post-img-Sp
Селектор aктивной кнопки .post-img-Sp.active
Селектор кнопки при наведении .post-img-Sp:hover
Селектор подсказки при наведении на кнопку div.tipsy.tipsy-s.Sp-imgSp-img .tipsy-inner

0

4

Скрыть название поля профиля
by Fover

html-низ

Код:
<script type="text/javascript">
var F = [1,2,3,4,5];
for(i in F) {$('.post-author li.pa-fld'+F[i]).each(function(){$(this).html($(this).html().replace(/(.*?):(?: |<br>)/,''));});}
</script>

var F=[1,2,3,4,5] - номер поля
Можно через запятую, если нужно несколько

0

5

Аватар по умолчанию

html-низ

Код:
<script type="text/javascript">
    var DefAvtr="ссылка на картинку";
    var s='<li class="pa-avatar item2"><img class="defavtr" src="'+DefAvtr+'" alt="Аватар"/></li>';$("li.pa-title").each(function(){if (($(this).parent("ul").find("li.pa-avatar").html())==null){$(this).after(s);};});
    </script>

+1

6

Всплывающее окно с подсказкой
http://i.imgur.com/aUqaiFF.png

в окно css стиля:

Код:
.tooltip {
  border: none; 
  text-decoration: none;
  position: relative;}
.tooltip span {
  margin-left: -999em;
  position: absolute;}

.tooltip:hover span {
  position: absolute;
  left: 7px;
  top: 10px; 
  z-index: 99;
  margin-left: 0;}

.top {
  z-index: 200;
  position: absolute;
  background-color: #E3E3E3;
  color: #181A13;
  border: none;
  box-shadow: 0px 0px 4px #161616;
  padding: 5px;
  width: 180px;
  text-align: center;}

.tooltip:hover span - настройка расположения всплывающего окна
  left: 7px; - двигает вправо/влево
  top: 10px; - двигает вниз/вверх

.top - внешний вид всплывающей подсказки
  background-color: ##E3E3E3; - фоновый цвет окна
  color: ##181A13; - цвет шрифта
  border: none; - рамка
  box-shadow: 0px 0px 4px #161616; - тень
  padding: 5px; - расстояние текста от края окна
  width: 180px; - ширина всплывающего окна
  text-align: center; - выравнивание текста

ссылка с подсказкой должна выглядеть так (несколько вариантов)

<a href="ссылка" class="tooltip">текст<span class="top">всплывающая подсказка</a>
<a href="ссылка" class="tooltip"><img src="картинка"><span class="top"><b>ник</b><br>описание</span></a>

0

7

Убрать надпись "отредактировано"

в html-вверх

Код:
<style>
.lastedit{display:none;}
</style>

или в свой стиль

Код:
.lastedit{display:none;}

0

8

Смена стилей

html-вверх

Код:
<script type="text/javascript">
var linkStyles='<link rel="stylesheet" type="text/css" href="';
function setcookie(a,b,c) {if(c){var d = new Date();d.setDate(d.getDate()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}
function clearSet(L){if(L){setcookie("changeStyle",L,30);$("link[rel='stylesheet']:first").replaceWith(linkStyles+L+'"/>')}};var Lmem=getcookie("changeStyle");clearSet(Lmem);
</script>

сами стили и переключалка, ставится следом.

Код:
<style>#changeStyle img{border:solid 2px transparent;}
.STYLselect {border-color:#BD3333!important;}
</style>
<div id="changeStyle" style="top:0; left: 3px; position:fixed!important;">
<img src="картинка_кнопки" title="описание" alt="ссылка на стиль"/>
<br>
<img src="картинка_кнопки" title="описание" alt="ссылка на стиль"/>
</div>

<script>$("#changeStyle img[alt='"+Lmem+"']").addClass("STYLselect");$('#changeStyle img[alt]').click(function(){L=$(this).attr("alt");$('#changeStyle img[alt]').removeClass("STYLselect");$(this).addClass("STYLselect");clearSet(L);window.location=document.URL.replace(/#.\d+$/img,"");});</script>

строку

<img src="картинка_кнопки" title="описание" alt="ссылка на стиль"/>

можно размножать.

.STYLselect {border-color:#BD3333!important;} - кнопка после нажатия. просто меняем номер цвета, если нужно.

Дополнения
Дополнительные Контейнеры для HTML контента, подключаемые только к Определенному выбираемому Стилю

Код:
<style alt="стиль" class=OnlyThisStyle>

....

</style>
<div style="display:none;"><script>var L=$("link[rel='stylesheet']:first").attr('href');var V=$("style.OnlyThisStyle[alt='"+L+"']");if(V.html()!=null){var V1=V.html().replace(/^\/\*([\s\S]*)\*\//img,"$1");V.replaceWith(V1);}</script></div>

вместо многоточия ставится скрипт. советуем не злоупотребоять подобным, а коды стараться по возможности размещать в CSS файлах стиля.
<style alt="стиль" class=OnlyThisStyle> - ссылка на нужный вам стиль.

Файл стиля
Файл своего стиля можно написать в обычном блокноте, однако потом обязательно смените расширение файла с txt на css!
Первым идет все, что находится в нижнем окошке - цвета css.
Второе - структура css.
во время помещения удалите пункт

/* A1.1 */
@import url();

полностью.
Залить файл можно прямо на форум, в раздел Файлы.

0

9

Полоса прокрутки (скролл)

Свой стиль - Цвета CSS

Код:
::-webkit-scrollbar {width: 12px; height: 8px;}  
::-webkit-scrollbar-track {background-color: #цвет фона под прокруткой;} 
::-webkit-scrollbar-thumb {background-color: #цвет ползунка;}
::-webkit-scrollbar-thumb:active {background: #цвет ползунка при нажатии мышкой;}

width: 12px - ширина прокрутки
height: 8px - ширина горизонтальной прокрутки

0

10

Стрелки вверх-вниз

в html-верх

Код:
<div style="position:fixed; right:0.5%; bottom: 45%;">
<a href=#top onClick="scrollTo(0,0); return false;" title="Вверх страницы">
<img src="КАРТИНКА" alt="Вверх страницы" ></a>
<br/>
<a href=#top onClick="scrollTo(0, document.body.scrollHeight); return false;" title="Вниз страницы">
<img src="КАРТИНКА" alt="Вниз страницы" ></a> 
</div>

вместо слова КАРТИНКА вставляем ссылку на изображение.

<div style="position:fixed; right

есть написать left вместо выделенного, то они окажутся (внезапно!) слева.


Плавные стрелки вверх-вниз

HTML-низ

Код:
<script type="text/javascript">
$(function(){
if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
$(window).scroll(function(){
  if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
  else $("#ToTop").fadeIn("slow")
});
if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")
$(window).scroll(function(){
  if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
  else $("#OnBottom").fadeIn("slow")
});
$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
</script>

свой стиль

Код:
.go-up, .go-down {
 display: none;
 position: fixed; /*позиционирование*/
 z-index: 9999; /*поверх все элементов на странице*/
 right: 5%; /*положение на странице, если слева - left*/
 cursor: pointer;
 opacity: .5;
 padding: 3px;
 margin-bottom: 5px;
 width: 64px;
 height: 31px;}
.go-up { bottom: 60px; }
.go-down { bottom: 10px; }
.go-down:hover,
.go-up:hover {
 opacity: 1;}

HTML-верх

Код:
<div class="go-up" title="Вверх" id='ToTop'><img src="КАРТИНКА ВВЕРХ"></div>
<div class="go-down" title="Вниз" id='OnBottom'><img src="КАРТИНКА ВНИЗ"></div>

0

11

Плавная смена картинок при наведении курсора
by Deff

DEMO

в style_cs.css или между тегами <style type="text/css"> </style> в html-верх

Код:
.image.UP,
.image.Down {
   border:2px solid transparent;
   margin:0;
   padding:0;}

.image.UP{
opacity:1.0;
   display:block;
   position:absolute;z-index:100;
   transition-duration: 0.96s;
  -webkit-transition-duration: 0.96s;
  -moz-transition-duration: 0.96s;
  -o-transition-duration: 0.96s;
  -ms-transition-duration: 0.96s; /* IE9+ */}

.image.UP:hover {
   opacity:0.00;}
 
div.ImgWrap{
display:inline-block;
padding:0;margin:0;
background-position:center center;
background-repeat:no-repeat;}

код картинки (обязательно изображения одинаковых размеров):

Код:
<div  class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
</div>

0

12

Своя картинка в каждую категорию

в html-низ

Код:
 <script type="text/javascript"><!--Своя картинка в каждую категорию -->
    $(document).ready(function(){
    myarray=new Array(
"Название", "ссылканакартинку",
"Название", "ссылканакартинку",
"Название", "ссылканакартинку",
"Название", "ссылканакартинку",
"Статистика форума", "ссылканакартинку" //Последний элемент без запятой!  
)
 $("#pun-index div.category h2,#pun-index #pun-stats h2").each(function (i) {
    for(q=0;q<myarray.length;q++){

    var cssObj = {
       "height":"46px",
       "background-color": "transparent",
       "background-image":"url("+myarray[q+1]+")",
       "background-position":"50% 50%",
       "background-repeat":"no-repeat"       //Последний элемент без запятой!
    }

            if($(this).children("span").text()==myarray[q])$(this).css(cssObj);
            q++}
        });
    });
    </script>

в этой части кода

"Название", "ссылканакартинку",
"Название", "ссылканакартинку",
"Название", "ссылканакартинку",
"Название", "ссылканакартинку",
"Статистика форума", "ссылканакартинку"

прописываются  названия категорий и ссылка на картинку, ее заменяющую

в "height":"46px" нужно установить высоту картинок

в стиль добавляем код, чтобы скрыть буквенные названия категорий

Код:
.punbb h2 span {
display: none; }

0

13

Замена форум, участники и т.д на свой текст с помощью css

На месте жирного текста можно написать любой свой текст

#pun-navlinks #navindex>a>span, #navuserlist>a>span, #navrules>a>span, #navsearch>a>span, #navprofile>a>span, #navpm>a>span, #navadmin>a>span, #navregister>a>span, #navlogin>a>span, #navlogout>a>span{display:none;}

#pun-navlinks #navindex a:after{content:"форум";}
#pun-navlinks #navuserlist a:after{content:"участники";}
#pun-navlinks #navrules a:after{content:"правила";}
#pun-navlinks #navsearch a:after{content:"поиск";}
#pun-navlinks #navprofile a:after{content:"профиль";}
#pun-navlinks #navpm a:after{content:"сообщения";}
#pun-navlinks #navadmin a:after{content:"админка";}
#pun-navlinks #navregister a:after{content:"регистрация";}
#pun-navlinks #navlogin a:after{content:"вход";}
#pun-navlinks #navlogout a:after{content:"выход";}

0

14

Панель с данными пользователя в любом месте
by Герда

http://s2.uploads.ru/t/tGxlC.jpg http://sg.uploads.ru/t/Ksn6k.png

Там, где будет отображаться панель, нужно вставить код

Код:
<div id="u-panel"></div>

Затем в html-низ (или за кодом) сам скрипт:

<script type="text/javascript">
var arr=document.getElementsByTagName("div")
i=0
while(arr ){
if(arr[i].id=="u-panel") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<div id=option>содержимое панели</div>"+name
}i++}
</script>


Заполнение содержимого панели
Для начала, два правила:
1. Нельзя использовать двойные кавычки, их можно заменить апострофом ('). Исключения - коды с данными пользователя, которые даны ниже.
2. Код содержимого должен быть в одну строчку. Если сложно из-за этого ориентироваться, сначала сделайте код отдельно, а потом убирайте переносы и вставляйте в скрипт.

Обычно в качестве кода панели используется таблица из двух или трех столбцов. А вот заставить отображать аватарки, дату рождения и другие данные пользователя можно при помощи определенных кодов.

Общие данные
"+UserLogin+" - ник
"+UserAvatar+" - аватарка
"+UserTitle+" - статус
"+GroupTitle+" - группа пользователя
"+UserPosts+" - количество сообщений
"+UserAge+" - возраст
"+UserBirthDate+" - день рождения пользователя
"+UserName+" - отображает имя пользователя, которое он вписал в Профиль
"+UserRespectPlus+"  количество плюсов в уважении
"+UserRespectMinus+" - количество минусов в уважении
"+UserPositivePlus+" - количество плюсов, которые поставил юзер
"+UserPositiveMinus+" - количество минусов которые поставил юзер

Персональные ссылки
Большинство ссылок можно получить с помощью кода "+UserID+" - он отображает идентификатор пользователя, который вы можете увидеть, зайдя на страницу своего профиля.
<a href='/profile.php?id="+UserID+"'>Профиль</a>
<a href='/profile.php?section=personal&id="+UserID+"'>Профиль > Персональный</a>
<a href='/profile.php?section=messaging&id="+UserID+"'>Профиль > Общения</a>
<a href='/profile.php?section=avatar&id="+UserID+"'>Профиль > Аватар</a>
<a href='/profile.php?section=signature&id="+UserID+"'>Профиль > Подпись</a>
<a href='/profile.php?section=display&id="+UserID+"'>Профиль > Отображения</a>
<a href='/profile.php?section=privacy&id="+UserID+"'>Профиль > Приватность</a>
<a href='/profile.php?section=fields&id="+UserID+"'>Профиль > Дополнительно</a>
<a href='/profile.php?section=invites&id="+UserID+"'>Профиль > Приглашения</a>
<a href='/respect.php?id="+UserID+"'>Уважение</a>
<a href='/positive.php?id="+UserID+"'>Позитив</a>

http://i.imgur.com/DDufaMl.png

Пример Простенькая панель из двух столбцов
Слева - аватар, справа - ник, количество сообщений и ссылка на профиль

Код:
<script type="text/javascript">
var arr=document.getElementsByTagName("div")
i=0
while(arr ){
if(arr[i].id=="u-panel") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<div id=option><table cellpadding='5px'><tr><td><a href='/profile.php?section=avatar&id="+UserID+"' title='change avatar'><img src="+UserAvatar+"></a></td><td valign='top'><div style='margin-top: 10px; color: #000000; font-size: 14px; font-family: Arial; font-weight: bold;'>"+UserLogin+"</div>"+UserPosts+"<br><a href='/profile.php?id="+UserID+"'>it's me</a></div></td></tr></table></div>"+name
}i++}
</script>

Оформление
С помощью CSS

#option {тут ваши коды}

там же можно задать этой панельке расположение
  position: relative;
  top: 243px; - двигать вверх/вниз
  margin-left: 840px; - двигать влево/вправо

Дополнительно
Как поставить пользователю аватарку по умолчанию? Прописываем в начале скрипта ссылку на картинку

<script type="text/javascript">
if (UserAvatar == ""){UserAvatar = "КАРТИНКА"}
var arr=document.getElementsByTagName("div")
i=0
while(arr[i] ){
if(arr[i].id=="u-panel") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<div id=option>тут будет наше содержимое</div>"+name
}i++}
</script>


Скрипт для гостей
Могут понадобиться ссылки
<a href='login.php'>Вход</a>
<a href='register.php'>Регистрация</a>

Код:
<script type="text/javascript">
var arr=document.getElementsByTagName("div")
i=0
str=document.URL
while(arr[i] ){
if(arr[i].id=="u-panel" && GroupID == "3") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<div id=option>тут будет наше содержимое</div>"+name
}i++}
</script>

http://i.imgur.com/l3jh4Ai.png

Пример Панель из двух столбцов
Слева - аватар, справа - ник, ссылка на вход и регистрацию

Код:
<script type="text/javascript">
var arr=document.getElementsByTagName("div")
i=0
str=document.URL
while(arr[i] ){
if(arr[i].id=="u-panel" && GroupID == "3") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<div id=option><table cellpadding='5px'><tr><td><img src="+UserAvatar+"></td><td valign='top'><div style='margin-top: 10px; color: #000000; font-size: 14px; font-family: Arial; font-weight: bold;'>guest</div><a href='login.php'>login</a><br><a href='register.php'>registration</a></div></td></tr></table></div>"+name
}i++}
</script>

0

15

Фильтры для изображений
Могут понадобиться, например, в таблице, если вам нужно сделать картинки черно-белыми.
Для начала нужно узнать селектор того места, где мы будем извращаться над картинками. В случае дополнительных блоков все просто - его название в css и есть нужный нам селектор. Если данные манипуляции будут проводиться в другом месте, заранее узнайте селектор.

Основные фильтры
-webkit-filter: grayscale(100%); - черно-белое изображение
-webkit-filter: sepia(100%); - сепия
-webkit-filter: brightness(50%); - яркость 50%
-webkit-filter: blur(5px); - эффект размытия
-webkit-filter: opacity(60%); - прозрачность изображения
-webkit-filter: hue-rotate(120deg); - меняет цвета изображения в зависимости от заданного угла. Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg).

Пример
Есть некий блок в шапке #tabl, картинки в котором нам нужно сделать черно-белыми. Тогда код будет иметь следующий вид:

#tabl a img {-webkit-filter: grayscale(100%);}
#tabl a:hover img {-webkit-filter: grayscale(1%);}

#tabl a img - применяется для обычной картинки
#tabl a:hover img - для картинки при наведении курсора

0


Вы здесь » Futura: каталог аниме форумов » CSS, HTML, скрипты » Украшение и дизайн


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC