none
Кастомизация панели быстрого запуска в SharePoint 2016 RRS feed

  • Вопрос

  • Здравствуйте.
    Киньте плз. ссылкой или примером, где разбирается как можно придать красивый вид панели быстрого запуска в SharePoint 2016?

    Хотелось бы начать с малого - выделить жирным шрифтом заголовки разделов на левой панели.

    11 февраля 2020 г. 10:39

Ответы

  • Класс "s4-ql" относится к SharePoint server 2010 начиная с SP 2013 "ms-core-listMenu-verticalBox".

    Попробуйте использовать "content", вариантов масса, дорабатывайте под ваши нужды.

    .ms-core-listMenu-verticalBox ul.root > li > .menu-item:before { content: "• "; }

    .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li.static > a:before {
     content: "• ";
    }

    

    Вот список классов css для левого меню начиная с SP 2013

    .ms-core-listMenu-verticalBox ul.root > li > .menu-item {
         /*Style each menu item*/
    }
    .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li.static > a:hover {
         /*Style on hove sub items*/
    }
    .ms-core-listMenu-verticalBox > ul.root > li.selected > a { 
         /*Style selected top level item*/
    }
    .ms-core-listMenu-verticalBox > ul.root > li > a:hover {  
         /*Style top level mouse hover*/
    }
    .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a { 
         /*Style sub level mouse hove*/
    }
    .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a.selected {  
         /*Style selected sub item*/
    }
    .ms-core-listMenu-verticalBox a.selected {
         /*Style Selected Item*/
    }
    .ms-core-listMenu-verticalBox ul.root ul {
         /*Style Outer Box*/
    }
    • Помечено в качестве ответа VARD32 12 февраля 2020 г. 9:33
    • Изменено Mikhail Zhuikov 13 февраля 2020 г. 8:17
    12 февраля 2020 г. 9:13

Все ответы

  • К примеру: как сделать маркированный список в левой панели быстрого запуска?

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

    Подскажите плз. - что прописать в стиле, чтобы появилась точка?

    12 февраля 2020 г. 5:20
  • Нашел статью, где маркируют список на шарике так:

     .s4-ql ul.root ul{
    	list-style-type: square !important; 
    	list-style- !important;
    	margin-left: 25px !important;
     }
    
     .s4-ql ul.root ul > li > a{
    	/* Display Bullet in Quick Launch*/
        display: inline-block !important;
        padding-bottom: 0px !important;
        padding-left: 0px !important;
        vertical-align:bottom !important;
     }
    
    но ничего не изменилось. Как будто бы что-то перезаписывает стиль.
    12 февраля 2020 г. 6:05
  • Класс "s4-ql" относится к SharePoint server 2010 начиная с SP 2013 "ms-core-listMenu-verticalBox".

    Попробуйте использовать "content", вариантов масса, дорабатывайте под ваши нужды.

    .ms-core-listMenu-verticalBox ul.root > li > .menu-item:before { content: "• "; }

    .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li.static > a:before {
     content: "• ";
    }

    

    Вот список классов css для левого меню начиная с SP 2013

    .ms-core-listMenu-verticalBox ul.root > li > .menu-item {
         /*Style each menu item*/
    }
    .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li.static > a:hover {
         /*Style on hove sub items*/
    }
    .ms-core-listMenu-verticalBox > ul.root > li.selected > a { 
         /*Style selected top level item*/
    }
    .ms-core-listMenu-verticalBox > ul.root > li > a:hover {  
         /*Style top level mouse hover*/
    }
    .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a { 
         /*Style sub level mouse hove*/
    }
    .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a.selected {  
         /*Style selected sub item*/
    }
    .ms-core-listMenu-verticalBox a.selected {
         /*Style Selected Item*/
    }
    .ms-core-listMenu-verticalBox ul.root ul {
         /*Style Outer Box*/
    }
    • Помечено в качестве ответа VARD32 12 февраля 2020 г. 9:33
    • Изменено Mikhail Zhuikov 13 февраля 2020 г. 8:17
    12 февраля 2020 г. 9:13
  • Михаил, благодарю!!!
    12 февраля 2020 г. 9:33
  • Последний вопрос:

    Михаил подсказал мне хорошую идею использовать тег "content" для рисования маркера.

    Всё классно, но длинные айтемы не умещаются в длину и переносятся на след.строку.

    Выглядит это так:

    Как-то можно сделать так, чтобы переносимое слово "сотрудников" было не под "точкой" маркера а под первой буквой первой строки:

    

    12 февраля 2020 г. 10:43
  • Супер! Спасибо!
    12 февраля 2020 г. 11:16