#theme edits

Here is what the panel looks up close: 

It pulls up both the HTML and the CSS. Here i can see that this img tag is inside of the “icon” container. It’s currently being styled already to have a 100% width and a border radius of 8px. 

A nice feature of using inspect is that I can directly edit the code to get a preview of what it will look like if I change the CSS. 

This will not save your changes. You will still need to add these changes to the code itself. Inspecting an element is just going to give us a preview to test the changes before we finalize them. 

But, now we know that using .icon img as our selector will work to make the icon a circle. 

There’s 2 ways we can make this change permanent. 1) if it’s a theme garden theme, I don’t have to open the code and I can just add this new line in the Custom CSS text box. 2) I can edit the code directly

Option 1:

Since Rougir is a theme garden theme, I can just add some custom CSS. Going back to the advanced options, I can use the .icon img selector that I found while inspecting the element to change my icon to a circle. Just save the changes and you’re done!

Option 2:

If your theme does not have this option, or you would rather edit the code directly, go back to the “Edit HTML” link at the top of the customize panel. 

So, the perk of {CustomCSS} is that the variable goes in the <style> tag, so it will automatically insert your text in the theme’s CSS. Since we don’t have that, we will have to do it manually. 

Once you’ve opened the code, press control/command + f to pull up the search bar and search for </style>

The reason why I’m searching for </style> and not <style> is because we want our new CSS to be at the bottom. Rougir, being a theme garden theme, already has {CustomCSS] and is at the bottom as well. 

This is because of CSS’s order of importance. Anything that appears on the bottom is considered the most recent and will override existing CSS. 

This is what happens when I put my new border-radius at the top:

Nothing. Because there is already a .icon img underneath it, so it is using the “most recent” styling. 

When I put this at the bottom, it will show up correctly because now it’s the most recent styling:

The above method works, but it works best for things that don’t have a specific selector yet. Since we know this already has a selector (.icon img) we can avoid having to override this entirely by going directly to the selector. 

Using the search box, I’m going to look for .icon img

It’s going to jump to and highlight where this selector is being used and we can see the existing CSS that we found when we used inspect.

Just like I did with inspect, I can change 8px to 100% to get my circle icon. 

There’s nothing “wrong” with adding it before </style>, it just makes the code shorter/easier to navigate if you keep it all in one place. So, if you’re only going to edit one or two things, there’s no issue with just overriding it at the bottom.

On the left side of your screen where you have Home, Activities, Inbox etc -- somewhere towards the bottom (for me it's third from the bottom, idk if that can change?) you're looking for a link that says "account." Clicking it will open up a view to your blog, followed by all your sideblogs. I'll describe these images as we go in case they don't show up. Here we go:

So this is from the view of my rp blog, @talesfantastic, and @ladykf-writes is one of my sideblogs. So go from ACCOUNT and select your blog / sideblog whose theme you want to tweak. CLICK.

This opens up a big side panel on the right, and on the very bottom you're going to find the image below, which is a snapshot of the very bottom, and offers: Queue, Tumblr Blaze, Blog ettings, and Mass Post Editor. You want, again, where the arrow is pointing: Blog settings.

Blog settings opens up to where you adjust your header, info about you / a tagline etc. Good to tweak those, it also helps prove you're a real person; bots do not generally bother, though sock puppets will. It looks like this:

Now under blog name and address, you have a Custom Theme option. If you haven't already enabled this, you're going to need to in order to have a custom theme. From there, click Edit theme.

We're in.

I'll take a moment to point out that the theme editor that comes with my theme (for LadyKF-writes) does actually have a built in place for this, and I think this....

...was the default, which is... not great.

SO what we need is directly on the left. You have Exit -- leaving the customization page -- save, which you should do regularly -- and a custom theme section with "Edit HTML" <- jackpot.

Again, make SURE you have the original code. If you mess up, you will need it to start over clean.

Now, you're probably going to see something like this (viewing the guts of a HELLA lot of code nonsense.)

If this is intimidating, that's fair. What you want to do is hit CTRL + F (on pc) or Command + F (on Mac). That brings up this little buddy, a box in the upper left where you can type what you want.

And what we want is to input font-size. There will be a few of these, some in groups like --

(I stuck the code in the alt text.)

That's not what we want. What we want is standalone, and we'll find some useful things beforehand.

THIS is the layout for H1 -- your biggest headers.

If you want to change things there, you can! Including, you guessed it, font size. Just be sure to hit that "Update Preview" button to get a solid look at what it looks like before committing to it.

Now, what we want is under "posts" -- and it may simply be under p { or notated as "posts" on other codes.

There's a lot you can change here, specifically side eyeing the font family... but that's something for another day. Let's see that font-size. Ultimately I like it at 15 best, and I'll give it a comparison:

12 on the top:

And then 15, which I'm staying with:

See the difference? And that's so much easier on the eyes. Hit save (beside the update preview button!) and close out. You did it! Go out and save some eyes, people!