IMPORTANT NOTE

Hello, and welcome.
I would like to inform you that I AM MOVING.
...well, sort of. I have started a new blog, Oui Crochet, that focuses just on crochet, crochet patterns, and crochet resources. I am in the process of building it up as a one stop shop for all things crochet, and I am very excited about it. I hope you will come over and check out my progress. :)
I will be moving my patterns from this site, to my new site. My idea is to leave this site active, so that you can still access other aspects of this site. I will also leave a modified "introduction" post where each pattern is on this site, as to keep all links active and make it so that you can easily locate the pattern's new home. As an added bonus, you will also find new printable/downloadable versions of my patterns.
I apologize for any inconvenience, but I assure you, this change is a positive one. I look forward to seeing you at Oui Crochet.
Happy Crocheting!


Thursday, May 17, 2012

How to Adjust Your Pages Tabs

Let me start by saying that I have very little HTML and CSS knowledge. My kids, however, have a lot.
They try to teach me.
Sometimes it works.
Sometimes it doesn't.
This time, it did. Yay me! (and them!)

When I was messing around with my blog a couple of weeks ago, I needed to fiddle with something on my sidebar, but I didn't know where to find it. My son showed me a neat little thing. He right-clicked on the thing I wanted to adjust, and clicked "Inspect Element". He mumbles something about this working in Google Chrome... I didn't really listen, since I always use Chrome. So, I'm not sure if it works in other browsers.
Anyway...I wanted to make the text in my Pages Tabs bar (you know... the one right under my banner comic) a little bigger, but I wanted to keep the bar all on one line. This meant that I needed to change the width of the spaces between the pages (text) in my Pages Tabs bar .  My son isn't home. Can't ask him.
I decided to try it on my own. I right clicked, made my selection, and the page elements came up.
Um... yeah... OK.
I was about to give up and wait for my son when I noticed some CSS on the right. I scrolled through it, and coupling it with what I learned the other day when I was changing stuff on the sidebar, I found what I thought could be the CSS I needed.


It turns out that the change was super easy! (And much quicker than writing this blog post about it!)
See the highlighted part?
Well, I took the part that says:

.tabs-inner .widget li a {

(This identifies the tabs that I want to work with.)

...and the part that says:

padding: .6em 1em;
                                                                }              

(This identifies the element that I want to change)

Then I opened another tab and clicked Design at the top of my Blogger page. 
Then I clicked on Customize and went into the Advanced option and then to Add CSS.
I typed (ok, I pasted) this (the current setting) into the space under where it says Add Custom CSS:
.tabs-inner .widget li a {
padding: .6em 1em;
                                                               }    

Next, I fiddled with the numbers until I got to something I liked.

This controls the vertical padding... you know... how close the Tabs bar is to your banner (or how far away):
padding: .6em 1em;

If you want the tabs closer to your banner, reduce the number. If you want it farther away, increase the number.

This one controls the horizontal... how close or far away your tabs are from each other... you know... the space between them:
padding: .6em 1em;

If you want the tabs closer together, decrease the number. Since it is a whole number, and it is at 1, then you will want to use a decimal to make it smaller. I used .5 for mine. 
If you want the tabs farther apart, then increase the number (you can add decimals such as 1.5 here, as well).

Finally, I went to Tabs Text and changed the size of my text. ( A little hint here- if the text size you want isn't in the drop-down menu, just type it in the box and hit enter. You probably already knew this... it took me a little while to figure it out. lol)

This turned out to be sooo easy, so of course I had to share!

Before:



After:













The change is subtle, but I like it!


Photobucket

2 comments:

  1. Hi!! Thanks for the comments you have left on my little blog!! thehiddenpantry.blogspot.com

    I really appreciate them and you. Wanted to thank you for the invitation to link to you but have a confession.....I am computer challenged and really don't have a clue as to how to do this.

    My 3 sons are all grown men with families and them help occasionally but availability is small. Just wanted you to know my silence was of ignorance not willingness. dkc

    ReplyDelete
  2. Aww, thank you, Diane!
    I am learning as I go with all of the computer stuff, myself. My kids are much better at it than I am. I think they teach me something new almost every day!
    If you ever have any questions, and your sons aren't available, feel free to click my "Contact Me" tab on the left of my page, to send me an email. I'll be happy to help if I can! :-)

    ReplyDelete

I love getting feedback from my readers!
Please feel free to leave a comment or share your ideas!

LinkWithin

Related Posts Plugin for WordPress, Blogger...