Автоматическая подстановка иконки типа скачиваемого файла

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем doctorgrif, 13.09.2008.

  1. doctorgrif
    Offline

    doctorgrif Местный => Cпециалист <=

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    Иногда бывает, что на сайте надо размещать некое количество файлов, открытых для скачивания.
    Можно поставить стандартные расширения для каталогов файлов, но это имеет смысл при количестве файлов больше n, где n - число, устанавливаемое каждым для себя самостоятельно.
    Можно пойти более простым путем и воспользоваться папкой для upload-а
    Будут просто ссылки на файлы и только, но это не сильно красиво и это не наш метод
    Можно немного доработать css и "заставить" jooml-у подрисовывать иконки типов скачиваемых файлов
    потребуется основной файл css и блокнот, ну и на ваш выбр накачайте/нарисуйте иконки для файлов.
    механизм доработки:
    добавляем в стильевой файл (template_css.css) следущее-
    Код (CODE):
    1. a[href $='.doc'] {  
    2.    padding-right: 18px;  //можно самим тут поиграть
    3.    background: transparent url(путь до папки с картинками для типов файлов/doc.gif) no-repeat center right;  
    4. }

    пояснения:
    В данном случае любму тегу имеющему атрибут href заканчивающийся на .doc будет применен данный стиль.
    Знак доллара ($) перед знаком говорит о том, что совпадения с написанным в ='.*' ищутся с конца строки.
    Отступ справа на 18 пикселей и наложением фона (иконки) с выравниванием в правом по горизонтали и по центру по вертикали.
    аналогично добавляем для других типов файлов, не забывая называть иконки для расширений их именами:)
    Желающим можно данное действо провернуть и для адреса электронной почты
    Код (CODE):
    1. a[href ^="mailto:"] {  
    2.    padding-right: 20px;  
    3.    background: transparent url(iпуть до папки с картинками для типов файлов/mail.gif) no-repeat center right;  
    4. }

    пояснения:
    ^ - говорит о том, что совпадения ищутся в начале строки

    вот.

    P.S. Тестировано в условиях домашнего ПК ( Denwer ) и joostina 1.1.4
     
    Fanamura нравится это.
  2.  
  3. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 094
    Симпатии:
    158
    Пол:
    Мужской
    Cool :) Весьма полезно :)
     

Поделиться этой страницей

Загрузка...