This blog is a gorgeous example of tweaking a standard Blogger template and turning it into something unique and great looking. Those of you with skills to do this, will you enlighten the rest of us and share how you do it?
Oh Amy. Do I really have to admit how sad and pathetic my life is sometimes, in ppublic. If you vire the source for this page, you will see lots of comments which were added by me to the template, things like /* this is a verticle strip of colour which forms the BG colour of dark pink, fading down to sightly darker pink */ and /*very darky reddish brown maroon horizontal rectangle with stright top and rounded edge bottom, guess used for title bar */ and /* dark reddish brown maroon verticle rectangle, very thin colour is the hexadecimal value*/
When I had my original blogger template I literally when through the code line by line trying to work out what it did. I experimented with replacing hexcidecimal colours. I loaded up jpegs and replaced the gifs to get rhe header, footer and faded bg.
I still really don't understand half of what I did. There are things I would like to change further but I am short on the time to sit down and work it all out.
I would love to be able to work out how to have a column left and right so I can have blogroll on one side and indexes on the other.
So I don't really have a clear answer for you except that it required patience, perseverence, a lot of testing and frustration but eventually I came up with something I was at least half happy with.
Sam - is it this blog or your main one that you want three columns in? I think I can show you how to do it. On the other hand I can't make it look nice!...do you want sidebars that resize or that remain fixed if you change the window?
Wow! If that's trial and error I am impressed! It really looks good...I would love to be able to create a logo and use it instead of the blogger "title" but not sure how to do that.
Make sure that if your blog is hosted by blogger that your web server allows hotlinking of images. You can usually ask your webserver to allow your blog to hotlink your images....
If you want the image to appear only once in the blog title, then here is the coding that will place the image in the top left of the title area:
#blog-title { background:transparent url(http://yourserver/locationofyourbackgroundimage.gif) no-repeat top left;
If you would like the image to run along the top only:
Amy- You and I use the same template, I just changed the colors a bit...I don't know how to do much else in terms of code, but that I figured out. You can change any color to another using PMS Color number, found here:
http://www.flagdist.com/PMS%20Color%20Chart.htm
Wherever is says color:#008800 in your template, you can change that number and it changes the color.
That's all I know how to do, but I thought I would share.
Note that there are a few options on the font-family there. This is for browsers that don't have my first choice of Vivaldi font installed. They might have my second choice of 'Zapf Chancery', or my third choice 'Brush Script MT'. And those that have none of those will still see whatever cursive font is set on their browser. It's always a good idea to add the generic name at the end of font choices....
Food Blogs may be cool, but here it's back to School. Join this forum and together we can learn more about the technicalities of blogging and make our collective blogs even more delectable than they are already.
This is a forum for all food and drink bloggers. If you want to join the team, sign up to be a member by sending both the name of your blog and its url AND YOUR EMAIL ADDRESS in the body of the email to Food.Blog.Scool@gmail.com
Members will have the ability to start threads on this site, but absolutely anyone can post comments. Food Blog S'cool membership is open to anyone with a Food or Drink Blog. Please be patient whilst I sign you up. Admin is only completed about once a month. Thank you.
Food Blog S'cool is not responsible for any comments or posts on this site. Individuals are responsible for their own content and should be mindful that they do not say write anything that breaks the law or infringes on copyright.
9 comments:
Oh Amy. Do I really have to admit how sad and pathetic my life is sometimes, in ppublic. If you vire the source for this page, you will see lots of comments which were added by me to the template, things like
/* this is a verticle strip of colour which forms the BG colour of dark pink, fading down to sightly darker pink */
and
/*very darky reddish brown maroon horizontal rectangle with stright top and rounded edge bottom, guess used for title bar */
and
/* dark reddish brown maroon verticle rectangle, very thin colour is the hexadecimal value*/
When I had my original blogger template I literally when through the code line by line trying to work out what it did.
I experimented with replacing hexcidecimal colours.
I loaded up jpegs and replaced the gifs to get rhe header, footer and faded bg.
I still really don't understand half of what I did. There are things I would like to change further but I am short on the time to sit down and work it all out.
I would love to be able to work out how to have a column left and right so I can have blogroll on one side and indexes on the other.
So I don't really have a clear answer for you except that it required patience, perseverence, a lot of testing and frustration but eventually I came up with something I was at least half happy with.
hmm - undecipherable typo. vire = a sam verb meaning "to view"
and when = went
Sam - is it this blog or your main one that you want three columns in? I think I can show you how to do it. On the other hand I can't make it look nice!...do you want sidebars that resize or that remain fixed if you change the window?
Wow! If that's trial and error I am impressed! It really looks good...I would love to be able to create a logo and use it instead of the blogger "title" but not sure how to do that.
To add an image to your title area, go into your template and find
#blog-title {
in the style section. Add the following:
#blog-title {
background:transparent url(http://yourserver/locationofyourbackgroundimage.gif);
Make sure that if your blog is hosted by blogger that your web server allows hotlinking of images. You can usually ask your webserver to allow your blog to hotlink your images....
If you want the image to appear only once in the blog title, then here is the coding that will place the image in the top left of the title area:
#blog-title {
background:transparent url(http://yourserver/locationofyourbackgroundimage.gif)
no-repeat top left;
If you would like the image to run along the top only:
#blog-title {
background:transparent url(http://yourserver/locationofyourbackgroundimage.gif)
repeat-x top;
If you would like the image to run along the left side only:
#blog-title {
background:transparent url(http://yourserver/locationofyourbackgroundimage.gif)
repeat-y left;
At least I think this is correct....
This site may be quite useful:
www.w3schools.com/css/
Amy-
You and I use the same template, I just changed the colors a bit...I don't know how to do much else in terms of code, but that I figured out. You can change any color to another using PMS Color number, found here:
http://www.flagdist.com/PMS%20Color%20Chart.htm
Wherever is says color:#008800 in your template, you can change that number and it changes the color.
That's all I know how to do, but I thought I would share.
I'm all about the tweaking of blogs, and still working on mine. How do you change the text size and font of the Blog title?
To change the text-size and font in the Blog title, go into your blogger template style area and look for
#blog-title
The font-size is changed with font-size I like to use percentages for font-sizes but lots of people prefer to be more specific and use em
This is what is in my blogger stylesheet (Minima)
font-size:200%;
line-height:1.2em;
font-weight:normal;
text-transform:uppercase;
letter-spacing:.2em;
The font-family is specified elsewhere but if I wanted to have a different font for the title - say to look like fancy handwriting, I would add
font-family: Vivaldi, 'Zapf Chancery', 'Brush Script MT', cursive;
and I'd probably change it to bold:
font-weight: bold;
Note that there are a few options on the font-family there. This is for browsers that don't have my first choice of Vivaldi font installed. They might have my second choice of 'Zapf Chancery', or my third choice 'Brush Script MT'. And those that have none of those will still see whatever cursive font is set on their browser. It's always a good idea to add the generic name at the end of font choices....
This is a useful page:
http://www.codestyle.org/css/font-family/index.shtml
Sweetnicks, I just looked at your blog and see you are using Thisaway (Rose)
In your stylesheet area, look for:
#blog-header
If you want to use two different fonts for the title and the description of the blog in the header, look for:
#blog-header p
and put the font-family you want to use there.
Hope that helps!
Post a Comment