Girlstalgia!: Layouts

How to use these layouts (click preview image to enlarge):

1. In Blogger, choose the Simple theme.
2. Go to Theme → Customize.
3. Set the colors above in Advanced.
4. Go to Advanced → Add CSS.
5. Paste the CSS override.
6. Replace the background image URL.
7. Save.

Lime Stripe Simple

A soft green striped Blogger Simple theme.

CSS override version

Use this if you want the easiest install. Start with Blogger’s Simple theme, then paste this into Theme → Customize → Advanced → Add CSS.

/* Girlstalgia Plug & Play: Lime Stripe Simple
   Use with Blogger's Simple theme.
   Paste in Theme > Customize > Advanced > Add CSS.
*/

body {
  background-color: #eef8d9 !important;
  background-image: url("https://i.ibb.co/v4N8QzTg/b3bda56faa5896fa92a8e5b6e5e80f99.jpg") !important;
  background-repeat: repeat !important;
  background-position: top left !important;
  color: #5f7040 !important;
  font-family: "Trebuchet MS", "Lucida Grande", Verdana, Arial, sans-serif !important;
}

.content-outer {
  margin: 28px auto 20px !important;
  border: 1px solid #b6d861 !important;
  background: #fffdf7 !important;
  box-shadow: 0 0 0 6px rgba(182, 216, 97, 0.25), 0 2px 12px rgba(95, 112, 64, 0.18) !important;
}

.content-inner,
.main-inner {
  background: #fffdf7 !important;
}

.header-outer {
  background: #e4f2c4 !important;
  border-bottom: 1px solid #b6d861 !important;
}

.Header h1,
.Header h1 a {
  color: #7da629 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
  letter-spacing: 1px !important;
  text-shadow: 1px 1px 0 #fffdf7 !important;
}

.Header .description {
  color: #5f7040 !important;
  font-style: italic !important;
}

.tabs-inner .widget ul {
  background: #eef8d9 !important;
  border-top: 1px solid #b6d861 !important;
  border-bottom: 1px solid #b6d861 !important;
}

.tabs-inner .widget li a {
  color: #5f7040 !important;
  background: #fffdf7 !important;
  border-left: 1px solid #d3e9a7 !important;
  border-right: 1px solid #b6d861 !important;
  text-decoration: none !important;
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  background: #b6d861 !important;
  color: #fffdf7 !important;
  text-decoration: none !important;
}

a:link,
a:visited {
  color: #7da629 !important;
  text-decoration: none !important;
}

a:hover {
  color: #5f7040 !important;
  text-decoration: underline !important;
}

h3.post-title,
h3.post-title a,
.comments h4 {
  color: #7da629 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
}

.date-header span {
  background: #b6d861 !important;
  color: #fffdf7 !important;
  border-radius: 12px !important;
  padding: 4px 10px !important;
}

.post-footer {
  background: #eef8d9 !important;
  color: #5f7040 !important;
  border-bottom: 1px solid #b6d861 !important;
  border-radius: 8px !important;
}

div.widget > h2,
div.widget h2.title {
  color: #7da629 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
  border-bottom: 1px dashed #b6d861 !important;
  padding-bottom: 4px !important;
}

.sidebar .widget {
  background: #eef8d9 !important;
  border: 1px solid #b6d861 !important;
  border-radius: 10px !important;
  padding: 10px !important;
  margin-bottom: 16px !important;
  box-shadow: inset 0 0 10px rgba(182, 216, 97, 0.22) !important;
}

.post-body img,
.post-body .tr-caption-container,
.Profile img,
.Image img,
.BlogList .item-thumbnail img {
  background: #fffdf7 !important;
  border: 1px solid #b6d861 !important;
  border-radius: 6px !important;
  box-shadow: 1px 1px 5px rgba(95, 112, 64, 0.18) !important;
}

.blog-pager {
  background: transparent !important;
}

.blog-pager-older-link,
.home-link,
.blog-pager-newer-link {
  background: #eef8d9 !important;
  border: 1px solid #b6d861 !important;
  border-radius: 12px !important;
}

.footer-outer {
  border-top: 1px dashed #b6d861 !important;
  color: #5f7040 !important;
}

::selection {
  background: #b6d861;
  color: #fffdf7;
}

Template Designer settings

Use this if you would rather change colors/fonts in Blogger’s Customize panel instead of pasting a full CSS override.

Theme: Simple
Outer Background: #eef8d9
Main Background: #fffdf7
Header Background: #e4f2c4
Page Text: Trebuchet MS, 12px, #5f7040
Links: #7da629
Visited Links: #91b344
Hover Links: #5f7040
Blog Title: Georgia, 40px, #7da629
Description: #5f7040
Tabs Background: #e4f2c4
Selected Tab Background: #b6d861
Selected Tab Text: #fffdf7
Date Header Background: #b6d861
Date Header Text: #fffdf7
Post Footer Background: #eef8d9
Gadget Title: #7da629
Image Border: #b6d861
Separator Line: #d3e9a7

Pink Star Travel

A bright pink and yellow star layout for Blogger’s Travel theme.

CSS override version

Use this with Blogger’s Travel theme. Paste it into Theme → Customize → Advanced → Add CSS.

/* Girlstalgia Plug & Play: Pink Star Travel
   Use with Blogger's Travel theme.
   Paste in Theme > Customize > Advanced > Add CSS.
*/

body {
  background-color: #f36fae !important;
  background-image: url("https://i.ibb.co/0RY04C3m/fbde2313fa824535313acb2743e084f2.jpg") !important;
  background-repeat: repeat !important;
  background-position: top center !important;
  background-attachment: fixed !important;
  color: #7c4662 !important;
  font-family: "Trebuchet MS", "Lucida Grande", Verdana, Arial, sans-serif !important;
}

/* Main wrapper */
.content-outer {
  margin: 25px auto !important;
}

.content-inner {
  background: transparent !important;
  padding: 30px !important;
}

/* Header */
.header-outer {
  background: #ffd6e8 !important;
  border: 2px solid #f8f2a1 !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 0 0 6px rgba(248, 242, 161, 0.35), 0 2px 12px rgba(124, 70, 98, 0.22) !important;
}

.Header h1,
.Header h1 a {
  color: #fffde0 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
  letter-spacing: 1px !important;
  text-shadow:
    2px 2px 0 #d94f92,
    -1px -1px 0 #d94f92,
    1px -1px 0 #d94f92,
    -1px 1px 0 #d94f92 !important;
}

.Header .description {
  color: #7c4662 !important;
  font-style: italic !important;
  text-shadow: 1px 1px 0 #fffde0 !important;
}

/* Tabs / pages */
.tabs-inner .widget ul {
  background: #f8f2a1 !important;
  border: 2px solid #f8f2a1 !important;
  border-top: 0 !important;
  border-radius: 0 0 12px 12px !important;
}

.tabs-inner .widget li a {
  color: #d94f92 !important;
  background: transparent !important;
  font-weight: bold !important;
  text-decoration: none !important;
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  background: #f36fae !important;
  color: #fffde0 !important;
  text-decoration: none !important;
  border-radius: 10px !important;
}

/* Main content area */
.main-inner .column-center-outer {
  background: #fffafc !important;
  border: 2px solid #f8f2a1 !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 6px rgba(255, 214, 232, 0.55), 0 2px 12px rgba(124, 70, 98, 0.18) !important;
}

.main-inner .column-center-inner {
  background: transparent !important;
}

/* Posts */
.post {
  color: #7c4662 !important;
}

h3.post-title,
h3.post-title a {
  color: #d94f92 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
  text-decoration: none !important;
}

h3.post-title a:hover {
  color: #f36fae !important;
  text-decoration: underline !important;
}

.post-body {
  color: #7c4662 !important;
  line-height: 1.5 !important;
}

.post-header,
.post-footer {
  color: #a66a83 !important;
}

/* Date */
.main-inner h2.date-header {
  color: #d94f92 !important;
  font-style: italic !important;
}

.date-header span,
.main-inner h2.date-header span {
  background: #f8f2a1 !important;
  color: #d94f92 !important;
  border: 1px solid #f36fae !important;
  border-radius: 12px !important;
  padding: 4px 10px !important;
}

/* Links */
a:link,
a:visited {
  color: #d94f92 !important;
  text-decoration: none !important;
}

a:hover {
  color: #f36fae !important;
  text-decoration: underline !important;
}

/* Sidebar */
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner,
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
  background: transparent !important;
}

.sidebar .widget {
  background: #ffd6e8 !important;
  color: #7c4662 !important;
  border: 2px solid #f8f2a1 !important;
  border-radius: 14px !important;
  padding: 12px !important;
  margin: 0 0 16px !important;
  box-shadow: 0 0 0 4px rgba(255, 250, 252, 0.5), inset 0 0 12px rgba(248, 242, 161, 0.35) !important;
}

.sidebar .widget h2,
.footer-inner .widget h2,
h2 {
  color: #d94f92 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
  border-bottom: 1px dashed #f36fae !important;
  padding-bottom: 5px !important;
}

.sidebar .widget a:link,
.sidebar .widget a:visited {
  color: #d94f92 !important;
}

.sidebar .widget a:hover {
  color: #7c4662 !important;
}

/* Images */
.post-body img,
.post-body .tr-caption-container,
.Profile img,
.Image img,
.BlogList .item-thumbnail img {
  background: #fffde0 !important;
  border: 2px solid #f8f2a1 !important;
  border-radius: 8px !important;
  padding: 5px !important;
  box-shadow: 1px 1px 6px rgba(124, 70, 98, 0.25) !important;
}

/* Comments */
#comments {
  background: #ffd6e8 !important;
  color: #7c4662 !important;
  border: 2px solid #f8f2a1 !important;
  border-radius: 12px !important;
}

#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a,
#comments a {
  color: #d94f92 !important;
}

/* Pager */
#blog-pager {
  color: #fffde0 !important;
}

#blog-pager a,
.blog-pager-older-link,
.home-link,
.blog-pager-newer-link {
  background: #f8f2a1 !important;
  color: #d94f92 !important;
  border: 1px solid #f36fae !important;
  border-radius: 12px !important;
  padding: 5px 10px !important;
}

/* Footer */
.footer-inner {
  background: #ffd6e8 !important;
  border: 2px solid #f8f2a1 !important;
  border-radius: 14px !important;
  color: #7c4662 !important;
}

.footer-inner .widget,
.footer-inner .widget a:link,
.footer-inner .widget a:visited {
  color: #7c4662 !important;
}

::selection {
  background: #f8f2a1;
  color: #d94f92;
}

Template Designer options

Use this if you would rather change Blogger’s built-in settings instead of using the full CSS override.

Theme: Travel
Outer Background: #f36fae
Main Background: transparent or #fffafc
Page Text: Trebuchet MS, 13px, #7c4662
Links: #d94f92
Visited Links: #a66a83
Hover Links: #f36fae
Blog Title: Georgia or Trebuchet MS, #fffde0
Description: #7c4662
Tabs Text: #d94f92
Selected Tabs Text: #fffde0
Tabs Background: #f8f2a1
Selected Tabs Background: #f36fae
Date Text: #d94f92
Post Title: #d94f92
Post Background: #fffafc
Gadget Title: #d94f92
Gadget Text: #7c4662
Gadget Links: #d94f92
Sidebar Background: #ffd6e8

Sunny Flower Awesome Inc.

A bright blue and yellow flower layout for Blogger’s Awesome Inc. theme.

CSS override version

Use this with Blogger’s Awesome Inc. theme. Paste it into Theme → Customize → Advanced → Add CSS.

/* Girlstalgia Plug & Play: Sunny Flower Awesome Inc.
   Use with Blogger's Awesome Inc. theme.
   Paste in Theme > Customize > Advanced > Add CSS.
*/

body {
  background-color: #31aee8 !important;
  background-image: url("https://i.ibb.co/mV9s9Q5V/Flowers.png") !important;
  background-repeat: repeat !important;
  background-position: top center !important;
  background-attachment: fixed !important;
  background-size: auto !important;
  color: #4e2800 !important;
  font-family: "Trebuchet MS", "Lucida Grande", Verdana, Arial, sans-serif !important;
}

/* Overall page */
.content-outer {
  background: transparent !important;
}

.content-inner {
  background: transparent !important;
}

/* Header */
.header-outer {
  background: #fff8cc !important;
  border: 2px solid #ffe12f !important;
  border-radius: 16px !important;
  margin-top: 22px !important;
  box-shadow:
    0 0 0 6px rgba(255, 225, 47, 0.35),
    0 2px 12px rgba(78, 40, 0, 0.22) !important;
}

.Header h1,
.Header h1 a {
  color: #31aee8 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
  letter-spacing: 1px !important;
  text-shadow:
    2px 2px 0 #ffe12f,
    -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff !important;
}

.Header .description {
  color: #4e2800 !important;
  font-style: italic !important;
  text-shadow: 1px 1px 0 #fff0a3 !important;
}

/* Tabs / pages */
.tabs-outer {
  background: transparent !important;
}

.tabs-cap-top,
.tabs-cap-bottom {
  border-top: 0 !important;
}

.tabs-inner .widget li a {
  background: #fff8cc !important;
  color: #31aee8 !important;
  border: 1px solid #ffe12f !important;
  border-radius: 12px 12px 0 0 !important;
  margin-right: 3px !important;
  font-weight: bold !important;
  text-decoration: none !important;
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  background: #ffe12f !important;
  color: #4e2800 !important;
  text-decoration: none !important;
}

/* Main post boxes */
.date-outer {
  background: #ffffff !important;
  border: 2px solid #ffe12f !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 0 5px rgba(255, 248, 204, 0.75),
    0 2px 10px rgba(78, 40, 0, 0.18) !important;
}

.post-outer,
.inline-ad {
  border-top: 1px dashed #ffe12f !important;
}

.post-outer:first-child {
  border-top: none !important;
}

.post-body {
  color: #4e2800 !important;
  line-height: 1.5 !important;
}

/* Date header */
.main-inner .widget h2.date-header {
  background: #ffe12f !important;
  color: #4e2800 !important;
  border: 2px solid #fff8cc !important;
  border-radius: 12px 12px 0 0 !important;
  text-shadow: none !important;
}

.main-inner .widget h2.date-header span {
  border: 0 !important;
  color: #4e2800 !important;
}

/* Post titles */
h3.post-title,
h3.post-title a,
h4 {
  color: #31aee8 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
  text-decoration: none !important;
}

h3.post-title a:hover {
  color: #f4a12a !important;
  text-decoration: underline !important;
}

/* Links */
a:link,
a:visited {
  color: #f4a12a !important;
  text-decoration: none !important;
}

a:hover {
  color: #31aee8 !important;
  text-decoration: underline !important;
}

/* Sidebar / gadgets */
.main-inner .widget {
  background: #fff8cc !important;
  border: 2px solid #ffe12f !important;
  border-radius: 14px !important;
  color: #4e2800 !important;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.55),
    0 2px 8px rgba(78, 40, 0, 0.16) !important;
}

.sidebar .widget {
  color: #4e2800 !important;
}

.sidebar .widget h2,
.main-inner .widget h2,
.footer-inner .widget h2 {
  color: #31aee8 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
  text-shadow: none !important;
  border-bottom: 1px dashed #f4a12a !important;
}

.sidebar .widget a:link,
.sidebar .widget a:visited {
  color: #f4a12a !important;
}

.sidebar .widget a:hover {
  color: #31aee8 !important;
}

/* Widget lists */
.main-inner .widget ul li,
.main-inner .widget #ArchiveList ul.flat li {
  color: #4e2800 !important;
  border-top: 1px dashed #ffe12f !important;
  border-bottom: 0 !important;
}

/* Images */
.post-body img,
.Profile img,
.Image img,
.BlogList .item-thumbnail img {
  background: #fff8cc !important;
  border: 2px solid #ffe12f !important;
  border-radius: 10px !important;
  padding: 6px !important;
  box-shadow: 1px 1px 6px rgba(78, 40, 0, 0.22) !important;
}

/* Pager */
#blog-pager {
  background: #fff8cc !important;
  border: 2px solid #ffe12f !important;
  border-radius: 14px !important;
  color: #4e2800 !important;
}

#blog-pager a,
.blog-pager-older-link,
.home-link,
.blog-pager-newer-link {
  color: #f4a12a !important;
}

/* Feed links */
.blog-feeds,
.post-feeds {
  color: #4e2800 !important;
}

.blog-feeds a,
.post-feeds a {
  color: #f4a12a !important;
}

/* Comments */
.comments,
#comments {
  background: #fff8cc !important;
  color: #4e2800 !important;
  border: 2px solid #ffe12f !important;
  border-radius: 14px !important;
}

#comments h4,
#comments a,
.comments a {
  color: #f4a12a !important;
}

/* Footer */
.footer-outer {
  color: #4e2800 !important;
}

.footer-fauxborder-left,
.footer-inner {
  background: #fff8cc !important;
  border-top: 2px solid #ffe12f !important;
  color: #4e2800 !important;
}

.footer-inner a:link,
.footer-inner a:visited {
  color: #f4a12a !important;
}

.footer-inner a:hover {
  color: #31aee8 !important;
}

/* Mobile */
.mobile-link-button {
  background: #ffe12f !important;
}

.mobile-link-button a:link,
.mobile-link-button a:visited {
  color: #4e2800 !important;
}

::selection {
  background: #ffe12f;
  color: #4e2800;
}

Template Designer options

Use this if you would rather change Blogger’s built-in settings instead of using the full CSS override.

Theme: Awesome Inc.
Background Color: #31aee8
Page Text: Trebuchet MS, 13px, #4e2800
Links: #f4a12a
Visited Links: #b5653b
Hover Links: #31aee8
Blog Title: Georgia or Trebuchet MS, #31aee8
Description: #4e2800
Tabs Text: #31aee8
Selected Tabs Text: #4e2800
Tabs Background: transparent
Selected Tabs Background: #ffe12f
Tabs Border: #ffe12f
Date Text: #4e2800
Date Border: #ffe12f
Post Title: #31aee8
Post Background: #ffffff
Post Border: #ffe12f
Gadget Title: #31aee8
Gadget Text: #4e2800
Gadget Links: #f4a12a
Gadget Background: #fff8cc
Gadget Border: #ffe12f
Footer Background: #fff8cc
Footer Text: #4e2800

Girlstalgia!

Pages

Layouts

Lime Stripe Simple

Pink Star Travel

Sunny Flower Awesome Inc.

No comments:

Post a Comment

Labels