菜单

如何自定义您的AdThrive移动主题

今天我’m sharing an 关于如何自定义AdThrive移动主题的简单教程。这个简单的指南将帮助您打造梦想中的移动网站!

如何自定义您的AdThrive移动主题

如何自定义您的AdThrive移动主题

大家好!你们中的有些人可能已经注意到我的移动网站焕然一新。一世’我有点在挖它! :) 你觉得怎么样?

我知道我的几个博客朋友都在 AdThrive移动 并且可能也想自定义主题。所以我以为我’d分享我的经验。我知道这篇文章没有’不适用于您中的99.99%,但我确实想分享我的做法,以防万一我的任何博客朋友都觉得有帮助。 :)因此,无论如何,如果这完全不是您的事,请随时跳过这篇文章,而我’下周会定期播放您安排好的节目!更多食谱! :) :)

但是如果你’在AdThrive移动版上成为博客作者,请继续阅读! :)

轻松自定义AdThrive移动主题的方法!

如何自定义您的AdThrive移动主题

您可以在AdThrive移动主题上自定义一些内容。它’s mostly just 颜色和字体。赢了’不得更改有关广告展示方式或影响收入的任何信息。

在您的WordPress信息中心中,点击 AdThrive,然后点击 样式标签。在这里您可以粘贴一些代码(我可以在下面使用很多示例!)来自定义主题。您的白框将为空白,但是如您所见,我’我已经有一些代码了。如果您的包装盒中已经包含一些代码,只需将此代码粘贴在其下方。

现在,如果你’我以前从未使用过代码,不要’不要害怕。完全没有这不是’那种可能破坏您网站的代码。这只是样式代码。认为这是穿衣服而不是开胸手术。如果你不这样做’就像这段代码一样,您只需将其取下,然后就可以完全回到以前的样子。

如果您以某种方式弄乱了代码,那就赢了’不会破坏任何东西,它赢了’也不要进行任何更改。所以不要’不必担心,可以尝试! :)

 

获得正确的颜色

首先是第一件事。你’需要颜色代码进行任何颜色更改。如果您知道自己的网站’s的六位数颜色代码,太好了!!如果你不这样做’t,您可以在这里浏览颜色并获取其六位数代码: colorpicker.com

你 can also use the Chrome ColorZilla插件 在任何网站上单击任何颜色,它将六位数的颜色代码复制到剪贴板。 ColorZilla插件也可用于 火狐浏览器.

 

开始定制!

您可以更改哪些类型的东西?以下是一些示例:

如何自定义您的AdThrive移动主题

/* Home Page Post Title Alignment and Background Color */
#content article.list .entry-title {
text-align: center;
background-color: #FF3D7F;
opacity: .8;
font-weight: 400;
font-size: 1.15em;
}

您可以将主页上帖子标题的背景颜色从原来的灰色更改为更有趣的颜色!一世’m using pink (FF3D7F)。只需将您的颜色代码更改为6位数字即可!

原来是不透明 .7,但是如果您更改颜色,则可能希望不透明度更高。使用粉红色时,我的不透明度看起来更好 .8.

你 can change the the text alignment for the titles to 剩下, 正确的, 或者 中央.

您还可以更改字体粗细(数字越大,字体越粗)和字体大小,但是我没有’t change mine.

要使外观焕然一新,请将代码从上方的蓝色框中复制并粘贴到 样式标签。进行颜色更改,然后单击 保存更改。刷新移动网站上的页面以查看更改。如果你不这样做’只需删除代码,然后再次单击“保存”即可。它’我会回到以前的样子。

 

 

如何自定义您的AdThrive移动主题

/* Post Title Color on Individual Pages */
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6, #content h1 a, #content h2 a, #content h3 a, #content h4 a, #content h5 a, #content h6 a {
color: #3FB8AF;
}

您可以将帖子标题颜色更改为有趣的颜色!将上面的代码复制并粘贴到“样式”框中,然后单击“保存更改”。

 

如何自定义您的AdThrive移动主题

/* Links Inside the Post */
a:visited { color: #FF3D7F; }
a { color: #FF3D7F; }

使链接在您的帖子中脱颖而出!您可以更改链接颜色和访问的链接颜色。我始终将这两种颜色保持不变,但如果需要,可以将它们设置为不同的颜色。

 

如何自定义您的AdThrive移动主题

/* Menu Background Color */
#site-navigation {
background-color: #3FB8AF;
}

您可以使菜单变得有趣而丰富多彩!使用上面的代码更改背景色。

 

如何自定义您的AdThrive移动主题


/* Menu Link Color and Border */
#site-navigation ul.menu li a {
color: #FFFFFF;
border-bottom: 1px solid #7FC7AF;
}

如果更改菜单背景颜色,则可能还需要更改字体颜色(我保持白色,FFFFFF)和底部边框颜色(链接之间的线)。

 

如何自定义您的AdThrive移动主题

/* Author Comment Color and Background Color */
.bypostauthor {
background-color: #FF3D7F;
color: #ffffff;
}

让您的评论在人群中脱颖而出!您可以为评论提供明亮的背景,以便读者立即知道您何时’ve回复了评论。您可以更改背景色(我的是粉红色)和颜色,这意味着字体颜色(我的是白色)。

 

如何自定义您的AdThrive移动主题

/* Author Comment Link Color */
.bypostauthor a, .bypostauthor a:visited {
color: #FF9E9D;
}

现在这是完全可选的,我只是为了好玩而已,因为可以。您可以更改评论的链接颜色。它们原本是白色的,看起来像白色一样好。但是我将我的颜色改为浅粉红色。这样人们就可以知道我是否在自己的评论之一中发布了指向他们评论的链接。

 

如何自定义您的AdThrive移动主题


/* Smaller Menu */
#site-navigation ul.menu li a {
list-style-type: none;
line-height: .5;
}

这是您可能不需要的另一种。但是,如果菜单中的项目超过约5个,它们就会被切断。我只是将行之间的间距缩小了一点,以便可以容纳更多的链接。线高原为 1.5,但我将其更改为 .5。如果您的菜单较长,可以尝试一下以查看哪种最适合您的移动网站。如果这样做,请在保存后检查您的配方卡。可能会使行间距太近。如果您的网站属于这种情况,请删除这些行。

 

完成您的新& Improved Site

如何自定义您的AdThrive移动主题

将您要使用的上述任何或全部代码粘贴到“ 样式标签 然后点击 保存更改。刷新您的移动网站上的页面,然后看您的喜好!再说一次,如果你不’如果喜欢,只需返回“样式”选项卡并删除添加的代码即可。删除它只会使网站恢复到原来的样子,因此您’re not out anything.

如何自定义您的AdThrive移动主题

最后一件事。在下面 外观标签,您可以使用下拉框更改标题字体(各个帖子的帖子标题)和正文字体(帖子内部的文本)。我改变了我的 乔治亚州,这是我在桌面网站上使用的字体,只是为了使这两个网站更具凝聚力。

所以无论如何!那’这是自定义主题并使它看起来更像您的桌面网站的良好开端。 :)如果您到目前为止做到了,希望对您有所帮助!

如有任何疑问,请告诉我,我’我会尽力的。 :)祝你好运,玩得开心! :)

你 May Also Like:

38个回复
  1. 莎莉@晚饭妈妈

    感谢您的教程! AdThrive在这里推荐了我,现在我的移动主题(感谢您)将变得很酷很漂亮。非常容易遵循。我的手机现在只需要几天时间就能启动,我可以’等一下非常有帮助,我’m not a coding guru.

  2. 贾辛达

    嗨,阿曼达
    这很有帮助! AdThrive与我分享了它。
    快速提问:您知道如何更改主页帖子标题上的字体颜色吗?我们的背景很浅,因此我需要将它们从白色更改为黑色。

    任何帮助表示赞赏!贾辛达

  3. 乔治·布莱恩特

    嗨,阿曼达,

    我真的想通了。但是我也早些时候看到了您的评论,并且主页上的社交图标背景发生了变化,效果很好。我做了一个叉子和刀子的图案。这是代码:

    .social-links {
    文本对齐:居中;
    padding-bottom:10px;
    padding-top:10像素;
    background: url(‘http://civilizedcavemancooking.com/wp-content/uploads/2015/05/mobile-header.png’);
    底边距:10px;

    我希望您将其添加到您的教程中,然后链接到我的网站:)

  4. 乔治·布莱恩特

    嗨,阿曼达,

    这次真是万分感谢。您如何更改首页上帖子标题的颜色,仅此而已’t figure out?

  5. 达娜

    非常感谢您抽出宝贵的时间与我们分享代码!
    想知道您是否会更改字体样式吗?
    我注意到 http://backtoherroots.com/ 她具有自定义的字体样式。
    I’我曾尝试添加我自己的代码,但可以’没错。如果你知道代码,我’d love to know…。但是,如果没有,不用担心!一世’我会尝试搜索更多。
    非常感谢!

    1. 阿曼达

      嗨,达娜!

      试试这个代码:

      /* For the Post Titles */
      .entry-title {
      font-family: Unica One, arial, sans-serif;
      }

      /* For the Posts */
      .entry-content {
      font-family: Raleway, Helvetica, sans-serif;
      }

      /* For the Menu */
      #site-navigation ul.menu {
      font-family: Raleway, Helvetica, sans-serif;
      }

      希望这可以帮助!

  6. 艾米丽·叮咬

    我只是使用此指南自定义了我的移动网站,它非常有用!非常感谢,阿曼达,我永远不会独自想出如何做到这一点。你’re awesome! :)

  7. 珍妮佛

    我喜欢这个!我没有’完全没有触及我的手机主题’无法实现所有定制。感谢您抽出宝贵的时间编写本教程!

  8. Kelly Senyei |只是一种味道

    你真了不起,阿曼达!太感谢了!是否有特定的设置来使首页显示AdThrive主题中标准的垂直图像而不是水平图像?感谢您所做的一切!!!

    1. 阿曼达

      嗨,凯利! :)只是问问AdThrive,他们可以为您更改。 :) 希望这可以帮助!! :)

    2. 整洁妈妈

      凯莉,我只是看着您的移动版面而喜欢它!是你的’只是AdThrive?还是定制的?我喜欢您的搜索框,并且您的下拉菜单实际上说“MENU”它喜欢这个位置—现在最像我的藏在右上方’没有标为菜单,所以很多人没有’不知道点击那个!

    3. Kelly Senyei |只是一种味道

      嗨,谢丽尔!现在我还没有’切换到AdThrive移动主题,那么您’重新看到是我的自定义编码网站:)

  9. 阿什利@愿望& Dishes

    这花了我不到15分钟的时间,现在我的网站看起来更漂亮了!谢谢!对我来说最好的是菜单,因为我的菜单很长,所以行之间的间距较小。我的食谱“tabs”都被推到了底部。太感谢了!!!!

  10. 索尼娅(Sonya)〜在树皮屋里

    这太棒了!我只是用教程来更新我的!效果很好…我当然希望我使用的每个教程都这么简单。谢谢你〜索尼娅

  11. 阿什利@愿望& Dishes

    阿曼达,你’re awesome. That’s all. :)

    我现在就去做!

  12. 梅勒妮@卡梅尔时刻

    我刚刚被AdThrive接受,所以我’一定会在不久的将来将此标记为书签。感谢分享!

  13. 克里斯汀·伯格索德(Kristin Bergthold)

    你’re a lifesaver –非常感谢您抽出宝贵的时间来做!

  14. 丹妮尔

    这非常有用,只花了几分钟,而且我的移动网站看起来好多了。感谢出色的教程!!!

  15. 西瑞@ The36thAvenue

    阿曼达,您真棒!
    是否有机会改变社交媒体图标及其背景区域的颜色?

    太感谢了!!!!
    o

    1. 阿曼达

      伟大的问题西瑞!你完全可以! :)

      要更改菜单中社交媒体图标的颜色和背景色,请使用以下代码:

      #site-navigation .social-links {
      background: #FF3D2E;
      }

      #site-navigation .fa {
      color: #9DBDC6;
      }

      第一个更改背景颜色,第二个更改图标的颜色! :)

      如果您这样做,请截取屏幕截图并将其发送给我([email protected])和我’当然,我会尽量向您介绍该教程! :) 祝你好运! :)

    2. 凯利@一路走来

      我听说有谣言称社交媒体图标将很快被自定义,例如第二天或第二天。我还看到了一个很棒的示例,其中她更改了背景颜色,但我不知道该如何更改。’s done. :) — http://backtoherroots.com/

有什么问题或者建议么?

认识凯文& Amanda

凯文and Amanda

我们喜欢旅行和吃饭!在这里,我们分享我们最喜欢的快捷方式 食谱,再加上 旅行贴士 以及世界各地我们最喜欢的地方的指南。认识我们 波士顿梗犬。参观 我们的家。如果您对我使用什么相机或如何编辑照片有任何疑问,请查看我的 摄影教程.

阅读更多

通过电子邮件订阅: