• ↓
  • ↑
  • ⇑
 
Записи с темой: css (список заголовков)
12:08 

ArLe
Арлоло, админота,
администратор
и админотавр
Руководство по CSS для @дневников от Roldo и Рёцке в трех частях:

CSS для @дневников: вводная часть
CSS для @дневников: элементы дизайна
CSS для @дневников: основные методы работы

и еще шпаргалка по расположению элементов.


В разделе каталога Дизайн, иллюстрации, аватары/ Все для дневников можно отыскать все для того, чтобы приукрасить свой дневник.
Чтобы CSS-дизайн начал работать в вашем дневнике, необходимо подключить этот сервис.
Каталог CSS-дизайнов для вашего дневника постоянно обновляется.
В ближайшее время будут новые поступления.
запись создана: 29.12.2008 в 09:57

@темы: CSS, Оформление дневника

12:50 

CSS: C чего начать?

ArLe
Арлоло, админота,
администратор
и админотавр
Пишет La mignonne:

С чего начать?
С чего начать дизайн css?


Вопрос, который мучает многих ( а они в свою очередь - меня :gigi: ) - с чего начать делать дизайн css.
Пакет оплатили, дизайн нарисовали (ну или еще нет)), сели изучать и утонули в море кодов.
Так вот, расскажу с чего начинаю я - кодов немного, поймете быстро.))



URL записи
запись создана: 01.10.2010 в 12:45

@темы: CSS

12:50 

КАК УСТАНОВИТЬ ДИЗАЙН CSS?

ArLe
Арлоло, админота,
администратор
и админотавр
Пишет La mignonne:

КАК УСТАНОВИТЬ ДИЗАЙН CSS?
Честно уже нервно реагирую на вопрос "а куда пихать код, который вы дали?? ааа памагити!".
Почему ж люди не читают-то FAQ в сообществе, а по-русски "Часто Задаваемые Вопросы".
Или еще хуже - читают, а потом задают вопрос, который там расписан и даже показан в картинках! Пощадите, люди.
Поэтому я дополнила инструкцию дополнительными картинками и словами.




Как установить дизайн с кодом CSS/для платного дневника?




URL записи
запись создана: 01.10.2010 в 12:51

@темы: CSS

18:34 

Краткая шпаргалка HTML

 Оформление текста: 

<u>Ваш текст</u> -  Ваш текст;

<s>Ваш текст</s> - Ваш текст; 

<b>Ваш текст</b> - Ваш текст;

<i>Ваш текст</i> - Ваш текст; 

        - пробел;

<br/> - перенос по строке вниз;

<center>Текст</center> - текст по центру.

Таблица:

<table border=0 widht=52%> - начало таблицы;

<tr> - начало строки;

</tr> - конец строки;

<td> и </td> - между этими символами заключается одна ячейка таблицы;

</table> - конец таблицы.

  Подробнее о таблицах здесь

  Ссылки:<a href="URL СТРАНИЦЫ"> ВАШ ТЕКСТ</a>

<a href="URL СТРАНИЦЫ"><img src="URL КАРТИНКИ"></a> - кликабельная картинка,


<a href="URL СТРАНИЦЫ" target="_blank">ВАШ ТЕКСТ</a> - ссылка откроется в новом окне.
   подробнее читать здесь

  Окошко для вставки кода:
1.<textarea rows="2" cols="60"> ВАШ КОД </textarea> ,где cols - ширина окошка в px, а rows - число строк в окне.

2.<input size="35" value="Ваш код"h-text"><div class="b-text"
подробнее читать здесь

 Кат текста: <cut text="Читать далее">Основной текст </cut>
подробнее читать здесь

Шрифт, размер, цвет текста: <span style="font-family:Monotype Corsiva;color:fuchsia;font-size:25px">Ваш текст</span>
подробнее читать здесь 

  Кнопка:  

<a href="Ссылка"><input type="submit" value="Надпись на кнопке" /></a>

Обтекание картинки тектом:
 

<img src="http:…" align=left hspace=20 vspace=20>

  Цвета HTML:


 Подробнее о HTML:

Принципы HTMLГотовые кодыШрифты HTMLКрасивый текстЦвета HTMLFlash по цветамТаблица HTMLКопир. изобр-язащита изобр-яредактор HTMLБродилкаПишем на изобр-и


@темы: Редактирование записи, Кодировка, Записи, CSS

16:25 

Альтернативное использование тэгов MORE

D Ash
Embrace your dreams and prove your honor...

Надеюсь, нигде не нарушаю никаких правил. Сообщество предварительно перечитал, данного пункта не увидел, но не проверял все комменты, да.

Когда-то в сообществе уже описывалось, как можно использовать тэги MORE для скрытия части поста из ленты или создания невидимых комментариев. Это было довольно просто и работало по следующей схеме:


[more=<i></i>]Текст, который надо скрыть.[/more]


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


[more=<i></i>]<div style="display:none;">[/more]Текст, который надо скрыть.[more=<i></i>]</div>[/more]


Т.е. вместо того, чтобы скрывать сам текст, мы скрываем тэги, открывающие и закрывающие "невидимый" блок вокруг этого текста.

Я этим пользовался здесь (в ленте), чтобы убирать скролы на блоках при полном просмотре записи, и здесь (в ленте), чтобы убирать вертикальные чёрточки, которыми пользовался для разделения пунктов (в данном случае - чаптеров).






<div style="display:none;">Текст, который надо скрыть.</div>


В дополнение скажу, что использование этой конструкции может быть альтернативой MORE при скрытии комментария. Есть тут и другая хитрость. Через эти div'ы можно сделать фрагмент поста видимым только из RSS.




И ещё несколько моментов.

Во-первых, комбинируя способы скрывания информации тэгами MORE, можно сделать два абсолютно разных поста, оставив один видимым только из ленты, а второй только при полном просмотре.

И во-вторых, как следствие, можно содержать в дневнике один пост, куда можно попасть только по ссылке (т.е. пост, который не появится в ленте при написании). Да, речь об эпиграфе. А если точнее - о возможности сделать альтернативную версию эпиграфа, которая будет видна только при его просмотре через ссылку вида diary.ru/~адресДневника/p0.htm. Тут есть только одно но - в первой, видимой всем, версии эпиграфа не ставьте тэгов MORE, иначе пользователи, у которых работа MORE настроена на открытие страницы поста (и гости, соответственно) всё же смогут попасть на эту страницу и прочитать то, что вы, как бы, скрыли.


@темы: Оформление дневника, Новая запись, Комментарии, CSS, Редактирование записи, Теги оформления записи, Эпиграф

12:35 

JavaScript

D Ash
Embrace your dreams and prove your honor...
      
Вот и добрались.
      

      
На самом деле, учитывая написанное выше, идея проста и очевидна. Но не идеальна.
      
Пишем пост в виде HTML с CSS и JS, закидываем его на Dropbox и вписываем в страницу, используя этот гайд. Одно но - вам придётся либо высчитать высоту поста (подогнать её уже после публикации, как вариант), или создать внутри вашего html внешний контейнер (начинающийся сразу после начала body и заканчивающийся непосредственно перед его концом) с параметром overflow:auto (<div style="overflow:auto">ваш текст</div>) - чтобы появились скроллы, если содержимое превысит указанные вами размеры объекта.
      

      
Минус идеи в том, что ни JS, ни CSS не будут работать вне вашего кода, вне фрейма. Так что польза сомнительна, хоть и есть, наверное.
      

      
Я использовал у себя в эпиграфе.

@темы: CSS, Javasсript, Вставка медиа-объектов, Новая запись, Редактирование записи, Теги оформления записи, Эпиграф

23:14 

Очистка блоков в CSS

D Ash
Embrace your dreams and prove your honor...
      
Только для владельцев платный аккаунтов с подключенным CSS.

      
Идея проста. Вам нужна какая-либо ссылка, которая присутствует в дневнике, но вам совсем не нужен текст в ней - вы хотите иконку. Как это сделать?

      
1. Найдите ID данного объекта. Чтобы было, по чему обращаться к нему в CSS.
      
2. Создайте \ выберите \ найдите иконку. Закиньте её в БИ, запомните размеры (дальше - X и Y).
      
3. Примените следующий стиль для данного объекта: "{width:Xpx; height:1px; padding-top:Ypx; clip:rect(0px Xpx Ypx 0px); background:url('ссылка/на/изображение/в/вашей/БИ') no-repeat;}". Если что-то не сработает, добавьте перед ";" данного параметра "!important".

      
Суть в том, что мы просто вытесняем текст (с помощью padding-top) и обрезаем его (через clip). Таким образом можно сделать полностью графическое меню или вообще весь интерфейс, что привлекает, верно?

      
Пример можно посмотреть в одном из моих дневников, здесь. Ссылка, ведущая к якорю у верха страницы.

@темы: CSS, Дневник, Оформление дневника, Платные сервисы

21:05 

Скроллы на блоках

D Ash
Embrace your dreams and prove your honor...
Well... Когда-то давно искал способ сделать в дайри блоки с горизонтальной прокруткой, но было не критично, так что забил. Второй раз попробовал весной, тогда успеха уже добился. А на деле всё очень просто.

Итак. Зачем это нужно? Удобно при создании списка или галереи. Как это работает?

Используйте этот код:



Да, вся фишка в настройках white-space по умолчанию в дайри. Можете добавить внутрь style'а width и\или height, чтобы контролировать размеры блока.


[upd]

Для вертикального скроллбара стоит использовать overflow-y. В white-space нужда пропадает. Но нужно указывать height, иначе блок автоматически растянется.

Ещё об overflow. Если не прописывать -x\-y - срабатывает на обе оси. Если в качестве значения поставить scroll вместо auto - бары будут видны всегда, даже когда контент не превышает размер блока. invisible, напротив, не покажет скроллы, даже если контент уйдёт далеко (что приводит к потере контента, ясно). visible позволяет контенту уходить за пределы блока (и налазить на другие элементы, как следствие). Slt.

Примеры.
запись создана: 14.07.2011 в 17:24

@темы: CSS, Записи, Комментарии, Теги оформления записи

17:41 

Firebug Lite for Chrome

D Ash
Embrace your dreams and prove your honor...
Слегка оффтопом, но может понадобится тем, кто много работает с CSS в дневе.

Те, кто пользуются Firefox'ом, скорее всего, знакомы с такой штукой, как Firebug. Если что, это удобный и аккуратный редактор кода страницы. However, в других браузерах (Opera, Chrome) вместо него по умолчанию висит своя система (более запутанная и слегка непривычная после Firebug'а), а в IE (не знаю, насчёт 9, кстати) и Safari (по умолчанию, по крайней мере, а глубже не копал) это вообще решается блокнотом (что, ясно, неудобно).

Well... Сколько-то месяцев назад наткнулся на Firebug Lite (который, будучи сделанным на JS, должен работать вообще везде) и написал маленький скрипт для автоматического подрубания его в Chrome'е. Одно но - учитывая, как именно он работает (там срабатывает переход по ссылке на скрипт подключения его) - при применении перестаёт работать кнопка "назад" (по сути, она возвращает к странице до подключения). Поэтому написал вторую версию - она подгружает Firebug Lite по нажатию горячей клавиши [Alt+A].

Искать тут.

@темы: CSS, Горячие клавиши, Оформление дневника

07:18 

Разделение контента

D Ash
Embrace your dreams and prove your honor...
Здесь я расскажу о том, как с помощью CSS в дневнике реализовать отображение трёх различных блоков контента в ленте избранного, дневнике и режиме комментариев соответственно. Зачем это нужно? Как правило, для шлифовки сложного оформления, но могут быть и другие причины. So, let's start.

Для начала создаём в записи три блока для контента. Выглядеть они должны примерно так.



Зачем прописывать style="display:none"? Это скроет ненужные блоки в режиме ленты избранного, где ваш CSS не действует.

Итак, всё, что осталось - описать данные классы в CSS. Можете смело использовать следующий код:



И всё работает. Последняя строчка нужна для того, чтобы feed контент отображался в своём избранном (чужие и свои блоки такого типа) и в своём цитатнике. Также подразумевается, что в черновиках должны быть видны вообще все варианты.

Пример: лента, дневник, запись.

@темы: CSS, Дневник, Записи, Комментарии, Лента избранного, Новая запись, Платные сервисы, Черновики (автосохранение)

08:06 

Линии

D Ash
Embrace your dreams and prove your honor...
Немного о них.

Самый простой способ добавить горизонтальную линию - тэг <hr>. Я им довольно часто пользуюсь, ибо удобно при разделении контента.



Но есть ещё один способ рисовать тэгами. Верно, добавлять бортики к другим тэгам. Если коротко, это выглядит примерно так:




Где первый параметр - толщина, второй - тип (solid, dotted, dashed, double, groove, ridge, inset, outset), а третий - цвет. Можно описывать бортики только с каких-то конкретных сторон:

border-top: ...;
border-bottom: ...;
border-left: ...;
border-right: ...;


А теперь простой пример. ^_^

    
    
    
    



@темы: CSS, Новая запись, Теги оформления записи

14:11 

Back to Top

D Ash
Embrace your dreams and prove your honor...
Перенёс тут кнопочку из VK. Вернее, вытащил и настроил. Для работы нужен платный сервис CSS.

Как установить.
1. Закинуть это изображение в БИ. Скопировать ссылку.
2. Добавить к CSS дизайн следующий код:

3. Заменить __IMAGE_LINK__ на ссылку на изображение из БИ. Обрезать всё до '/userdir/...'.

Пример.

@темы: CSS, Оформление дневника, Платные сервисы

21:10 

Lists

D Ash
Embrace your dreams and prove your honor...
Сегодня довольно коротко. О списках.

Есть два типа. Нумерованные и ненумерованные.

Синтаксис.



Итак, идея в том, что можно перекрашивать только метки элементов, таким образом отмечая определённые из них. Скажем, вы пишите список продуктов, и вам хочется обратить внимание на какие-то пункты. Или что-то в этом роде.

Как?

Примеры.



Напоследок ещё можно сказать, что на элементы списка разрешено устанавливать свои изображения вместо символов и точек с квадратиками (см. list-style-image) (ясно, предварительно эти изображения надо в БИ закинуть, а ссылку потом пофиксить). Кроме того, можно делать вложенные списки.

Примеры.



That's kinda it. (^__^)

@темы: CSS, Дневник, Записи, Комментарии, Теги оформления записи

02:29 

Объявления

D Ash
Embrace your dreams and prove your honor...
Сейчас особо нет времени, поэтому в двух словах. Для владельцев платных аккаунтов с подключенным сервисом CSS. Если вам нужно повесить какое-то объявление в своём дневе (и так, чтобы оно было видно отовсюду) - используйте следующий код:



Пояснения. Все визуальные параметры вы можете перенастроить, это очевидно. При наведении мыши вы можете переписать любые параметры (в коде выше это только текст сообщения и выравнивание по ширине).

Пример (если ничего не видно - обновите страницу).

@темы: CSS, Оформление дневника, Платные сервисы

10:32 

quirischa
администратор
(с капибарой на аватарке)
08.11.2012 в 19:27
Пишет bokonist:

мобильная версия
дайри живут в 2003 году, а мы хотим читать уютненькие с телефонов

пока нельзя повлиять на дизайн сервисных страниц, но есть возможность с помощью media queries задать стили своего дневника для конкрентых устройств. большое везение, что они не вырезаются из редактора css, как многие другие интересные вещи.

вот так можно задать стили для устройств с экранами до 480 пикселей в ширину:

@media only screen and (max-device-width:480px) { 
body {background:red !important;}
/* сюда пишете любые стили */
}


так, для устройств с большим количеством точек на пиксель (ретина):

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
...
}

делитесь идеями и результатами :)

URL записи

Выглядеть описанное будет вот так:



Слева - скриншот страницы сообщества DiaryCSS
Справа - откорректированное стилями избранное автора процитированной записи

Вопросы можно задавать в комментариях к этой записи.

Или в комментариях к записи в сообществе DiaryCSS: diarycss.diary.ru/p182387350.htm

@темы: CSS, Дневник, Лента избранного

11:51 

Индивидуальное оформление записи через теги + css

Chapt
Качество нашей жизни определяет качество наших поступков
Большинство людей оформляя запись не подозревают, что с ней можно сделать. Обычно они вставляют картинку или картинки, делают разноцветный текст и разный его размер, в общем всё, что можно кнопочками в визуальном редакторе.
НО! Те кто хотя бы немного знаком с Html-тегами и правилами CSS могут делать изумительные вещи с постами и комментариями! Вот так! При этом подключать платный сервис CSS не надо!!!!
Скромным примером использования связки тегов и css является этот пост.

Преимуществом индивидуального оформления записи является то, что при просмотре в избранном человек будет видеть запись так, как оформили её вы, а не так, как у него дизайн настроен. Соответственно именно ваша запись будет всегда заметна, но злоупотреблять этим не стоит



@темы: CSS, Записи, Оформление дневника, Теги оформления записи

11:00 

Платный сервис CSS

quirischa
администратор
(с капибарой на аватарке)
Один из платных сервисов - CSS - позволяет настроить в вашем дневнике красивый дизайн.

Сначала нужно сервис подключить.





Это можно сделать в настройках. Если для сервиса доступно бесплатное ознакомительное подключение (как на картинке выше), то сначала нужно использовать его: выбрать сервис и нажать на кнопку "Попробовать". Если бесплатное ознакомительное подключение недоступно, то сервис можно подключить только платно: выбрать сервис галочкой, выбрать для него срок действия и нажать кнопку "Оплатить".

* * *

После этого в настройках дизайна появится окно для ввода кодов CSS, которые настраивают вид того или иного элемента вашего дневника.





Кроме настройки своего оформления также вы можете установить платные стандартные оформления, которые находятся в Каталоге оформлений.

Обратите внимание, что для корректной работы CSS-оформления, как вашего, так и взятого из Каталога, сервис CSS предусматривает автоматическое отключение рекламы в вашем дневнике для всех пользователей. То есть, при подключённом сервисе CSS реклама в вашем дневнике показываться не будет никому, в том числе и вам.

А вот если вы не хотите видеть рекламу во всех других дневниках, то для этого есть другой платный сервис - "Отключение рекламы на сайте".

Перед подключением сервиса CSS мы рекомендуем вам изучить руководство по нему, которое состоит из 3 частей:
- CSS для @дневников: вводная часть
- CSS для @дневников: элементы дизайна
- CSS для @дневников: основные методы работы

А ещё у нас уже были две записи про CSS: с чего начать и как установить.

Для помощи по вопросам с CSS-дизайнами существует отдельное сообщество - diarycss.diary.ru
запись создана: 12.12.2013 в 12:47

@темы: Сервис CSS, Платные сервисы_Review, Платные сервисы, CSS

@Дневники: секреты, тонкости и хитрости

главная