Den

Ищу шаблон GK eSport, нормальный, можно с квикстартом (даже желательно), чистый, не скачанный с торрентов, а нормальный, без всяких левых ссылок в коде.
ссылка на шаблон http://demo.gavick.com/
кто поделится таким, буду весьма признателен. не хочется покупать акк, ради одного шаблона.

По большей части все смайлы анимированные. На просторах интернета их как то не очень то и много, нормальных.
Screenshot (на радикале, потому что форум не поддерживает столь большое изображение)

Собственно сами смайлы:

 ipb_emoticons.xml.gz   921,44К   2 Количество загрузок:

Создание разметки.

Мы начнем с создания необходимой структуры HTML. Сначала я хотел использовать неупорядоченный список в качестве контейнера для изображений и подписей, но потом я столкнулся с некоторыми ошибками вертикального расстояния между элементами списка в Internet Explorer, и решил использовать контейнер div. Я также добавил атрибут title каждой ссылке, чтобы показать подсказки при наведении курсора. Internet Explorer игнорирует этот атрибут, и использует альтернативный img текст вместо этого.

<div class="sc_menu_wrapper">
  <div class="sc_menu">
	<a title="Menu" href="#"><img src="img/1.jpg" alt="Menu"/></a>
	<a title="Navigation" href="#"><img src="img/2.jpg" alt="Navigation"/></a>
	<a title="jQuery" href="#"><img src="img/3.jpg" alt="jQuery"/></a>		
	<a title="CSS" href="#"><img src="img/4.jpg" alt="CSS"/></a>
	<a title="Vertical" href="#"><img src="img/5.jpg" alt="Vertical"/></a>
	<a title="Menu" href="#"><img src="img/1.jpg" alt="Menu"/></a>
	<a title="Navigation" href="#"><img src="img/2.jpg" alt="Navigation"/></a>	
  </div>
</div>

Добавление основного стиля.

Теперь мы добавим немного некоторые правила CSS. Лучше расположить их в внешней таблице стилей, но для демонстрации я расположу их, непосредственно, в HTML документе.

div.sc_menu_wrapper {
  position: relative;  
  height: 500px;
  /* Make bigger than a photo, because we need a place for a scroll-bar. */
  width: 160px;
  margin-top: 30px;
  overflow: auto;
}
div.sc_menu {
  padding: 15px 0;
}
.sc_menu a {
  display: block;
  margin-bottom: 5px;
  width: 130px;
  border: 2px rgb(79, 79, 79) solid;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  /* When image support is turned off */
  color: #fff;
  background: rgb(79, 79, 79);
}
.sc_menu a:hover {
  border-color: rgb(130, 130, 130);
  border-style: dotted;
}
.sc_menu img {
  display: block;
  border: none;
}

"overflow" используется для добавления полосы прокрутки в wrapper div. "position" нам понадобится для позиции наших подсказок. Свойства "-webkit-border-radius" и "-moz-border-radius" добавят закругленные углы для браузеров Firefox, Safari и Chrome. К сожалению, IE не поддерживает их и отобразит прямоугольные углы вместо закругленных.

jQuery

Для начала нам нужно будет добавить JQuery в наш документ. Я использую версию размещенную на Google API, потому что, зачастую, она уже сохраненна в кэше браузера, что позволяет заметно сократить время загрузки страницы.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

$() это сокращение для $(document).ready(), наиболее часто используемой функции JQuery. Она позволяет связать функцию, которая будет выполняться, после завершения загрузки документа DOM. Функция "MakeScrollable" будет содержать весь код, необходимый для создания нашего прокручивающегося меню, вы должны поставить эту функцию во внешний файл.

function makeScrollable(wrapper, scrollable){
}
$(function(){  
  makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});

Теперь мы добавим код, который будет отображать сообщение о загрузке, в то время как загружаются изображения. Функция "enable" будет отключена, когда все изображения будут загружены.

function makeScrollable(wrapper, scrollable){
  // Get jQuery elements
  var wrapper = $(wrapper), scrollable = $(scrollable);
  // Hide images until they are not loaded
  scrollable.hide();
  var loading = $("<div class='loading'></div>").appendTo(wrapper);
  // Set function that will check if all images are loaded
  var interval = setInterval(function(){
	var images = scrollable.find("img");
	var completed = 0;
	// Counts number of images that are succesfully loaded
	images.each(function(){
	  if (this.complete) completed++;  
	});
	if (completed == images.length){
	  clearInterval(interval);
	  // Timeout added to fix problem with Chrome
	  setTimeout(function(){
		loading.hide();
		// Remove scrollbars  
		wrapper.css({overflow: "hidden"});
		scrollable.slideDown("slow", function(){
		  enable();
		});				
	  }, 1000);
	}
  }, 100);
  function enable(){		  
  }
}

Давайте придадим стиля нашему сообщению о загрузке с помощью CSS.

.sc_menu_wrapper .loading {
  position: absolute;
  top: 50px;
  left: 10px;
  margin: 0 auto;
  padding: 10px;
  width: 100px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  text-align: center;
  color: #fff;
  border: 1px solid rgb(79, 79, 79);
  background: #1F1D1D;
}

Делаем меню прокручиваемым.

Мы будем использовать событие "MouseMove" что бы привязать функцию, которая запускается при наведении курсора на меню.
Событие "pageY" возвращает горизонтальную координату мыши относительно всего документа, но нам нужно положение по отношению к обертку дел, поэтому мы будем вычитать от него "wrapperOffset.top".

Список должен прокручиваться быстрее, чем перемещается мышь, чтобы сделать это мы используем пропорции "(scrollableHeight - wrapperHeight) / wrapperHeight".

Вот наша новая функция enable:

function enable(){
  // height of area at the top at bottom, that don't respond to mousemove
  var inactiveMargin = 100;		
  // Cache for performance
  var wrapperWidth = wrapper.width();
  var wrapperHeight = wrapper.height();
  // Using outer height to include padding too
  var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
  // Do not cache wrapperOffset, because it can change when user resizes window
  // We could use onresize event, but it's just not worth doing that
  // var wrapperOffset = wrapper.offset();
  //When user move mouse over menu		
  wrapper.mousemove(function(e){
	var wrapperOffset = wrapper.offset();
	// Scroll menu
	var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight  - inactiveMargin;	if (top < 0){
	  top = 0;
	}
	wrapper.scrollTop(top);
  });	  
}

Стилизация подсказок (опционально)

Вот код CSS для стилизации нашей подсказки:

/* Styling tooltip */
.sc_menu_tooltip {
  display: block;
  position: absolute;
  padding: 6px;
  font-size: 12px;
  color: #fff;  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border: 1px solid rgb(79, 79, 79);
  background: rgb(0, 0, 0);
  /* Make background a bit transparent for browsers that support rgba */  
  background: rgba(0, 0, 0, 0.5);
}

А вот полная функция enable с кодом, который будет двигать подсказки и изменять текст в нем. Когда я начал писать этот код, я пытался использовать JQuery событие "hover", но оно заметно снизило производительность. Вот почему я был вынужден использовать этот странный подход. Я сделал много комментариев в коде, так что я надеюсь, что это код будет не слишком трудым для понимания.

function enable(){  
  // height of area at the top at bottom, that don't respond to mousemove
  var inactiveMargin = 100;	
  // Cache for performance
  var wrapperWidth = wrapper.width();
  var wrapperHeight = wrapper.height();
  // Using outer height to include padding too
  var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
  // Do not cache wrapperOffset, because it can change when user resizes window
  // We could use onresize event, but it's just not worth doing that
  // var wrapperOffset = wrapper.offset();
 
  // Create a invisible tooltip
  var tooltip = $('<div class="sc_menu_tooltip"></div>')
	.css('opacity', 0)
	.appendTo(wrapper);
 
  // Save menu titles
  scrollable.find('a').each(function(){			
	// The "data" function attaches custom data to an element
	$(this).data('tooltipText', this.title);				
  });
 
  // Remove default tooltip
  scrollable.find('a').removeAttr('title');	
  // Remove default tooltip in IE
  scrollable.find('img').removeAttr('alt');
 
  var lastTarget;
  //When user move mouse over menu		  
  wrapper.mousemove(function(e){
	// Save target
	lastTarget = e.target;
 
	var wrapperOffset = wrapper.offset();
 
	var tooltipLeft = e.pageX - wrapperOffset.left;
	// Do not let tooltip to move out of menu.
	// Because overflow is set to hidden, we will not be able too see it
	tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());
 
	var tooltipTop = e.pageY - wrapperOffset.top   wrapper.scrollTop() - 40;
	// Move tooltip under the mouse when we are in the higher part of the menu
	if (e.pageY - wrapperOffset.top < wrapperHeight/2){
	  tooltipTop  = 80;
	}			  
	tooltip.css({top: tooltipTop, left: tooltipLeft});
 
	// Scroll menu
	var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight  - inactiveMargin;
 
	if (top < 0){
	  top = 0;
	}
	wrapper.scrollTop(top);
  });
 
  // Setting interval helps solving perfomance problems in IE
  var interval = setInterval(function(){
	if (!lastTarget) return;
 
	var currentText = tooltip.text();
 
	if (lastTarget.nodeName == 'IMG'){				  
	  // We've attached data to a link, not image
	  var newText = $(lastTarget).parent().data('tooltipText');
 
	  // Show tooltip with the new text
	  if (currentText != newText) {
		tooltip
		  .stop(true)
		  .css('opacity', 0)	
		  .text(newText)
		  .animate({opacity: 1}, 1000);
	  }				
	}
  }, 200);
 
  // Hide tooltip when leaving menu
  wrapper.mouseleave(function(){
	lastTarget = false;
	tooltip.stop(true).css('opacity', 0).text('');
  });		  
}

© Internet

Название: (SV Lok_Mod) Система подтверждения правил
Добавил: Gelo
Добавлен: 15 Фев 2012
Обновлен: 15 Фев 2012
Категория: IP.Board v 3.2 RU (локализации)
Автор: Adriano
Сайт: http://community.inv...rms-of-service/
Тип приложения: Модификация
Версия: 2.0.0
Совместимость: IPB v3.2.x
Автор локализации: www.studio-klass.ru
Сайт: www.studio-klass.ru

Доступно только для АВТОРИЗОВАННЫХ! Думаю демо доступ будет глупо давать, так как каждое подтверждение записывается и только с админки можно обнулить! По этому если желаете посмотреть, то регистрируйтесь на моём тестовом. Думаю не последний мод там тестирую, насладитесь в будущем и другими))

Данная модификация спрячет ВСЕ ваши форумы на главной странице, отображаться будут только правила которые пользователь должен прочесть и согласиться с этими правилами. Кнопка продолжения появляется через установленное вами время, пока не пройдет допустим 10 секунд, пользователь спокойно может читать правила, иначе другого выхода у него не будет, ну если только плюнуть на ожидания и закрыть страницу вашего форума. Данные правила видны/действуют только на АВТОРИЗОВАННЫХ пользователей, по этому для гостей вы должны запретить любые скачивания с ваших форумов.

Нажмите здесь, чтобы скачать файл