W4N-1 Blog CSS

Tags: black, simple, bela

Description:

I have the profile css layout here

preview the blog here

Copy the code below and Paste it into your blog above your content.

You can add the css before writing your blog content, or afterwards.
I find it easier to add it after you have your blog content if you plan to add more styling or if you want to edit the CSS code.

Here is a quick how-to if you need it:

If you still need help, check out my blog for more info or questions or comments ~

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Bela (https://layouts.spacehey.com/layout?id=35482) -->

<style>
/* font */

@import url('https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&family=Qwigley&family=Tangerine&display=swap');

:root{
  --gray: #fff; /* background color */
  --logo-blue: transparent; /* navigation background color */
  --lighter-blue: transparent; /* nav links background */
  --lightest-blue: transparent; /*sidebar background */
  --light-orange: transparent; /* comments table first child background */
  --even-lighter-orange: transparent; /* comments table second child background */
  --borders: none;
  --font-family: 'Qwigley', cursive;
  --header: #410E0A;
  --text: #410E0A;
  --othertext: #410E0A;
  --links: #410E0A;
  --hover: #410E0A;
}

/*custom cursor */

a:hover{
 cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur613.cur'), auto!important;
}
*{
 cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur610.cur'), auto!important;
}

/* ---- */

body{
  background-color: var(--gray);
  background-image: url("https://i.ibb.co/NL0q5jQ/ad.jpg");
  background-size: 100%100%;
  background-attachment: fixed;
  font-family: var(--font-family);
}

a{
  color: var(--links);
}
a:hover{
  color: var(--hover);
  text-decoration: none;
}
.icon{
    font-size: 12px;
}
.kudos, DIV[id='kudos'] > FORM [type="submit"]{
    color:var(--links);
    text-shadow: 1px 1px 4px #000;
}
a, p, b, .count, nav label, .author-details h4, .kudos{
    text-shadow: 1px 1px 4px #000;
    font-family: 'Qwigley', cursive;
    font-size: 20px!important;
    font-weight: 1;
}
h1{
    font-family: 'Monsieur La Doulaise', cursive;
    font-size: 40px!important;
    text-shadow: 1px 1px 3px #000;
    font-weight: 1;
}
h2, h3, h4{
    font-family: 'Tangerine', cursive;
    font-size: 25px!important;
    text-align: center;
}
nav{
  color: var(--links);
  border: var(--borders);
}
nav .top{
  background: var(--logo-blue);
  color: black;
}
nav .links{
    text-align: center;
}

/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
  content: " | ";
  color: var(--header);
  font-size: 25px;
}

nav .links a{
  color: var(--links);
  text-shadow:none;
}

nav .links a:hover{
  color: var(--hover);
}

/* change the color at https://codepen.io/sosuke/pen/Pjoqqp */
nav img.logo{
    filter: brightness(0) saturate(100%) drop-shadow(1px 1px 3px #000)!important;
    height:30px!important;
}

/* the search wrapper and button */

.search-wrapper input[type=text] {
    background-color: transparent!important;
    border:none!important;
    border-radius: 3px;
    box-shadow: 0px 0px 5px black;
    color:#410E0A!important;
}
nav button{
    background-color: transparent;
    border:none;
    color:#410E0A!important;
    text-shadow: 1px 1px 4px #000;
    font-family: 'Qwigley', cursive;
    font-size: 20px!important;
    font-weight: 1;
}
/* this is where you edit your blog entry */

.blog-entry .comments .heading{
  border-top: 2px solid var(--othertext); /* this is the line that appears under the kudos */
}

.blog-entry .title{
  padding:10px;
  background-color: var(--lightest-blue);
  color: var(--header);
  border: var(--borders);
  font-family: var(--font-family);
}

.blog-entry .content{
  padding: 10px;
  background-color: var(--lightest-blue);
  border: var(--borders);
}

.count{
  color: var(--links); /* kudos color */
}

main{
  background: transparent;
  color: var(--text);
}
/* side bar with your profile image */

.edit-info{
  background: var(--lightest-blue);
  border: var(--borders);
  text-align: center;
}
.edit-info img:not(.icon){
    border-radius:10px;
    box-shadow: 0px 0px 10px black;
    outline: 1px solid black;
    outline-offset: -5px;
    margin-top:10px;
}

/* comments table */

.comment-replies{
    border:none;
    box-shadow: 0px 0px 5px black;
    border-radius: 10px;
    margin:10px;
}

.comment-reply:not(:first-child){
    border-top: 1px dotted black;
}

.comments-table{
  border: var(--borders);
  background-color: transparent;
  border-spacing:10px;
  padding:5px;
}

.comments-table td:first-child{
  background: var(--light-orange);
  border: 1px solid #000;
}
.comments-table td{
  background: var(--even-lighter-orange);
  border:none;
  padding:9px;
  box-shadow: 0px 0px 10px black;
  border-radius: 10px;
}
.comments-table td:first-child img:not(.icon){
    border-radius:10px;
    box-shadow: 0px 0px 10px black;
    outline: 1px solid black;
    outline-offset: -5px;
}
footer{
    background-color: transparent;
}
footer p, footer a{
    color:#B9B9B7!important;
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 0 of 0 comments ( View all | Add Comment )