注入自定义 CSS 以覆盖特定的对象格式 - 建议

Question

这里是新手。我正在 HTML5 上重新学习网络 - 自定义一个博客网站以削减我的牙齿。我已经能够对默认设置进行很多更改（w3schools 是无价的！）但是在尝试更改 specific 对象的格式时我遇到了困难。

我无法理解的三件事示例（站点 www.paddlebeforethewave.com）

1) 特色 Post（顶部）- 图片环绕文本是博客 post 的默认行为，特色 post 不遵循此行为。我能够如下更改 image/size 位置 - 但无法弄清楚如何让文字环绕图像。

.FeaturedPost .snippet-thumbnail img {
  max-width: 100px;
  float: left;
  margin: 0px;
  padding: 0px;
  display: inline;
}

2) 精选 post（顶部）- 我只想更改精选post 的背景颜色。我试过如下识别和修改 - 但没有效果。

.Blog .blog-posts .post-outer-container, #page_body .FeaturedPost {
  background: $(posts.background.color);
  min-height: 40px;
 padding: 30px 40px;
 width: auto;
}

或

.FeaturedPost .bgcolor {
   background-color: #cfe2f3;
}

或以上的许多排列

3) 第 2 页内容 - 我创建了第二页 (http://www.paddlebeforethewave.com/p/contact.html)，但是垂直填充和页面标签位置的格式丢失了。

我的方法有缺陷吗？你能用一个修复作为例子吗（我想学习！）

谢谢！

Screenshot for (1) and (2)

Answer 1

1) 将以下代码添加到您的主题中：

.FeaturedPost .snippet-thumbnail,
.FeaturedPost .post-snippet {
    display: inline;
}

2) 你的方法很好，如果你没有看到任何变化，请尝试清除你的浏览器缓存。精选 post 的正确 class 是：

.Blog .post-outer-container, #page_body .FeaturedPost {
 }

3) 我不确定我能看出问题所在。可以提供截图吗？

编辑：

找到了！转到您的主题代码并将以下属性添加到此 class:

.item-view .blog-name {
    -webkit-flex-flow: column;
    flex-flow: column;
}

Answer 2

我看到你解决了你的问题，但我确实在你的网站上看到了一个问题。对于大屏幕，如果屏幕大于 1800 像素，则会出现白色条。

您可以通过在 CSS

中找到此代码来解决此问题

.sidebar-container

并添加

display:none;

您可以在浏览器中进行测试，方法是缩小直到出现该栏。干杯

注入自定义 CSS 以覆盖特定的对象格式 - 建议

Injecting custom CSS to override specific object formats - advice

html

css

blogger