Пользователь может настраивать шрифты, цвета, положение ссылок на полях и многое другое! Это делается с помощью пользовательских каскадных таблиц стилей , хранящихся на подстраницах страницы пользователя "Пользователь".
Например, чтобы создать собственные модификации CSS для используемого вами скина , создайте страницу в Special:MyPage/skin.css, содержащую CSS, который вы хотите использовать (чтобы применить изменения независимо от используемого скина, поместите их в Special:MyPage/common.css ). О том, как скрыть определенные сообщения, см. WP:CSSHIDE .
Для каждого определяемого пользователем стиля сначала выбирается скин вместе с соответствующей каскадной таблицей стилей (CSS). Для каждого скина пользователь может сделать различные выборы относительно шрифтов, цветов, положения ссылок на полях и т. д. CSS указывается со ссылкой на селекторы [1]: HTML-элементы , классы и идентификаторы, указанные в HTML-коде. Соответственно, какие возможности есть для каждого скина, можно увидеть, посмотрев на исходный HTML-код страницы, в частности, посмотрев на эти классы и идентификаторы: чем их больше, тем больше универсальности.
В самом программном обеспечении MediaWiki есть CSS, и Википедия переопределяет его с помощью следующих страниц:
CSS для всего сайта находится в MediaWiki:Common.css.
Вы можете переопределить их для себя, используя пользовательские стили. Чтобы внести изменения, которые применяются независимо от вашего текущего скина, измените свой common.css . Чтобы внести изменения, которые влияют на ваш текущий скин, измените свой skin.css . Чтобы внести изменения, которые влияют на все проекты Wikimedia, вы можете войти в Meta и изменить свой global.css.
Введите CSS на эту страницу. Предварительный просмотр CSS работает особым образом: он позволяет просматривать поля страницы (не содержимое) на основе информации о стиле на странице, при условии, что используемый скин является скином, к которому применяется страница. Это имеет ограничения. Например, можно предварительно просмотреть, как будут выглядеть ссылки на полях, но они могут быть не всех типов, которые хотелось бы проверить. После сохранения, оставаясь на странице или на любой другой странице, выполните принудительную перезагрузку (shift-reload/ctrl-f5), чтобы получить новые файлы.
Для автоматической загрузки пользовательского CSS убедитесь, что $wgAllowUserCss
переменная установлена в true в конфигурации. В противном случае его можно загрузить с помощью JavaScript.
Чтобы импортировать CSS с пользовательской подстраницы с помощью JavaScript, используйте mw.loader.load
команду в файле common.js :
mw.loader.load ( '/w/index.php?title=User:Example/stylesheet.css&action=raw&ctype=text/css' , ' text / css ' );
В Википедии JavaScript можно использовать для добавления новых функций, таких как добавление текстовых полей поиска/замены или предоставление расширенных параметров отката. Существуют скрипты для настройки всего, от стиля шрифта по умолчанию до пользовательских кнопок.
Многие страницы скриптов можно импортировать и использовать . Различные скрипты также можно использовать в сочетании друг с другом для выполнения нескольких задач одновременно. Некоторые скрипты доступны как «Гаджеты», что означает, что их можно установить, просто отметив галочкой поле на вкладке «Гаджеты» в Special:Preferences .
Чтобы добавить уже существующие скрипты на страницу JavaScript, добавьте {{subst:js|name of script}}
в файл. Более подробные инструкции можно найти в Wikipedia:User scripts/Guide .
Исходный HTML-код страницы содержит такие строки:
< script src = "/w/wiki.phtml?title=Пользователь:ваше-имя-пользователя-здесь/standard.js&action=raw&ctype=text/javascript" > </ script > @import "/style/wikistandard.css"; @import "/w/wiki.phtml?title=Пользователь:ваше-имя-пользователя-здесь/standard.css &action=raw&ctype=text/css";
для CSS всего проекта для конкретного скина (в данном случае здесь, в Википедии, со ссылкой на //en.wikipedia.org/style/wikistandard.css ) и персонального JS и CSS для конкретного скина.
Таким образом, сервер предоставляет HTML, ссылающийся на файлы CSS и JS, но не делает никакой интерпретации их содержимого. Интерпретация выполняется браузером в зависимости от его возможностей и настроек.
В дополнение к вышесказанному или в качестве альтернативы можно установить локальный CSS в браузере. Если вы используете несколько браузеров, каждый из них может быть настроен на свой CSS. Каждый применяется ко всей Всемирной паутине, а не только к проекту MediaWiki (и не зависит от входа в систему). Однако настройка влияет на другие веб-страницы только в том случае, если они используют тот же селектор CSS; например, настройка для селектора a.extiw влияет на меньшее количество страниц в Интернете, чем настройка для h2 (но она влияет по крайней мере на все проекты MediaWiki, а не только на один).
Для строк CSS, которые должны быть разными в разных проектах MediaWiki, например, для разного цвета фона для простоты различения, очевидно, что локальный CSS использовать нельзя; по крайней мере эти строки следует поместить на подстраницы пользователей.
Некоторые компьютеры, например, в интернет-кафе, мобильные устройства/планшеты, не позволяют пользователям устанавливать настройки для браузера. В этом случае пользовательские подстраницы в любом случае позволяют устанавливать пользовательский стиль.
Если в браузере задана опция игнорирования размера шрифта, указанного на веб-странице или во внешнем CSS, строки CSS, касающиеся размера шрифта, необходимо поместить в локальный CSS.
Селекторы CSS, выраженные в терминах элементов, классов и идентификаторов, релевантные для стиля тела страницы, включают следующее. Насколько это возможно, приводятся примеры, которые показывают результат для текущих настроек стиля:
:link
— ссылки — пример: Help:Index ; по умолчанию: help:index (см. a vs :link):link:link
:link:visited
:link#contentTop
:link.external
— http://example ; по умолчанию: http://example:link.extiw
– ссылка на интервики в теле страницы – ; по умолчанию: ru:пример:link.image
– ссылка с полного изображения на страницу описания изображения:link.internal
– ссылка на сам файл (Media:), а также ссылки с миниатюры и значка увеличительного стекла на страницу описания изображения (обратите внимание, что цвет и размер шрифта, указанные для a.internal, применимы только в первом случае):link.new
пример ; по умолчанию: пример.allpagesredirect
– abc – перенаправления в Special:Allpages и Special:Prefixindexbody.ns-0
, ..., (пространства имен)body.ns-15
div#bodyContent
div#column-content
div#editsection
div#globalWrapper
div#tocindent
div.tocline
h1.firstHeading
h2
h3
img.tex
Изображение TeXsmall
- примерtable.toc
a
vs:link
– Распространенной ошибкой является использование " a
" вместо " " для стилизации ссылок. В то время как " " применяется только к ссылкам, " " применяется как к ссылкам, так и к именованным якорям (например, ).:link
:link
a
<a name="bookmark">
Обычные внутренние ссылки не входят в класс internal
(они были и остаются на сайтах, использующих более старую версию программного обеспечения, например [2]); они могут быть стилизованы со ссылкой на и , в общем случае, после чего стилизация и т. д. может предусматривать исключения из этого общего стиля для ссылок.:link
:link:visited
:link.extiw
Для межъязыковых ссылок:
#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:Настройка:Объяснение_скинов
Один из крайних «стилей» текста — это его отсутствие, т.е.
. имя_класса { дисплей : нет } # идентификатор { дисплей : нет }
и т. д.
Неотображаемые ссылки не работают (в отличие от ссылок, набранных очень мелким шрифтом).
Его нельзя использовать для удаления текста в выражениях для имен шаблонов, имен параметров, значений параметров, имен страниц в ссылках и т. д.
Класс или идентификатор могут зависеть от результата, полученного с помощью шаблона, или от параметра шаблона, например class="abcdef"
. Для одного или нескольких возможных имен классов может быть определен стиль этого класса. Если класс не определен, он игнорируется, поэтому используется стандартный стиль.
В простейшем случае мы имеем eg class="abc{{{1}}}"
и определяем класс abcdef. Если значение параметра равно "def", то оно применяется.
Если страница для общего использования имеет смысл только тогда, когда стили определены для определенных классов, то они должны быть указаны на странице MediaWiki:Common.css , которая применяется ко всем пользователям и всем скинам, если только не переопределяется.
Имя атрибута HTML можно сделать переменным. HTML Tidy — устаревшая библиотека HTML4, которая должна быть удалена — исторически удаляла атрибуты с недопустимыми именами на стороне сервера, поэтому результат не зависит от способности браузера игнорировать недопустимые имена атрибутов, а объем отправляемых данных сокращается. Для переменной с возможным значением «class» см. Wikipedia:HiddenStructure и en:Template:Infobox ( обратные ссылки править) .
Викитекст нравится
< span style = "display:{{{3|none}}}" > Ср </ span >
отображает "Wed", если параметр 3 определен, но не "none", и ничего не отображает, если параметр 3 не определен или "none". Если значение параметра 3 — стиль отображения, отличный от "none", применяется этот стиль.
Пользовательские стили можно разместить в личных CSS-файлах каждого пользователя, например, в Special:MyPage/common.css , которые каждый пользователь может редактировать, чтобы задать собственные стили.
/* сделать фон позади области содержимого и вкладок светло-серым */ # содержимое , # таблица содержимого # 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 % no-repeat ; } /* не используйте логотип, вместо этого переместите блоки в эту область */ # p-logo { display : none } # column-one { padding-top : 0 ; } /* подавить значок человека рядом с вашим именем пользователя */ li # pt-userpage { background : none } /* использовать настройки браузера для размера текста и шрифта */ html , body , # globalWrapper { font : inherit !important ; } /* всегда подчеркивайте ссылки */ : link { text-decoration : underline ; } /*Отображение содержимого тела в более узком столбце для удобства чтения*/ /*изменение процентного соотношения по желанию*/ div # bodyContent { width : 50 % ; line-height : 105 % ; } /* изменить фон невыбранных вкладок */ # p-cactions ul li a { background : #C7FDC7 ; } /* изменить фон выбранных вкладок */ # p-cactions ul li . selected a { background : white ; } /* изменить фон границы выбранных вкладок */ # p-cactions li . selected { border-color : #aaaaaa ; } /* нижняя часть вкладки не удаляется при наведении */ # p-cactions li a : hover { z-index : 0 ; text-decoration : none ; } # p-cactions li . selected a : hover { z-index : 3 ; } /* стиль поля поиска и кнопок под ним */ . searchButton { background-color : #efefef ; border : 1 px outset ; } # searchInput { border : 1 px inset ; } /* стандартные цвета ссылок */ a : link { color : #0645ad ; } a : visited { color : #0b0080 ; } a . new : link { color : #cc2200 ; } a . new : visited { color : #a55858 ; } a . extiw : link { color : #3366bb ; } /* ссылки на другие Википедии */ a . extiw : visited { color : #3366bb ; } a . external : link { color : #3366bb ; } /* внешние ссылки */ a . external : visited { color : #3366bb ; } /* поместить полосу прокрутки в разделы pre вместо уродливого обрезания/наложения в Firefox */ pre { overflow : auto ; } /* зачеркнуть ссылку «Загрузить файл» как напоминание о необходимости загрузки на Commons */ li # t-upload { text-decoration : line-through ; } /* центрировать/центрировать заголовок каждой страницы */ . firstHeading { text-align : center ; } /* Предупреждение о двойной переадресации */ div . redirectMsg a . mw-redirect : after { content : ' <double redirect>' ; color : Red ; font-style : italic ; } /* Запрещает новому CSS в «Обновлении типографики» (с начала 2014 г.) отображать заголовки и засечки шрифтом serif */ h1 , h2 { font-family : inherit !important ; } /* Отображение полей persondata в статьях */ table . persondata { display : table ; } /* Избавляемся от надоедливых предупреждений */ # editpage-copywarn , # editpage-copywarn2 , # editpage-copywarn3 , # editpage-head-copywarn , . editpage-head-copywarn , # editnotice_BLP_editintro , . ve-ui-mwSaveDialog-license { display : none !important ; } /* Избавляемся от утомительного шаблона для новичков */ # category-namespace-editnotice , # footer-info-copyright , # sitesub , . edithelp , . posteditwindowhelplinks , # footer-icons , . ve-ui-mwSaveDialog-summaryLabel { display : none !important ; } /* Экономия места в списке шаблонов, отображаемых в конце страницы при редактировании */ : templatesUsed ul , : templatesUsed li { display : inline ; padding-right : 5 px ;} /* Измените весь текст на шрифт "Avenir" (кроме заголовков) (вы можете изменить шрифт на любой другой) */ . mw-body h1 , . mw-body h2 { font-family : "Avenir" }
/* скругляем несколько углов */ # p-cactions ul li , # p-cactions ul li a { border-top-left-radius : 1 em ; border-top-right-radius : 1 em ; } # content { border-top-left-radius : 1 em ; border-bottom-left-radius : 1 em ; } . pBody { border-top-right-radius : 1 em ; border-bottom-right-radius : 1 em ; }
/* ** Поместите все правила, специфичные для печати, в блок печати @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 pt } h6 { font-size : 8 pt ; font-weight : normal ; } } /* Дополнительные возможности: используя :before и :after можно добавить форматирование , вот так добавляется полный href ссылки после нее (не требуется в текущей версии): */ @ media print { # content a : link : after , # content a : visited : after { content : " ( " attr ( href ) " ) " ; } }
Протестировано на работоспособность в Camino, Safari и Internet Explorer 7.
/* Преобразуем панель инструментов пользователя в боковую панель */ # p-personal { position : relation ; z-index : 3 ; width : 11.6 em ; } # p-personal . pBody { width : 10.7 em ; border : none ; margin : 0 0 0.1 em 0 em ; float : none ; overflow : hidden ; font-size : 95 % ; background : White ; border-collapse : collapse ; border : 1 px solid #aaaaaa ; padding : 0 0.8 em 0.3 em .5 em ; } # p-personal ul { line-height : 1.5 em ; list-style-type : square ; list-style-image : url ( "/style/monobook/bullet.gif" ); размер шрифта : 95 % ; поле : 0 0 0 1,5 em ; отступ : 0 ; выравнивание текста : слева ; преобразование текста : нет ; } # p-personal li { display : list-item ; padding : 0 ; margin : 0 0 0 0 ; margin-bottom : 0.1 em ; } /* подавить значок человека рядом с вашим именем пользователя */ /* необходимо, если еще не установлено */ li # pt-userpage { background : none }
Полный список стилей, используемых по умолчанию, см. в файле main.css монобука.
Этот стиль позволяет пользователям Vector Legacy сохранять верхнюю панель (со строкой поиска и ссылками на страницу обсуждения, редактирования, страницу пользователя и т. д.) видимой при прокрутке, аналогично Vector 2022:
@ media screen { # mw-head { position : fixed ; background : linear-gradient ( to down , #fff 50 % , #f6f6f6 100 % ); } }
В скине Vector Legacy положение боковой панели можно легко исправить:
/* Исправление боковой панели */ div # mw-panel { position : fixed ; overflow : auto ; top : 0 px ; bottom : 0 px ; height : 100 % ; /* Предотвращение наложения содержимого при боковой прокрутке */ background-color : #F6F6F6 ; border-right : 1 px solid #A7D7F9 ; } /* Предотвращение боковой прокрутки в элементах pre */ pre { overflow : auto ; max-height : 25 em ; }
Это может иметь нежелательные побочные эффекты в Chrome; например, при просмотре страницы, например, очень общей страницы .css, которую вы только что отредактировали, чтобы вставить этот код, просматриваемый контент станет намного короче и потребует вертикальной прокрутки во фрейме.
В скине Cologne Blue есть опция для "плавающей левой" панели быстрого доступа, которая заставляет навигационные ссылки и панели инструментов и т. п. оставаться в том же положении на экране во время прокрутки. Это обеспечивает ту же функциональность для скина Monobook (в Mozilla). См. meta:Help:User style/floating quickbar.
Быстрое и грубое сочетание меню Monobook со шрифтами с засечками в текстовой области можно найти по адресу User:Tillwe/monobook.css (в первой части). Также отображает таблично-форматированные вещи более или менее правильно. Есть некоторые странности и ошибки (некоторые из-за того, что схема CSS Wikipedia, похоже, не слишком продумана). Работает на Netscape7/Win98 для автора.
/***********************************************************************/ /* перемещение ссылок вправо */ /***********************************************************************//* переместить блок ссылок */ # ссылки { position : absolute ; z-index : 1 ; border : 1 px solid #aaaaaa ; background : #fafaff ; right : 1 em ; top : -0.25 em ; width : 10.5 em ; float : right ; margin : 0.2 em ; padding : 0.2 em ; } /* форматируем сами catlinks */ p . catlinks { color : #aaaaaa ; font-family : Verdana , sans-serif ; font-size : 67 % ; line-height : 1.5 em ; text-align : left ; text-indent : 0 ; text-transform : none ; white-space : normal ; margin : 0.2 em ; } # p-personal h5 { display : inline ; } /* форматировать ссылки в catlinks (в отличие от ":" и "|") */ p . catlinks a { color : #888888 ; }
/* не используйте шрифт меньшего размера */ td . diff-addedline , td . diff-deletedline , td . diff-context { font-size : 100 % } ; /* подчеркнуть только тот текст, который отличается */ span . diffchange { text-decoration : underline ; }
/*Подавить кнопки "(спасибо)"*/ . mw-thanks-thank-link { display : none ; }
/* скрыть аннотацию View-Source при редактировании защищенной страницы */ # mw-protectedpagetext { display : none ; }
Как и в случае с другими стилями CSS, указанными выше, отредактируйте Special:MyPage/skin.css или Special:MyPage/common.css, чтобы вставить настроенный CSS, а затем обновите кэш браузера.
Существует экспериментальная таблица стилей для добавления вертикальных линий слева от тем обсуждения и для чередования двух разных фоновых цветов. См. User:Isaacl/style/discussion-threads для получения более подробной информации и макета внешнего вида.
Пользователи могут иметь пользовательский CSS , который скрывает любые информационные окна в их собственных браузерах.
Чтобы скрыть все информационные поля, добавьте следующее в Special:MyPage/common.css (для всех скинов или Special:MyPage/skin.css только для текущего скина) на отдельной строке:
div.mw - parser - output.infobox { display : none ; }
В качестве альтернативы вы можете добавить следующий код в файл common.js или в пользовательский скрипт браузера, который выполняется расширением, например Greasemonkey :
$ ( '.infobox' ) .скрыть ();
Имейте в виду, что хотя, согласно WP:Manual of Style/Infoboxes , вся информация в инфобоксе в идеале должна также находиться в основном тексте статьи, идеального соответствия этому правилу не существует. Например, полная таксономическая иерархия в , а также коды OMIM и других медицинских баз данных часто не встречаются в основном содержании статьи. Инфобокс также часто является местом расположения самого значимого, даже единственного, изображения в статье. Существует пользовательский скрипт, который удаляет инфобоксы, но перемещает содержащиеся в них изображения в отдельные миниатюры: User:Maddy из Celeste/disinfobox.js .{{Taxobox}}
{{Infobox disease}}
Чтобы последовательно использовать моноширинный шрифт с хорошо продуманными символами для кодирования, чтобы четко различать l
, 1
, и I
, а также между O
и 0
, а также между -
, −
, –
, и —
, можно изменить системный моноширинный шрифт по умолчанию:
Если вам нравится то, что есть, вы можете просто @import
(транслировать) его: см. meta:User:SMcCandlish/codefont.css для кратких инструкций.
В противном случае скопируйте один из приведенных ниже фрагментов кода на страницу Special:MyPage/common.css или meta:Special:MyPage/global.css, заменив "Roboto Mono"код на предпочитаемый вами шрифт кодировки. (В этом примере использовался Roboto Mono, поскольку это хороший бесплатный шрифт кодировки для материалов в вики, которые могут редактировать пользователи).
Этот код:
<code>
, <pre>
и т. д.{{mxt}}
{{xt}}
.monospaced
), которые выводятся как моноширинные.Горизонтальный стиль
/* Используйте мой шрифт, если он доступен, для кода */ code , pre , samp , kbd , tt , . example-mono , . userlinks-username , . monospaced , . keyboard-key , . button , . plaincode { font-family : "Roboto Mono" , monospace !important ; } /* Сделайте некоторые редактируемые элементы моноширинными */ # wpTextbox1 , # wpSummary , # searchInput , # searchText { font-family : "Roboto Mono" , monospace !important ; }
Вертикальный стиль
/* Используйте мой шрифт, если он доступен, для кода */ code , pre , samp , kbd , tt , . example-mono , . userlinks-username , . monospaced , . keyboard-key , . button . plaincode { font-family : "Roboto Mono" , monospace !important ; } /* Сделайте некоторые редактируемые элементы моноширинными */ # wpTextbox1 , # wpSummary , # searchInput , # searchText { font-family : "Roboto Mono" , monospace !important ; }
Усилия по очистке
Если вы хотите помочь очистить экземпляры элемента — который не рекомендуется использовать с 1990-х годов и обычно должен быть заменен на (это может меняться в зависимости от контекста) — вы можете добавить что-то вроде следующего в свой<tt>...</tt>
<code>...</code>
общий.cssчтобы выделиться как больной большой палец:<tt>
/* Пометить плохой код для очистки */ tt { color : DarkRed ; background : Pink ; }
Вы также можете сделать это с <font>
, <center>
, <strike>
, и другими устаревшими элементами . Для CSS вы можете просто импортировать для этого, см. meta:User:SMcCandlish/lint.css.
JavaScript имеет много возможностей, например, добавление текста, включая ссылки, в нужные позиции. Этот добавленный контент может зависеть от контента на исходной странице HTML, созданной сервером; например, он может зависеть от элементов HTML с идентификатором, применяя getElementById. Позиция вставки может быть указана insertBefore.
Например, чтобы добавить ссылку на страницу слева от настроек, добавьте следующее в Special:Mypage/common.js , заменив PageTitle на заголовок вики-страницы:
МВт . утилита . addPortletLink ( 'p-personal' , '/wiki/Help:User_style/PageTitle' , 'PageTitle' , null , null , null , '#pt-preferences' );
Следующий код перемещает поле категории в верхнюю часть статьи. Конечно, вы можете захотеть применить CSS, чтобы оно выглядело красивее:
функция catsattop ( ) { var cats = document.getElementById ( ' catlinks ' ) ; var bc = document.getElementById ( ' bodyContent ' ) ; bc.insertBefore ( cats , bc.childNodes [ 0 ] ) ; }
Альтернативный вариант, который в сочетании с соответствующей таблицей стилей разместит текст примерно на той же строке, что и заголовок:
function categoryToTop ( ) { var thebody = document.getElementById ( ' contentTop' ); var categories = document.getElementById ( ' catlinks' ) ; если ( категории ! = null ) { категории.parentNode.removeChild ( категории ) ; thebody.parentNode.insertBefore ( категории , thebody ) ; } }
Немного CSS в придачу...
/* перемещаем блок ссылок */ # ссылки { right : 1 em ; top : -0.25 em ; max-width : 50 % ; /* это ограничивает размер блока, но не устанавливает его строго */ float : right ; margin : 0.5 em ; padding : 0.2 em ; } /* форматируем сами catlinks */ p . catlinks { font-size : 67 % ; text-align : left ; text-indent : 0 ; text-transform : none ; white-space : normal ; margin : 0.2 em ; }
К сожалению, если поле категории большое (например, в записях о президентах США и других важных деятелях), оно может сместить инфобокс в сторону. Чтобы исправить это, можно добавить к инфобоксу атрибут "clear: right".
CSS можно контролировать через JS с помощью wikitext. Например, элемент HTML "span" без содержимого может через свой класс и идентификатор предоставлять параметры для JS, определяющие CSS для любых частей страницы. Например, если страница содержит элемент "span" с классом FA и идентификатором lc , MediaWiki:Monobook.js определяет стиль и заголовок элементов "li" класса interwiki- lc , тем самым контролируя стиль и заголовок межъязыковой ссылки с кодом языка lc на полях, при условии, что скин определяет этот класс interwiki- lc (например, Cologne Blue определяет class='external' для каждого языка, поэтому он не работает для этого скина.)