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.
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.
In part 3, I’m going to talk about troubleshooting/what to do if your CSS edits still don’t work.
Alright folks! I made a Redux Modification! It’s simple to use, you can customize several features, and it has a clean layout! It comes with a special button as well at the top under the description. You can modify it to link to your about page or other places, or even tags. It comes with a Button that also brings you back to the top of the page!
There is also a feature to redirect your index page to a tag you like or to another blog! The choice is yours!
Modifiable Features Includes:
Background Color
Text Color
Text Link Color
Sidebar Color
Sidebar Image
Post Frame Color
Post Frame Image
Inner Post and Description Color
Footer Note Colors
Footer Notes and Link Colors
Header Colors
Header Image
Avatar Image
Show Followers (Only works on Main Blogs)
Here is a link to the example blog, and if there are any questions let me know!
To use the OOC tag, remember to write the tag and it will automatically have it as “/tagged/[your tag]”. This feature can also be turned off if you do not want or need the button.
To use the redirect feature, you have to write “/[insert page here or tagged here]” and it only is able to direct to certain parts of your blog, not to others.
It’s a fairly simple modification, but may come in handy for some people! This is my first real edit of redux I’ve posted to share, so please go easy on me. I’ve had no real training or experience in css.
Staring at a theme you really, really want to use and it has ridiculously tiny font?
Want to change that, but your theme editor doesn't include non-color tweaking?
I'm here to walk you through how to get to where you can edit your theme, and how -- specifically -- to edit your main text's size if it's not in the editing interface from the creator's setup.
NOW, BEFORE YOU TWEAK: SAVE THE ORIGINAL CODE SOMEWHERE! Reblog the post (never a bad time to support our theme-makers!), save the BIN file (just make sure not to turn the code-quotes /straight/ into text quotes /curly/ -- sometimes it's good to save it as a notepad or textedit -I think- on Mac) and then, only when you have it backed up, do you begin.
Now one thing I run into constantly when changing themes is that many fonts are TINY and those of us with impaired sight are squinting so hard we get frown lines. Mine was quite small! ...actually I think I've had to do this on all blogs that didn't come with a built-in font-size changer. There's usually a common place you can go for that, however.
For those of you who haven't done this before, here's the pipeline (WARNING: this is for desktop, I have no idea how to do it on mobile!)
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!
Any questions, hit up @ladykf-writes's ask. (Click here!)
check out my new toyhouse profile layout i just finished :) gonna try roll it out over my fav characters.. i know its simple but simple is the only way i write anything in the bio so. yknow. anyway im fuckin stoked with how it looks
