deviant art

Deviant Login Shop  Join deviantART for FREE Take the Tour
×

×

Modernity CSS Release

Journal Entry: Thu Dec 6, 2007, 7:15 PM



Modernity CSS Series

      


Release Info

I am pleased to announce that the official Modernity CSS Layout has just passed the final bug check and is about to be released for public use.  :excited:

All I need to do now is copy the new code snippets into all of the CSS versions (that would be 24 total) and do a quick update of the readme.  Please note that Deviant Modernity CSS and Halloween CSS will also be updated with the code fixes.

It felt like everything connected to this CSS took forever, from the bug fixes and reaadme, to the preview image.  It is a great relief to have this finished, even though I have the hunch that it will not be the most popular of my CSS designs.  Nevertheless, it is an accomplishment for me because I spent so hours and days working out the CSS to be as compatible as possible not only in Firefox, but also IE6 and IE7.  I don't know how many non-web designers know this, but IE displays very differently from one version to another.  It was difficult choosing which version to favor sometimes, but in the end, I usually went with IE6 since it is still more widely used (not to mention, far buggier than IE7).

For some reason, I had difficulty letting go of this project, but apparently, it worked out for the best.  I had the files zipped and waiting for upload, when I discovered a horrible error.  When there wasn't enough content in the right column, the left column would flow into the Moodbox in one of the journal views.  In an interesting discovery, I found that this was not a problem in either IE6 or IE7.  One way around this is simply to have more content in the right than the left, but that's not very professional, nor does it take various screen resolutions into consideration.  Instead, I had to go through the code and try several different methods to address the problems.  I also had to continually load the journals into IE6 and IE7 to check the layouts.  I admit to putting this off for a few weeks until I felt more motivated (um, that would be this week).  

That was not the only error I discovered (#2 in the "Browser Compatibility" section below).  It is something that I tried my best to address, but one of three things I can't get to work in either version of IE.  The good news is that this problem has been corrected as much as possible.  It just doesn't look as good as the Firefox version.

What is really sad is how much time I spent tweaking the code on the readme.  Technically, I should remove the table from the layout and do it all in CSS, but it's a readme and frankly, I don't care that much.  Hey, it looks good and it's easy to update (Simple + Clean v.1.2 is based directly on it).  Anyway, at some point while I was working on the readme, I realized that I had been tweaking the code--please note, not the content, just the layout--for over an hour.  If I was to be really honest (which I'm not), I would put that figure closer to three.

Ah, what can I say.  I find tweaking code really fun.  It's something that I can do and not have to think too much.  I know that sounds weird, but it's not a brain-intensive activity for me.  Usually it's more like spending fifteen minutes trying to decide if the margin-top should be 15px or 20px.  Or maybe 10px.  No, back to 15.  Hmm, 18.  As you can see, not a whole lot of brain cells being used there.

Before I get (more) technical, I want to thank `thespook for giving me help on making IE-specific code and for showing me MultipleIEs, a program that, well, installs multiple versions of IE at once.  It has made my life a nightmare trying to make the code compatible, but the end result was well worth it.  :D

~Claire


What you get

The zip file includes much stuff, for lack of a better word, to help you set up your journal as you see fit.

The Modernity CSS Layout comes in two versions: one column and two column.

It also comes in eight colours, along with an update of the Halloween CSS Layout, which is much sleeker and aesthetically pleasing than the first.

There is a preview of each colour in both column versions to help you decide which Modernity is right for you.

You also get many of extras.  There are non-Fella versions of all eight colours, as well as XCF/PSD sources for the graphics.  Please note that you will have to mess around with the PSD versions as they are XCF conversions and not originals.  For example, I think some of the layer modes are incorrect.  The layers themselves should be fine.


Browser Compatibility

The Modernity series is meant to be fully compatible in both web-compliant browsers, like Firefox, and non-compliant browsers (we're takin' 'bout you, Explorer).  I mostly succeeded in my efforts, but you should be aware of the differences.

1. One main problem was the background image.  In IE6, it was a mess no matter what I tried.  My solution was to simply have the background be black, even though IE7 displayed the image fine.  I would rather have both versions be plain, but work, over working in one and looking atrocious in the other.

2. The default alignment for the left column is centered.  I felt it was best since I figured it would be primarily used for images and links, etc.  However, I wanted my own links to be left-aligned and created a seperate element (.leftside) that was later incorporated into the Modernity series.  

Well, lo and behold, while I was bug checking the column issue, I noticed the links at the bottom of each section didn't display in IE7 and had ginormous gaps in IE6.  Oh, and parts of the grey background didn't show through in certain areas.  Basically, a total disaster.  I later understood why these errors had occurred and corrected as many as possible, but the gaps remained, much to my chagrin.  

Is it a serious problem?  Not really.  It bugs me from a layout perspective.  At least all of the links are visible and the background issue is resolved.  You can get around these problems by simply not using the .sidetext element in your design.

3. If you use the two column version, you might notice that the right side column heading doesn't span all the way (it's short about three pixels).  This only occurs on the headings that push against the left column.  Any heading located below the left column is fine.  I know why this happens, but because of the code, I can't do much.  I won't go into it; I'll just say that it is due to an ugly, ugly hack.  Fortunately, the problem is minimized with the new layout colour scheme, even though I haven't fixed anything.

4. The last main issue with IE is the menu descriptions: they don't show.  I did attempt to fix them, but it didn't bother me that much.  At least the main links are where they should be now.

All in all, I think those four issues are neither serious nor problematic.  I've done much worse on some of my other layouts.  :giggle:


Community Wallpaper Project

:new:  I have just released a news article to help spread the word.

Read it here: [link]


Watch this

Myspace: The Movie   [link]

Ask A Ninja: "Pirates of the Caribbean 3"   [link]



Are You in Ryan's Army?

  

Ryan Christopher Brumpton is One Year old. For most of his life he has been on Chemotherapy as he has a rare brain tumor which was diagnosed at three months old. Ryan's prognosis is somewhat unclear as the doctors have only treated one other patient with tumor similarity which was almost ten years ago.

~Excerpt from ~RyansArmy

Ryan's Story: [link]
Ryan's Photos: [link]
Ryan's Myspace: [link]
Project Ryan's Hope: [link]
Ryans Army Mini Contest!: [link]


Auction for Maria


Maria is a year and a half old.  She was diagnosed with neuroblastoma.  The good news is that half of the children who have this type of cancer can be successfully treated.

~LuvEnder is auctioning off originals and prints of her amazing work.  Proceeds go to pay for Maria's treatment.  Take a look at the available pieces and start bidding: [link]

You can read more about Maria here: [link]


Free Rice


I stumbled across this site by way of the stamp above.  It's a very addictive site that now donates 20 grains of rice for every correct answer to the vocabulary game.  So, read the news article here [link] and join in on the fun!


Adopt-A-Turkey Project


Started in 1986, Farm Sanctuary holds an Adopt-A-Turkey event each holiday season.  A $20 donation provides you with a one-time adoption fee, colour photograph of the chosen turkey, adoption certificate and a one year membership for the Farm Sanctuary's quarterly newsletter.  Each donation goes to food, bedding and veterinarian care for the turkeys.

View the current turkey adoption list here: [link]


Noting Guidelines

At the moment, I am no longer taking any notes regarding CSS/Apophysis/etc. help.  I have much going on in my personal life and can no longer assist dA members with these issues.  

Thank you for understanding.


frac·tal1   /ˈfræktl/

noun Mathematics, Physics.
a geometrical or physical structure having an irregular or fragmented shape at all scales of measurement between a greatest and smallest scale such that certain mathematical or physical properties of the structure, as the perimeter of a curve or the flow rate in a porous medium, behave as if the dimensions of the structure (fractal dimensions) are greater than the spatial dimensions.

[Origin: < F fractale, equiv. to L frāct(us) broken, uneven (see fractus) + -ale -al2; term introduced by French mathematician Benoit Mandelbrot (born 1924) in 1975]

[1] fractal. (n.d.). Dictionary.com Unabridged (v 1.1). Retrieved March 15, 2007, from Dictionary.com website: [link]


2008 Fractal Calendar

:shop1829038:
Four Seasons Calendar


Fractal Prints

Please take some time to visit my prints store.

:shop1796617: :shop1829214:

There is still time to order high quality printed merchandise for Christmas!  :santa:  

I have a large assortment of items for sale, including prints, mouse pads, magnets, puzzles, coasters, post cards and a 2008 calendar, all of which make great gifts.  :nod:

Thanks for your time!





  • Mood: Jolly
  • Watching: Spongebob Squarepants

1,830

0 12 0

Details

Stats

Submitted on
December 6, 2007
Views
1,830 (1 today)
Favourites
0
Comments
12
URL
Thumb
Only verified accounts can report policy violations. Please check your email and click on the verification link.
* Required field
Add a Comment:
 
:iconmythos721:
I seem to have a problem with the CSS. My journal title and the menu bar are both in the wrong spots. see my journal page to see...
Reply
:iconfailurewithinme:
how do i use this???? I am sorry but it is awesome and i would love to use it but i dont know how....
Reply
:iconswankie:
~swankie Mar 22, 2008  Student Filmographer
I am wondering how i can use this? unless there is a code, or something I can't pay for it but i like it ^^ IF it is a free thing can i have the code?
Reply
:icontigga76:
Mood: Affection ~Tigga76 Dec 7, 2007  Professional General Artist
It was well worth it. O can see all the work you put in and I will be happy to adopt it as soon as it is born. I'm gonna name mine Cobra. lol.
Reply
:iconmothersheart:
*MothersHeart Dec 7, 2007  Hobbyist General Artist
:wave: Looks & sounds Great! :boogie:
Reply
:iconn1rvanat1zed:
Wow, I'd love to use this. Well done, this takes a lot of effort.
Reply
:iconthespook:
cool beans - sounds like quite the triumph of persistence! :D

I'd love to try it out, have you made it available yet?
Reply
:iconclairejones:
`ClaireJones Dec 8, 2007  Professional General Artist
I've just released it (finally).

It's definitely been a triumph of persistence for me. :D I hadn't worked too often with CSS before I started working with the dA journals, so it's definitely been a learning experience.

I'm almost afraid to ask, but I was wondering about your thoughts on this design.
Reply
:iconideviant:
~IDeviant Dec 7, 2007  Hobbyist Digital Artist
If I wasn't such a stubborn old mule, insisting on designing my own style (which I shall next year when I have the time), then I'd be delighted to use this - so tasty, I want to lick it :P mmm, cherry :D
Reply
:iconclairejones:
`ClaireJones Dec 8, 2007  Professional General Artist
Heh, thanks! :aww: I know what you mean. There are a few designs I would love to try, but I'm also stubborn about using my own code. I could be tempted to use a Christmas layout since there is no way I will design my own, but that's still very unlikely.
Reply
Add a Comment: