Как сделать так, чтобы новый текст в календаре Google обернулся с помощью CSS? - PullRequest
Новая
       16

Как сделать так, чтобы новый текст в календаре Google обернулся с помощью CSS?

2 голосов
/ 22 ноября 2011

Я не могу прочитать полное название моих событий Календаря Google, потому что они усечены, чтобы уместиться в поле дня. И поэтому распечатка не так полезна, как могла бы быть.

Раньше был плагин greasemonkey, который изменил CSS, чтобы исправить это, но Google изменил дизайн календаря, и теперь заголовки накладываются друг на друга и не могут быть правильно прочитаны.

Какой CSS мне сейчас нужно добавить на страницу, чтобы заголовки событий хорошо переносились? Это существующий код плагина Greasemonkey: 

function buildStyle()
{
    var st = "div.rb-n, span, nobr { white-space: normal; }";
    var dochead = document.getElementsByTagName("head")[0];
    var stEl = document.createElement("style");
    stEl.setAttribute("type", "text/css");
    stEl.innerHTML = st;
    dochead.appendChild(stEl);
}

window.addEventListener("load", function(e) {
    buildStyle();
}, false);

Вот сам плагин Greasemonkey: http://userscripts.org/scripts/show/97755 - Видно, что он работает правильно, если вы вернете календарь Google в «классический вид», но не сможете работать с новым видом.

UPDATE:

Я сохранил пример календаря Google с двумя тестовыми событиями:

Ответы [ 2 ]

2 голосов
/ 23 ноября 2011

На основании предоставленного образца страницы вы будете использовать эти стили: 

.rb-n {
    white-space: normal !important;
}
.te {
    overflow: inherit !important;
    white-space: normal !important;
}

Примечание:

  1. Если вы просто меняете стили, тогда гораздо лучше использовать Стильный .

    Стильно быстрее; Изменения страниц легче / быстрее поддерживать; Изменения применяются без какого-либо мерцания или задержки; и часто кто-то уже опубликовал большую часть того, что вы хотите на Userstyles.org .

  2. Аналогично, вам не нужно использовать все эти JS для добавления стилей в Greasemonkey. Используйте функцию GM_addStyle : 

    GM_addStyle ( "                                 \
    .rb-n {                                     \
        white-space:    normal !important;      \
    }                                           \
    .te {                                       \
        overflow:       inherit !important;     \
        white-space:    normal !important;      \
    }                                           \
" );

  3. Google меняет свои страницы быстро и без предупреждения. Firebug может помочь определить новые изменения и обходные пути CSS по мере их появления.

0 голосов
/ 19 июля 2015

Я использовал другой учебник и объединил найденный там CSS с расширением tylish S для chrome .Я скопировал оригинальный CSS здесь для удобства и исторической справки.Большое спасибо Джоди Майнерс за ее усердную работу. 

.rb-ni, .rb-n {
border:none;
display: inline-table; 
white-space: pre-wrap;
    font-size: 11px;
    font-weight: bold;
}

.st-c-pos > div[style] {
border:none !important;}

.st-dtitle-nonmonth {
color:lightgray;
font-size: 10px !important;
}

.st-dtitle{
font-size:14px;
font-weight:bold;
}

.date-top{
font-weight:bold;
font-size:20px;
}

.st-dtitle-today {
border-color: #DDD !important;
background-color: #FFF !important;
}

.st-bg-today, .st-bg-td-first, .st-bg-td-last {
background-color: #FFF !important;
border-color: #DDD !important;
}

@media print  { .noprint  { display: none; } }
@media print { .noprint { display: inline !important; }
#funbox {display:none !important;}
 }


#topLeftNavigation{
left: -10px !important;
}
.applogo{
display:none;
}
#gb {display:none}
#topRightNavigation {display:none}

Обязательно применяйте ссылки, начинающиеся с 'https://www.google.com/calendar/'.

...