Skip navigation.

How to change your banner

Saturday, 10. November 2007, 17:05:42

, ,

Hello :idea: Here is a tutorial for those who want to customize their Opera blog's banner :smile: I can show you how to do this now, thanks to my friends: Mainjailtrap, Dacotah and Kania who helped me! :up: Ladies and Gentlemen, just follow the guide...

You can also find a similar guide in Italian if you prefer! :smile: It's here: my.opera.com/myscitech

You want a new banner (the image in the top of your blog/album where the tittle blog is), have a look to the ~Keilarina~ album HERE :smile:

Or for those wants to go further :smile: The best of all is there :yes:

--------------------------------
1 - The first step is to make your banner's picture. This picture must have 920 pixels by 170 pixels size (resolution: 72 pixels/pouce), and saved as "yourbannername.jpg" (JPG or PNG or GIF).
NB: "yourbannername.jpg" is a name's example, you can choose the name you want...

- For Windows users, there is a nice freeware, an Images Manipulation Program: Paint.NET
- Also my friend Mainjailtrap offer you some nice banners on his blog :smile:
--------------------------------
2 - When your banner is ready, you have to upload your new banner on your Opera blog:
- Go to your Opera blog's account here:

Then you will see this:

Click on the Files button... and you will see this:

Click on the tab "Upload files"... and you will see this:

Select the directory "files" (if you don't have one, you have to create it. Also don't use the "blog" directory, in this directory your banner will be resized smaller), then click on the button "Choose" (In yellow here). Find your new banner on your computer, and then click on the "UPLOAD" button and wait a few seconds :wait:
After the upload, you will see your directories and the files you have in them. As you can see in the previous screen shot: my "claude-banner.jpg" banner :smile:
--------------------------------
3 - Now it's time to personalize your blog :D
- Go again to your Opera blog's account here:

Then you will see this:

Click on the "Design" button... and you will see this:

Click on "custom style sheet" on the upper right... and you will see this:

So here, under the 2 words "Enter CSS:", you have to write this code in the empty box:
#top {
background: url(http://files.myopera.com/holdowicz-claude/files/claude-banner.jpg) top left;
}
- BUT you have to change "holdowicz-claude" by your own blog's title (the one you can see in the address bar of your browser),
AND also this "claude-banner.jpg" by your own banner's name :up:
- After that, don't forget to check this line:
Use my custom style sheet together with the current theme,
and then click on the SAVE button :smile:
- Refresh your Browser and see the result :eyes: :up: :wink:
--------------------------------
Lorenzo Celsi added some basic explainations on how to customize some things in the layout here:
http://my.opera.com/LorenzoCelsi/blog/2007/12/03/pimp-my-blog
If you have any questions or need help just ask him :smile:
--------------------------------
For those want to know more about how to customize your Opera blog, go and see here:
http://my.opera.com/css4dummies/blog/

How to change the background

Comments

Mainjailtrap 13. November 2007, 19:08

some times when you use banner cotaining black color, your page name dissappears due to same colors so add this
for changing the color and size of subtitle.
#subtitle
{
color:red;
font-size:150%;
}

holdowicz-claude 13. November 2007, 19:19

Very nice Prit :up: I forget that color's problem. Thank you very much :smile:
And we can change red by white or yellow, etc...

Mainjailtrap 13. November 2007, 19:29

yaa, but there is problem,we only can change subtitle color. Not main title, may be we will do it in future but i dont have code for it now... By the way have good night.... I dont know whats time there.. ..

holdowicz-claude 13. November 2007, 19:35

It's 20H30. So thanks for the good night and that precision. If we have a black banner, we have to put the title as a graphic in the banner, like Keilarina done: http://my.opera.com/~Keilarina~/blog/ And delete the real title (Sorry for that bad English). I hope everybody understand this.

Mainjailtrap 14. November 2007, 02:14

Nice trick, :smile:

Aneeqa 24. November 2007, 06:00

Hi agen I dont undestend picture must have 920 pixels by 170 pixels size (resolution: 72 pixels/pouce), ??


72 Pixels ?

holdowicz-claude 24. November 2007, 09:45

Aneeqa, forget the resolution, it's not realy important. You have to care just only to the size. Which software do you use for your images? Maybe I can help you.

Aneeqa 24. November 2007, 10:25

Photoshop CS8
But I want to uplode Iman S Art
You Know
From My Pc


holdowicz-claude 24. November 2007, 12:43

The best way in Photoshop is:
- to open your picture file you want
- Resize it to mach the 920 pixels width
- Then in the layers tab, double click on the background layer to transform it as a layer.
- Then go to the image menu, choose canvas size and set the height to 170 pixels. Your image will be crop.
- Then select the move tool (v) and with the up or down arrow on your keybord, move the image down or up until you see the most interesting view for your banner.
- Then save your work as for example: aneeqa-banner.psd
- Then go to the file menu and select "save for the web" to get a JPG image :smile:

Aneeqa 24. November 2007, 15:22

Hai Claude

I dont Know But MayB I completed As per Your Inestraction.
But I cant See It Is All White
Will You Plz Chack My Banner

holdowicz-claude 25. November 2007, 12:11

Hello Aneeqa! I checked your blog but I seen that you removed all your work and put a classic Opera banner. So what was your name's banner? We have to realy take care about the name's spelling and the path we write in the code. For example an A in a code is different from an a. Also if your banner is in JPG format, don't forget for its name the ".jpg" who follow the name. Tell me if after checked all, nothing appear :smile: Take your time Aneeqa :smile:

Aneeqa 25. November 2007, 13:46

Aneeqas Banner.jpg


It was Claude But You Know ?

I tryed But fail Ok .

holdowicz-claude 25. November 2007, 14:09

OK I see: You have to remove the blank space in your banner's name. Remove it then upload it again and change the code for its name. For example: aneeqa-banner.jpg
:smile:

Aneeqa 27. November 2007, 17:14

yaap

Thank You Very much Claude
So sweet Thank you Realy

Great Work .
Have a wonderful Day .

LorenzoCelsi 2. December 2007, 11:23

Hello Claude, nice tutorial. I don't know if somebody already said that (in case, sorry) but "top left no-repeat" are not necessary with a pic that is 920px large.
I would also add that since there are layout that use headers 150px high, one can chose to make always pics 170px high and in this case they are cut 20px in the bottom changing layout or they can enforce the height adding this:
div#top2 { height:150px; }
That probably doens't work well with the layouts with "curves" on top of the post area. I havent' looked in deep, I am lazy.

holdowicz-claude 2. December 2007, 12:05

Great Lorenzo :up: I learned thanks to you :smile: It's nice to learn without spend many times looking how to do changes in CSS :ko: I'm a lazy one too :frown:

--------------
For those who want to follow an another tutorial about Opera blog banners, just go on Lorenzo's blog here:
http://my.opera.com/LorenzoCelsi/blog/tips-for-your-layout-modificare-il-tuo-layout
--------------

LorenzoCelsi 3. December 2007, 09:15

Hey everybody, I've added some basic explainations on how to customize some things in the layout here:
http://my.opera.com/LorenzoCelsi/blog/2007/12/03/pimp-my-blog
If you have got questions or need help just ask. :smile:

LorenzoCelsi 27. December 2007, 07:14

Have you thought that maybe you should cut a slice off the image? :smile:

holdowicz-claude 27. December 2007, 09:19

Lorenzo is right :smile:
- Ivee the first step is to set the 920 px width with constrain proportions.
- Then double click on the background layer in the layers panel to change the background layer to a layer (after double click, just accept what photoshop ask by clicking OK).
- Then go again in the image menu and choose not image size, but canvas size. Here you have to set the height (170 px) and accept all warning message from Photoshop.
- Then with the move tool selected (v) and the up arrow or the down arrow of your keyboard, move your photo up or down until you see the most beautifull part of your picture...
:smile:

LorenzoCelsi 28. December 2007, 08:25

Since it seems you are being serious here is a serious answer.
NOT ALL PICS FIT. It depends on the pictures and the way it was originallly taken. You can't work around the SHAPE rule. Since the blog header is 920x170 or 920x150 depending on the layout you pick, the image you use for the header MUST have the same ratio between "width" and "height", otherwise it ends stretched or it repeats.
It is like the old game for kids where you have got different shapes and you must put the right shape in every hole. The round shape doens't fit in the triangular hole.
See here:
http://my.opera.com/MizzMartinez/blog/
The original image was of the standard size and it was simply resized in "width" and cut/cropped.

holdowicz-claude 28. December 2007, 10:44

Thank you Lorenzo for the explanation :smile:
Ivee here is the original picture of MizzMartinez's blog:
http://my.opera.com/MizzMartinez/albums/showpic.dml?album=430040&picture=6060717
As you can see, the image was cropped in height :smile:

holdowicz-claude 31. December 2007, 15:51

Thanks Ivee :smile: This is not mine, you can take it if you want. This is a gift for all of us from Keilarina :smile: Have a look here:
http://my.opera.com/~Keilarina~/albums/

angel292005 7. January 2008, 11:27

Thanks, I have a question...when are you going to do more tutorials? I would love to have it handed to me. If I could FIND the developers css tool bar, then I would install it. No luck!

holdowicz-claude 7. January 2008, 11:38

I plan to do a tutorial about the background soon, when I will find some free time :smile:
For the tool bar: I think that you mean the bar where are the buttons "blog", "photos" and "about"...
I just saw your blog and if you understand how to use CSS, have a look on your blog CSS theme here:
http://my.opera.com/community/css/users/115/main.css
Find the code lines called "menu" for design the tool bar. Let me know if you have any questions! :smile: Good luck Sarah :smile:

MizzMartinez 16. January 2008, 21:44

Which program can I use to resize an image if I use Mac? :worried:

holdowicz-claude 17. January 2008, 08:24

I also have an iBook and I have Photoshop in it, but Photoshop is very expensive. So maybe you can have Photoshop Element who is also interesting...
iPhoto can do that I think (there is a crop tool).

Or you can try those free softwares, but I don't know them:

http://www.ambientdesign.com/artrage.html

http://www.xtralean.com/IWOverview.html

http://www.cinepaint.org/

Licorice Pizza 23. January 2008, 16:25

Really hate to break in on your conversation...but I am not getting the results that are shown.

First is it a problem if the pixels are 920 pix high and 389 pix high

Next When I place this in the CSS box it removes the %. does that make a difference.

I only get a black screen with the original words.


#top2 { background:#000 url(http://my.opera.com/Licorice%20Pizza/files/LicoricePizza_banner920pix.jpg); }

Thanks in advance.

LP

holdowicz-claude 23. January 2008, 17:52

I have a 300 pixels height so I used this:
#top {
background: url(http://files.myopera.com/holdowicz-claude/files/claude-banner.jpg) top left no-repeat;
height:300px;
border-bottom:none;
}

#top2 {
height:300px;
}

Try the same with the desired size :smile:
Thanks for your help Matthew. I didn't know how to solve the blank space :up:

holdowicz-claude 23. January 2008, 20:04

Hello Licorice Pizza :smile:
:idea: You can also upload your banner picture in an another domain, an another website, like a photos sharing website!
For example this picture here:

This picture is located in this website:
http://sophie-g.net/photo/bret/emer/stmalo_pano.htm
Not here on my blog, but you can see it here!
So in the CSS code you just have to change the picture's url like I do here for this view:
#top {
background: url(http://sophie-g.net/photo/bret/emer/pct/stmalo_pano1.jpg) top left no-repeat;
height:300px;
border-bottom:none;
}

noah counte 23. January 2008, 21:18

All of which means that we host images that are called in the css in photobucket (or some such hosting site), or on our own or someone else's server. THe third solution I see, is to create a second Opera account (with no spaces in the name) and use the new account to host photos in the "Files" area.

holdowicz-claude 25. January 2008, 18:08

Also take care of the image's name who must be exactly the same in the CSS code and for the image!
"OperaHeader.png" is not the same that "operaHeader.png" or "Operaheader.png" or "OperaHeader". I think all will go fine after that :smile:

Licorice Pizza 25. January 2008, 19:36

Here is my code copied precisely from above.

I did use a dummy blog site to store picture file and the file des show up but to narrow in the height.


#top {
background: url(http://files.myopera.com/atasteofvinyl/files/LicoricePizza_banner920pix.gif) top left no-repeat;
height:389px;
border-bottom:none;
}



#top2 {
height:389px;
}

Height never changes. What can be done to make the height taller. Half of my artwork is missing.

holdowicz-claude 25. January 2008, 21:31

Hello Mister Licorice :wink: Nice banner :up: I like your blog, it remind me when I was a child :smile:
But in your CSS code you wrote for the height: 389px! And your banner is only 371 pixels. So just change in your CSS the number for the good one! The menu bar will be just under your banner :smile:

CultureSurfer 26. January 2008, 20:23

Claude-
No, no, flash is easy to use. It's a video player that is easy to embed in a site. In fact, it's easier than placing a new Opera leader banner. Seriously. With the number of people writing you for help on the banners, I hope Opera figures out a way to upload a new banner as easily as uploading images to blog posts.

But back to the video player...
Go to http://studio.brightcove.com/

Creat an account. This service is free because whatever videos you put on your blog or site will also be on the Brightcove tv site. In other words, you are helping them to create a YoutTube type of site. Here is the link for CultureSurfer's channel on Brightcove:
http://www.brightcove.tv/channel.jsp?channel=1156025439

The embedding process is simple. Uploading video to the video player takes some time to learn but I've discovered some shortcuts.

Hey, should Brightcove be paying me for this sort of free publicity? LOL

Let me know if you decide to try this & would like my help with the process.
Naomi

aysunsay 29. January 2008, 14:53

wawww,I have to think of is banner cange.good.I'm turn back to you.Okey.Thanks.flirt

holdowicz-claude 29. January 2008, 14:56

Aysunsay, I'm sure you will make a beautifull banner as you are an artist! :up: I'm curious to see it soon! :smile:

aysunsay 29. January 2008, 15:08

holdowicz-claude,sugar is my friends.Okey.ı'm absolute turn bag.Kisess

holdowicz-claude 29. January 2008, 15:12

You can call me just "Claude" :smile:

noah counte 29. January 2008, 15:12

I will look forward to the new banner too - I enjoy your art as well!

aysunsay 29. January 2008, 15:20

hımm, okey.noah counte,Thanks of writing.Absolute.Welcome to my page.flirt

holdowicz-claude 29. January 2008, 15:21

Hellooooo Matthew :smile: How are you? I just saw your new banner: good :up:
I have to write my new tutorial about the background. I think the second thing we want to change is the background. I'm talking about this one here for me:
Aysunsay is a sweet lady :up:

aysunsay 29. January 2008, 15:21

this is we are page

holdowicz-claude 29. January 2008, 15:25

Here in that white aera? You call it "page"?! Why not! I think we can call it the main page :rolleyes:

aysunsay 29. January 2008, 15:32

Okeyyy.Yes.thats ture.I 'm going to mmeting.SEE you.BY BYYY.
PS:I'm turen bag to you.Have an nice day

noah counte 29. January 2008, 15:54

I am well. I found a beautiful picture that goes well in a black page for my banner. I like the white on black. Personal preference. I think I will play more with font and sidebar areas.

How are you, Claude?

CultureSurfer 29. January 2008, 15:56

Anyone want to explain the difference between skins & wallpapers?

noah counte 29. January 2008, 16:02

Both terms are fraught with difficulty, because people use them to mean more than one thing. Might as well throw themes in, too.

In a general sense, themes and skins refer to overall look and feel - a theme or skin will include the backbround, header, the whole color scheme, the font schemes, etc.

A wallpaper (a term which I don't hear used with regards to websites very often) is a background image or pattern. I think.

Claude?

holdowicz-claude 29. January 2008, 16:08

Matthew: I'm fine but very sleepy today :zzz: It's cloudy outside... For the sidebar area I only know how to add a picture like the circular one with me here. I can tell you how to do the same if you want.

Naomi: The wallpaper is a big image for your desktop background and a skin is a design for a software user interface (like a theme)...

noah counte 29. January 2008, 16:25

I would like to do that. Actually, what I'd really like to do, is embed my last.fm playlist in the sidebar, but I am not sure that can be done.

It is gray here, too. It is warm now, but temperatures will drop dramatically today.

holdowicz-claude 29. January 2008, 16:32

Here is my CSS code for the circular picture on the right side:
#side {
background:transparent url(http://files.myopera.com/holdowicz-claude/files/front-lens-claude.gif) bottom center no-repeat;
padding-bottom:200px;
}

Change the number of pixels in the "padding-bottom" if you have a big picture or a small one, you will understand why :wink:
I don't know if you can use that code for a playlist :sherlock:

1 2 3 4 5 6 7 Next »

Showing comments 1 - 50 of 346.

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

If you can't read the words, press the small reload icon.


Smilies

Photos

bkgrd-drug.jpgbgrd-10.jpgbkgrd-light.jpgbgrd-15.jpgbgrd-7.jpgbgrd-3.jpgbgrd-2.jpgbgrd-13.jpgbgrd-8.jpgbgrd-6.jpg

My websites work

An illustrated tale

My videos work

Help people in the world

Blogs Peace Chain