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

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

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


Вы здесь » Единый форум поддержки » Корзина » Изменения вида темы опроса с помощью css


Изменения вида темы опроса с помощью css

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

1

Итак, снова берусь за работёнку, которую выполнить могут только образованные мастера своего дела.
Мне бы хотелось полностью поменять стилистику опроса, изменить дизайн полностью. Как всё должно выглядеть я смоделировала в фотошопе. Есть лишь вопрос: такое вообще возможно?!

И если возможно, будет великим добродушием помочь мне вот "это" смоделировать.  :blush:

http://s3.postimage.org/10gsq39j8/image.jpg

Градиентные счётчики голосов (разноцветные полосы, блин) по технологии Romych

Скрипты от пользователей#p704447

http://s1.postimage.org/m2oxs2mc/image.jpg

0

2

Sweet Darkness
Здравствуйте.

Sweet Darkness написал(а):

Итак, снова берусь за работёнку, которую выполнить могут только образованные мастера своего дела. Мне бы хотелось полностью поменять стилистику опроса, изменить дизайн полностью. Как всё должно выглядеть я смоделировала в фотошопе. Есть лишь вопрос: такое вообще возможно?!
            И если возможно, будет великим добродушием помочь мне вот "это" смоделировать.

Я что-то не совсем вопрос понял: скрипт Romych не работает или работает не так? Или нужно туда цвета вставить? Что именно?

0

3

rps
Всё работает. Я просто имела ввиду, что гредиентовые счётчики я настрою по скрипту Romych. :)

А вот, ссылка ещё.

testus.rusff.ru

И да, цвета поменять.

Отредактировано Sweet Darkness (Сб, 1 Окт 2011 22:05:55)

0

4

Sweet Darkness
Я так и не понял, что Вы хотите.

<style type="text/css">
div#poll-special td[class^="e"] h1{-moz-border-radius: 25px;-webkit-border-radius: 25px;border-radius: 25px;}
div#poll-special td.e2 h1 {background-color: #f0a3a3;
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
background-image: -o-linear-gradient(top, #f0a3a3, #f42323);
}
div#poll-special td.e3 h1 {background-color: #f1a165;
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
background-image: -o-linear-gradient(top, #f1a165, #f36d0a);
}
div#poll-special td.e4 h1 {background-color: rgb(43,194,83);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(43,194,83)),color-stop(1, rgb(84,240,84)));
background-image: -moz-linear-gradient(center bottom,rgb(43,194,83) 37%,rgb(84,240,84) 69%);
background-image: -o-linear-gradient(bottom,rgb(43,194,83),rgb(84,240,84));
}
</style>

Если что - выделил фоновые цвета.

+2

5

rps
Извини, начнём сначала. Мне бы хотелось из такой страницы опроса:
http://s1.postimage.org/1cfm6or44/image.jpg

Сделать такую:
http://s3.postimage.org/10gsq39j8/image.jpg

Надо было сразу так и сказать. х)  :insane:

0

6

Sweet Darkness
Ясно теперь. Поставьте скрипт, дайте адрес форума.

+1

7

testus.rusff.ru :)

0

8

Sweet Darkness
Вот, кое-что сделал: ссылка. Посмотрите, скажите, что не так.
Пока что нет градиента на полосках, ещё я не подобрал пока что шрифт, его размер и цвет, как на скриншоте. Скажите, какой надо поставить?

+1

9

rps
О, отлично. Да вы волшебник!
Да, кончено скажу. Название шрифта Georgia - везде.
Единственное что не нравится, можно чтобы у варианта, у которого один голос индикатор был намного меньше? Не полным. А у вариантов у которых ни одного голоса сделать индикатор немного помобольше. Ну, примерно как я показывала на скриншоте.
http://s3.postimage.org/4k2qfwcfp/image.jpg
А вообще, всё самое главное вы уже сделали. Давайте я дальше уже сама укажу цвет для текта, цвета гредиентов, а также размеры текста в нужных областях? Мм? Стоит только расшифровать, какой сектор за что отвечает, если конечно это не скриптом делается.  8-) А елси что, то я спрошу вас.

0

10

Sweet Darkness написал(а):

Единственное что не нравится, можно чтобы у варианта, у которого один голос индикатор был намного меньше?

Именно у индикатора с одним голосом? Если будет два голоса, то он будет снова во всю ширину - это нормально?

Sweet Darkness написал(а):

Давайте я дальше уже сама укажу цвет для текта, цвета гредиентов, а также размеры текста в нужных областях?

Вы не сможете, там сложно.

+1

11

Sweet Darkness
Кстати, вернитесь в тему с общими вопросами и восстановите скриншот с зигзагом в профиле, если это нужно ещё.

+1

12

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

Именно у индикатора с одним голосом? Если будет два голоса, то он будет снова во всю ширину - это нормально?

А, поняла. Нет, тогда не нужно.)

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

Вы не сможете, там сложно.

Хорошо, тогда я скажу все настройки.

Шрифт, как я уже говорила - Georgia.
• Размер шрифта в заголовке опроса побольше, ну на 1px примерно.
   Цвет шрифта в заголовке опроса - #7b736b.
• Цвет текста Голосов: 1 - #7b736b.
• Цвета индикаторов такие же, как вы и указали.
И ещё, хотелось бы все рамочки были вот такого цвета #cac6bd, ну, чтобы белых не было, а то я смотрю, не очень выглядит.

Кстати, есть вопрос. А оформление опроса ДО выбора варианта ответа нужно отдельно оформлять? Там же нет индикаторов и количества голосов.

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

Sweet Darkness
Кстати, вернитесь в тему с общими вопросами и восстановите скриншот с зигзагом в профиле, если это нужно ещё.

Нужно, восстанавливаю.
Странно, что на мою просьбу неадекватно отреагировали на двух форумах сразу, неужели это так безумно?

0

13

rps
Восстановила.
Общие вопросы по оформлению (37)

0

14

Жду rps^^

0

15

Sweet Darkness
Собственно, опрос я почти полностью сделал, единственное, что у меня не получилось, это сделать градиент, который бы работал во всех браузерах. Поэтому его, по всей видимости, придётся наложить изображением. Справитесь сами или нарисуете и мне поставить?
Что касается разметки в профиле, то граница рядом с меню профиля на данный момент также практически готова, ВЫ можете зарегистрироваться, посмотреть и высказать свои пожелания. А вот в блоке с аватаром ещё готово не всё, но посмотреть также можно.

+1

16

rps
Ответила:
Это интересно

0

17

+1

18

Sweet Darkness
Вот Вам первое, для опроса:
ХТМЛ-низ:

Код:
<script language="javascript">
var tr; var td; var i = 1; var j; var st1; var st2; var p_s; var vote; var h1;

function add_span() {
 st1 = p_s.getElementsByTagName("table")[0].getElementsByTagName("strong")[0];
 st1 = st1.parentNode;
 st1.innerHTML = "<span id='title'>" + st1.innerHTML + "</span>";
}

function add_strong() {
 st2 = p_s.getElementsByTagName("table")[0].getElementsByTagName("strong")[1];
 st2 = st2.parentNode;
 st2.id = "votes";
}

function del_spacing() {
 p_s.getElementsByTagName("table")[0].setAttribute("cellspacing", "0");
}

function add_division() {
 tr = p_s.getElementsByTagName("tr");
 while (i < (tr.length - 1)) {
  tr[i].setAttribute("class", "row" + i + "");
  h1 = tr[i].getElementsByTagName("h1")[0];
  if (tr[i].getElementsByTagName("span")[1].innerHTML.indexOf("0% - 0") != -1) {
   h1.innerHTML = "&nbsp;";
   h1.setAttribute("class", "zero_votes")
  }
  td = tr[i].getElementsByTagName("td");
  for (j = 0; j < td.length; j++) {
   td[j].setAttribute("class", "column" + (j + 1) + "");
  }
 i++;
 }
}

function add_animate() {
$('#poll-special h1').each(function() {
 $(this).data('origWidth', $(this).width()).width(0).animate({
  width: $(this).data('origWidth')
 }, 1500);
});
}

if (document.URL.indexOf("viewtopic") != -1) {
 p_s = document.getElementById("poll-special");
 vote = document.getElementById("vote"); 
 
 if (window.vote) {
  add_span();
  del_spacing();
 }

 else if (window.vote !== "object") {
  add_span();
  add_strong();
  del_spacing();
  add_division();
  add_animate();
 }
}
</script>

И ХТМЛ-верх:

Код:
<style type="text/css">
#poll-special .container {
  background-color: #d8d4cb;
  border-style: none !important;
}

#poll-special .column1, #poll-special .column3 {
  text-align: center !important;
  font-size: 14px !important;
  width: 25% !important;
  background-color: #d3cfc6;
  padding: 1.5em 1em !important;
}

#poll-special .column1 {
  border-style: none none solid solid;
  border-width: 1px;
  border-color: #cac6bd;
}

#poll-special .column3 {
  border-style: none solid solid none;
  border-width: 1px;
  border-color: #cac6bd;
}

#poll-special .column2{
  background-color: #d8d4cb;
  width: 50% !important;
  border-style: none solid solid solid;
  border-width: 1px;
  border-color: #cac6bd;
  padding: 2.0em 1.5em !important;
}

#poll-special .tac {
  padding: 0 !important;
  color: #7b736b !important;
}

#votes {
  display: block;
  width: 70px;
  margin: 15px auto 0 auto;
  background-color: #cac6bd;
  border-top-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -khtml-border-top-left-radius: 20px;
  -moz-border-top-left-radius: 20px;
  -o-border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -khtml-border-top-right-radius: 20px;
  -moz-border-top-right-radius: 20px;
  -o-border-top-right-radius: 20px;
  padding: 1em 2.5em !important;
}

#title {
  display: block; 
  width: 100%; 
  height: 100%;
  background-color: #d3cfc6;
  font-weight: bold;
}

#title strong {
  display: block; 
  width: 100%; 
  height: 100%;
  color: #7b736b !important;
  font-size: 1.2em !important;
  background-color: #cac6bd;
  border-bottom-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -khtml-border-bottom-left-radius: 20px;
  -moz-border-bottom-left-radius: 20px;
  -o-border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -khtml-border-bottom-right-radius: 20px;
  -moz-border-bottom-right-radius: 20px;
  -o-border-bottom-right-radius: 20px;
  padding: 1em 0 !important;
}

#poll-special h1 {
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -khtml-border-radius: 15px;
  -moz-border-radius: 15px;
  -o-border-radius: 15px;
  background-image: none !important;
  height: 25px !important;
  min-width: 1em !important;
  display: block;
  padding: 0 0.3em !important;
}

#poll-special .row1 h1 {
  background-color: #f58da6;
}

#poll-special .row2 h1 {
  background-color: #f6d273;
}

#poll-special .row3 h1 {
  background-color: #cbf47a;
}

#poll-special .row4 h1 {
  background-color: #80f7da;
}

#poll-special .row5 h1 {
  background-color: #912cee;
}

.zero_votes {
  width: 15px !important;
}
</style>
Sweet Darkness написал(а):

Ответила: Это интересно

Да, вот именно из-за этих дефектов я и не выдаю второй код... Ибо так и не придумал пока что, как их исправить...

+1

19

Большое, большое спасибо, за проделанную работу!  :love:
rps, а давай может оставим заворот только внизу? И всё? Честно, для меня будет достаточно. :)

0

20

Sweet Darkness написал(а):

rps, а давай может оставим заворот только внизу? И всё? Честно, для меня будет достаточно.

Да уж хочется доделать, раз начал...
Единственное - нет времени, но я закончу всё-равно.
С градиентом сами разобрались?

0


Вы здесь » Единый форум поддержки » Корзина » Изменения вида темы опроса с помощью css