Арон Опубликовано 11 декабря, 2020 Поделиться Опубликовано 11 декабря, 2020 Вечер добрый. Подскажите пожалуйста - как изменить масштаб текста (размер шрифта) в мобильной версии сайта? С полной версией - в принципе понятно - через админ панель и редактирование размера шрифтов через визуальный редактор. Но вот все внесенные изменения размера шрифта - на мобильной версии никак не сказывается. Без изменений. В core_responsive.css нашел такой кусок content: attr( data-voteText ); font-size: 13px; Внес изменения, поменял font-size: 13px; на свой шрифт font-size: 16px; - но размер шрифта не изменяется, а только искрывляется див-блок. Подскажите - где копать чтобы изменить размер шрифта контента в мобильной версии сайта? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Mano Опубликовано 11 декабря, 2020 Поделиться Опубликовано 11 декабря, 2020 46 минут назад, Арон сказал: В core_responsive.css нашел такой кусок Вам нужно смотреть в forum_responsive.css смотреть, все там Только ещё не пойму, зачем на мобильном то делать 16px?????? Для мобилок от 13 до 15px используется для заголовков, чаще 13, а вы собрались 16 для основного текста?? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Арон Опубликовано 11 декабря, 2020 Автор Поделиться Опубликовано 11 декабря, 2020 Elhombre на мобильных версиях всех сайтов ips почему то шрифт контента - слишком мелкий. Вот и интересуюсь, как это можно изменить... размер шрифта, я для примера привел. Во всяком случае - на полной версии по умолчанию 13шрифт. Я его изменил на 15. Пойду искать forum_responsive.css. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Арон Опубликовано 11 декабря, 2020 Автор Поделиться Опубликовано 11 декабря, 2020 Elhombre в forum_responsive.css. .cTopicList .cBestAnswerIndicator { width: 18px; height: 18px; line-height: 18px; font-size: 11px; } Изменяю 11рх на 13 - никаких изменений в плане шрифта. Подскажите, что я делаю не верно. Вроди size должно отвечать за шрифт - но не помогает. Кеш обновлял. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Mano Опубликовано 11 декабря, 2020 Поделиться Опубликовано 11 декабря, 2020 Арон вот эта строчка отвечает за общий размер @media screen and (max-width: 767px) body { font-size: 13px; } 1 час назад, Арон сказал: Elhombre на мобильных версиях всех сайтов ips почему то шрифт контента - слишком мелкий. Вот и интересуюсь, как это можно изменить... размер шрифта, я для примера привел. Во всяком случае - на полной версии по умолчанию 13шрифт. Я его изменил на 15. Пойду искать forum_responsive.css. В команде invisioncommunity топ-дизайнеры и нынешние версии IPS относительно UI и UX очень продуманы и сделаны по стандартам дизайна, которые используются абсолютно везде и у всех, даже в топ-компаниях Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Арон Опубликовано 11 декабря, 2020 Автор Поделиться Опубликовано 11 декабря, 2020 27 минут назад, Elhombre сказал: @media screen and (max-width: 767px) body { font-size: 13px; Это точно в forum_responsive.css? Здесь только /* PHONES */ @media screen and (max-width: 767px) { /* Forum grid layout */ .ipsForumGrid{ --ipsForumGrid--width: 200px; } 36 минут назад, Elhombre сказал: В команде invisioncommunity топ-дизайнеры и нынешние версии IPS относительно UI и UX очень продуманы и сделаны по стандартам дизайна, которые используются абсолютно везде и у всех, даже в топ-компаниях Со слабым зрением с таким размером шрифта долго не посидишь. Да и на сайтах топ компаниях - заходят лишь за справкой, а не чтением статей. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Mano Опубликовано 11 декабря, 2020 Поделиться Опубликовано 11 декабря, 2020 14 минут назад, Арон сказал: Со слабым зрением с таким размером шрифта долго не посидишь. Да и на сайтах топ компаниях - заходят лишь за справкой, а не чтением статей. У Вас целевая аудитория слабовидящих? Если да, то ок. Если нет, то это менее 1% ваших посетителей. Почитайте или посмотрите про азы дизайна, а точнее будет разработки мобильного дизайна и поймете, о чем я говорю 15 минут назад, Арон сказал: Это точно в forum_responsive.css? Я уже скинул Вам всю строчку стиля, что нужно найти. Пользуйтесь поиском по CSS файлам в админке. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Арон Опубликовано 12 декабря, 2020 Автор Поделиться Опубликовано 12 декабря, 2020 10 часов назад, Elhombre сказал: Я уже скинул Вам всю строчку стиля, что нужно найти. Пользуйтесь поиском по CSS файлам в админке. Не нашел даже через поиск данную строчку @media screen and (max-width: 767px) body { font-size: 13px; Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Mano Опубликовано 12 декабря, 2020 Поделиться Опубликовано 12 декабря, 2020 3 часа назад, Арон сказал: Не нашел даже через поиск данную строчку Стиль какой, дефолтный? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Арон Опубликовано 12 декабря, 2020 Автор Поделиться Опубликовано 12 декабря, 2020 1 минуту назад, Elhombre сказал: Стиль какой, дефолтный? Да. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Desti Опубликовано 12 декабря, 2020 Поделиться Опубликовано 12 декабря, 2020 Mano и Арон 2 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Арон Опубликовано 12 декабря, 2020 Автор Поделиться Опубликовано 12 декабря, 2020 Desti спасибо за подсказку - пошел искать. Странно что поиск не находит. Визуально буду искать. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Арон Опубликовано 12 декабря, 2020 Автор Поделиться Опубликовано 12 декабря, 2020 Desti Elhombre благодарю вас за уделенное время и подсказку. Но только шрифт увеличился совсем не тот, который нужен. Вот пример до и после - размер шрифта контента остался не изменным. Изменился технический шрифт "Опубликованно..." Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Desti Опубликовано 12 декабря, 2020 Поделиться Опубликовано 12 декабря, 2020 Я не вдавался в детали, показал, просто показал, где это живет. Там же и размер шрифта для конкретного класса сообщения можно поискать. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Арон Опубликовано 12 декабря, 2020 Автор Поделиться Опубликовано 12 декабря, 2020 4 часа назад, Desti сказал: конкретного класса сообщения можно поискать. Открыл исходный код в браузере <div class='cPost_contentWrap'> <div data-role='commentContent' class='ipsType_normal ipsType_richText ipsPadding_bottom ipsContained' data-controller='core.front.core.lightboxedImages'> <p> Когда мы слышим "Ростов" текст контента......... Какой класс будет отвечать и в css где его искать? Перепробовал пост.css, контент_пост.css - менял шрифты. Не изменяет. Не то. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Desti Опубликовано 12 декабря, 2020 Поделиться Опубликовано 12 декабря, 2020 Не надо открывать исходный код, нет там ничего интересного, надо F12 жать и смотреть в код и связанный css. Где-то есть такая конструкция, этот класс отвечает за размер фонта @media screen and (max-width: 767px) .ipsType_normal { font-size: 13px; } Арон 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Desti Опубликовано 12 декабря, 2020 Поделиться Опубликовано 12 декабря, 2020 Арон 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Арон Опубликовано 13 декабря, 2020 Автор Поделиться Опубликовано 13 декабря, 2020 8 часов назад, Desti сказал: Не надо открывать исходный код, нет там ничего интересного, надо F12 жать и смотреть в код и связанный css. f12 нужно еще научиться пользоваться... 7 часов назад, Desti сказал: Благодарю - пойду искать. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Арон Опубликовано 13 декабря, 2020 Автор Поделиться Опубликовано 13 декабря, 2020 Desti Что-то в дефолтном шаблоне, в файле typography.css такого не нахожу Спойлер /* HEADINGS */ .ipsType_pageTitle, .ipsType_sectionTitle, .ipsType_secondaryTitle, .ipsType_sectionHead, .ipsType_minorHeading { {{if theme.headline_font != 'default'}} font-family: "{theme="headline_font"}", "Helvetica Neue", Helvetica, Arial, sans-serif; {{endif}} } /* ======================================================== */ /* Page title: the large text shown at the top of pages */ .ipsType_pageTitle { font-size: {fontsize="2x_large"}; font-weight: bold; line-height: 1.2; letter-spacing: -.02em; margin: 0; color: rgb( var(--theme-text_dark) ); } .ipsType_pageTitle > .fa { font-size: {fontsize="large"}; } .ipsType_pageTitle a:not( .ipsBadge ):not( .ipsButton ) { color: inherit; } /* ======================================================== */ /* Section title: formerly known as main title, the bar separating sections */ .ipsType_sectionTitle { font-size: {fontsize="base"}; line-height: 1; font-weight: bold; padding: var(--sp-4) var(--sp-5); margin: 0; background: rgb( var(--theme-section_title) ); color: rgb( var(--theme-section_title_font) ); border-top-left-radius: inherit; border-top-right-radius: inherit; border-bottom: 1px solid rgba( var(--theme-text_light), 0.15 ); } a.ipsType_sectionTitle, .ipsType_sectionTitle a { color: rgb( var(--theme-section_title_font) ); } .ipsType_sectionTitle .ipsButton { position: relative; top: -5px; } .ipsType_sectionTitle .ipsButton.ipsButton_veryVerySmall { top: -2px; } .ipsType_sectionTitle > .ipsType_light { opacity: 0.6; } /* ======================================================== */ /* Secondary title: a secondary version of above, for sub-sections */ .ipsType_secondaryTitle { font-size: {fontsize="small"}; font-weight: 400; padding: 10px 15px 10px 15px; margin-top: 0; border-radius: 3px 3px 0 0; background: rgb( var(--theme-secondary_title) ); color: rgb( var(--theme-secondary_title_font) ); } a.ipsType_secondaryTitle, .ipsType_secondaryTitle a { color: rgb( var(--theme-secondary_title_font) ); } /* ======================================================== */ /* Section heading: a text-based heading for smaller sections */ .ipsType_sectionHead { font-size: {fontsize="large"}; color: rgb( var(--theme-text_dark) ); line-height: {fontsize="2x_large"}; font-weight: bold; display: inline-block; margin: 0; } /* ======================================================== */ /* Minor heading: used in miscellanious situations */ .ipsType_minorHeading { color: rgb( var(--theme-text_light) ); text-transform: uppercase; font-size: {fontsize="x_small"}; margin: 0; } /* ======================================================== */ /* ALIGNMENT */ .ipsType_center { text-align: center; } .ipsType_left { text-align: left; } html[dir="rtl"] .ipsType_left { text-align: right; } .ipsType_right { text-align: right; } html[dir="rtl"] .ipsType_right { text-align: left; } .ipsType_justify { text-align: justify; } /* ======================================================== */ /* MISC */ .ipsType_bold { font-weight: bold; } .ipsType_unbold { font-weight: normal; } .ipsType_monospace { font-family: monospace; } .ipsType_noBreak { white-space: nowrap !important; } .ipsType_noUnderline { text-decoration: none !important; } .ipsType_withHr { display: flex; align-items: center; } .ipsType_withHr:after { content: ''; border-top: 1px solid rgba( var(--theme-text_dark), 0.1 ); height: 0; flex-grow: 1; } html[dir="ltr"] .ipsType_withHr:after { margin-left: 10px; } html[dir="rtl"] .ipsType_withHr:after { margin-right: 10px; } .ipsType_resetLh { line-height: 1; } /* This class sometimes contains truncated text. A max-width is necessary for the text to truncate */ .ipsContained_container{ max-width: 100%; } /* 09/20/16 - Chrome on Windows breaks non-english characters in a word. I traced it back to the combination of word-break and word-wrap properties. After extensive testing, all modern browsers appear to work with just word-wrap: break-word, so I have removed the word-break property. See: r12524 & r12586 & r12382 */ .ipsType_break { word-wrap: break-word; word-break: break-word; } .ipsType_richText { word-wrap: break-word; overflow-wrap: break-word; line-height: 1.6; } /* Prevent long content such as code blocks from stretching the layout */ .ipsType_richText.ipsContained, [data-role="editorComposer"]{ display: table; table-layout: fixed; width: 100%; } /* 02/10/16 - Fixes an issue with Android 4, where links would not break. See r12945 */ @media screen and (max-width: 767px) { _:-webkit-full-screen, :root .ipsType_break { word-break: break-word; } _:-webkit-full-screen, :root .ipsType_richText { word-break: break-word; } } .ipsType_normal.ipsType_richText { line-height: 1.6; } {{if (int) settings.editor_paragraph_padding === 0}} .ipsType_richText p:not( [class] ) { margin-top: 0; margin-bottom: 0; } {{endif}} .ipsType_richText a, .ipsApp [data-ipsEditor] .cke_wysiwyg_div a { text-decoration: underline; } .ipsType_richText .ipsForm a { text-decoration: none; } /* In some places (like in Pages) we use <ul>s for structural things which aren't really lists, which causes the bullet points to be one level "deeper" than thewy really are. This fixes that */ .ipsType_richText > ul:not([class]) { list-style-type: disc; } .ipsType_richText > ul:not([class]) ul { list-style-type: circle; } .ipsType_richText > ul:not([class]) ul ul { list-style-type: square; } /* Makes links go the color of surrounding text */ a.ipsType_blendLinks, .ipsType_blendLinks a { color: inherit; } /* Add brand color to links */ .ipsType_brandedLinks a, a.ipsType_brandedLink{ color: rgb( var(--theme-brand_primary) ); } .ipsType_reset { margin: 0; } /* I LIKE SHOUTING */ .ipsType_uppercase { text-transform: uppercase; } .ipsType_noLinkStyling, .ipsType_noLinkStyling:hover { text-decoration: none !important; color: rgb( var(--theme-text_color) ); } /* Highlighted words (e.g. search results) */ mark { background: rgba( var(--theme-featured), 0.1 ); padding: 0 5px; color: rgb( var(--theme-featured) ) !important; font-weight: inherit; display: inline-block; border-radius: var(--radius-1); } /* ======================================================== */ /* SIZING */ .ipsType_small { font-size: {fontsize="x_small"}; } .ipsType_small:not( .ipsType_richText ){ line-height: 1.45; } .ipsType_medium { font-size: {fontsize="small"}; } .ipsType_medium:not( .ipsType_richText ) { line-height: 1.53; } .ipsType_normal { font-size: {fontsize="medium"}; } .ipsType_normal:not( .ipsType_richText ){ line-height: 1.5; } .ipsType_large { font-size: {fontsize="base"}; } .ipsType_large:not( .ipsType_richText ){ line-height: 1.25; } .ipsType_veryLarge { font-size: {fontsize="36"}; line-height: 1.18; font-weight: bold; letter-spacing: -0.9px; color: rgb( var(--theme-text_dark) ); } .ipsType_huge { font-size: {fontsize="64"}; line-height: 1.11; font-weight: 300; color: rgb( var(--theme-text_dark) ); } /* ======================================================== */ /* COLORS */ .ipsType_light { color: rgb( var(--theme-text_light) ); } .ipsType_dark { color: rgb( var(--theme-text_dark) ); } .ipsType_warning, .ipsType_negative { color: var(--negative-dark); } .ipsType_spammer { color: var(--negative-dark); } .ipsType_issue { color: #d69625; } .ipsType_success, .ipsType_positive { color: var(--positive-dark); } .ipsType_neutral { color: rgb( var(--theme-text_light) ); } .ipsType_code { background: rgb( var(--theme-area_background_light) ); padding: 5px; border: 1px solid rgb( var(--theme-area_background) ); border-radius: var(--radius-1); color: #d72f42; } /* ======================================================== */ /* RICH TEXT */ .ipsType_richText > p:first-child { margin-top: 0; } .ipsType_richText > p:last-child { margin-bottom: 0; } .ipsType_richText img { max-width: 100%; } /* ======================================================== */ /* TRUNCATED TEXT */ .ipsTruncate { overflow: hidden; } .ipsTruncate.ipsTruncate_line { white-space: nowrap; text-overflow: ellipsis; display: block; width: 100%; } a.ipsTruncate.ipsTruncate_line, span.ipsTruncate.ipsTruncate_line { display: inline-block; vertical-align: middle; } /* Use the clamp method for these situations since they're stretchy table-cells */ .ipsWidget .ipsDataItem_main .ipsTruncate_line{ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; } .ipsTruncate + .ipsTruncate_more { display: block; text-decoration: none !important; cursor: pointer; padding: 12px; text-align: center; margin-bottom: -15px; font-size: {fontsize="small"}; } .ipsTruncate > .ipsTruncate_more span { z-index: 40; } .ipsType_pageTitle [data-role="editableTitle"]:hover, .ipsType_pageTitle[data-role="editableTitle"]:hover, .ipsType_editable:hover { background: rgb( var(--theme-selected) ); color: rgb( var(--theme-text_dark) ); } Изиняюсь. Я изначально не тот typography.css открыл. Нашел.)) Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Арон Опубликовано 13 декабря, 2020 Автор Поделиться Опубликовано 13 декабря, 2020 Desti Спасибо за помощь. Получилось увеличить размер шрифта контента)). Только не пойму, как вы так в такой огромной куче файлов css находите нужный файл... ??? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Desti Опубликовано 13 декабря, 2020 Поделиться Опубликовано 13 декабря, 2020 Я в "битве экстрасенсов" только третье место занял, пришлось в админы переквалифицироваться. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Арон Опубликовано 13 декабря, 2020 Автор Поделиться Опубликовано 13 декабря, 2020 12 часов назад, Desti сказал: надо F12 жать и смотреть в код и связанный css. Поясните пожалуйста на данном примере, как пользоваться f12 - чтобы узнать это значение? @media screen and (max-width: 767px) .ipsType_normal { font-size: 13px; } Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Desti Опубликовано 14 декабря, 2020 Поделиться Опубликовано 14 декабря, 2020 Меняйте масштаб до телефонного, смотрите по классу Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Арон Опубликовано 14 декабря, 2020 Автор Поделиться Опубликовано 14 декабря, 2020 Desti что я не так делаю? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Desti Опубликовано 14 декабря, 2020 Поделиться Опубликовано 14 декабря, 2020 Я же написал, смотрите по классу, на моем скриншоте выделено голубым в коде. А вы в body ткнули и что-то найти хотите. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.