Применить CSS к определенной кнопке панели ленты SharePoint? - PullRequest
Новая
       40

Применить CSS к определенной кнопке панели ленты SharePoint?

2 голосов
/ 17 мая 2011

Есть ли способ просто скрыть определенную кнопку панели ленты SharePoint? Я видел код CSS для сокрытия всей панели ленты, но я хочу скрыть только 1 кнопку на ней (кнопка регистрации). Я пытался ссылаться на него несколькими способами, например: 

a#Ribbon.DocLibListForm.Edit.Commit.CheckIn-Large { display: none; !important }

ms-cui-ctl-large#Ribbon.DocLibListForm.Edit.Commit.CheckIn-Large { display: none; !important }

a.ms-cui-ctl-large#Ribbon.DocLibListForm.Edit.Commit.CheckIn-Large { display: none; !important }

Вполне возможно, что мой CSS просто неверен, или, возможно, я поступаю неправильно. Как я могу скрыть этот элемент?

Ответы [ 3 ]

5 голосов
/ 06 марта 2012

Нашли решение этой проблемы исключительно с помощью CSS благодаря http://online.appdev.com/edge/blogs/doug_ware/archive/2011/08/02/hiding-a-sharepoint-ribbon-button-with-css.aspx

Хитрость заключается в том, что для любого '.' в идентификаторе SharePoint (которые, к сожалению, включают. Как часть их имен и не являютсяредактируемый) перед каждым необходимо указать '\', чтобы он стал '\.', поэтому в исходном примере вы обнаружите, что: 

#Ribbon\.DocLibListForm\.Edit\.Commit\.CheckIn-Large {display:none;}

Работает как шарм!: -)

3 голосов
/ 17 мая 2011

Ну, я нашел решение. Он не использует CSS, а скорее JavaScript, чтобы скрыть определенную кнопку на панели ленты. Вот код для скрытия кнопки регистрации: 

<script type="text/javascript">
var elem = document.getElementById("Ribbon.DocLibListForm.Edit.Commit.CheckIn-Large");
elem.style.display = "none";
</script>

Чтобы реализовать это, я просто создал текстовый файл, содержащий приведенный выше код, затем поместил CEWP в форму редактирования списка, которая связана с этим файлом, и boom - done!

Спасибо @Prozaker за ваши советы по CSS - сегодня я узнал что-то новое (кроме того, что я отстой в CSS: -)

1 голос
/ 17 мая 2011

Было бы очень полезно, если бы вы могли опубликовать ту часть HTML, с которой вам нужна помощь.

Однако ваш CSS не использует важное правило должным образом, !important должен быть перед ; примерно так:

Вам также необходимо отделить пробелом любые дочерние элементы, на которые вы ссылаетесь, первый пример должен быть написан так: 

a#Ribbon .DocLibListForm .Edit .Commit .CheckIn-Large { 
     display: none !important; 
}

Это можно переписать так: 

a#Ribbon .DocLibListForm .CheckIn-Large { 
     display: none !important; 
}

Учитывая, что только 1 элемент назван .CheckIn-Large, который является дочерним элементом .DocLibListForm

Для решения подобных проблем вы можете использовать панель разработчика IE (или firebug, если вы используете firefox), она должна поставляться в комплекте с ie8 +, которая может помочь вам в подобных вещах, позволяя вам редактировать CSS в режиме реального времени.

Я бы не советовал использовать правило !important, потому что оно изменяет способ нормальной работы CSS.

{править}

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

#Ribbon.DocLibListForm.Edit.Commit.CheckIn-Large { 
     display: none !important;
}

Однако без реального HTML-кода все еще трудно сказать, может быть, вы можете вставить часть, которая вызывает проблемы, на pastebin.

...