Справка: стиль пользователя

Эту справочную страницу Википедии необходимо обновить . Обновите эту справочную страницу Википедии, чтобы отразить недавние события или новую доступную информацию. Соответствующее обсуждение можно найти на странице обсуждения .

Пользователь может настроить шрифты, цвета, положение ссылок на полях и многое другое! Это делается с помощью настраиваемых каскадных таблиц стилей, хранящихся на подстраницах страницы пользователя «Пользователь».

Например, чтобы создать собственные модификации CSS для используемого вами скина , создайте страницу в Special: MyPage / skin.css, содержащую CSS, который вы хотите использовать (чтобы применить ваши изменения независимо от того, какой скин вы используете, поместите их в Special: MyPage / common.css вместо этого). О том, как скрыть определенные сообщения, см. WP: CSSHIDE .

Общие [ править ]

Для каждого пользователя Определяемого стиля, кожа сначала выбираемся, наряду с соответствующими каскадными таблицами стилей (CSS). Для каждого скина пользователь может выбирать различные шрифты, цвета, позиции ссылок на полях и т. Д. CSS указывается со ссылкой на селекторы [1] : элементы HTML , классы и идентификаторы, указанные в коде HTML. Соответственно, каковы возможности для каждой оболочки, можно увидеть, посмотрев на исходный HTML-код страницы, в частности, посмотрев на эти классы и идентификаторы: чем их больше, тем больше универсальность.

В самом программном обеспечении MediaWiki есть CSS, и Википедия отменяет это, используя следующие страницы:

• Одеколонный синий - MediaWiki: Cologneblue.css
• Современный - MediaWiki: Modern.css
• Монокнига - MediaWiki: Monobook.css
• Вектор - MediaWiki: Vector.css

CSS для всего сайта находится в MediaWiki: Common.css

Вы можете переопределить их для себя, используя пользовательские стили. Чтобы внести изменения, которые применяются независимо от вашего текущего скина, измените свой common.css . Чтобы внести изменения, которые повлияют на ваш текущий скин, измените свой skin.css . Чтобы внести изменения, которые повлияют на все проекты Викимедиа, вы можете войти в Meta и изменить свой global.css .

Введите CSS на эту страницу. Предварительный просмотр CSS работает особым образом: он позволяет просматривать поля страницы (а не содержимое) на основе информации о стиле на странице, при условии, что используемый скин - это скин, для которого применяется страница. Это имеет ограничения. Например, можно предварительно просмотреть, как будут выглядеть ссылки на полях, но это могут быть не все типы, которые хотелось бы проверить. После сохранения, находясь на странице или на любой другой странице, выполните принудительную перезагрузку (shift-reload / ctrl-f5), чтобы получить новые файлы.

Чтобы импортировать CSS с подстраницы пользователя, используйте mw.loader.loadкоманду в вашем common.js :

 мв . погрузчик . load (  '/w/index.php?title=User:Example/stylesheet.css&action=raw&ctype=text/css' ,  'text / css'  );

Рендеринг [ править ]

Исходный код страницы HTML содержит такие строки, как

 < script  src = "/w/wiki.phtml?title=User:your-username-here/standard.js&action=raw&ctype=text/javascript" >  </ script > @import "/style/wikistandard.css"; @import "/w/wiki.phtml?title=User:your-username-here/standard.css & action = raw & ctype = text / css";

для CSS всего проекта для конкретного скина (в данном случае здесь, в Википедии, имеется ссылка на //en.wikipedia.org/style/wikistandard.css) и личного JS и CSS для конкретного скина.

Таким образом, сервер предоставляет HTML-код, относящийся к файлам CSS и JS, но не выполняет никакой интерпретации их содержимого. Интерпретация выполняется браузером в зависимости от его возможностей и настроек.

CSS [ править ]

CSS на подстраницах пользователя по сравнению с CSS в локальном файле [ править ]

В дополнение к вышесказанному или в качестве альтернативы в браузере можно установить локальный CSS. Если один из них использует несколько браузеров, для каждого может быть установлен другой CSS. Каждый применим ко всей всемирной паутине, а не только к проекту MediaWiki (и не зависит от входа в систему). Однако параметр влияет на другие веб-страницы, только если они используют тот же селектор CSS; например, настройка селектора a.extiw влияет на меньшее количество страниц в Интернете, чем одна для h2 (но это влияет, по крайней мере, на все проекты MediaWiki, а не только на один).

Очевидно, что для строк CSS, которые должны отличаться в разных проектах MediaWiki, например, для разного цвета фона для облегчения различения, локальный CSS не может использоваться; по крайней мере, эти строки должны быть помещены на подстраницы пользователя.

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

Если в браузере задана опция игнорирования размера шрифта, указанного на веб-странице или во внешнем CSS, строки CSS, касающиеся размера шрифта, должны быть помещены в локальный CSS.

Селекторы CSS [ править ]

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

• :link - ссылки - пример: Справка: Указатель  ; по умолчанию: помощь: индекс (см В.С.: ссылка )
• :link:link
• :link:visited
• :link#contentTop
• :link.external - http: // example  ; по умолчанию: http: // example
• :link.extiw - интервики-ссылка в теле страницы -; по умолчанию: en: example
• :link.image - ссылка с полного изображения на страницу описания изображения
• :link.internal - ссылка на сам файл (Медиа :), а также ссылки из миниатюры и значка увеличительного стекла на страницу описания изображения (обратите внимание, что цвет и размер шрифта, указанные для внутреннего файла, применимы только в первом случае)
• :link.new пример  ; по умолчанию: пример
• .allpagesredirect- abc - перенаправляет в Special: Allpages и Special: Prefixindex
• body.ns-0, ..., (пространства имен)body.ns-15
• div#bodyContent
• div#column-content
• div#editsection
• div#globalWrapper
• div#tocindent
• div.tocline
• h1.firstHeading
• h2
• h3
• img.tex Образ TeX
• small- пример
• table.toc

avs:link - Распространенная ошибка - использовать " a" вместо " " для стилизации ссылок. В то время как " " применяется только к ссылкам, " " применяется как к ссылкам, так и к именованным якорям (например ).:link:linka<a name="bookmark">

Обычные внутренние ссылки не относятся к классу internal(они были и остаются на сайтах, использующих более старую версию программного обеспечения, например [2] ); они могут быть стилизованы со ссылкой и , в общем, после чего стили и т. д. могут предусматривать исключения из этого общего стиля для ссылок.:link:link:visited:link.extiw

Для межъязыковых ссылок:

• {{code | lang = css | code = # p-lang a}}

Также может быть, что стиль зависит от значения атрибута, например, с помощью селекторов:

• :link[title ="User:username"]
• :link[title ="pagename"]
• :link[href ="full url "]

для выделения цветом или выделения определенных пользователей (включая себя) и / или ссылок на определенные страницы (например, выделение жирным шрифтом просматриваемых страниц в разделе «Последние изменения»). Это работает в Opera, но не в IE. См. Также Help: Watching pages # CSS .

Список наблюдения и Последние изменения используют два класса:

• autocomment
  пример
• new (см. ниже)

В истории страницы есть классы autocommentи:

• user
• minor

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

Редактировать страницу [ править ]

• Поле редактирования: textarea#wpTextbox1

• Поле редактирования сводки: input#wpSummary

Блоки основных стилей [ править ]

См. Meta: Customization: Explaining_skins

Не отображать [ править ]

Один крайний «стиль» для текста - его не отображать, с

. имя класса {display: none}# id {display: none}

и т.п.

Неотображаемые ссылки не работают (в отличие от ссылок, написанных очень мелким шрифтом).

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

Стиль в зависимости от параметра или переменной [ править ]

Класс или идентификатор переменной [ править ]

Класс или идентификатор могут зависеть от результата, созданного шаблоном, или от параметра шаблона, например class="abcdef". Для одного или нескольких возможных имен классов можно определить стиль этого класса. Если класс не определен, он игнорируется, поэтому используется стандартный стиль.

В простейшем случае у нас есть, например, class="abc{{{1}}}"и определение класса abcdef. Если значение параметра равно «def», оно применяется.

Если страница для общего использования имеет смысл только тогда, когда стили определены для определенных классов, тогда они должны быть указаны на странице MediaWiki: Common.css , которая применяется ко всем пользователям и всем скинам , если не отменяется.

Имя переменной HTML-атрибута [ править ]

Имя атрибута HTML можно сделать переменным. HTML Tidy - устаревшая библиотека HTML4, которую планируется удалить - исторически удаляла атрибуты с недопустимыми именами на стороне сервера, поэтому результат не зависит от способности браузера игнорировать недопустимые имена атрибутов, а объем отправляемых данных сокращается. Для переменной с возможным значением «класс» см. Wikipedia: HiddenStructure и en: Template: Infobox  ( редактирование обратных ссылок ) .

Значение параметра переменного стиля [ править ]

Викитекст нравится

< span  style = "display: {{{3 | none}}}" > ср </ span >

отображает «ср», если параметр 3 определен, но не «нет», и ничего не отображает, если параметр 3 не определен или «нет». Если значение параметра 3 - это стиль отображения, отличный от «none», применяется этот стиль.

Образцы [ править ]

Пользовательские стили могут быть помещены в личные файлы CSS каждого пользователя, такие как Special: MyPage / common.css , которые каждый пользователь может редактировать для установки личных стилей.

/ * сделать фон за областью содержимого и вкладками светло-серым * / # content ,  # content  table # p-cactions  ul  li  a  {  background :  # f5f5f5 ;  }/ * остановить прокрутку фонового изображения вместе с областью содержимого * / body  {  background-attachment :  fixed ;  }/ * заменяем книгу на заднем плане чем-нибудь другим * / body  {  background :  Purple ;  }/ * изменяет фон предварительных областей * / pre  {  background :  White  }/ * изменить логотип * / # p-logo  a  {  background :  url ( https://upload.wikimedia.org/wikipedia/commons/9/93/Color-chars-logo.png )  35 %  50 %  без повтора ;  }/ * не используйте логотип, вместо этого переместите поля в эту область * / # p-logo  {  display :  none  } # column-one  {  padding-top :  0 ;  }/ * подавление значка человека вашим именем пользователя * / li # pt-userpage  {  background :  none  }/ * Использование браузера префы для размера текста и шрифта * / HTML ,  тело ,  # globalWrapper  {  шрифта :  наследовать  ! Важно ;  }/ * всегда подчеркивать ссылки * / : link  {  text-decoration :  underline ;  }/ * Отображение основного содержимого в более узком столбце для облегчения чтения * / / * регулировка процентов по желанию * / div # bodyContent  {  width :  50 % ;  высота строки :  105 % ; }/ * изменить фон невыбранных вкладок * / # p-cactions  ul  li  a  {  background :  # C7FDC7 ;  }/ * изменить фон выбранных вкладок * / # p-cactions  ul  li . выбран  в  {  фон :  белый ;  }/ * изменить фон границы выбранных вкладок * / # p-cactions  li . выбран  {  цвет границы :  #aaaaaa ;  }/ * нижняя часть табуляции не удаляется при наведении * / # p-cactions  li  a : hover  {  z-index :  0 ;  текстовое оформление :  нет ;  } # p-cactions  li . выбрал  a : hover  {  z-index :  3 ;  }/ * стиль окна поиска и кнопок под ним * / . searchButton  {  цвет фона :  #efefef ;  граница :  начало 1 пиксель ; } # SearchInput { граница : 1 ПВ врезки ; }      / * стандартные цвета ссылок * / a : link  {  color :  # 0645ad ;  } a : посетил  {  color :  # 0b0080 ;  } а . новое : ссылка  {  цвет :  # cc2200 ;  } а . новое : посетил  {  color :  # a55858 ;  } а . extiw : ссылка  {  цвет :  # 3366bb ;  } / * ссылки на другие Википедии * / a . extiw : посетил  {  color :  # 3366bb ;  } а . внешний : ссылка  {  цвет :  # 3366bb ;  }  / * внешние ссылки * / a . внешний : посетил  {  color :  # 3366bb ;  }/ * помещаем полосу прокрутки в предварительные разделы вместо уродливой обрезки / перекрытия в Firefox * / pre  {  overflow :  auto ;  }/ * зачеркнута ссылка на файл «Загрузить файл» как напоминание о загрузке в Commons * / li # t-upload  {  text-decoration :  line-through ;  }/ * center / center заголовок каждой страницы * / . firstHeading  {  выравнивание текста :  центр ;  }/ * Предупреждение о двойном перенаправлении * / div . redirectMsg  a . mw-redirect : после  {  content :  '& lt; double redirect & gt;' ;  цвет :  красный ;  стиль шрифта :  курсив ; }/ * Запретить в новом CSS в «Обновление типографики» (с начала 2014 г.) отображать заголовки и заголовки страниц шрифтом с засечками * / h1 ,  h2  {  font-family :  inherit  ! Important ;  }/ * Отображение полей персональных данных в статьях * / table . persondata  {  display : table ;  }/ * Избавьтесь от утомительного предупреждения * / # editpage-copywarn ,  # editpage-copywarn2 ,  # editpage-copywarn3 , # editpage-голова copywarn ,  . editpage-голова copywarn , # editnotice_BLP_editintro ,  . ve-ui-mwSaveDialog-лицензия {  отображение :  нет  ! важно ;  }/ * Избавьтесь от утомительного нуба шаблонного * / # категории-пространство имен editnotice ,  # колонтитула-инфо-авторского права ,  # sitesub ,  . edithelp , . posteditwindowhelplinks ,  # футер-иконки ,  . ve-ui-mwSaveDialog-summaryLabel {  дисплей :  нет  ! важно ;  }/ * Экономия места в списке шаблонов отображаются в конце страницы при редактировании * / : templatesUsed  уль ,  : templatesUsed  Ли  { дисплей :  встроенный ;  padding-right :  5 пикселей ;}/ * Измените весь текст на шрифт «Avenir» (кроме заголовков) (вы можете изменить шрифт на любой другой) * / . мвт тела  h1 ,  . mw-body  h2  {  font-family :  "Avenir" }

Закругленные углы [ править ]

/ * скругляем несколько углов * / # p-cactions  ul  li ,  # p-cactions  ul  li  a  {  border-top-left-radius :  1 em ;  границы верхнего правого радиуса :  1 эм ; } # content  {  border-top-left-radius :  1 em ;  границы снизу слева радиус :  1 ЕМ ; } . pBody  {  границы верхнего правого радиуса :  1 эм ;  граница-нижний-правый-радиус : 1 эм ; }

Ссылки на закругленные углы / вкладки [ править ]

• Moz: см. Правила выше
• http://www.vertexwerks.com/tests/sidebox/ - форматирование сайдбокса
• http://www.alistapart.com/articles/slidingdoors2/ - закругленные вкладки с эффектом опрокидывания
• http://www.alistapart.com/articles/customcorners/ - еще один вариант закругленных углов коробки.
• http://alistapart.com/articles/customcorners2/ , демонстрация этого
• http://www.alistapart.com/articles/mountaintop/ - даже более странные варианты углов
• http://www.virtuelvis.com/gallery/css/ounded/ - простой вариант вольного стиля с использованием псевдоэлементов: before и: after (только браузеры css2, не в IE)

Настройки режима печати [ править ]

/ * ** Поместите все правила печати в блок печати @media. * // * экономия чернил и бумаги с очень мелким шрифтом * / @ media  print  {  # footer ,  # content ,  body  {  font-size :  8 pt  ! important ;  }  h1  {  font-size :  17 pt  }  h2  {  font-size :  14 pt  }  h3  {  font-size :  11 pt  }  h4  {  font-size :  9 pt  }  h5  {  font-size:  8 пт  }  h6  {  размер шрифта :  8 пт ;  шрифт :  нормальный ;  } }/ * Дополнительные возможности: использование: before и: after можно добавить форматирование, здесь добавляется полный href ссылки после нее (не требуется в текущей версии): * / @ media  print  {  # content  a : link : after ,  # содержание  a : посещено : после  {  содержания :  "("  attr ( href )  ")" ;  } }

Сделайте панель инструментов пользователя боковой [ править ]

Протестировано для работы в Camino, Safari и Internet Explorer 7.

/ * Преобразование пользовательской панели инструментов в боковую панель * / # p-personal  {  position : relative ;  z-индекс : 3 ;  ширина :  11,6 ет ; }# п-личный  . pBody  {  ширина :  10,7 ем ;  граница :  нет ;  Маржа :  0  0  0,1 эм  0 эм ;  float :  нет ;  переполнение :  скрыто ;  размер шрифта :  95 % ;  фон :  белый ;  граница-коллапс :  коллапс ;  граница :  1 точек  твердого  #aaaaaa ;  набивка:  0  0,8 ет  0,3 ет  0,5 ем ; }# Р-персональной  уль  {  высота строки :  1,5 ест ;  тип-стиль-список :  квадрат ;  изображение в стиле списка :  URL ( "/style/monobook/bullet.gif" ); размер шрифта : 95 % ;  Маржа :  0  0  0  1,5 эм ;  отступ : 0 ;  выравнивание текста : слева ;  текстовое преобразование :  нет ; }# p-personal  li  {  дисплей :  список-элемент ;  отступ : 0 ;  маржа :  0  0  0  0 ;  край дно :  0,1 ест ; }/ * подавление значка человека вашим именем пользователя * / / * необходимо, если оно еще не установлено * / li # pt-userpage  {  background :  none  }

См. Monobook main.css для получения полной информации о стилях, используемых по умолчанию.

Исправьте положение боковой панели при прокрутке [ редактировать ]

В скине Vector по умолчанию положение боковой панели можно легко исправить:

/ * Исправить боковую панель * / div # mw-panel  {  position :  fixed ;  перелив :  авто ;  верх :  0 пикселей ;  внизу :  0 пикселей ;  высота :  100 % ;  / * Предотвращение наложения содержимого при боковой прокрутке * /  background-color :  # F6F6F6 ;  границы прямо :  1 ПВ  твердый  # A7D7F9 ; } / * Предотвращение боковой прокрутки в элементах pre * / pre  {  overflow : авто ;  Макс высота :  25 эм ; }

Это может иметь нежелательные побочные эффекты в Chrome; например, при просмотре страницы, подобной странице очень common.css, которую вы только что отредактировали, чтобы вставить этот код, видимое содержимое станет намного короче и потребует вертикальной прокрутки во фрейме.

В обложке Cologne Blue есть опция для «плавающей левой» панели быстрого доступа, которая заставляет навигационные ссылки, панели инструментов и тому подобное оставаться на одном и том же месте на экране во время прокрутки. Это обеспечивает те же функции, что и скин Monobook (в Mozilla). См. Мета: Справка: Пользовательский стиль / плавающая панель быстрого доступа .

Меню монокниги со шрифтами с засечками в области содержимого [ править ]

Быстрая и грязная комбинация меню Monobook со шрифтами с засечками в текстовой области находится в User: Tillwe / monobook.css (в первой части). Также более-менее корректно отображает табличные вещи. Есть некоторые причуды и ошибки (некоторые из-за того, что схема CSS Википедии не кажется слишком продуманной). Работает на Netscape7 / Win98 для автора.

Перемещение ссылок на категории [ править ]

/ *********************************************** ***************** / / * перемещение ссылок вправо * / / ********************** ******************************************************************************************************************************************/ * перемещаем поле ссылок на ссылки * / # ссылки на ссылки  {  position : absolute ;  z-индекс : 1 ;  граница :  1 точек  твердого  #aaaaaa ;  фон :  #fafaff ;  право : 1 эм ;  верх : -0,25 эм ;  ширина : 10,5 ет ;  float : right ;  Маржа :  0,2 эм ;  обивка : 0,2 эм ;}/ * форматируем сами ссылки * / p . catlinks  {  цвет :  #aaaaaa ;  семейство шрифтов :  Verdana , без засечек ;  размер шрифта : 67 % ;  высота линии :  1,5 эм ;  выравнивание текста : слева ;  текстовый отступ : 0 ;  текстовое преобразование :  нет ;  пробел : нормальный ;  Маржа :  0,2 эм ; }# p-personal  h5  {  display :  inline ; }/ * форматирование ссылок в катлинках (в отличие от ":" и "|") * / p . catlinks  a  {  color : # 888888 ; }

Стиль представления различий [ править ]

/ * не используйте шрифт меньшего размера * / td . diff-addline ,  тд . diff-deletedline ,  тд . diff-context  {  размер шрифта :  100 %  } ;/ * подчеркиваем только другой текст * / span . diffchange  {  украшение текста : подчеркивание ;  }

Удаление кнопки "(поблагодарить)" в журнале истории [ править ]

/ * Подавить кнопки "(поблагодарить)" * / . мв-спасибо-спасибо-ссылка  {  дисплей : нет ;  }

Скрытие длинных сообщений с инструкциями [ править ]

/ * скрыть аннотацию View-Source при редактировании защищенной страницы * / # mw-protectedpagetext  {  display :  none ;  }

Как и в случае с другими стилями CSS выше, отредактируйте Special: MyPage / skin.css или Special: MyPage / common.css, чтобы вставить настроенный CSS, а затем обновите кеш браузера.

Инфобоксы и пользовательский стиль

Пользователи могут иметь пользовательский CSS, который скрывает любые информационные поля в их собственных браузерах.

Чтобы скрыть все информационные окна, добавьте следующее в Special: MyPage / common.css (для всех скинов или Special: MyPage / skin.css только для текущего скина) в отдельной строке:

. инфобокс  {  дисплей :  нет ;  }

В качестве альтернативы вы можете добавить следующий код в свой common.js или в пользовательский скрипт браузера, который выполняется таким расширением, как Greasemonkey :

$ ( '.infobox' ). скрыть ();

Имейте в виду, что, хотя, согласно WP: Руководство по стилям / информационным блокам , вся информация в информационном блоке в идеале также должна быть найдена в основной части статьи, это руководство не полностью соответствует этому руководству. Например, полная таксономическая иерархия , а также коды OMIM и других медицинских баз данных часто не встречаются в основном содержании статьи. Информационное окно также часто является местом расположения наиболее значимого, даже единственного изображения в статье.{{Taxobox}}{{Infobox disease}}

Пользовательский CSS для моноширинного шрифта кодирования [ править ]

Вы можете последовательно использовать моноширинный шрифт с хорошо продуманными символами для кодирования (например, четко различать между l, 1и I, между Oи 0, и между ними -, −, –и —).

Добавьте что-то вроде одного из приведенных ниже фрагментов кода в свой Special: MyPage / common.cssстраницу, заменив его "Roboto Mono"любым предпочитаемым шрифтом кодирования ( в этом примере в качестве свободно доступного шрифта для кодирования был выбран Roboto Mono ).

Если вы не хотите вручную добавлять этот код на свою страницу CSS, а предпочитаете @import(включать) его, см. Быстрые инструкции в meta: User: SMcCandlish / codefont.css .

Этот код будет делать следующее:

• Примените согласованный моноширинный шрифт по вашему выбору (и резервный системный шрифт по умолчанию моноширинный, если этот шрифт отсутствует или в нем отсутствуют нужные символы) для всех обычно моноширинных элементов HTML, таких как <code>, <pre>и т. д.
• Сделайте то же самое для классов, используемых и других моноширинных шаблонов в семействе.{{mxt}}{{xt}}
• Сделайте то же самое для дополнительных классов на уровне сайта (например, определенных до сих пор .monospaced), которые выводятся как моноширинные.
• Сделайте так, чтобы три наиболее часто встречающихся поля редактирования также использовали этот стек шрифтов: главное окно редактирования, итоговую строку редактирования и поле ввода поиска.

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

Горизонтальный стиль

/ * Используйте свой шрифт, если таковой имеется, для кода * / код ,  предварительно ,  SAMP ,  KBD ,  TT ,  . Пример-моно ,  . userlinks-имя пользователя ,  . моноширинный ,  . клавиатура ключ ,  . Кнопка ,  . plaincode  {  font-family :  "Roboto Mono" ,  моноширинный  ! важно ;  } / * Сделать некоторые редактируемые материалы моноширинными * / # wpTextbox1 ,  # wpSummary ,  #searchInput ,  # searchText  {  font-family :  "Roboto Mono" ,  моноширинный  ! important ;  }

Вертикальный стиль

/ * Используйте свой шрифт, если таковой имеется, для кода * / код , предварительно , SAMP , KBD , TT , . Пример-моно , . userlinks-имя пользователя , . моноширинный , . клавиатура ключ , . кнопка . plaincode  {  font-family :  "Roboto Mono" ,  моноширинный  ! важно ; } / * Сделать некоторые редактируемые материалы моноширинными * / # wpTextbox1 , # wpSummary , # searchInput, # searchText  {  font-family :  "Roboto Mono" ,  моноширинный  ! important ; }

Усилия по очистке

Если вы хотите помочь очистить экземпляры элемента, который не был действительным HTML с 1990-х годов и обычно должен быть заменен на (это может зависеть от контекста), вы можете добавить что-то вроде следующего в свой<tt>...</tt><code>...</code>common.cssзаставить торчать как больной палец:<tt>

/ * Пометить неверный код для очистки * / tt  {  color :  DarkRed ;  фон :  розовый ;  }

Вы также можете сделать это с <font>, <center>, <strike>и другими устаревшими элементами . Для CSS вы можете просто импортировать для этого, см . Meta: User: SMcCandlish / lint.css .

Внешние ссылки на CSS [ править ]

• http://www.22bulbjungle.com/ - отличные уроки по css
• http://www.csszengarden.com/ - вдохновение
• http://css-discuss.incutio.com/ - высококонцентрированная информация, очень полная
• http://www.alistapart.com/ - отличные статьи
• http://www.positioniseverything.net/ - развлекательные, например, ошибки и многое другое.
• http://meyerweb.com/eric/css/edge/ - отличные идеи для продвинутого css

JavaScript [ править ]

У JavaScript есть много возможностей, например, добавление текста, включая ссылки, в желаемых местах. Это добавленное содержимое может зависеть от содержимого исходной HTML-страницы, созданного сервером; например, это может зависеть от элементов HTML с идентификатором, применяя getElementById. Позиция вставки может быть указана с помощью insertBefore.

В качестве примера, чтобы добавить ссылку на страницу слева от ваших предпочтений, добавьте следующее в Special: Mypage / common.js , заменив PageTitle заголовком вики-страницы:

мв . Util . addPortletLink ( 'p-personal' ,  '/ wiki / PageTitle' ,  'PageTitle' ,  null ,  null ,  null ,  '# pt-preferences' );

Перемещение категорий наверх [ править ]

Следующий код перемещает поле категории в начало статьи. Конечно, вы можете применить CSS, чтобы он выглядел красивее:

функция  catsattop ()  {  var  cats  =  document . getElementById ( 'ссылки на ссылки' );  var  bc  =  документ . getElementById ( 'bodyContent' );  Ьс . insertBefore ( коты ,  bc . childNodes [ 0 ]); }

Альтернатива, которая в сочетании с соответствующей таблицей стилей помещает текст примерно на той же строке, что и заголовок:

функция  categoryToTop ()  {  var  thebody  =  document . getElementById ( 'contentTop' );  var  категории  =  документ . getElementById ( 'ссылки на ссылки' ); if  ( категории  ! =  null )  {  категории . parentNode . removeChild  ( категории );  тело . parentNode . insertBefore ( категории ,  тело );  } }

Немного CSS для этого ...

/ * перемещаем поле ссылок на ссылки * / # ссылки на ссылки  {  вправо : 1 em ;  верх : -0,25 эм ;  максимальная ширина :  50 % ;  / * это ограничивает размер бокса, но не устанавливает строго * /  float :  right ;  Маржа :  0,5 эм ;  обивка :  0,2 эм ; }/ * форматируем сами ссылки * / p . ссылки на ссылки  {  размер шрифта : 67 % ;  выравнивание текста : слева ;  текстовый отступ : 0 ;  текстовое преобразование :  нет ;  пробел : нормальный ;  Маржа :  0,2 эм ; }

К сожалению, если поле категории большое (например, в статьях о президентах США и других крупных фигурах), оно может отодвинуть информационное окно в сторону. Чтобы исправить это, в информационное окно можно добавить атрибут «clear: right».

CSS, управляемый Викитекстом [ править ]

CSS можно контролировать через JS с помощью wikitext. Например, элемент HTML "span" без содержимого может через свой класс и идентификатор предоставлять параметры для JS, определяющие CSS для любых частей страницы. Например, если страница содержит элемент «span» с классом FA и id lc , MediaWiki: Monobook.js определяет стиль и заголовок элементов «li» класса interwiki- lc , таким образом управляя стилем и заголовком межъязыковой ссылки. кода языка lc на полях, при условии, что скин определяет этот класс interwiki- lc (например, Cologne Blue указывает class = 'external' для каждого языка, поэтому он не работает для этого скина.)

Внешние ссылки на JS [ править ]

• http://www.quirksmode.org/ - см. раздел JavaScript и DOM.
• http://www.alistapart.com/
• http://www.quirksmode.org/dom/domform.html - клонирование формы (с его помощью можно загрузить сразу несколько изображений, что также является хорошей отправной точкой для клонирования структуры)

См. Также [ править ]

• Справка: каскадные таблицы стилей
• mw: Галерея пользовательских стилей
• Википедия: Пользовательские скрипты WikiProject
• mw: Кожаные проекты
• mw: Справка: Настройки , m: Справка: Настройки
• Каскадные таблицы стилей (статья в Википедии)
• m: Настройка: Объяснение скинов
• mw: Help: настройки конфигурации (особенно mw: Manual: $ wgAllowUserJs и mw: Manual: $ wgAllowUserCss )
• Википедия: Инструменты / Navigation_popups (всплывающие окна навигации JavaScript)
• Википедия: Каталог классов CSS