When it comes to styling a Blogger element using CSS (or other languages/stylesheets), things will be much easier if we know its ID or class. Why is it important for us to know an element's ID and class? Well, consider this analogy. If a person has no name, it will be difficult for us to communicate with this person. Same applies here. Just like we have names, elements have IDs and classes (some poorly constructed ones don't have any, so it'd be difficult to apply changes on them). There isn't much difference between IDs and classes. Both are used to address elements in your page. You specify an ID to an element that occurs ONLY once in your page. Whereas you can use a class to address elements that occur frequently. In short, ID = one unique element, Class = a group of elements.When it comes to CSS, you address an ID by using a hash (prefix), whereas when you address a class, you use a dot (.) prefix.
The following image shows an example of an ID. See how each gadget on the sidebar has it's own ID? They have classes as well, so you can address them by their classes too, but that's not my point here. My point is, if I use a CSS code with the ID 'Label1', only one gadget will get affected. Because there is only one gadget with ID Label1.
Consider this image now. This is a class for blog posts. See how the class 'date-outer' is being repeated several times? This is because a class can be used to address few elements. If I use a CSS code to address the class 'date-outer', 5 elements will get affected (in this particular example).
Commonly asked questions:
1) I know what is an ID and what is a class. Do I have to give my element an ID or a class now?
No, you don't have to. That is not the point of this post. You don't give names to people. You find out what their names are. The purpose of this post is for you to understand what is an ID and what is a class. And yes, it is possible for you to give an element an ID or a class using HTML if it does not already have one, but that is for another day for me to cover.
2) Some elements have IDs, some have classes, some have both! What's the big deal??
There are four types of elements. Those that have both IDs and classes, those that have IDs only, those that have classes only, and those that have neither.
3) When do you address an element using an ID?
Use an ID if you want to address only ONE particular element (that is if the element has an ID at all).
4) When do you address an element using a class?
Use a class if you want to address a group of elements.
Click here for a tutorial on how you can identify your element's ID or Class.
Click here for an example of CSS styling using an element's ID.
Click here for an example of CSS styling using an element's Class.
Have fun.
The following image shows an example of an ID. See how each gadget on the sidebar has it's own ID? They have classes as well, so you can address them by their classes too, but that's not my point here. My point is, if I use a CSS code with the ID 'Label1', only one gadget will get affected. Because there is only one gadget with ID Label1.
Consider this image now. This is a class for blog posts. See how the class 'date-outer' is being repeated several times? This is because a class can be used to address few elements. If I use a CSS code to address the class 'date-outer', 5 elements will get affected (in this particular example).
Commonly asked questions:
1) I know what is an ID and what is a class. Do I have to give my element an ID or a class now?
No, you don't have to. That is not the point of this post. You don't give names to people. You find out what their names are. The purpose of this post is for you to understand what is an ID and what is a class. And yes, it is possible for you to give an element an ID or a class using HTML if it does not already have one, but that is for another day for me to cover.
2) Some elements have IDs, some have classes, some have both! What's the big deal??
There are four types of elements. Those that have both IDs and classes, those that have IDs only, those that have classes only, and those that have neither.
3) When do you address an element using an ID?
Use an ID if you want to address only ONE particular element (that is if the element has an ID at all).
4) When do you address an element using a class?
Use a class if you want to address a group of elements.
Click here for a tutorial on how you can identify your element's ID or Class.
Click here for an example of CSS styling using an element's ID.
Click here for an example of CSS styling using an element's Class.
Have fun.
hi
ReplyDeletethank again for that help. i've forwarded tht msg to my frens. hope it helps. do you mind if i put up an exclusive post entry about your blog in mine. the traffic is pretty less in my blog but i want others like me to connect to you and take help. i want to encourage you on this great blog and pl don't give up if the no of comments is not too many. many of us who come across your blog may take the reqd tip but not care to drop a word. so i guess your blog IS of being use to many! pl send me yes or no on the blog entry permission. only then i'll do it.
kitchenmorph: That's nice of you. You didn't have to ask. You can post anything about this blog however you want. Thanks for dropping by. Regards.
ReplyDeletei have a lot of queries but most importantly i wanna make those tabs that come horizontally under the blog title like home, about, contact, recipes..how do you do it? you can direct me to your link if you've already posted.
ReplyDeleteThat one is easy. First go to Dashboard - New Post - Edit Page - New Page and compose your page there. This page is called Static Page. You can have up to 10 static pages.
ReplyDeleteNext, go to Dashboard - Design - Template Designer - Add a Gadget (preferably under your header) - Pages - check the box next to 'Automatically add new pages....' - Save.
Some users prefer to use Link List gadget instead. This is because with Pages Gadget, you can only link to your static pages. With a Link List gadget, you can add links to any page/website. Lots of users use link list to add links to their label pages (eg, your cake label page). Here's a brief tutorial.
i did it! thanks. i didnt register the link list gadget though. i got to take time and read it carefully. now in contacts tab how do i give links to my email ids? you shd be thinking "what a dud" but sure i am!
ReplyDeletealso cd you see in cardamomhills.blogspot.com the foodbuzz widget for top 9 and the post from past widget. how do you get them? she generally helps me but has been busy lately. i don't like popular posts much coz my intent is to bring old ignored posts to the viewer's notice.
kitchenmorph: Linking part is easy. Go to Dashboard - Edit Posts - Edit Pages - Edit on the contact page - Then choose Compose Mode - Highlight (select using your mouse or keyboard) the email text - click on 'Link' icon on the editor box itself (11th Icon from left) - insert your email as the link.
ReplyDeleteYou can get the Food Buzz top 9 gadget from this site:Click Here. To add this gadget to your blog, first choose the size, then copy the code from the box. Then go to your Dashboard - Design - Page Elements - Add a Gadget - HTML/Javascript - paste your content onto the box - Save.
As for the 'Post from Past' gadget, it isn't actually a 'post-from-past' gadget per se. It's just a random-post gadget, where it will be showing a random post each time your page is refreshed. The author merely gave it that title. I am not sure which exact gadget the author used, but I think it is this one. Even if it is not, this one is as good, and configurable. Click here to get it. Once you're in that page, scroll down and click on the button that reads 'Add to Blogger'. Then choose your blog, and you'll be able to configure it. To make it look like the one that the author has, change the following settings:
Title: Post from Past
Number of Posts to Display: 1
Snippet Style: Thumbnail Only
Show Powered by Link: No :(
Leave other settings as it is. That is if you want your gadget to be like in the example blog you gave. You're always encouraged to choose your own settings. If I add this gadget to my blog, I'd definitely set the number of posts to display to 5 or more (instead of 1). So it's up to you. Have fun.
that's a comprehensive one. thank you so much. i'll be doing it soon.
ReplyDeletei feel honestly bad to be pesking you like this but i guess you can see i'm a desperate woman :)
like my sis comment in the YoboY post in my blog the about me description and the blog archive nos are in white. i searched length and breadth to change the color but couldn't spot it. do you know where to change it?
also are you clued up on the blog title calligraphy...something like chocolatteandtea.blogspot.com. i wanna morph kitchen morph.
The sidebar font color and the main posting area's color are defined by the same class. So if your main text color is white, so will your sidebar's font be. To change your sidebar's font color alone, go to Template Designer - Advanced - Add CSS - paste the following code - Apply to Blog:
ReplyDelete#sidebar-right-1{
color: black;
}
As for the 'title calligraphy', it is known as header image. You can upload an image as your header by going to Dashboard - Design - Page Elements - Header - Edit. But you have to create an image first. Advanced users usually use software like Adobe Photoshop or GIMP to create professional images. There are lots of tutorials for beginners too, so you can google for them. If you're looking for something simpler, you can use online image editors, like picnik, to create a header image.This tutorial might help you out. There are plenty of other tutorials as well, just google something like 'creating blogger header' or something like that.
i'm going bonkers! i changed the color to grey but only the archive nos by your code. i tried another code for about me it didn work. tiring...
ReplyDeleteSorry about that, I didnt realize your 'About Me' gadget is placed in a spitted section. Use these code instead (delete the one before this)
ReplyDelete.sidebar.section{
color: black;
}
If you want to change the orange texts in your sidebar to other colors, use this code (add to others, dont replace):
.sidebar.section a{
color: red;
}
look at my blog...i did it all. except for the header calligraphy which will take time. thank you.
ReplyDeleteoh boy! my comment didn save. i'd said: look at my blog. i did it all except the header calligraphy which may take time. thank you.
ReplyDeleteLooking good. You might like the following tweaks for your blog. Go to Template Designer - Advanced - Add CSS - paste ONE of the followings (or try all three one at a time):
ReplyDelete.column-right-outer{
background: url(http://www.blogblog.com/1kt/transparent/white80.png);
padding-top: 10px;
}
.column-right-outer{
background: url(http://www.blogblog.com/1kt/transparent/black50.png);
padding-top: 10px;
}
.column-right-outer{
background: url("http://www.blogblog.com/1kt/watermark/post_background_navigator.png") repeat scroll left top #DD6700 !important;
padding-top: 10px;
}
It gives your sidebar a background.
another quick and easy fix
ReplyDeleteI have benefited from many articles of your blog.
ReplyDeleteThanks from www.ncooltips.com
Very useful post for newbies . thanks for sharing
ReplyDeletepls visit my blog for good articles.