Editing your theme part 2: CSS

At the end of part one, I mentioned that it’s important to know what selectors to use when you’re trying to edit the CSS of your theme. 

There are some common ones, like the background image is going to be under body almost all of the time, but most of the time you’re going to need something more specific. 

The best way, in my opinion, to find out exactly what to use would be inspecting the element. I recommend doing this in a new tab for your blog, otherwise things might get a bit squished with both the inspect and customize panel being on the same page.  

I’m going to use Rougir as an example again. 

Let’s say I want to make the icon a circle.  The selector for images is img, however, if I try to edit selecting only img, it’s going to edit every single image on the theme, and I don’t want that. 

So, I’m going to right click on the image and select inspect. You can also use the shortcut control/command + shift + i. This is going to pull up the inspect panel which will show you exactly where that element is in the code like this:

It highlights what I’m selecting and where it is in the code.

Keep reading

Editing your theme part 1: getting started

A lot of theme makers, including myself, prefer not to answer most customization asks, but I wanted to cover some ways to edit themes to hopefully make it a bit easier to understand. 

Keep in mind that no matter what you’re trying to edit, a basic understanding of HTML and CSS is going to help a lot. You don’t necessarily have to know all of the basics, but try to look up what you’re trying to edit.

For example, if you want to add a background image, there’s a lot more to it than just background:url(’imageurl.png’); depending on what you want to do. This just gets a background image to display. It doesn’t make it cover the whole container or stay attached to the page as you scroll. So, it’s best to do a little research on exactly what you want to do before you jump into editing. 

Once you’ve figured out what and how you want to edit, there are a few different ways to go about this.

First you should double check if there is already an option the theme comes with. Most themes come with color and image options, so if you try to add it yourself it might not work how you want it to if there’s already options available. 

Next step is going to depend on what kind of theme you have. Adding custom CSS is really simple for theme garden themes, but can be a little more complicated if it’s a custom theme not hosted on the theme garden. 

Keep reading

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