I was on a roll so I decided I would try to keep up the momentum. Not to mention anyone following along as I write this is probably like well you left things and now I have to wait?
Haha, no you probably forged forward on your own or found your answers via Google.
Or perhaps not, if you're here...
Anyways, today we begin the art of the Advanced tab in the Theme>Customize area we looked at in the last tutorial post. I'm going to assume you read my posts up until now and if you haven't then you're here because you know what you're looking for and ergo know how to get to where we'll be starting.
Let's do this!
Hokay, so...
I'm going to recommend you join me and start by doing something NOT involving design. Yes, you heard me, NOT involving the Theme/Design. Let's pop back over to our dashboard and create a New Post.
We won't be keeping this, so don't panic. This is also optional; incredibly helpful and encouraged but optional. In this New Post, title it: "The Quick Brown Fox Jumped Over the Lazy Dog." Or you can do something like "Test test TEST."
Side note: "The Quick Brown Fox Jumped Over the Lazy Dog" is a common phrase used because it uses every single letter in the English alphabet, this is important because when we're testing fonts out later being able to see if a font looks good or has a problem on a letter you use frequently is a big deal!
Then in the post body, I recommend playing with the settings, writing "test" in various ways, spaces, sizes, colors and formats (bold/underlined/italicized). Here's what mine looks like:
As you can see, I added a line that says "Link Link Link." Let's take care of that next, highlight that text with your curser and click the blue "Link" button at the top.
This should open up a little dialogue box like so, go ahead and place a random link. It really doesn't matter, it could even be www.google.com or even a fake address. Point is you want the link to go through so you can see what color it will show up later on. Bear with me, this will all make sense soon!
After that we're going to add a picture. I'll probably dig into more about these features in a later tutorial (oh I bet you're sick of this "later" crap, but bear with me. If I start pursuing it now we'll be off on a tangent ten miles long). So if you click the Image right next to the Link button:
Then there are several options by which you can add a picture. If all of this is foreign to you: don't feel bad, we'll get there. For now I'll walk you through how to do an image by URL. You can also upload an image very easily from your computer using the "Upload" button.
I'm off to grab an image from Imgur from an album. To do so I find the image I want and right click "Copy Image Url" like so:
Now that I've got the URL on my clipboard I'll pop back over, go to the tab that says "Upload From a URL" and paste the URL there. Blogger has been switching over to https support (rather than http) so it may throw a fuss if your image is not https://yourimageurl. With imgur it's very easy to just add the "s" to the end and the link still works, but all images may not be the same. I'll cover this when doing the details of posting more in-depth. For now if that gives you too much grief it's not that crucial that you have an image, or you can always just upload one from your computer!
Once that's in it'll place the picture into your post, it may take a few seconds for it to fully load in and resize properly - Blogger likes to automatically load things in on the "medium" size unless the image is small enough then it'll do an "original" size. Feel free to adjust the size to be whatever you want. I highly recommend clicking the "add caption" and adding some more "test Test TESTs" like so:
Oh right, your blog post is there! Perhaps now you see why I had you do it. Even if you have a static home page, this customize page will always show you the last few things you posted (as a static "home page" is actually a redirect but again, not a detail we need to go into right now).
Alright, this blog tutorial update is going to be a lot of show and less tell (I think, I mean who knows how chatty I'll get when I start really digging into the meat) but let's head down to the Advanced tab. Here we begin. I'm going to go line by line with each one and point out the things you can do, but ultimately I'm going to leave the experimentation and play for you!
Page Text/Page (Depending on the Theme of your Blog)
Ok so the first tab is your Page Text/Page. This is going to determine the default font, size, and formatting for your blog. If you used a format other than Simple or Picture Window in the basic Theme, you'll see a thing called Page with no Background tab following it, because your background cannot be tweaked, so it gives you the option to change your post-background color next to the text color, whereas everyone else will have that in the next tab Background.
IMPORTANT!: This section will create your default font, but you CAN use different font on a post-by-post basis but using a different font in your POST AREA (here):
...however, doing so will cause issues and conflicts with large bodies of text when you post it! For example, when I first started blogging on my Reaper blog, I used a dark theme which defaulted to white/light gray Ariel font. I would set (in my individual post) my font to be Times New Roman and Black, however when I posted it there were some areas where the font would come in white and Ariel right next to my Times New Roman font.
Big note here: pick a font and a color you plan to use consistently. Only use the options in your post (like making font larger, or changing the font color or type) for short bursts like my little message above. I recommend avoiding doing bright colored font here or using any of the formatting options for your Page Text... having everything italicized may be annoying later if you want some things to not be.
Again, play around here and if you have trouble when you start posting regularly with your fonts then you can come back here as I'm 95% sure that any troubles you have will stem from your default font disagreeing with whatever you're trying to do in your Composing-Post area. One last thing to note is how you like the look of the font and to check every letter. The font that I'm using for this blog is rather iconic, but it's annoying because the uppercase N has that little hook that hangs off of it. This annoys me, but not enough to get me to change it. (4/18/18 - it did annoy me enough to change it, so it's been changed to Droid Serif, as per usual with me)
You can change your default font as much as you want, but if some of your posts don't want to cooperate, a quick way to fix that is by hitting ctrl-a on a windows computer, right clicking and "select all," or just highlighting all the text and hitting the fancy "F" on the edit bar and choosing "Default Font." This will set it to the font you pick in this section of the Design tool.
For the purpose of this tutorial I'm going to use Cardo font, no bold, no italicizing, size 14 font and I'm changing the color to jet black.
Fonts by blog (I never use bold/italics for this):
- Reapers: Droid Serif, 14px Font, Jet Black (#000000).
- Nightingale: Crimson Text, 14.5px Font, Jet Black (#000000).
- Factions: Droid Serif, 14px Font, Jet Black (#000000)
- Willow: Droid Serif, 13px Font, Jet Black (#000000)
- The Glossary: Cardo, 14px Font, Jet Black (#000000)
- Madmen: Arvo, 13px Font, Jet Black (#000000)
I live dangerously with my fonts, clearly. ;) Just because I don't vary mine up doesn't mean you shouldn't! Do what's best for you! Try out fonts and use your post as a guide for how it will look!
Background
Now depending on which initial Theme you chose, this next tab will either be Background or Links. If your next tab is Links then this portion is still important to you, but you'll find what you need in the first tab under Pages.
I tried to make it obvious where each area would affect what... so go crazy and mess with some colors! This area may take you just a moment to adjust... or it could be an hour plus as you fuss and tweak. On note if you have the first shown option the Outer Background Color will only work if you don't have a texture/picture/background image of any kind. That's for if you want a solid color background. This also will show up if you did not tile your image (it will show up around a non-tiled image if you uploaded one).
Links
The next tab down is your Links. This should be the same for everyone and look like above. Here's what you're looking at.
- Link Color is the color that links will be to everyone who haven't visited that link yet.
- Visited Color is the links they've been to.
- Hover Color I've underlined as it's less explanatory. This will show up when people hover over the links with their mouse cursors. I usually make this color a little different so people will realize links are links when their mouse goes over it.
Blog Title
So there's a few different ways this tab could look, and here are the ways I have based on my blogs. My Factions blog was made with Awesome Inc Theme so here's what that looks as well as my test blog Thumbs Up, Buttercup!
With the Awesome Inc. Theme it offers a slightly different Blog Title section (this may be true with some of the other Themes). This includes an option to add a background header color that will span across the back. Currently Factions is Transparent, but I made it white to show you how that would look:
Here it is Transparent:
The title color is the color of the font (though obviously messing around with that will tell you that) as well as the font type. Mess around with the size - note that it's not centered and you can't adjust that here, we can fix that with a quick CSS code later!
Header/Header Bar
(This is for Dynamic Theme users)
So, now that we know there are some differences between different Themes (and I use predominantly the Simple Theme) I popped over and tossed one of my blogs onto another theme so we could explore what options each had! I used the Dynamic Theme for this one to test these out on Factions (thankfully with Blogger, so long as you don't hit the "Apply to Blog" in the top right corner then nothing will stick permanently so I can tweak as much as I went and go back to how I had it).
First of all, Header comes across to me exactly as the Header background. I don't use Dynamic themes generally so maybe I'm missing the nuances of this. This is what I see and what happened when I changed the colors.
Ok, so Header Bar, I have more to say about this.
First of all, it awesomely adapted my very "Pages" widget, so bonus points to Dynamic Theme for flexibility and letting me know that this stuff still works across all themes!
As for my list:
- The Background Color means the color of the bar and not the background, nor your post background, nor your outer post background. Cool. Good to know, fiddling with it wasn't complicated.
- The Text Color is pretty self explanatory, lets you set the color of the text on your personal navigation bar as well as changes the color of the static "Classic" drop-down menu. This is all well and good but my issue came with:
- The Font and Formatting. The font changed just fine as I adjusted, but I noticed the bold/italics option do not work. I tried a few different fonts. Maybe I just got unlucky, but this is something noteworthy, as I usually like to bold my bar so people can read it easily. I'll look to see if there's CSS to fix that (you'll probably see me say that a lot in the future: "when in doubt, there's probably a CSS code for that...")
So those are the noteworthy things there!
Blog Description
So we've got our Blog Description, now I didn't put one for Thumbs Up, Buttercup; thus I'm using Factions as my example here. Pretty self explanatory, no? You've got your text color and your font choices. Now out of all my blogs most have a blog description, something catchy or informative. It's personal preference though, so have fun with it! This is your chance to really customize it and go in deep!
Tabs Text
READY FOR THE LIST? Of course, of course.
- Text color is the initial color of the tabs - tabs that blogger astutely highlighted for me in orange here. Don't panic. The orange is not there to stay. It's just meant to draw attention so you know where to look. Sometimes Blogger does an A+ job with this... other times I would tell it not to quit it's day job.
- The Selected Color is the more interesting part here, you see when you have a Static Page you link up directly to your "Pages" gadget, when you have it selected and the "Pages" gadget is on the top, it'll create a "selected" appearance. I'm doing a shoddy job describing it, so let me get a picture from my Willow blog.
I had my mouse hovering over "Characters" to show you what "Hover Color" looks like the selected color. While I sit on the page "Disclaimer" the tab remains "highlighted."
If you don't want this make your selected color the same as your regular color scheme.
Tabs Background
So this one goes hand-in-hand with the Tabs Text portion above. There are 3 different types of tabs that you'll run into. If you're doing the Dynamic Theme then you'll have handled this with Header/Header Bar. With the Simple theme (using Willow for this) it will look like this:
You have the Background Color and the Selected Color. This is exactly the same as the Text Color and Selected Text Color we just went over. I definitely recommend NOT using the same colors as your text here (as you won't be able to read your text!) and instead recommend using a color from your general color theme or background if you've got notable colors there. Otherwise, a good rule of thumb is to stick to shades (light/dark) opposite of your text. Light text, dark background. Dark text, light background. Add a pop of color here or a slightly off-variation of the shade for flavor on the selected background to get an effect like above.
Here's the Awesome Inc version I get with Factions:
You'll notice there's an extra color option here, and I'll go over that briefly. I made it bright orange so you could see where it will change things on your blog. Basically the Awesome Inc Theme has a border around the tabs that you can choose a color for. Normally mine is a gray that's on point with my color theme, but here it's orange for show.
Post Title
Depending on your order of things, this may come after your Date Header section if you're using Awesome Inc theme. Does the same thing, just a different order! Simple Theme users will not have a color option (as your post titles will be considered Links and therefore your Link Color affects this), but it appears all other blog themes will have a color option.
So there you've got that and can tweak and adjust. I usually recommend syncing up the font of your:
- Tabs Text
- Post Title
- MAYBE Title
That's a personal preference and feel free to go crazy, but I find it can add a sort of... put together feel to your blog. It makes for a nice touch to show that you're serious about your blog!
Date Header/Date Ribbon
This essentially controls the date font and color. There's a few variants for this. On the Awesome Inc you're given the Text Color and the Border Color you control (as well as font type), as it highlights here:
The Date Ribbon on the Dynamic Theme just controls a small ribbon to the side:
And the Simple Theme lets you add a background color for a bit of pop to it, like so:
Post Background
This is part of the Awesome Inc Theme, and it's essentially the Backgrounds tab for Simple. I think this is satisfactory enough that I'm going to (naively) assume this is covered. We good? We good.
Images
Ok so this tab is mostly going to pertain to border color and captions. Unless you're using the Dynamic Theme you'll have a border around your images - even if you set all the settings there to "Transparent" it'll still have an outline, like so:
Here's a highlight of how the colors will break down when using a Simple Theme:
So we've hit a lot of the basics - from here on out I think I've shown you a majority of what you'll see in further. On the Dynamic Theme you should've basically hit the end and reached the bottom "CSS" code I've infamously talked about.
If you're using Awesome Inc you'll notice you have QUITE a few more tabs you can sort through and adjust.
I know I'm not going through every option here, but I like to leave room for exploration, should you hit a wall, I have a comments section or you can always email me if you'd rather it be private!
That being said... this took several hours to put together and write, so I'm pooped!
One thing I have yet to cover (but I hoped was self-explanatory) when working in your Layout and Theme category is that you must save these changes before moving to a new tab or exiting for them to take effect. So if you did a lot of work, made a lot of changes and forgot to implement them and the tab got closed somehow... they're gone!
I recommend doing a bit and if you feel 100% confident in that bit, saving before moving to something else. This way, should you not like what you change after that, you can just leave the tab, refresh, or exit and only the changes you felt 100% about will be saved.
I hope this helps some! Have a great day/night/however you roll!
No comments:
Post a Comment