Форум » Вопросы дизайна » Даешь уроки css! » Ответить
Даешь уроки css!
Serifa: [quote]Zoltan пишет: цитата: может, мне уже уроки css писать начинать пора xD Камрад! Давно пора! Если тебе требуется особое благословение, считай, что мы всем форумом тебе его дали)) [/quote] Предлагаю всем высказаться по данному вопросу. Дело-то ведь полезное, и ни кто-нибудь, а наш родной и знакомый Золтан решил совершить сей подвиг во благо форумного ролевого движения! Давайте его поддержим!
Serifa: Камрад, если тебе хватает денег, можешь поделиться со мной)) Дело разве в величине модификации? Просто у нас ты такой единственный! Луч света в царстве борды, можно сказать)
Zoltan: Serifa пишет: Камрад, если тебе хватает денег, можешь поделиться со мной)) начну делиться, перестанет хватать, перестанет хватать - перестану делиться какой-то странный замкнутый круг. Да ладно, единственный. Скрипты для борды есть даже на а.борда.ру, как ни странно :D если что-то ещё переделать - заказывайте
Serifa: Выявили странный баг со скриптом пропали админские кнопки "бан", "айпи" и квадратик для галочки, для выделения нескольких сообщений( Как бы редко пользуемся, но для нормы надо. Можно что-то придумать?
Zoltan: Serifa пишет: Можно что-то придумать? done Ещё что-нибудь?
Serifa: Аллилуйя, кнопки вернулись! Камрад, ради счастья видеть твое присутствие на этом форуме я придумаю еще десяток "что-нибудь" ))
Serifa: Zoltan, а для движка SMF твои красивые цитаты можно приспособить? Там я хотя бы знаю, где файлик css находится) Ну и в корень форума сам скрипт можно закинуть.
Zoltan: Serifa Вообще, можно. И там скрипт не нужен) Нужно открыть основной файл css и вставить в самый низ .quoteheader { padding-left:40px; color:grey; font-size:10px; border: 1px dashed black; -moz-border-radius:25px 12px; -webkit-border-radius:25px 12px; border-radius:25px 12px; width:350px;} blockquote { color:white; font-style:italic; border:2px solid grey; background: #18181a; padding: 5 15 5; text-shadow:black 0px 1px 0px; -moz-border-radius:13px 35px; -webkit-border-radius:13px 35px; border-radius:13px 35px;} В идеале, сначала нужно найти стили для quoteheader и blockquote, и удалить их. Но должно работать и без этого. Serifa пишет: Камрад, ради счастья видеть твое присутствие на этом форуме я придумаю еще десяток "что-нибудь" да хватит же меня смущать, в самом деле
Serifa: Zoltan пишет: да хватит же меня смущать, в самом деле Говорю, что думаю) Уж прости) Сейчас все попробую, если успею, а то у меня опять интернет заканчивается)
Morfus: Zoltan утащил на uCoz. Спасибо.
Serifa: Это удивительно, но на том форуме оно тоже работает. Времени не было разыскивать стили, просто вставила в конец файла. Вот тут видно хорошо: http://forroll.org/index.php?topic=2279.msg19422#msg19422 Попробую потом еще стили те удалить, что будет...
Serifa: С удаленными стилями форума цитаты выглядят криво, фон смещается, поэтому стили оставила на месте, а новые прописала внизу файла css. Вроде пока работае.
Zoltan: Morfus Не за что. На юкозе я посмотрел, стиль прописывается прямо в исходном коде <div class="bbQuoteName" style="padding-left:5px;font-size:7pt"> Это плохо, очень плохо. Потому может не работать, если нет возможности удалить\заменить выделенное Serifa пишет: Это удивительно, но на том форуме оно тоже работает. ничего удивительного, css работает везде ;) Serifa пишет: С удаленными стилями форума цитаты выглядят криво, фон смещается, поэтому стили оставила на месте Возможно, там есть что-то вроде "display:block;" или подобное, это удалять не нужно, а вот "сolor:***", "font:" можно удалить. И, раз уж народ берёт себе - распишу что зачем в этом стиле, ведь не обязательно ставить именно такую цитату, всё самое "вкусное" - в настройке под себя) .quoteheader // идентификатор заголовка цитаты. Чтобы узнать "свой" нужно в исходном коде найти блок, отвечающий за цитату, там будет что-то вроде <div id='block'> или <div class='block'> имеет значение, id или класс, если айди - строка должна начинаться с #, если класс - то с точки. { padding-left:40px; //отступ влево. Т.к бордюрчик у нас закруглённый, то делаем отступ "от левой границы", 40 пикселей. color:grey; // цвет текста. можно брать любой цвет, grey, red или написать # и RGB код цвета. font-size:10px; // размер шрифта border: 1px dashed black; // здесь устанавливается тип бордюрчика. Толщиной в 1пиксель, dashed - значит пунктирный, solid - сплошной, double - двойная линия. Следом - цвет, опять же можно #rgb border-radius:25px 12px; // радиус сглаживания бордера. можно писать для каждого угла - свой радиус, и описывается в таком порядке - сначала верхний левый угол, потом верхний правый, потом нижний левый и в конце правый. Я описал только свойства двух углов, потому оно просто чередуется, можно указать что-то вроде 10px 24px 12px 27px - для каждого угла своя личная настройка. Если указать только одно значение, то оно применится ко всем углам. Можно удалить настройку - углы будут острыми. -webkit-border-radius:25px 12px; // продублируем предыдущую настройку для webkit. Вдруг, у кого макинтош. -moz-border-radius:25px 12px; // теперь для мозиллы. width:350px;} //ширина блока. Можно ещё указать height, задний план, воткнуть картинку и так далее. Во втором классе все тоже, кроме font-style:italic; - это указывает на то, что шрифт наклонный (аналог бб-кода [i]), background: #18181a; - цвет заднего фона. Можно любой, само собой ;) padding: 5 15 5; - снова отступы, т.к углы скруглены, а я не хочу, чтобы текст налазил на бордюрчик. text-shadow:black 0px 1px 0px; - "тень" теста. На моём варианте цитаты его не видно, т.к фон чёрный, тень чёрная.
Morfus: Zoltan, всё гораздо проще. .codeMessage,.quoteMessage {background: #18181a;color:white;font-style:italic;text-shadow:black 0px 1px 0px;padding: 5px 15px 5px;border:2px solid grey !important; -moz-border-radius:13px 35px !important; -webkit-border-radius:13px 35px !important; border-radius:13px 35px !important;} А заголовок: .bbQuoteName,.bbCodeName {padding-left:40px;color:grey;font-size:10px;border: 1px dashed black; -moz-border-radius:25px 12px; -webkit-border-radius:25px 12px; border-radius:25px 12px; width:200px;} И замечательно всё выглядит. Только, если появляется ползунок справа, то там нет закруглений. Но высоту цитаты тоже можно увеличить. ) http://poligon.name/forum/22-4-196-16-1327584935
Zoltan: Morfus пишет: всё гораздо проще. я имел ввиду, что прямо в теге цитаты указывается, например, padding-left. Потому из css свойств заголовка цитаты можно удалить padding-left:40px; ведь всё равно работает только паддинг, указанный в коде тега, padding-left:5px; здесь хорошо заметно, на форолле "цитата:" пишет с отступом, а вот у вас - уже нет. Не критично, но неприятно, что "прибито гвоздями". Приоритет всегда за опциями, которые объявлены позже всего. А вот паддинги у тела цитаты, кажется, работают нормально. Morfus пишет: Только, если появляется ползунок справа <div class="quoteMessage" style="border:1px inset;max-height:200px;overflow:auto; Кажется, увеличить размер блока цитаты, как и убрать ползунок - нельзя, снова прибито гвоздями. Или можно редактировать шаблоны в админке сайта? не помню уже. Это бока юкоза, не стиля. На форолле ползунка не будет, какой бы ни был размер цитаты
Morfus: Совсем убрать нельзя, изменить величину - можно. Вообще, всё что прописано для стилей прямо в скрипте, можно переопределить с помощью !important. Про Борду разговор отдельный, я этого сейчас не касаюсь.
полная версия страницы