Я новичок в HTML и CSS, и у меня возникли некоторые проблемы с пользовательским макетом моего нового блога на Tumblr.
Вот ссылка на блог: https://wojakgallery.tumblr.com/
Как вы можете видеть по ссылке выше, я использую сетку из 6 столбцов для сообщений.
Проблема, которую я вижу, заключается в моих страницах «Отправить» и «Спросить» при просмотре в браузере на ПК (не на мобильном телефоне).
Например, как вы можете видеть на моей странице отправки, поле отправки слишком маленькое для содержимого (из-за чего вы не можете просмотреть его полностью), поле столбца отправки должно быть больше.
Однако когда я редактирую количество столбцов CSS, раздел «.grid» ниже влияет на все сообщения во всем блоге, поэтому, если я изменю количество столбцов на «column-count: 1;», все сообщения в блоге будут отображаться в 1 столбец.
.grid section {
column-count: 6;
break-inside: avoid;
grid-gap: var(--spacing);
margin-bottom:var(--spacing);
}
Как я могу разделить страницы «Отправить» и «Спросить», чтобы иметь только 1 столбец и центрироваться, сохраняя при этом остальные обычные сообщения в блоге с «количество столбцов: 6;»?
Есть ли способ разделить коды столбцов сетки HTML и CSS для определенных страниц, таких как «Отправить» и «Спросить»?
Ниже приведен полный HTML и CSS-код моего блога.
<!DOCTYPE html>
<!-- A custom theme built by eggdesign's theme builder (buildatheme.tumblr.com) -->
<html>
<head>
<!-- BEGIN: Powered by Supercounters.com -->
<center><script type = "text/javascript" src = "//widget.supercounters.com/ssl/online_i.js"></script><script type = "text/javascript">sc_online_i(1684521,"ffffff","#283966");</script><br><noscript><a href = "https://www.supercounters.com/">free online counter</a></noscript>
</center>
<!-- END: Powered by Supercounters.com -->
<title>{Title}</title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
<link rel = "shortcut icon" href = "{Favicon}">
<link rel = "alternate" type = "application/rss+xml" href = "{RSS}">
{block:Description}<meta name = "description" content = "{MetaDescription}" />{/block:Description}
{block:Options}
<meta name = "color:background" content = "#fff"/>
<meta name = "color:posts" content = "#fff"/>
<meta name = "color:text" content = "#000"/>
<meta name = "color:links" content = "#000" />
<meta name = "color:tags" content = "#000" />
<meta name = "color:sidebar links" content = "{AccentColor}"/>
<meta name = "color:search background" content = "#fff" />
<meta name = "color:search text" content = "#000"/>
<meta name = "color:borders" content = "#ddd"/>
<meta name = "text:border width" content = "1px"/>
<meta name = "text:border radius" content = "4px"/>
<meta name = "text:font size" content = "16px" />
<meta name = "image:background" content = ""/>
<meta name = "color:night mode accent" content = "#fff" />
<meta name = "if:Remove background image in night mode" content = ""/>
<meta name = "if:full background" content = ""/>
<meta name = "select:Font" content = "Helvetica" title = "Helvetica" />
<meta name = "select:Font" content = "Roboto" title = "Roboto" />
<meta name = "select:Font" content = "Favorit" title = "Favorit" />
<meta name = "select:Font" content = "Calluna" title = "Calluna" />
<meta name = "select:Font" content = "Fairwater" title = "Fairwater" />
<meta name = "select:Font" content = "Source Code Pro" title = "Source Code Pro" />
{/block:Options}
{NewPostStyles}
<script>
const themed = localStorage.getItem('night-mode');
if (themed === "enabled") {
sessionStorage.setItem('night-mode', 'enabled');
document.documentElement.classList.add('night-mode-theme');
}
</script>
<script src = "https://static.tumblr.com/svdghan/gFJrolu7g/daynight.js"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900');
* {
box-sizing: border-box;
}
:root {
--background-image: url({image:background});
--background: {color:background};
--accent: {AccentColor};
--text: {color:text};
--borders: {color:borders};
--spacing: 1rem;
--border-width: {text:border width};
--border-radius: {text:border radius};
--posts: {color:posts};
--tags: {color:tags};
--links: {color:links};
--sidebar-links: {color:sidebar links};
--search-background: {color:search background};
--search-text: {color:search text};
--headerimage: url({HeaderImage});
--invert: invert(0);
--night-mode-accent: {color:night mode accent};
}
.night-mode-theme {
--background: #000!important;
--accent: var(--night-mode-accent);
{block:ifRemoveBackgroundImageInNightMode}
--background-image: url('');
{/block:ifRemoveBackgroundImageInNightMode}
--text: white;
--posts: #222;
--invert: invert(1);
--links: var(--night-mode-accent);
--tags: var(--night-mode-accent);
}
body {
font-family: {select:Font}, sans-serif;
font-size: clamp(.92rem, {text:font size}, 20px);
margin: 0;
height: 100vh;
color: var(--text);
background: var(--background) var(--background-image) center center fixed;
{block:iffullbackground}
background-size: cover;
{/block:iffullbackground}}
a {
color: var(--links);
}
header {
margin:var(--spacing) auto;
max-width:1100px;
padding:var(--spacing);
background:var(--posts);
border: var(--border-width) solid var(--borders);
border-radius:var(--border-radius);
}
article a {
text-decoration: none;
}
article a:hover {
text-decoration: underline;
}
article iframe, .tumblr_video_container {
max-width: 100%;
}
.blog-title {
font-family: {TitleFont};
}
main, .pagination {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-around;
}
main {
max-width:1100px;
margin:auto;
}
article, .pagination {
width: 100%;
position:relative;
max-width: 400px;
margin: calc(var(--spacing) * 4) auto;
border: var(--border-width) solid var(--borders);
border-radius: var(--border-radius);
background:var(--posts);
}
aside .pagination {
margin: var(--spacing) auto auto auto;
}
article img {
max-width: 100%;
}
.link-container {
padding: var(--spacing);
margin:var(--spacing);
border:var(--border-width) solid var(--borders);
border-radius: var(--border-radius);
}
.caption:empty, p:empty {
display:none;
}
.reblog-header a {
display: flex;
align-items:center;
}
.reblog-header img {
padding-right: .4rem;
max-height: 1.4rem;
}
.contained :is(header, footer, main) {
width: 100%;
max-width: 1000px;
margin: 1rem auto;
background: var(--background);
border: var(--border-width) solid var(--borders);
}
.contained header {
margin-bottom: 0;
padding: var(--spacing);
}
.contained main {
height: 70vh;
overflow: auto;
}
.contained article, .contained .pagination {
max-width: 500px;
}
.grid main {
max-width: 98%;
}
.grid section {
column-count: 6;
break-inside: avoid;
grid-gap: var(--spacing);
margin-bottom:var(--spacing);
}
.grid article {
display: inline-block;
max-width: calc(100% - (var(--spacing) / 2));
margin: var(--spacing) 0;
}
.original-post, .reblog-header, .tags, .post-info, .pagination, .quote-container, .replies, .question {
padding: var(--spacing);
}
.reblog-content p, .reblog-content h2, .reblog-content h1 {
margin-left: var(--spacing);
margin-right: var(--spacing);
}
.quote-container, .replies, .question {
border: var(--border-width) solid var(--borders);
margin: var(--spacing);
}
.description, aside h2 {
padding: calc(var(--spacing) /2) 0;
margin: 0;
}
#search-form input {
padding: calc(var(--spacing) / 2);
width:100%;
background:var(--search-background);
margin: calc(var(--spacing) /2) 0 0 0;
border:var(--border-width) solid var(--borders);
border-radius:var(--border-radius);
color:var(--search-text);
}
::placeholder {
color:var(--search-text);
}
.post-info, .like-and-reblog, .contained {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.pinned {
font-weight:bold;
color:var(--accent);
}
.pinned {
font-weight:bold;
}
.pinned-default {
padding:var(--spacing);
}
.like-and-reblog .reblog_button, .like-and-reblog .like_button:not(.liked) {
filter: var(--invert);
}
section {
width: 100%;
}
header {
width: 100%;
}
.pages-container, .nav-container {
margin: calc(var(--spacing) /4) 0;
}
.pages-container a, .nav-container a, .pagination a, .tags a {
display: inline-block;
margin-right: .4rem;
color: var(--text);
text-decoration:none;
}
aside a {
color: var(--sidebar-links);
}
.tags a {
color: var(--tags);
}
.pages-container a {
font-weight:bold;
color:var(--accent);
}
.reblogs a, .caption a {
color:var(--accent);
}
.tumblr_audio_player {
width: 100%;
}
@media only screen and (max-width: 1100px) {
main, .contained main, section {
width: 100%;
height: auto;
}
article {
max-width:90%;
margin: var(--spacing) auto;
}
.grid section {
column-count: 1;
}
}
.screen-reader {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
#daynight-toggle {
cursor:pointer;
background:;
position:fixed;
top:var(--spacing);
left:var(--spacing);
z-index:2;
height:2rem;
width:2rem;
border-radius:50%;
background:white;
display:flex;
border:var(--border-width) solid var(--borders);
flex-wrap:wrap;
justify-content:center;
align-items:center;
}
#daynight-toggle:before {
content:'☀';
}
#daynight-toggle.night-mode-toggle:before {
content:'';
width:1rem;
height:1rem;
transform:translate(-.32rem, -.32rem);
border-radius: 50%;
box-shadow: .32rem .32rem 0 0 black;
}
{CustomCSS}
</style>
</head>
<body class = "grid {block:homepage}home{/block:homepage}{block:tagpage}tag{/block:tagpage}{block:searchpage}search{/block:searchpage}{block:submitpage}submit-{/block:submitpage}{block:AskPage}ask{/block:AskPage}-page">
<!-- Day/Night Toggle start <button id = "daynight-toggle"><span class = "screen-reader">toggle day and night mode</span></button> End -->
<header> {block:ShowTitle}
<a style = "text-decoration: none; color:#0c1630;" href = "https://wojakgallery.tumblr.com/"><h2 class = "blog-title">{Title}</h2></a>
{/block:ShowTitle}
<div class = "description">{Description}</div>
<div class = "nav-container">
<a href = "https://wojakgallery.tumblr.com/"><b>[Home]</b></a>
<a href = "https://wojakgallery.tumblr.com/random"><b>[Random Post]</b></a>
{block:askenabled}
<a href = "/ask"><b>[Ask]</b></a>
{/block:askenabled}
{block:submissionsenabled}
<a href = "/submit"><b>[Submit]</b></a>
{/block:submissionsenabled}
<a href = "/archive"><b>[Archive]</b></a>
</div>
{block:HasPages}
<div class = "pages-container">
{block:Pages}
<a href = "{URL}">{Label}</a>
{/block:Pages}
</div>
{/block:HasPages}
<form action = "/search" method = "get" id = "search-form">
<input type = "text" name = "q" class = "query" value = "" placeholder = "🔍 Search Tags (type & hit enter)">
</form></header>
<main>
<section>
{block:SearchPage}
<article>
<div class = "reblogs">{lang:Found SearchResultCount results for SearchQuery}
<div class = "Sorry" style = "margin-left:5px;">
{block:NoSearchResults}
<p>Sorry, no listings are tagged with "{SearchQuery}."</p>
{/block:NoSearchResults}
</div>
</div>
</article>
{/block:SearchPage}
{block:TagPage}
<article>
<div class = "reblogs">{lang:Showing TagResultCount posts tagged Tag}</div>
</article>
{/block:TagPage}
{block:DayPage}
<article>
<div class = "reblogs">{lang:Viewing everything posted on Month DayOfMonth Year}</div>
</article>
{/block:DayPage}
{block:Posts}
<!-- {block:NoRebloggedFrom}
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
{/block:NoRebloggedFrom} -->
{block:ContentSource}<!-- {SourceURL}
{block:SourceLogo}<img src = "{BlackLogoURL}"width = "{LogoWidth}" height = "{LogoHeight}" alt = "{SourceTitle}" />{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}
<article id = "post-{PostID}">
{block:PinnedPostLabel}<div class = "pinned pinned-default"><i></i>{PinnedPostLabel}</div>{/block:PinnedPostLabel}
{block:RebloggedFrom}
<div class = "reblog-header">
<a href = "{permalink}" {block:isdeactivated}class = "inactive"{/block:isdeactivated}>
<img src = {ReblogRootPortraitURL-64} alt = "{ReblogRootName}"> {ReblogRootName}
</a>
</div>
{/block:RebloggedFrom}
{block:Photo}
<img src = "{PhotoURL-HighRes}" alt = "{photoalt}" class = "photos">
{/block:Photo}
{block:Photoset}
{Photoset}
{/block:Photoset}
{block:Panorama}
<img src = "{photourl-panorama}" alt = "{photoalt}">
{/block:Panorama}
{block:Quote}
<div class = "quote-container">
<div class = "quote">
"{Quote}"
</div>
<div class = "source">
-{Source}
</div>
</div>
{/block:Quote}
{block:Chat}
<ul class = "chat">
{block:Lines}
<li>
{block:Label}{Label}{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
{/block:Chat}
{block:link}
<div class = "link-container">
<a href = "{URL}">
{Name}
</a>
</div>
{/block:link}
{block:Video}
{Video-700}
{/block:Video}
{block:Audio}
{audioembed}
{/block:Audio}
{block:Answer}
<div class = "question">
{Asker}: {Question}
</div>
{block:Answerer}
<div class = "replies">
{Answerer}: {Answer}
</div>
{/block:Answerer}
{block:NotReblog}
<div class = "replies">
{Replies}
</div>
{/block:NotReblog}
{/block:Answer}
<!-- captions -->
<div class = "caption {block:notreblog} original-post {/block:notreblog}">
{block:Text}
{block:Title}<h2>{Title}</h2>{/block:Title}
{/block:Text}
<hr>
{block:notreblog}
{block:caption}{Caption}{/block:caption}
{block:Text}{body}{/block:Text}
{/block:notreblog}
{block:Rebloggedfrom}
{block:Reblogs}
<div class = "reblogs">
{block:IsNotOriginalEntry}
<div class = "reblog-header">
<a href = "{permalink}" {block:isdeactivated}class = "inactive"{/block:isdeactivated}>
<img src = {PortraitURL-64} alt = "{username}"> {username}
</a>
</div>
{/block:IsNotOriginalEntry}
<div class = "reblog-content">
{Body}
</div>
</div>
{/block:Reblogs}
{/block:RebloggedFrom}
<hr>
<div class = "container">
<div class = "topleft">
{LikeButton}</div>
<div class = "topright">
{ReblogButton}</div>
</div>
</div>
<!–– START DATE POSTED AND TAGS ––>
{block:Date}<div class = "post-info">
<div class = "note-info">
<a href = "{Permalink}">Posted <a href = "/day/{year}/{MonthNumberWithZero}/{DayOfMonth}">{TimeAgo}</a> with <a href = "{Permalink}"> {NoteCountwithLabel}</a></div>
</div>{/block:Date}
{block:PermalinkPage}
{block:Hastags}
<div class = "tags">
{block:Tags}
<a href = "{TagURL}">#{Tag}</a>
{/block:Tags}
</div>
{/block:Hastags}
{/block:PermalinkPage}
<!–– END DATE POSTED AND TAGS ––>
{PostNotes}
</article>
{/block:Posts}
{block:Pagination}
<div class = "pagination flex centered">
{block:previouspage}
<a href = "{previouspage}">Prev</a>
{/block:previouspage}
{block:JumpPagination length = "5"}
{block:CurrentPage}
<span class = "current-page">
{PageNumber}
</span>
{/block:CurrentPage}
{block:JumpPage}
<a href = "{URL}">
{PageNumber}
</a>
{/block:JumpPage}
{/block:JumpPagination}
{block:nextpage}
<a href = "{nextpage}">Next</a>
{/block:nextpage}
</div>
{/block:Pagination}
</section></main>
</body>
</html>
Дополнительный пользовательский CSS:
.blog-title {
font-family: {TitleFont};
font-size: 30px;
}
.pages-container, .nav-container {
margin: calc(var(--spacing) /1) 0;
}
.pages-container a {
background:linear-gradient(to bottom, #290c9d 5%, #290c9d 100%);
background-color:#290c9d;
border-radius:5px;
border:1px solid #4e6096;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Helvetica;
font-size:17px;
padding:6px; 18px;
text-decoration:none;
text-shadow:0px 1px 6px #283966;
margin-bottom:0px;
margin-top:4px;
background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
background-color:#476e9e;
position:relative;
margin-right:0px;
}
/* LIKE BUTTON AND REBLOG BUTTON START */
.container {
position: relative;
}
.topleft {
position: absolute;
top: 4px;
left: 0px;
font-size: 18px;
}
.topright {
position: absolute;
top: 4px;
left: 25px;
font-size: 18px;
}
/* LIKE BUTTON AND REBLOG BUTTON END */
Если это не имеет смысла или вы не можете заставить его работать, я опубликую здесь кое-что позже сегодня.
Итак, я проверил ваш блог на Tumblr, и кажется, что классы уже передаются на страницы отправки и запроса, так что вы можете настроить их таргетинг через CSS.
Вот как бы я это сделал
<style>
/* use this css which is already in the theme to target standard index, post pages etc. */
.grid section {
column-count: 6;
break-inside: avoid;
grid-gap: var(--spacing);
margin-bottom: var(--spacing);
}
/* extend the css for ask/submit pages */
body.submit--page .grid section,
body.ask-page .grid section {
column-count: unset // reset the column-count property
grid-gap: 0;
// add another styles here you only want to target on these pages
}
</style>
Это должно сделать все, что вам нужно, но охватывает только эти две страницы.
Если вам нужно более комплексное решение для добавления класса на любую страницу (и, следовательно, возможность ориентироваться конкретно на CSS), дайте мне знать. Но это описано в другом ответе, на который я дал ссылку.
Я не уверен, почему submit--page
имеет двойное тире, а ask-page
только одно, но, по крайней мере, каждая страница имеет уникальный идентификатор.
РЕДАКТИРОВАТЬ
Извиняюсь, я только что снова заметил в вашей теме, что класс grid
также применяется к телу. Следовательно, body.submit--page .grid section
не существует, поскольку сетка не является дочерним элементом тела, это тот же элемент.
Измените селекторы на
body.submit--page section,
body.ask-page section {
// styles...
РЕДАКТИРОВАТЬ 2
Для обработки настольных/мобильных устройств вам необходимо обновить медиа-запросы.
Найдите этот код в своей теме (это для мобильных устройств)
media only screen and (max-width: 1100px)
.grid section {
column-count: 1;
}
Если мобильный телефон всегда представляет собой один столбец, это нормально.
Для настольных компьютеров и мобильных устройств это должно охватывать (обратите внимание, что сейчас вы задаете вопросы специфичности)
/* desktop */
body.submit--page section,
body.ask-page section {
column-count: 3 // add your column count for desktop here
grid-gap: 0;
}
/* mobile/tablet */
media only screen and (max-width: 1100px)
body.submit--page section,
body.ask-page section {
column-count: 1; // reset columns to 1 for mobile
}
Я добавил следующее в CSS, но ничего не изменилось. Есть идеи, есть ли что-то, что мне не хватает? /* расширяем CSS для страниц запроса/отправки */ body.submit--page .gridsection, body.ask-page .gridsection { columns-count: 1; разрыв сетки: 0; }
Извините моя ошибка. Я обновлю свой ответ.
Это сработало. ТИ. И последнее: когда я добавляю код из вашего редактирования, это также влияет на мобильные устройства. Мне нужно, чтобы в мобильном представлении было 1 столбец, а в представлении ПК — 3 столбца. Есть идеи, как я могу это сделать?
@GFB Я добавил медиа-запрос CSS (он уже есть в вашем шаблоне, вам следует передать стили для мобильных устройств в этот запрос CSS)
Хорошо, вот код, который я использую для мобильных устройств, но на мобильных устройствах он продолжает отображаться в 3 столбцах вместо 1 (который я хочу для мобильных устройств), кажется, он все еще продвигает код рабочего стола, для которого установлено 3 столбца. @media only screen и (максимальная ширина: 1100 пикселей) {main, .contained main,section {width: 100%; высота: авто;} статья {максимальная ширина: 90%; маржа: var(--spacing) auto;} .grid раздел {количество столбцов: 1;} body.submit--раздел страницы, раздел body.ask-page {количество столбцов: 1; разрыв сетки: 0;} }
@GFB, можешь ли ты сбросить для меня весь текущий шаблон в Pastebin и опубликовать здесь URL? astebin.com В вашем CSS есть и другие селекторы, но тогда я смогу исправить все за один раз.
Здесь: pastebin.com/ACXe0tBj
Можете ли вы попробовать это? astebin.com/HFbY4ZRP Я только что удалил один небольшой блок селекторов. Я попробовал протестировать его на Tumblr здесь: hoffman-test.tumblr.com/submit (и проверьте домашнюю страницу hoffman-test.tumblr.com ) на индексной странице возникла какая-то странная проблема с форматированием, может быть какая-то другая конфигурация в коде. Надеюсь, это будет хорошо на вашем Tumblr. Конечно, я бы сохранил копию существующей темы, но, к счастью, в Tumblr есть встроенная функция tumblr.com/themes/recover
ТЫСМ! Теперь команды «Отправить» и «Спросить» доступны как на настольных компьютерах, так и на мобильных устройствах с вашим кодом вставки.
Рад, что мы в конце концов туда попали.
Я делал это много раз, используя небольшой фрагмент JavaScript. Смотрите мою вторую часть ответа здесь: stackoverflow.com/a/70473354/1238244