My Opera Development

We're about to release a new version of My Opera. The release contains some HTML changes. This might affect you if you have written your own custom CSS, but the changes are moderate and it should be fairly easy to adjust the CSS.

The first thing we did was to switch from XHTML to HTML. Yes, we believe that HTML is the way to go and we finally got rid of that xml prologue that caused "some old browsers" to go into quirks mode. You will also notice that it's now somewhat easier to read the code when you view the source.

You do not need to edit any XHTML content that you might have included in your old posts - it will automatically be transformed to HTML when the page is rendered.

For most blog themes we have also moved the #myo menu div inside the #wrap3 div. This means that the My Opera top menu will be as wide as your page, instead of stretching over the entire browser window. (there are a few blog themes that still have the #myo div outside the wrapping div's)

Blog sidebar

For the new My Opera we wanted to standardize the image sizes. We used to have 29 different sizes for each user photo! This was way too much and we now have only 4. This made us update the HTML/CSS to fit better with the new images.

The standard width for the sidebar is now 240 px.

The image sizes for the friends list in the sidebar used to be 102x77. It's now 104x78.

The images sizes for the latest comments used to be 45x43. It's now 40x30.

The images sizes for the recent visitors used to be 64x48. It's now 68x51.

Friends

The image sizes for the friends page used to be 169x127. It's now 104x78. The location field was also removed to simplify the page.

Photo albums

Changes have been made to the photo albums code. In essence we have made it into a list rather than just div's.

Photo albums overview. OLD code:

1. <div class="albums">
2. <div class="album1">
3. <div class="albumthumb1">
4. <a href="#">
5. <img src="#" width="160" height="120" alt="" class="albumimage" />
6. </a>
7. </div>
8. <div class="albumnfo">
9. <h3><a href="#">Title</a></h3>
10. <p class="imagecount"><b>Images:</b> xx</p>
11. <div class="albdesc">Description</div>
12. </div>
13. <div class="clear"> </div>
14. </div>
15. <div class="album2">
16. <div class="albumthumb2">
17. <a href="#">
18. <img src="#" width="160" height="120" alt="" class="albumimage" />
19. </a>
20. </div>
21. <div class="albumnfo">
22. <h3><a href="#">Title</a></h3>
23. <p class="imagecount"><b>Images:</b> xx</p>
24. <div class="albdesc">Description</div>
25. </div>
26. <div class="clear"> </div>
27. </div>
28. </div>

Photo albums overview. NEW code:

1. <ul class="nobullets" id="albums">
2. <li class="album1">
3. <a href="#" class="albumimage">
4. <img src="#" width="280" height="210" alt="">
5. </a>
6. <h3><a href="#">Description</a></h3>
7. <p class="imagecount"><b>Images:</b> xx</p>
8. <div class="albdesc">Description</div>
9. </li>
10. <li class="album2">
11. <a href="#" class="albumimage">
12. <img src="#" width="280" height="210" alt="">
13. </a>
14. <h3><a href="#">Description</a></h3>
15. <p class="imagecount"><b>Images:</b> xx</p>
16. <div class="albdesc">Description</div>
17. </li>
18. </ul>

Photo album view. OLD code:

1. <div id="mypix">
2. <div class="thumb1">
3. <div>
4. <a href="#"><img src="#" alt="" width="320" height="240" /></a>
5. </div>
6. <p class="photoinfo right photocomments">
7. <a href="#">x comments</a>
8. </p>
9. <p class="photoinfo photoviews">
10. xx views
11. </p>
12. </div>
13. </div>
14. <div class="thumb2">
15. <div>
16. <a href="#"><img src="#" alt="" width="320" height="240" /></a>
17. </div>
18. <p class="photoinfo right photocomments">
19. <a href="#">x comments</a>
20. </p>
21. <p class="photoinfo photoviews">
22. xx views
23. </p>
24. </div>
25. </div>
26. </div>

Photo album view. NEW code:

1. <ul class="nobullets" id="mypix">
2. <li class="pic1">
3. <a href="#" class="thumb"><img src="#" alt="" width="320" height="240"></a>
4. <p class="photoinfo right photocomments">
5. <a href="#">x comments</a>
6. </p>
7. <p class="photoinfo photoviews">
8. xx views
9. </p>
10. </li>
11. <li class="pic2">
12. <a href="#" class="thumb"><img src="#" alt="" width="320" height="240"></a>
13. <p class="photoinfo right photocomments">
14. <a href="#">x comments</a>
15. </p>
16. <p class="photoinfo photoviews">
17. xx views
18. </p>
19. </li>
20. </ul>