phooof...

Step 1: Start from scratch

Go to your Design page, go to Custom Style Sheet and select "Only use my custom stylesheet".

This gives us a nice blank slate to work with

Step 2: Organise the layout

For this you will first need to gain a basic understanding of the HTML elements that make up myOpera's blog pages. Unfortunately (for themers) the myOpera devs are constantly slaving away at improving the site, which occasionally means structural changes to the HTML. For the most part though, it stays fairly static enough over time.

First, the base blog page structure:

The initial base structure of the myOpera blog is shown below.

For some odd reason, there's a huge number of nested "wrap" elements around the page. I have no idea why - they seem utterly useless as far as I can tell, but hey.

Anyway, onwards. Inside that last #wrap4 element is your blog. This is where the magic happens. It's split into two basic parts, the header (called #top) and the main content (called #content). These and their component elements are illustrated here.

As you can see above, the header contains #top2 which is used for the main title of the page, and normally contains a large header background image on most myOpera blogs and #menu which contains the links like "Blog", "Archive", "Photos", etc.

The main #content element then contains the #mainwrap (you're blog content), the #sidewrap (your sidebar) and the #footer

Structuring the structure

Once you understand the structure of the page code, it's a lot easier to decide how you will style each element to make up the overall visual structure of your blog.

tune in next week for step 3...

Read more...

1. Agressive cache bypass on F5 (everything should be fetched from the server, regardless of settings or headers, including all auxiliary files)


2. DOMStorage


3. Access Control for Cross-Site Requests


4. Get rid of the "Allow User Javascript on https" warning message


5. UserJavascript UI- and preference-access - a la opera.setPreference, but globally accessible


6. UserJavascript auto-install (same as current method for skins/setups)


7. Make the speed-dial "area" (or at least part of it) into a toolbar


8. Copy and paste html/rtf from webpages (or at least a way to get it into RT emails in M2)


9. Calendar app with iCal, vCard support in M2 (hCal and hCard would also be nice)


10. No oncontextmenu support (a wish doesn't need to entail the addition of features afterall, and a campaign for its removal from HTML5 before 2022 would be nice too). See here for a lengthy discussion.