// Fansite - Theme / Wisteria 

// Code 
// Preview 1 (with header) 
// Preview 2 (without header)

This is a simple contained fansite-theme based on my Hydrangea-theme. It comes with loads of options and its perfect for fansites, networks or just normal blogs to use as its very versatile and easy to customize!

Options:

• Posts: 250px / 400px / 500px
• Sidebar width: 150px / 175px / 200px / 225px / 250px / 275px / 300px
• Header (can be turned off)
• Fonts: Arial, Calibri, Consolas, Courier, Lato, Montsserrat, Open Sans, Raleway, Source Sans Pro, Verdana
• Boxes: Description, Updates, Schedule, Albums, Links, Admins, Site info (all of these except the description can be turned off)
• Custom header height
  
• Option to remove the borders of the container, posts and sidebar
• Pagination only
• The edit in the preview belongs to @maerinah

Please note:

• You need to go into the settings of the blog you’re planning to use this theme on and see if the option “Encryption: Serve over SSL” is activated. If it is activated, please deactivate it because otherwise the scripts used in the theme will not work!
• HTML and CSS knowledge is recommended if you want to use and/or customize this theme!
• Optimized for google chrome and mozilla firefox on 1366 x 768px resolution (tested on a 15″ and a 24″ screen)

Rules for using:

• Please like/reblog if using/considering
  
• Do not imitate or steal parts of it
  
• Do not redistribute or claim as yours
  
• Do not remove my credits
  

Any concerns? Put them here!

CSS Grid Tutorial

In my snotgirl theme and my design portfolio, I use a grid layout but without using masonry or any other script. This is possible using CSS Grid! 

This (obviously) requires some CSS knowledge, but is otherwise easy to put into your theme.

Step 1

For the container of my posts, in this case I usually use  #container, I added these lines.

column-count: 2;
column-gap: 80px;

This separates the entire container into 2 columns, and puts an 80px gap in between the columns. You can adjust these numbers as you see fit!

Step 2

For the individual posts, it’s a little trickier. When you set the column count to 2 or more, it makes the things inside it half of the width of the container. So by default, if your container width is 100%, your posts will be 50% of the screen size. 

You can change this by either putting a post width to override it, or making the margins bigger.

Once you’ve got your post size set, you can add these lines

break-inside: avoid; 
display:inline-block;

These two lines override what CSS Grid does by default to the layout.

• without break-inside: avoid, if a post is too long, it will cut the post in half, sending the bottom half to the next column. 
  
• If you have a page without enough posts to make a second column, it does the same thing to force a second column. Adding display: inline-block; stops it from forcing the second column. This leaves that page with one column until enough posts are made. 
  

And that’s all you need to do to have a functioning grid! This is a very basic grid, of course, so you’ll need to add your own styling to it. If you have any more  questions about it, feel free to ask me!

For more help you can also check out:

CSS-Trick’s CSS Grid guide | My other tutorials