Skip navigation.

The Dark Furie

My Very Basic, Yet Effective CSS Template

Friday, 23. November 2007, 14:34:17

UPDATE
While this code is perfectly all right, we've been working on an automated generator to allow people greater freedom when creating their blog themes as well as making it a lot easier to do. Using the generator you can concentrate solely on your theme and not worry about the codes.
Click here to access the My Opera CSS Generator


You know what the main problem with CSS is? There's just so much of it that it puts people off learning it. The thing is, to personalise your page is easier than you may think. You don't need to know every single thing in order to make your page really your own. Sometimes it's better to just edit a couple of things on the existing themes.

The object of this post is to create some CSS code that will allow anyone to personalise their page while keeping it simple enough for everyone to understand. Easy eh?

First we'll start with the banner. The banner is an image file, usually 920 pixels wide by 170 pixels tall. To apply a banner to your page use the following code, but change the address of the sample banner to the address of your own uploaded banner.

#top {background: url(http://files.myopera.com/Furie/files/tutorialbanner.jpg) top center no-repeat;}

Now, some images will make your blog title and subtitle obsolete. Anyone looking at my main banner can see I've included the title in the image. This works best when the title and subtitle are hidden (otherwise they look pretty stupid), which can be done using the following two lines.

#top h1 { display:none; }
#subtitle { display:none; }

The next thing we'll do is put our own background up to make the page even more our own. This next line of code puts up a background image starting at the top left of the page then tiles it across and down to cover the background completely. I'm using a 300x300 pixel square but using a larger image (1600x1200 for example) will stop it being tiled because the image will take up the entire background. I've also fixed the background to the screen so that it doesn't scroll with the blog.

body {background: url(http://files.myopera.com/Furie/files/tutorialbackground.jpg) top left repeat;background-attachment: fixed;}

And how does this look when we put it all together? Pretty terrible actually (just check the image I put on this post), but that's only because I chose these images as examples. With the right images you can really personalise your page and make it something special with these basic codes. Well, better than the one I did anyway. Hope this post is of some help to people.

Here's all that code put together, ready to be copied into your own CSS file and start you off customising your own page.

#top {background: url(http://files.myopera.com/Furie/files/tutorialbanner.jpg) top center no-repeat;}
#top h1 { display:none; }
#subtitle { display:none; }
body {background: url(http://files.myopera.com/Furie/files/tutorialbackground.jpg) top left repeat;background-attachment: fixed;}

And finally, click the link to check out some of my themes created using these rules.

WND Duo AtomGoing Home Today

Comments

varish 23. November 2007, 15:59

Thanks a lot ! This post will inspire & encourage me to modify my page ... Only thing now I have to decide is what changes do I want :D . Although I have done my graduation in Computer Engineering , even I am put off by CSS some times :D !

dannii 23. November 2007, 17:00

:up:

Furie 23. November 2007, 17:17

And that's exactly why I made the post Varish. I know people who take one look at CSS and run a mile, when all they need to make basic but effective changes to their pages are those 5 lines. I figured it was time to put a very basic tutorial together as the CSS for dummies group started by talking about selectors etc and really put me off it.

dannii 23. November 2007, 17:34

I still don't feel like playing with CSS. Too hard :frown:

Furie 23. November 2007, 17:53

Just copy and paste the five lines I've provided then change the file addresses to your own files. With a small play around you can do loads.

Callya 23. November 2007, 18:16

:up:

Cois 23. November 2007, 18:16

I'm definitly gonna fiddle a bit.. p:

Callya 23. November 2007, 18:35

:eyes: with who?p:

Furie 23. November 2007, 18:45

Himself... :yikes:

Cois 23. November 2007, 18:52

Well Mik had to fiddle with himself so who am I eh? :D

Callya 23. November 2007, 19:19

:rolleyes:

dannii 23. November 2007, 20:12

But I like me Spongebob theme awww

attilasoul 23. November 2007, 20:37

This is cool Mik! :happy:

Furie 23. November 2007, 20:49

Thanks Tils, someone had to do it sooner or later. :D

There's nothing that can't be found by trawling through loads of pages to find it, but this puts it all together more easily.

theoddbod 23. November 2007, 21:25

:cool:

What keeps putting me off is the object names. I'm used to being able to click on something and get the name of it, but here I'm just looking at names that could be anything. Eg, topbar1. So where's topbar2? Is there one?
Maybe I should look at Dreamweaver - I'm spoilt by Integrated Design Environments.

Furie 23. November 2007, 21:36

I'm not entirely sure, but I think topbar1 is the black/white bar and topbar2 is the menu on it. May be completely wrong of course.

This isn't to create an entire page design of course. More to modify the existing ones a little bit. I reckon it's a good starting off point.

rhona 24. November 2007, 02:33

It does seem pretty simple, Furie.
Maybe what i'm looking for is more complicated, I'm gonna try urs.

:smile:


Do u know why my cursor's not working?

Furie 24. November 2007, 07:44

Not a clue. What browser you looking at it in?

rhona 24. November 2007, 08:55

Opera

:irked:

Furie 24. November 2007, 09:08

It doesn't appear to work in Opera. Did Clint's work in Opera?

Callya 24. November 2007, 10:57

Did you take your Christmas theme down Mik?

Furie 24. November 2007, 16:04

Not putting it up til Christmas and that's not yet, no matter what the shops think. :D

rhona 24. November 2007, 16:24

I don't know what Clint did, should I ask him?

Why doesn't it work in Opera?

Cois 25. November 2007, 12:13

Mik did mine so you need to ask him.. p:

drlaunch 25. November 2007, 16:31

I'd suggest using #top2 instead of #top to change banners. #top is in reality a few pixels higher but a part of it will be hidden behind the menu. Also, if someone decided to modify my theme, Sleek Shady using #top, the banner will look wrong because I've moved the menu to above the banner. I use the lower part of #top in Sleek Shady for a bevel effect.

#top2 is the easy interoperable version for beginners, while #top is for those that want to dig a bit deeper into customisation of their blog design.

rhona 25. November 2007, 23:01

Does that mean anyone using an O browser can't see it? Clint do u use Opera?
But I use it and I can see his :confused:

Furie 26. November 2007, 01:02

Sorry for the late reply. Somehow I stopped watching my own post. It seems that some people can see the changed mouse cursors and some can't. It also appears that some of them just don't work at all cause the site hasn't updated or something.

If anyone's got a plain english, easy to understand for a knackered Furie translation of what Remi said then please fill me in. I think it's something like "use top 2 selector cause it's less likely to balls up things" but I'm not entirely sure at the moment. If so I'll edit this post to make things easier for people to start.

rhona 26. November 2007, 01:36

Is it likely to work later on?

U know i can't help with that translation cause it sounded like a foreign language to me. :smile:

drlaunch 26. November 2007, 02:07

I'm goooood at gibberish. :D

The #top selector might give you trouble with some designs and menu configurations.

Anyway, seems like Espen used #top in his example here. Some people use #top And some people use the #top2 selector.

SqueakeyCat 2. December 2007, 02:34

ty, got this watched...and will experiment with it for my regular site pages

Lets_Roll 2. January 2008, 23:40

OUTSTANDING.....Thank You very much, it worked perfectly....

Let me buy you a drink....

Furie 3. January 2008, 00:47

No probs. :D

Furie 12. February 2008, 15:35

Hmmm, dunno if anyone who used this is still watching it, but if you are try changing your theme to the new Personal one for a cool interaction between that and what you created using this template.

attilasoul 12. February 2008, 20:44

I can't get it to work, it just shows the standard banner from the theme. :frown:

theoddbod 12. February 2008, 22:01

Try a different starting theme. The "L'Amour" one you've picked seems to not like custom background headers. I've tried your banner code with a dozen other of the themes and the "L'Amour" one was the only one that didn't work.

Furie 13. February 2008, 00:37

The theme I meant was the one called Personal. It puts your member photo on your banner. Combined with this little template it could be quite cool.

Furie 13. February 2008, 00:39

I think the problem with the L'amour as a base theme is that the banner overlaps the menu (at least on mobiles anyway) so it's hard to replace it with this little code.

attilasoul 13. February 2008, 07:31

It didn't work with the purple theme either, that's where all the trouble began.

Thank you for the advice, and for the link Mart, I will look at it later today and hopefully I can get it to work again! :smile:

Furie 13. February 2008, 11:00

It didn't? :eyes: Should have. :mad:

daxonmacs 23. February 2008, 15:34

Hi Furie,
Nice job on the css on this page.
I wondered how you got rid of the bar underneath the banner and how to replace it by a custom made one?
Can you help me out on that?Also where do I change the names for the links the buttons will link to ( about; etc ) And should I upload two files if I want them to change color or "light up" when clicked or hovered upon?
Bit much to ask as a total stranger I'm afraid, but w3schools didn't really help me out here :smile:
Cheers and a nice day,
d.

Furie 23. February 2008, 15:44

That took me a week to figure out. The answer's out there, but it's well hidden. It's also quite hard to explain in this post.

I don't actually use this template for my page, I use a more complex one I designed myself (well, put together from scraps I got from other people's pages). If you're still up for it I can show you the code for editing the menu bar. It needs a larger banner though, the way I do it.

daxonmacs 23. February 2008, 16:50

Yeah sure I am up for it,
thanks for a quick respons as well.
I got all night and the rest of tomorrow to tinker with it.
It's not like I want to have it changed at a fixed date, rather I have it customed to my desire and well ... taste of the moment.
Is it also possible to rewrite the whole of the code? I got the impression the other pages will also suffer from it if it isn't done correctly, like the /mypage/account etc.
I frankly only wish to rewrite the code for my blog, rename the links, pointed to with custom crafted buttons.
Also as a token of appreciation, can I refer to you for helping me out, or do you rather not have your name mentioned?
Regards,
dax.

Furie 23. February 2008, 18:28

I'm always up for free publicity. :yes: I'll send you my advanced template now. I've had a look at your code and this should be no problem for you to adapt. :D

daxonmacs 23. February 2008, 19:14

Thanks a lot Furie,
I'll get chewing on that asap, then design a new header and buttons, and Ill post your name as a reference ,thanks a lot.:up:

Furie 23. February 2008, 19:15

No probs.

Cois 13. March 2008, 12:02

Mik.. Can you inbox the code to me?
Guess its time to play with it a bit but I'm unsure if the spaces will make a difference..

princessofdeath 3. May 2008, 13:12

hi!!! wow.. this really helped me... but.. how can i change the scrollbar? is that even possible here?? and do i just paste the in the custom style sheet? no added tags? (the banner and bg thing) just copy, paste.. then save? thanks!

Furie 3. May 2008, 16:35

Yeah pretty much. You'll have to get much deeper into it to change other things. This is just a basic one so anyone can change the background and banner to personalise their page more.

princessofdeath 4. May 2008, 13:04

i tried changing the scrolbar.. but it didn't work X(

it finally worked... i thought i was doing something wrong when the first time I tried to personalise it... coz my blog looked worse.. then somebody sent me this link *thanks to him* but i really didn't do anything wrong..the tags/css were the same... then I discovered.. I have to log out then log in to see the changes *when you are using Opera as a web browser*.

sigh... I still have a long way to go... thank you very much :smile:

Furie 4. May 2008, 13:41

Just clear your cache, then reload the page to see changes. Oh, and it was a she that sent you the link. My girl Kim to be precise. :D

1 2 3 Next »

Showing comments 1 - 50 of 122.

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

Download Opera, the fastest and most secure browser

Photos

Picture (1).jpgCameraFX(02).jpgskdsUFFB.pngPicture (5).jpgCameraFXw.jpgSepia.jpgwarp(2).jpgPhotoArt(05).jpgPhotoArt(07).jpgwarp(5).jpg
November 2009
S M T W T F S
October 2009December 2009
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

Highlights Of This Page

Blogging & CSS Help

  • My Blog Designs

    This group contains all of the new blog designs I've created for anyone to use.

  • Simplest CSS Template

    The simplest way to customise your blog.

  • Anonymous Comments

    My thoughts on the problems with the currents system used on this site, the problems with any anonymous comment and a way to improve this site's system.

  • Report Bugs And Problems

    A selection of links and help enabling anyone to report problems they have on the site.

  • Brand Identity

    A discussion of the things that can affect how people view you online.

  • Back Up Plan

    What would you do if you lost everything you'd ever written online over six years.

  • Mobile Blogging - How To

    A look at how I've written every post on this page directly from my phone.

  • Mobile Publishing Package

    A collection of mobile applications I put together to help people publish articles online.

  • Only Online

    Even if the thing you've accomplished is only online, why shouldn't you pat yourself on the back over it?

  • Acronyms Code Tutorial

    How to set up acronyms and explanations in your posts.

  • Easy CSS Template

    Extended version of the template I posted a while back.

  • Blog 9 From Outer Space

    You too can aim to have the worst blog in history.

  • Image Resizing

    How to resize a large image just using code.

  • Tags Tutorial

    A quick guide (requested) on how to use tags and why to do so.

  • Text Formatting - Dropcaps

    A guide on how to implement magazine style capital letters to your page.

  • The My Opera CSS Generator

    Tired of your current blog theme but don't know how to change it? Fed up of asking others to make you a new theme? With this generator you'll be able to make your own blog theme easily. I guarantee it.

  • Tips For New Members

    A selection of help for people who're new to the site or blogging in general.

  • Dark Professional Theme

    This theme has been designed for anyone to use. It's a plain black stylish theme that has several different skins regularly released for it. Try it out and see if you can find anything that suits you.