Доброго дня/вечера
Хочу научиться делать свой стиль, но нигде не могу найти подробного описания, какой блок за что отвечает и какие где надо вводить данные. Если этот вопрос уже разбирался, то дайте ссылку, поскольку сколько на форуме не искала, найти не смогла
Как сделать свой стиль?
Сообщений 1 страница 20 из 28
Поделиться1Ср, 24 Фев 2010 16:02:38
Поделиться2Ср, 24 Фев 2010 16:05:00
Хочу научиться делать свой стиль, но нигде не могу найти подробного описания, какой блок за что отвечает и какие где надо вводить данные. Если этот вопрос уже разбирался, то дайте ссылку, поскольку сколько на форуме не искала, найти не смогла
FAQ по дизайну форума в CSS юзайте на здоровье))
Поделиться3Ср, 24 Фев 2010 16:34:03
FAQ по дизайну форума в CSS юзайте на здоровье))
это не то, мне нужно не для ХТМЛ верх, а именно для стиля, чтоб от стандартного шаблона даже воспоминаний не осталось
Поделиться4Ср, 24 Фев 2010 16:35:44
Linnan
CSS селкторы для всех элементов форума
Ниже опуститься слабо? там же все расписано, именно наэтом весь форум и стоит
Поделиться5Ср, 24 Фев 2010 16:35:51
это не то, мне нужно не для ХТМЛ верх, а именно для стиля, чтоб от стандартного шаблона даже воспоминаний не осталось
хм, ну для хтмл и стиля одни и те же коды, ток в стиль ставим без
<style>....</style>
Поделиться6Ср, 24 Фев 2010 17:07:35
Reysler
студентка
я полный дуб. Что, как, в какой блок ставить? Или всё методом тыка?
Отредактировано Linnan (Ср, 24 Фев 2010 17:09:32)
Поделиться7Ср, 24 Фев 2010 18:08:42
Reysler
студентка
я полный дуб. Что, как, в какой блок ставить? Или всё методом тыка?
все оформление-картинки в второе окно.
а вообще я б вам советовала разбираться самой-открыть стиль и методом тыка смотреть что за что отвечает
Поделиться8Ср, 24 Фев 2010 18:36:26
Linnan
темы прочитать мало, надо ещё хотя бы знать базовые знания html и css.
А потом для начала сгенерировать свой стиль http://mybb.ru/generator/ и потренироваться на нем, так будет проще
Поделиться9Ср, 24 Фев 2010 18:57:14
студентка
Reysler
значит только великий метод тыка. В любом случае спасибо. Тему пока не закрывайте - если ничего не получится, опять спрашивать буду
Поделиться10Ср, 24 Фев 2010 21:28:19
Linnan
Здравствуйте!
Если желаете, можете посмотреть здесь: http://katalog-fbb.narod.ru/css.html
Правда там часть элементов не дописано, но половина присутствует точно.
А правила создания самого кода те же, что и для ХТМЛ-верх. Только не нужны теги стиля <style>....</style>.
Поделиться11Чт, 25 Фев 2010 22:45:51
Доброй ночи
rps
я уже начала методом тыка разбираться, какой цвет в нижнем окне за что отвечает, но за ссылку спасибо
Под вопросами осталось только два блока
.offline li.pa-online strong { font-weight: normal }
и
#pun-main div.catleft, #pun-main div.catright {display: none}
пожалуйста подскажите, за что они отвечают?
Поделиться12Чт, 25 Фев 2010 23:03:52
Linnan
Здравствуйте.
.offline li.pa-online strong {
font-weight: normal
}
#pun-main div.catleft, #pun-main div.catright {display: none}
Поставьте в ХТМЛ-верх код и выйдите на главную страницу:
<style> #pun-main div.catleft, #pun-main div.catright {display: block; width: 20px; height: 20px; background: red;} </style>
Поделиться13Чт, 25 Фев 2010 23:23:47
rps
так и не поняла, зачем эти квадратики из того блока нужны, но за подсказку спасибо
И ещё такой вопрос - как вместо простой заливки поставить изображение?
Поделиться14Чт, 25 Фев 2010 23:49:23
так и не поняла, зачем эти квадратики из того блока нужны, но за подсказку спасибо
Там что-то должно было быть - сервис неоднократно переписывали, возможно, некоторые элементы были удалены.
И ещё такой вопрос - как вместо простой заливки поставить изображение?
Используйте background: url(Адрес изображения);.
Отредактировано rps (Чт, 25 Фев 2010 23:49:36)
Поделиться15Чт, 25 Фев 2010 23:51:58
Там что-то должно было быть - сервис неоднократно переписывали, возможно, некоторые элементы были удалены.
в шапке блока появилась пара красных квадратиков над и под названием категории
спользуйте background: url(Адрес изображения);.
спасибо
Поделиться16Пт, 26 Фев 2010 16:52:42
Добрый день
Теперь следующий вопрос - где в стиле место, которое отвечает за отображение аватара, конкретно мне надо, чтобы он зеркально вниз отражался, или такое только скриптом можно?
Поделиться17Пт, 26 Фев 2010 16:56:00
Теперь следующий вопрос - где в стиле место, которое отвечает за отображение аватара, конкретно мне надо, чтобы он зеркально вниз отражался, или такое только скриптом можно?
В стиле такого нет. тока скрипт
Поделиться18Пт, 26 Фев 2010 16:57:03
в хтмл верх
<script type="text/javascript">
document.getElementsByClassName = function(className) {
var children = document.getElementsByTagName('*') || document.all;
var elements = new Array();for (var i = 0; i < children.length; i++) {
var child = children[i];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
}var Reflection = {
defaultHeight : 0.5,
defaultOpacity: 0.5,add: function(image, options) {
Reflection.remove(image);doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }
if (options) {
for (var i in doptions) {
if (!options[i]) {
options[i] = doptions[i];
}
}
} else {
options = doptions;
}try {
var d = document.createElement('div');
var p = image;var classes = p.className.split(' ');
var newClasses = '';
for (j=0;j<classes.length;j++) {
if (classes[j] != "reflect") {
if (newClasses) {
newClasses += ' '
}newClasses += classes[j];
}
}var reflectionHeight = Math.floor(p.height*options['height']);
var divHeight = Math.floor(p.height*(1+options['height']));var reflectionWidth = p.width;
if (document.all && !window.opera) {
/* Fix hyperlinks */
if(p.parentElement.tagName == 'A') {
var d = document.createElement('a');
d.href = p.parentElement.href;
}
/* Copy original image's classes & styles to div */
d.className = newClasses;
p.className = 'reflected';d.style.cssText = p.style.cssText;
p.style.cssText = 'vertical-align: bottom';var reflection = document.createElement('img');
reflection.src = p.src;
reflection.style.width = reflectionWidth+'px';reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';d.style.width = reflectionWidth+'px';
d.style.height = divHeight+'px';
p.parentNode.replaceChild(d, p);d.appendChild(p);
d.appendChild(reflection);
} else {
var canvas = document.createElement('canvas');
if (canvas.getContext) {
/* Copy original image's classes & styles to div */
d.className = newClasses;
p.className = 'reflected';d.style.cssText = p.style.cssText;
p.style.cssText = 'vertical-align: bottom';var context = canvas.getContext("2d");
canvas.style.height = reflectionHeight+'px';
canvas.style.width = reflectionWidth+'px';
canvas.height = reflectionHeight;
canvas.width = reflectionWidth;d.style.width = reflectionWidth+'px';
d.style.height = divHeight+'px';
p.parentNode.replaceChild(d, p);d.appendChild(p);
d.appendChild(canvas);context.save();
context.translate(0,image.height-1);
context.scale(1,-1);context.drawImage(image, 0, 0, reflectionWidth, image.height);
context.restore();
context.globalCompositeOperation = "destination-out";
var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");context.fillStyle = gradient;
if (navigator.appVersion.indexOf('WebKit') != -1) {
context.fill();
} else {
context.fillRect(0, 0, reflectionWidth, reflectionHeight*2);
}
}
}
} catch (e) {
}
},remove : function(image) {
if (image.className == "reflected") {
image.className = image.parentNode.className;
image.parentNode.parentNode.replaceChild(image, image.parentNode);
}
}
}function addReflections() {
var rimages = document.getElementsByClassName('reflect');
for (i=0;i<rimages.length;i++) {
var rheight = null;
var ropacity = null;var classes = rimages[i].className.split(' ');
for (j=0;j<classes.length;j++) {
if (classes[j].indexOf("rheight") == 0) {
var rheight = classes[j].substring(7)/100;
} else if (classes[j].indexOf("ropacity") == 0) {
var ropacity = classes[j].substring(8)/100;
}
}Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
}
}var previousOnload = window.onload;
window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }
</script>
в хтмл низ
<script type="text/javascript">
var arr=document.getElementsByTagName("li")
i=0
while(arr[i] ){
if(arr[i].className=="pa-avatar item2"){
name=arr[i].innerHTML
name=name.substring(4)
arr[i].innerHTML="<img class=reflect "+name+" "
}
i++
}
</script>
Поделиться19Пт, 26 Фев 2010 17:02:04
студентка
спасибо
Поделиться20Пт, 26 Фев 2010 19:18:08
Добрый вечер
Очередная порция вопросов
За что отвечают данные цвета и один блок из нижнего окна стиля, методом тыка не нашла этого (неизвестные мне цвета подчёркнуты):
/* CS1.8 */
#pun-navlinks .container {
background-color: #1100AA;
color: #BB3EE4;
}
/* CS2.6 */
.punbb .divider {
border-color: #4613DF #8653FF #8653FF #8653FF
}
.punbb .formal fieldset .post-box, .punbb .info-box {
border: 1px solid #dedfdf
}
Отредактировано Linnan (Пт, 26 Фев 2010 19:19:00)