Skip navigation.

The Dark Furie

Easy CSS Template

Wednesday, 13. August 2008, 08:36:06

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

A while back I created a very simple CSS template that allows even the most basic users to customise their pages in simple ways. You can find that post by following this link.


Today I'm updating that template to include some pretty funky effects that are becoming more and more popular. This updated template includes notes to help you make your own theme as well as updated code to add three different comment backgrounds, change the name of page elements and do some funky stuff to the menu.

If you're interested in trying this out but can't copy and paste it (phone users mostly) ask in the comments and I'll send you a copy. Specify if you want this or the basic one.

/*Where dimensions are given for images in the notes of this template, width is always given first followed by height*/

/*This line will define the banner of your page - set an image 920x170 pixels.*/
#top {background: url(http://) top center no-repeat;}

/*These two lines hide your page title and subtitle*/
#top h1 { display:none; }

#subtitle { display:none; }


/*This line defines the background image of your page - set an image and it will tile the page*/

body {background: url(http://) top left repeat;background-attachment: fixed;}


/*These lines will set up alternating comment backgrounds and a special one for you - try something a single colour or in light grayscale for ease of reading, 300x800 pixels is an ideal size for the longest comments*/
.comment1 {background:url(http://) repeat-x !important; }
.comment2 {background:url(http://) repeat-x !important; }
.ownercomment {background:url(http://) repeat-x !important; }

/*The following six lines allow you to rename the parts of your page - put each new name between the quotes*/
#menu_blog a {content: "";}
#menu_archive a {content: "";}
#menu_albums a {content: "";}
#menu_links a {content: "";}
#menu_friends a {content: "";}
#menu_about a {content: "";}

/*This line adds an icon to the currently selected menu option as well as the one hovered over with the mouse - it's the basis for the mini Furie head on my menus*/
#menu #selected, #menu a:hover {background:transparent url(http://my.opera.com/community/graphics/themes/121/menuselected.png) center 21px no-repeat !important; color:#fff;}

Have fun with your creations guys.
:yes:

SevenElephant

Comments

AOTEAROAnz 13. August 2008, 08:51

Wicked !
Thanks Mik, Tasty post.:yes: I'm taking this baby home :happy:

Moesring 13. August 2008, 09:12

Isn't this just essentially a slightly updated version of the previous post you indicated? :confused:

In any case, if it encourages more people to tinker with CSS and personalise their pages then it is definitely useful. :yes:

Furie 13. August 2008, 09:12

Henry, if you're not experienced, start with the simple one linked to and practice with that to get the hang of it.

Some people are even having problems with that. Had one guy complaining about mine not working and it turned out he was using it with a professional CSS that resized the elements I was changing. :irked:

Furie 13. August 2008, 09:27

Moe, my aim is indeed to get people experimenting with it, and to cut it down so much that it's less scary for newcomers. The original post was designed as the simplest template for anyone to use, and this update is aimed at those who've used it and now feel they want a little more.

Dacotah 13. August 2008, 10:34

Great post. Too scared to try it yet.

Furie 13. August 2008, 10:40

Your theme is currently more advanced than these go to. Randy designs his templates to replace the Opera ones while mine are designed to work with them. Each has it's own charms and pitfalls.

If you ever do change, start with the basic one in my other post Carol. It'll let you start from scratch and then you can build on it with the extra things here.

Furie 13. August 2008, 10:50

UPDATED - I missed a line editing the menu out when I posted this. Just added it to the end of the template.

As always I'll help anyone that needs help in the comments of this post. Remember to click "Use my custom style sheet with my current theme" when saving this.

Moesring 13. August 2008, 10:56

:sst: The line at the bottom is duplicated. It is also written before "#menu_blog a" etc.
:smile:

Furie 13. August 2008, 11:05

Okay, weird... I made this post in my Notes first then pasted it into the post. It's at the bottom where I made it originally. Changed back now anyway.

Dacotah 13. August 2008, 12:09

I haven't used Randy's theme in a long time. I'm back to one from here.

Furie 13. August 2008, 13:55

Oh, how come?

Cois 13. August 2008, 15:50

I'll need to come back to this.. p:

qlue 13. August 2008, 19:50

:left:

MizzMartinez 13. August 2008, 20:12

It looks...DIFFICULT! :faint:

Furie 13. August 2008, 22:44

Trust me, it's simple.

MizzMartinez 13. August 2008, 22:46

I'll give a try MACHO-MAN! :irked:

AOTEAROAnz 14. August 2008, 11:49

:frown:
Ok..i'll head to the other CSS then :WALK::SHUFFLE::GRAZE::HOBBLE:
*Puts Dunce hat on*
:lol:

Furie 14. August 2008, 17:46

Not about being a dunce, mate. It's quite a simple thing once you've got the hang of it, but most people give up after a while cause they've started on something too complex. Start with the very basic one and when you're comfortable with that add some of this stuff in. If you feel comfortable with this much, try this one first :up:

Moesring 14. August 2008, 18:28

Mik is right. Once you have grasped CSS, it is actually quite simple. However, getting started with CSS is certainly not easy. It took me months before I could finally start to make CSS do what I want. :down:

A good template can be an invaluable starting-point. It is how I learned CSS. When you consider that this is the sample I learned from (alongside a rudimentary CSS tutorial for reference), I am sure you will agree that Mik's templates are much nicer. :up:
:sst: As an aside for those interested, that sample was the blog theme of a certain 6-lettered American whose name I never write anymore. Of course, the references to Death Note probably gave that away. :lol:

Same goes for you, Kerst. Give it a trial. You may find that it is not as daunting as it looks. :yes:

MizzMartinez 14. August 2008, 20:07

I will try to give it a try Moe! :smile:

Furie 14. August 2008, 21:43

What the hell's with the sample? I made Red's Death Note theme myself.

Moesring 14. August 2008, 22:11

:confused:
As I said, that was the sample that I learned from whilst I was personally trying to learn CSS. As I also said, it is nowhere near as easy to understand as the template above. The main reason for including it is as a comparison for illustrating just how simple the template is.

Not once did I dispute where it came from or who its author was.
[Edit:
When that CSS was downloaded, 29 August 2007, it was not your theme. I just rechecked PMs. When I asked about it, she specifically said that Sarah made it for her.

I know you made the later theme but this one was not yours.]

Furie 14. August 2008, 23:16

Ah, an early one then. Minor confusingness.

Suntana 15. August 2008, 03:17

Cool ... Furie!
Looks like I just might be able to do some REAL Damage now ... Uhhh, I mean, dream up and implement some Creations. :D With what I learned from Andrew and what you provided above and in that Link, some of it is slowly sinking in. I'm assimilating it like ST: The Next Generation's The Borg would assimilate things. :lol:

Question: Okay, I've seen some people use Apostrophes to enclose URLs insides Parenthesis. Andrew uses Quotation Marks because they're easier to see. And you use neither. So, this and any other Code with URLs works OK without Apostrophes or Quotation Marks around URLs?

I'll see what if anything I can conjure up during the weekend. I liked that I saw a Code for having the Body Background stay stationary ... Fixed, unlike the moving one that I have right now.

I'm still LOST as to What the Fffff ... Frigg Tags are. But, I'll ask about that later. I want to mess around with this first.

Suntana 15. August 2008, 03:26

Followup Question:
In that Alternating Comments Background Code ... in the "repeat-x" --- is the "x" supposed to be typed as is? Or is some number supposed to be substituted?

And the "ownercomment" would be ......... ME?
As in a particular "Special" Comment Box theme for when I make a Comment? Aww Shucks! I'm speechless, like the Lion in The Wizard of Oz. :smile:

FYI ... for some reason, the Body Background on your Blog keeps breaking up very badly. At least it is on MY computer. Then again, I have AOL Dial Up on a 7½ year old computer. But, the only thing I had ever seen break up that severely were 2 certain Opera Skins. :::Shrug:::

Furie 15. August 2008, 09:47

Typed as is and I've no clue about quotations or apostrophes. Yep, owner comment is you. Not sure what you mean about my background. Can you provide a screenshot?

Moesring 15. August 2008, 09:54


Minor confusingness.


That sums me up very well :devil:

If the template I learned from was one of yours, I daresay it would not have taken anywhere near as long to make sense of it. :yes:
[/Sycophant mode] P:

Can anyone answer the questions directed at Mik? :D

Regarding apostrophes surrounding URLs, you can use either " or ' depending on personal preference. You do not need to use either if you have NO spaces in the address. If there is a space, you MUST use " or '. If you don't, it simply won't understand the address.

"repeat-x" is supposed to be written as is.

I'll let him answer the other questions. :lol:

Furie 15. August 2008, 09:59

Me sleep now. You answer. :zzz:

Suntana 15. August 2008, 13:56

@Furie: I don't have a Screen Capture Utility right now to provide a Screen Shot. But, it was just your Orange Sunset theme Background that after a while of me perusing last night, would just digitally break up. It sometimes intermittently fixed itself as I navigated in your Blog. But, then it would break up again. Your Blog itself would remain intact though. Just the Background Wigged Out last night. Who knows? It might have been a 1 time glitch and with my computer having been off at night, it might have fixed everything. I'll let you know if it happens again.

Furie 15. August 2008, 14:00

Ah, I know what that is. It's something I added to my page a while ago and never got round to fixing. Only affects PCs so I wont be able to tell how any fix is coming along for a while, so I left it. Another part of that is that if you login while on my page you'll get an interesting effect on the login boxes.

Suntana 15. August 2008, 14:10

@Moesring: Thanks for the clarification on the Apostrophe / Quotation Marks / or NOTHING around the URLs inquiry Global Crisis of mine. I do believe you made it crystal clear now regarding the Spaces vs. NO Spaces factor dictating the requirement vs. NO requirement of Apostrophes / Quotation Marks. :up:

Furie 15. August 2008, 14:14

Memo to self - don't attempt to answer questions when still asleep after being up all night.

Moesring 15. August 2008, 14:21

I noticed the interesting effect on the login boxes myself and meant to bring it up. I guess you already know about it. :yes:
I presume you also know that it caused by the span.m line (in cenobitedropcaps.css)? :up:

Suntana 15. August 2008, 14:29

@Furie: Ahhh, the Digital Breakup just struck again. Well, at least you know about it. Heyyy, I found the perfect Fix for that problem. Just open up the Left Panel area where the Opera Bookmarks and such are, and the Digital Breakup will no longer be visible with the reduced Blog-viewing area. :lol: Seriously, I just about exclusively use my Opera with the Left Panel open. Only recently was I operating with the Left Panel closed because I was messing with that Background stuff. And actually, that Legal Pad Background in my Blog was intended to be in the Writing area. When I didn't immediately see it displayed, it was only by pure chance / trial & error that I figured out that by closing the Left Panel, I could see the Legal Pad Background. I was like, "Ohhh! WHOA! So THAT's where the Sucker wound up."Homer: Doh!

Furie 15. August 2008, 16:25

Sounds like your monitor's stretching/crushing the background to me.

Yeah, I know Moe. But I can't fix it without breaking other things and can't tell which has happened on the phone.

Suntana 16. August 2008, 03:34

Okay, so I went and modified my Blog Header as per my own tinkering. I extended it and added some Opera Support. Success! :smile:

Then as per your Code, I replaced the non-stationary Legal Pad Background I had before with a stationary, fixed Wall Paneling Background. It WORKED! Cool! No more Background moving with the Scrolling action. :yes:

Then as per your Code, I implemented that 3-way Alternating Comment Boxes idea. It WORKED! Awesome! :yes: Day-Um, Furie, you really know what you're doing with this Stuff. :D

Then being in a full-blown CSS-afied mode ... CSS running through my veins now, or so I thought, I went for the Trifecta. I dove from the 10-meter platform into attempting that Icon in the Menu idea.

Verdict? Uhhh, Ummm, it's sorta working.
But, I'm gonna need your assistance tweaking it.
I can see the Top of Bugs Bunny's ears under the Selected Option and I can see the Top of his ears appear when hovering on the other Selection. So, that aspect of the idea is working. Now the question is: How do I increase the Menu Area vertically so as to be able to fully-display Bugs Bunny? Frankly, at first I thought Bugs Bunny was going to display to the LEFT of the Selections. I don't know. Maybe the problem is that my Bugs Bunny Icon is too Big. It's an Avatar. With ears fully-extended, the Bugs Bunny Icon is about the size of my Garfield Avatar, I guess.

Furie 16. August 2008, 09:07

Ah, you changed the icon. The one used above is a 9x5 pixels image. It needs that size for a horizontal menu. I haven't implemented the vertical menu in this case as it gets quite complex. Later on, when more people have had a play and gotten used to these things I'll run some more parts of the themes, or I may just put the code up for my Naruto theme.

Suntana 16. August 2008, 15:22

I'm going to have to Abort this Mini Icon in the Menu idea. I tried a 15x15 Neon Ball that I made in Windows Paint, which certainly appeared to look no bigger than your Furie Icon. It was still too big and didn't want to display to the Left. :irked: I then made a 9x9 Neon Ball. That one for sure looked smaller than your Furie Icon. It STILL had the unmitigated gall to NOT display at the Left.:bomb:

Nnnnggg, I don't know. I could have tried a 9x5 Rectangle. But, I think this is an Apples vs. Oranges Thing ... Windows Paint Pixels vs. Regular Pixels or something. Cuz I KNOW that last Ball was smaller than your Furie Icon and it still refused to snap into line.

Ehhh, No Biggie. I'll go and see what other CSS Tricks & Treats I might have overlooked in your template.

Wait a minute. In your Reply above, by "Vertical Menu," did you mean like YOUR Menu? Cuz what I meant by increasing the Menu area vertically was just increasing the Black area there in my same Horizontal Menu. You know ... sorta like what theoretically I would get IF the Font Size of the Menu was increased. Would THAT work? If a Bigger Font Size was assigned to my Horizontal Menu, would that allow my Bigger Menu Icons to fit to the Left? If so, what would be the Code for increasing the Font Size and possible BOLD Attribute of my Horizontal Menu?

Furie 16. August 2008, 18:20

I've got all that online somewhere. When my network stops playing up I'll send you a copy of my menu coding to have a look at.

Suntana 16. August 2008, 20:54

That'll work. Thanks, Furie!

Den1z 2. September 2008, 08:27

thanks Furie :up:

Furie 2. September 2008, 08:37

No problem dude.

Cois 3. September 2008, 23:43

You are so wonderful Furie.. :love:

Suntana 4. September 2008, 01:45

Hey, Great, Cois! Now that you distracted, confused, perplexed perturbed ... and probably SCARED him a bit, I can sneak this inquiry in. :D

Hey, Furie, would you by some chance have some CSS Code for installing a Background on just my Welcome Stick Post? NOT any of the other Posts, just on the Welcome Sticky Post. I had installed my Background in my Welcome Sticky Post over the Weekend as per Code from another Opera Community Member. It seemed to be working great until yesterday when Attila went to add a Comment in my Sticky Post and it made my Background disappear, leaving WHITE Text on a WHITE Background. :yikes: I had to revert back to my Regular Black Text sans Background Sticky Post. Below is the Code I had in there:

.post.stickypost .content {background:transparent url("http://files.myopera.com/Suntana/blog/Black_Blue Sticky BGF.png") repeat top left;float:left;}

Do you see anything wrong with the Code? Is there anything in there that would cause my Background to disappear when someone adds a Comment to the Sticky Post? Or do you have a totally different Code that would do the trick ... display the Background and NOT have it disppear when a Comment is added to the Sticky Post?

If you don't have the Code handy or are busy, then don't worry about.

yoze 14. December 2008, 12:48

flirt :love: :heart: :cheers: thank's

Furie 26. April 2009, 20:11

Post updated. Check the top.

Iguy 9. May 2009, 04:37

Hi Drl.
How can i use the code css. What i have 2 do first?
Can i create the blog design with my mobile only :D
Please tell me :smile: thanks b4

Write a comment

You must be logged in to write a comment. If you're not a registered member, please sign up.

Download Opera, the fastest and most secure browser

Photos

img65.jpgimg37.jpgimg31.jpgimg53.jpgimg7.jpgimg25.jpgimg79.jpgimg57.jpgimg27.jpgimg23.jpg
July 2009
S M T W T F S
June 2009August 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 31

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.