• ↓
  • ↑
  • ⇑
 
Записи с темой: оформление дневника (список заголовков)
11:51 

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

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

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



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

10:26 

Новые дизайны

администратор
(с капибарой на аватарке)
Привет.

Здесь рассказывается о новых дизайнах в каталоге оформлений. Приводятся ссылки на тестовые дневники, где эти дизайны установлены. Рассказывается, как установить дизайн в свой дневник.

Сегодня я расскажу вам о некоторых новинках нашего каталога оформлений.

В последнее время мы добавили туда несколько зимних дизайнов. Посмотрите на дизайн The most wonderful time (ссылка). Правда, повеяло снежным ветром? А вот еще один дизайн, Домик в горах (ссылка). Как, наверное, уютно сидеть в таком домике вечером, согреваясь от тепла печки-буржуйки камина :)

Оба этих дизайна находятся в каталоге в категории "Праздники". Также имеет смысл обратить внимание на еще один дизайн, который там находится. Это Christmas morning (ссылка). Стойкое ощущение праздника приходит с установкой этого дизайна и уже никуда не девается аж до самой весны.

Если ваши глаза устали от яркого снега, то мы предлагаем вам дизайн Brown (ссылка). Он такой, коричневенький :) Есть еще один, чуть менее тёмный дизайн - Alfa (ссылка).

Также можно брать два дизайна в зелёной тональности: посветлее - Salad light (ссылка) - и потемнее - Salad dark (ссылка).

* * *


Прямые ссылки на дизайны в Каталоге оформлений:

The most wonderful time (ссылка на дизайн)
Домик в горах (ссылка на дизайн)
Christmas morning (ссылка на дизайн)
Brown (ссылка на дизайн)
Alfa (ссылка на дизайн)
Salad light (ссылка на дизайн)
Salad dark (ссылка на дизайн)

* * *


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

Для того, чтобы установить дизайн, вам нужно сделать следующее:
1. выберите дизайн, который вы хотите себе установить,
2. перейдите по прямой ссылке на дизайн в каталоге оформления,
3. посмотрите, как будет выглядеть ваш дневник с новым дизайном, нажав на ссылку "примерить",
4. если результат вас устраивает, то вы можете:
4.1. или скопировать дизайн в вашу библиотеку оформлений, чтобы установить его позднее, - нажмите на ссылку "сохранить в библиотеку оформлений",
4.2. или сразу установить дизайн (в вашу библиотеку оформлений он скопируется автоматически) - нажмите на ссылку "установить".

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

02:29 

Объявления

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



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

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

@темы: 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, Оформление дневника, Платные сервисы

09:37 

Объединенные ячейки в таблицах

Shendary
- За мной пришел чертов жнец! - Чертовы жнецы приходят за всеми, Бобби.
Задаются с помощью двух параметров:
COLSPAN - определяет число столбцов, объединяемых одной ячейкой,
ROWSPAN - определяет число строк, объединяемых одной ячейкой.

читать дальше

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

17:33 

Альтернатива MORE

D Ash
Embrace your dreams and prove your honor...
Достаточно давно уже обещал сделать эту штуку. Наконец добрался.

Итак, идея в том, чтобы сделать аналог MORE, которые оставался бы свёрнутым при просмотре одиночного поста (комментариев). Для реализации (этим путём, во всяком случае) нужен платный сервис CSS и (желательно) базовое (даже если самое поверхностное) знание самого CSS.

Объяснение того, как работает. Для тех, кто хочет понять.

Готовый код и инструкции к применению.

Пример 1. "Предисловие" и "первая глава".
Пример 2. Любой пост дневника.

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

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, Горячие клавиши, Оформление дневника

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, Дневник, Оформление дневника, Платные сервисы

11:36 

Embedding #2

D Ash
Embrace your dreams and prove your honor...
Существенное упрощение идеи, предложенной здесь. Написал вариант флэшки, в которую можно передавать адрес страницы, которую необходимо загрузить. Итак, если вы хотите встроить какую-либо страницу в пост дайри, используйте следующий код:


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="yourWIDTH" height="yourHEIGHT"> <param name="movie" value="http://dl.dropbox.com/u/10130237/flashRedirect.swf" ></param> <param name="wmode" value="transparent"></param> <param name="flashvars" value="pageHref=yourPAGE"> <embed src="http://dl.dropbox.com/u/10130237/flashRedirect.swf" type="application/x-shockwave-flash" wmode="transparent" width="yourWIDTH" height="yourHEIGHT" AllowScriptAccess="never" flashvars="pageHref=yourPAGE"></embed> </object>


В коде yourWIDTH замените на желаемую ширину блока, yourHEIGHT на высоту и yourPAGE непосредственно на ссылку на страницу. Ссылка должна быть валидной.

Внимание! Перед тем, как вставлять ссылку, убедитесь, что она валидная. Идеально - воспользуйтесь методом, указанном здесь. Закиньте вашу ссылку в поиск и возьмите в полученном запросе всё, что после ?q=. Вот это значение и вставляйте.

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

13:55 

Embedding

D Ash
Embrace your dreams and prove your honor...
Нашёл способ вкладывать в посты не только флэшки, но и непосредственно страницы. Скажем, можно в эпиграф встроить Google Translate или ленту избранного. Или форму добавления новой записи. Или какую-нибудь свою страницу. Что угодно, в общем.




Итак, начнём. Во-первых - это не совсем просто. Нет, не сложно, но нужно какое-то время, чтобы разобраться, особенно если с кодингом вы не знакомы. Во-вторых. Что потребуется. А потребуется Flash. Подойдёт и какая-нибудь старая версия (скажем, Flash MX2004), но даже оно весит 60 mb, а это надо качать, устанавливать и т.п., чем заниматься захочет далеко не каждый, разумеется. Стоит ли оно потраченных времени и сил? Вам решать. А я просто подробно распишу, что и как делать.

  1. Установите Dropbox, зарегестрируйтесь в системе. Почему именно Dropbox? Потому, что он даёт прямые ссылки на файлы. К тому же, очень удобный и не нервирует рекламой.

  2. Если хотите вложить какой-то свой файл (html страницу), скопируйте его в My Documents\My Dropbox\Public (или в другую дирректорию, если вы меняли настройки), подождите, пока он закачается, нажмите на него правой клавишей и выберите Dropbox -> Copy Public Link.

  3. Установите Flash. Как я и сказал, подойдёт почти любая версия. Почти - т.к. не тестил с более ранними, чем MX2004 (т.е. со студиями, где использовался старый ActionScript 1.0 (в сравнении с AS2 и AS3 в последующих)), возможно, там чуть-чуть другой синтаксис (хотя, насколько я помню, нужный нам оператор тот же). Но от флэша нам понадобится всего одна строка кода, так что и это не суть важно. Этот пример создан в Adobe Flash CS4.

  4. Создайте новый документ типа Flash Document (если у вас поздняя версяя студии (с поддержкой AS3), выберите Flash File (ActionScript 2.0), нам его вполне хватит).

  5. Откройте окно Modify -> Document, измените значения в полях Dimensions на 1 px - визуальная составляющая нам не понадобится.

  6. Откройте окно Window -> Actions, выберите Layer 1 : Frame 1 в меню слева.

  7. В правой части окна впишите:
    getURL('http://www.google.com/','_self');

    Вместо ссылки на гугл здесь должна быть страница, которую вы хотите вложить. Если это предварительно закинутый на Dropbox файл - вставьте ссылку на него (как её получить описано в пункте 2). Важно! Ссылка должна быть полной, т.е. начинаться с http://.

  8. Закройте Actions, выберите File -> Export -> Export Movie, сохраните полученную флэшку в My Documents\My Dropbox\Public (или в другую дирректорию, если вы меняли настройки). Если при сохранении программа предложит какие-то вариации, можете оставить всё по умолчанию и проследовать далее. После сохранения, подождите, пока файл закачается на сервер, нажмите на него правой клавишей и выберите Dropbox -> Copy Public Link. Откройте блокнот и вставьте ссылку туда, чтобы не потерять.

  9. Теперь можете переходить непосредственно к редактированию поста. Вставьте следующий код:

    <div align="center">
      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="YourWidth" height="YourHeight">
        <param name="movie" value="YourSwf" ></param>
        <param name="wmode" value="transparent"></param><param name="allowScriptAccess" value="never">
        <embed src="YourSwf" type="application/x-shockwave-flash" wmode="transparent" width="YourWidth" height="YourHeight" AllowScriptAccess="never"></embed>
      </object>
    </div>

  10. Замените оба YourWidth на желаемую ширину окна, оба YourHeight на желаемую высоту окна и оба YourSwf на ссылку, которую вы сохранили в пункте 8.

  11. Можете наслаждаться результатом. ^_^
    А пример, который делал я, чуть ниже.



запись создана: 11.02.2011 в 08:54

Вопрос: Мануал писать?
1. Да. 
314  (96.62%)
2. Нет. 
11  (3.38%)
Всего: 325

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

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, Редактирование записи, Теги оформления записи, Эпиграф

23:13 

Diary+Chrome

loiso_
жизнь - замечательна и удивительна, до тех пор - пока тебя не заметят и не удивят.
15:02 

Напоминалка

ArLe
Арлоло, админота,
администратор
и админотавр
20:18 

Просмотр дневников в другом дизайне для Mozilla Firefox и Google Chrome

Не говорите так быстро, я не успеваю класть х*р на ваши слова.
В Мозилле и Хроме имеется возможность загрузить внешний стиль и просматривать дневники в нем (на случай, если вы не любите красные буквы на черном фоне). При включении данного стиля фон становится белым, а шрифт - черным.


Для Мозиллы.
Идем сюда и устанавливаем Stylish. В нижнем правом углу появится изображение буквы S. Заходим на дайри, жмем на S правой кнопкой мыши - Найти стили для текущего сайта. Браузер перенаправит на страницу со стилями для Diary.ru, выбираем "Diary.ru - Simple Design" - жмем Install with Stylish - Сохранить. Стиль появится в списке. Управлять стилем просто: правой кнопкой на S и ставите/снимаете галку с названия стиля, либо Вид - Стиль страницы.

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

font-family:Times New Roman - шрифт. Любители гладких шрифтов могут поставить Tahoma или Arial, например.
font-style: normal - стиль шрифта, нормальный. Чтобы поставить курсив, нужно заменить normal на italic.
font-size: 15px - размер шрифта. Можно уменьшить или увеличить.
font-weight: normal - ширина шрифта. Чтобы установить полужирный, меняем normal на bold.
background-color:#FFFFFF - цвет фона, по умолчанию белый. Можно поменять на тот, который нравится вам. Код цвета можно выяснить в фотошопе или тут.
color:#000000 - цвет шрифта, черный. Можно поменять на тот, который вам по вкусу.
a, .linkssection .postLinks a{color:#793939 !important;} - цвет ссылок, также можно изменить.

Если у кого-то из ваших избранных нечитабельный дизайн, можно сделать стиль конкретно для его странички. Правой кнопкой - Создать новый стиль - Для текущего URL. Вводим название стиля, теперь опять идем на страничку со стилями, жмем Show code, копируем все, что между верхней и нижней фигурной скобкой (начиная с body {...}) и вставляем в свой стиль. Правда, если зайти в комментарии, то URL изменится, и дизайн будет авторский.

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

Для Хрома Stylish можно скачать здесь. Затем идите на userstyles.org/styles/browse/all/http:%2F%2Fwww.... Отредактировать диз можно следующим образом: Инструменты - Расширения - Настройки - Edit - стиль открывается для редактирования.

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

14:00 

Поиск по блогу

Поиск по Вашему сообществу:
Поиск по сообществу
Яндекс

Хотите себе в блог подобный поиск, читайте пост Поиск по блогу от Яндекс

@темы: Архив, Оформление дневника, Поиск Яндекса по блогам, Полезные сторонние сервисы

17:23 

по пунктам

.Sweeten hurt.
all you have to decide is what to do with the time that is given to you
Как устанавливать новый дизайн для своего дневника.
в картинках. для самых новеньких :)
если возникли вопросы, пишите.

1. заходим в настройки.
Второй столбец. Нас интересуют 2 пункта. Эпиграф, фото. и Дизайн дневника

читать дальше

Если возникли проблемы с отображением - загляните сюда

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

19:08 

Шрифт

мои губы пахнут шоколадом.
Вопрос: Никто не в курсе, на дайри еще не придумали чудодейственный способ добавить какой-нибудь другой шрифт к стандартным?
Вроде такого???

Ответ: шрифт можно добавить, прописав соответствующие параметры при помощи (платного сервиса) CSS или непосредственно в каждой записи следующим кодом:


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


пожалуйста, в дальнейшем все вопросы задавайте в техподдержке


Содержание поста было отредактировано, чтобы соответствовать формату сообщества.

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

12:08 

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

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

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


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

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

12:02 

Если меню вдруг оказалось внизу страницы

Караидель
администратор
Спорящая с богом
С этой проблемой справится несложно. Перейдите на вторую страницу дневника. URL в строке адреса примет примерно такой вид: diary.ru/~shortname/?from=20 с вашим коротким именем. Обратите внимание, что на этой странице меню должно быть на месте. Теперь начинаем уменьшать цифру 20, каждый раз нажимая Enter, чтобы загрузить соответствующую страницу. Как только меню опять упало вниз, остановитесь - верхняя запись на этой странице и будет причиной проблемы. Откройте её на редактирование и перейдите в режим HTML, ищите одну из следующих проблем:
1. незакрытый тег
2. перекрёстное закрытие тегов (что-то вроде <b><i>текст</b></i>)
3. Использование угловых скобок (> и <) вне тегов.
Если проблема не нашлась в самой записи, посмотрите на содержимое полей @музыка и @настроение, ошибка может быть там. Промотайте их содержимое до конца - длина этих полей ограничена и конец вставленного туда текста мог обрезаться вместе с закрывающими тегами.

Исправьте проблему и сохраните запись.

Проблемы с "вдруг всё стало жирным/курсивом/серо-буро-малиновым" решаются точно так же.

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

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

главная