Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Архив » Общие вопросы по оформлению (56)
Предыдущая тема: Общие вопросы по оформлению (55)
Как с помощью браузера можно определить элемент дизайна. | |
Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое НТМЛ и CSS. | |
Ответы на часто задаваемые вопросы. | |
Как задавать вопросы! Разница между стилем и скриптом. ( Советы) | Плюс к названию темы еще и Памятка. |
Любой вопрос по оформлению/неполадкам сопровождайте ссылкой на форум, по которому возникли сложности. |
Alex_63
Ну допустим вверх, как тут в демке .
http://qps.ru/bdOY6
88funt88
1. Для каждого из <li> прописываем :after =>
#pun-navlinks #navindex >a:after{
content:"Форум";
display:block;
}
#pun-navlinks #navrules >a:after{
content:"Правила";
display:block;
}
/*И т.п.*/
2. Меняем красное - на синее
#pun-navlinks li > a:hover{
box-shadow:0 0 3px rgba(0,0,0,.65);
text-shadow:0 0 2px rgba(0,0,0,.88);
background:#fafafa;
margin-top:-6px!important;
margin-top:-88px!important;
}
Alex_63
Там сделано так, чтобы не прописывать в css Правила и ТД
<a href="#home" data-title="Главная">Главная</a>
nav.ph-lift ul li a:after {
content: attr(data-title);
display: block; }
(Ибо неудобно дополнять менять каждый раз стиль при смене контента
Alex_63
не получилось((
Deff
Я заметил, - в нашем случае можно присвоить скриптом data-title:
<script type="text/javascript">
$('#pun-navlinks li>a').each(function (){
$(this).attr('data-title',$(this).find('span').text());
});
</script>
88funt88
Дайте ссылку на форум
Alex_63
testovik15.mybb.ru/admin_options.php
88funt88
Попробуйте так:
#pun-navlinks li {
float: left;
height: 20px;
line-height: 20px;
background: transparent;
overflow: hidden;
-webkit-transition: all.6s ease;
-moz-transition: all.6s ease;
-o-transition: all.6s ease;
-ms-transition: all.6s ease;
transition: all.6s ease;
}
#pun-navlinks li:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
background: teal;
}
#pun-navlinks li > a {
display: block;
text-decoration: none;
color: #007e7e;
padding: 0 45px;
margin-top: 0;
-webkit-transition: all.6s ease;
-moz-transition: all.6s ease;
-o-transition: all.6s ease;
-ms-transition: all.6s ease;
transition: all.6s ease;
}
#pun-navlinks li:hover > a {
margin-top: -20px;
color: white;
text-shadow: 0 1px 2px black;
}
#pun-navlinks li > a:after {
content: attr(data-title);
display: block;
}
А это в HTML низ:
<script type="text/javascript">
$('#pun-navlinks li>a').each(function (){
$(this).attr('data-title',$(this).find('span').text());
});
</script>
Alex_63
Спасибо большое!!!
А как подписывать скрипты чтобы не путаться?
к примеру </style=скрипт для шапки итд>
???
Или теги ставить.
А как подписывать скрипты чтобы не путаться?
Ставим перед HTML кодом скрипта/CSS:
<!-- Комментарий к коду -->
Если код длинный, можно и после него поставить:
<!-- //End//-Комментарий к коду -->
Внутри CSS (стиля) комментарии прописываются так:
/* Комментарий */
В JavaScript скрипте - так:
// Комментарий
Но ни в коем случае не так:
</style=скрипт для шапки итд>
======
P.S.
Стиль - это Коды в "Своем стиле" и коды, начинающиеся на <style type="text/css"> или <style>
Скрипт - это код, начинающийся на <script> либо <script type="text/javascript"> или (устаревшее) <script language="JavaScript">
Alex_63
А как сделать такую шапку на этом скрине, ну это полоска с информацией и логотипом, что для этого надо?
88funt88
Поищите скрипт панели навигации от Fover, (там только логотип придется добавить
Alex_63
Интересный код, мон доработать (считать и зафиксировать скриптом нужную ширину li? и а:after, ибо нет учёта padding(ов) у li и а на разных стилях, и выложить в скриптах
Или задать width и pаdding в этом стиле заранее, не привязываясь к конкретному стилю форума, а эти параметры юзер сам подбирает под нужную ширину меню форума, исходник типо сделать под ширину меню 850px
Deff
А можно ссылку на скрипт?
Deff
Спасибо большое, все получилось )
Здравствуйте, возник вопрос: как с помощью стилей сделать два разных дизайна для главной страницы и для внутренних страниц? Чтобы, например, при переходе на главную был дизайн с широкой шапкой, а при переходе в раздел активные темы (новые сообщения, подписки, ми темы и тд) или в сами темы - дизайн изменялся на "узкий"? Был бы очень признателен)
Отредактировано lorry sunny craft Z (Пт, 31 Июл 2015 12:36:34)
lorry sunny craft Z
У главной есть собственный селектор #pun-index
В конец Первого и второго окон, после исполнения дизайна на всех страницах,
Добавляете свой дизайн для главной, добавкой
.punbb#pun-index тут остальная часть селектора
Интересный код, мон доработать (считать и зафиксировать скриптом нужную ширину li? и а:after, ибо нет учёта padding(ов) у li и а на разных стилях, и выложить в скриптах
Попробую, как время будет, - сейчас пытаюсь сделать скрипт, выводящий список юзеров, просматривающих форум (раздел) - наподобие того, как отображается в темах
Alex_63
Здравствуйте еще раз!!!
В общем можете помочь переделать скрипт повышения репутации из картинок в обычные css кнопки
<style>
.punbb .post-rating a.green,
.punbb .post-rating a.red{
font-weight:700!important;
}
.punbb .post-rating a.green,
.pa-respect span.C1{color:#32CD32}
.punbb .post-rating a.red,
.pa-respect span.C2{color:red}
</style>
<script type="text/javascript">
var a='<img style="margin:-4px" src="http://forumstatic.ru/files/0015/0a/31/69478.png" alt=""/>';
var b='<img style="margin:-4px" src="http://forumstatic.ru/files/0011/64/4e/50862.png" alt=""/>'
$(".post").each(function(){
$(this).find("a[href*='&v=1&code=']").html(a);
var c=$(this).find(".pa-respect span:first");//c.html(
c.html(c.html().replace(/^\[(.+?)\/(-[0-9]+)\]/img,"[<span class=C1>$1</span>/<span class=C2>$2</span>]"))
$(this).find("a[href*='&v=0&code=']").html(b);
var d=$(this).find(".post-rating a")
if(d.html().replace(/[0-9]*/img,"")=='+'){d.addClass("green")}
if(d.html().replace(/[0-9]*/img,"")=='-'){d.addClass("red")}
});
</script>Как вы поняли хочу избавиться от картинок этих маленьких. Нужны обычные кнопки плюс минус круглые, зеленая и красная. Но и с анимацией. Анимацию вставьте какую нибудь прикольную отсюда Ссылка на Кнопки демо, хотя по моему мнению возможно сделать так как в прошлом посте, типа плюсик там вверх улетает и на место ставиться при наведении, но если сложно то не нужно!
Надеюсь мы друг друга поняли!!!
Попробую, как время будет, - сейчас пытаюсь сделать скрипт, выводящий список юзеров, просматривающих форум (раздел) - наподобие того, как отображается в темах
Хорошая идея... по идее аяксить страницу Активных юзерови и парсить по ID форума. Посколь деяние просмотра форум-страниц нечастое, просто один Аякс к Активным на одно обновление страницы с темами форума (без ухищрений)... А фенька будет востребована
Вы здесь » Единый форум поддержки » Архив » Общие вопросы по оформлению (56)
