Единый форум поддержки

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

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


Вы здесь » Единый форум поддержки » Корзина » Как сделать свой стиль?


Как сделать свой стиль?

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

1

Доброго дня/вечера :flag:
Хочу научиться делать свой стиль, но нигде не могу найти подробного описания, какой блок за что отвечает и какие где надо вводить данные. Если этот вопрос уже разбирался, то дайте ссылку, поскольку сколько на форуме не искала, найти не смогла :dontknow:

0

2

Linnan написал(а):

Хочу научиться делать свой стиль, но нигде не могу найти подробного описания, какой блок за что отвечает и какие где надо вводить данные. Если этот вопрос уже разбирался, то дайте ссылку, поскольку сколько на форуме не искала, найти не смогла

FAQ по дизайну форума в CSS юзайте на здоровье))

0

3

Reysler написал(а):

FAQ по дизайну форума в CSS юзайте на здоровье))

это не то, мне нужно не для ХТМЛ верх, а именно для стиля, чтоб от стандартного шаблона даже воспоминаний не осталось :dontknow:

0

4

Linnan
CSS селкторы для всех элементов форума
Ниже опуститься слабо? там же все расписано, именно наэтом весь форум и стоит

0

5

Linnan написал(а):

это не то, мне нужно не для ХТМЛ верх, а именно для стиля, чтоб от стандартного шаблона даже воспоминаний не осталось

хм, ну для хтмл и стиля одни и те же коды, ток в стиль ставим без

<style>....</style>

0

6

Reysler
студентка
я полный дуб. Что, как, в какой блок ставить? Или всё методом тыка?

Отредактировано Linnan (Ср, 24 Фев 2010 17:09:32)

0

7

Linnan написал(а):

Reysler
студентка
я полный дуб. Что, как, в какой блок ставить? Или всё методом тыка?

все оформление-картинки в второе окно.

а вообще я б вам советовала разбираться самой-открыть стиль и методом тыка смотреть что за что отвечает

0

8

Linnan
темы прочитать мало, надо ещё хотя бы знать базовые знания html и css.
А потом для начала сгенерировать свой стиль http://mybb.ru/generator/ и потренироваться на нем, так будет проще :)

0

9

студентка
Reysler
значит только великий метод тыка. В любом случае спасибо. Тему пока не закрывайте - если ничего не получится, опять спрашивать буду :tomato:

0

10

Linnan
Здравствуйте!

Если желаете, можете посмотреть здесь: http://katalog-fbb.narod.ru/css.html
Правда там часть элементов не дописано, но половина присутствует точно.
А правила создания самого кода те же, что и для ХТМЛ-верх. Только не нужны теги стиля <style>....</style>.

0

11

Доброй ночи :flag:

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

Под вопросами осталось только два блока

Код:
.offline li.pa-online strong {
  font-weight: normal
  }

и

Код:
#pun-main div.catleft, #pun-main div.catright {display: none}

пожалуйста подскажите, за что они отвечают?

0

12

Linnan
Здравствуйте.

Linnan написал(а):

.offline li.pa-online strong {
  font-weight: normal
  }

http://s52.radikal.ru/i136/1002/25/d2bb08589411.png

Linnan написал(а):

#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>

0

13

rps
так и не поняла, зачем эти квадратики из того блока нужны, но за подсказку спасибо :flag:
И ещё такой вопрос - как вместо простой заливки поставить изображение?

0

14

Linnan написал(а):

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

Там что-то должно было быть - сервис неоднократно переписывали, возможно, некоторые элементы были удалены.

Linnan написал(а):

И ещё такой вопрос - как вместо простой заливки поставить изображение?

Используйте background: url(Адрес изображения);.

Отредактировано rps (Чт, 25 Фев 2010 23:49:36)

0

15

rps написал(а):

Там что-то должно было быть - сервис неоднократно переписывали, возможно, некоторые элементы были удалены.

в шапке блока появилась пара красных квадратиков над и под названием категории

rps написал(а):

спользуйте background: url(Адрес изображения);.

спасибо :flag:

0

16

Добрый день  :flag:
Теперь следующий вопрос - где в стиле место, которое отвечает за отображение аватара, конкретно мне надо, чтобы он зеркально вниз отражался, или такое только скриптом можно?

0

17

Linnan написал(а):

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

В стиле такого нет. тока скрипт

0

18

в хтмл верх

<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>

0

19

студентка
спасибо

0

20

Добрый вечер  :flag:
Очередная порция вопросов
За что отвечают данные цвета и один блок из нижнего окна стиля, методом тыка не нашла этого (неизвестные мне цвета подчёркнуты):

/* 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)

0


Вы здесь » Единый форум поддержки » Корзина » Как сделать свой стиль?