WAWAWA 忘れ物

anime~manga~figures~nado

CSS

Posted by meronpan on March 24, 2009

Giving WordPress.com a final run for the money… purchased the CSS upgrade ($15/year) so I could try and make better use of the limit selection of themes they give ya.

hayami6

As I mess around with the layout, my main goals/requirements are:

  1. Larger images in posts
  2. Custom header image
  3. Three columns or some other solution that somehow delivers all the navigation and community love I currently have

Since I’m not too familiar with CSS and absolutely suck at graphic design I’m starting out with just a slight modification to the Andreas09 theme.  If I have time I’ll probably try a full customization of Sandbox-10.

Andreas09 has a flexible width, so with the theme change alone I was able to up the max image width to 550 pixels (up from 468 or something).  Unfortunately to get any larger than that I’ll have to choose a different theme or pursue bigger changes.

Technically I can go larger since the theme is flexible, but I think around 550px is the largest I can get and still show up ok on 1024x resolutions.

Here’s a comparison (pixels listed are the width of the images):

468px (size used in the previous theme)

kanzakikaori07

550px
kanzakikaori07

750px
kanzakikaori07

750px
tamaki05

550px

Click for Akiba Hobby source

Click for Akiba Hobby source

650px

Click for Akiba Hobby source

Click for Akiba Hobby source

750px fits nicely at 1280x but that would mean screwing ~17% of readers (if my poll is to be believed ^^;).  For now I’ll probably settle for 550px but in the future I think there are some neat options for dynamic layout.  (I think those solution require javascript though… which I can’t use while at wordpress.com… so a move will be necessary)  If you know of a CSS only method for dealing with multiple resolutions while being hosted at wordpress.com, I’d love to hear about it ^^;

Another option would be to do something like James has at his shiny new home.  James’ theme is 3 columns on the main page, but articles switch over to a single column layout.  This definitely solves the resolution restrictions, but does remove some navigation options and also community visibility (blogroll and such).  It does have another bonus in that I bet I can implement it here at wordpress.com (if not with this theme, probably the sandbox theme… and actually I bet there’s already a theme out there that does it)… still undecided on that issue.

Luckily the final thing I was trying to accomplish was pretty straight forward – custom header images were a cinch.  Just added a bg image and hid the existing header text.  ^_^  Messed around with some color and font sizes but again, not sure if it’s any better, I suck at graphic design.  I do know I go blind when fonts are too small though so the increase in font size was a no brainer :P

Here’s the custom CSS I’m augmenting the existing style sheet with so far:


#sitename {
background-image:url('https://meronpan.files.wordpress.com/2008/06/bannertea2.png');
background-repeat:no-repeat;
height:160px;
margin:0;
}

div#sitename h1,div#sitename h2 {
visibility:hidden;
}

#container {
background-image:none;
}

a,#mainmenu a {
color:#2570FF;
}

#wrap #content p {
font-size:1.2em;
}

#content,#contentalt {
padding-top:10px;
}

Pretty simple and so far I’m happy with the results over the original.

Change in the air lately?  Optic has also been working on upgrades to The Dis-Jointedzone ^^

What do you think? Likes? Dislikes?  To quantify and make feedback easier, two poll questions for y’all today. I appreciate the feedback!

以上!

Advertisements

31 Responses to “CSS”

  1. I think you’ll eventually work out what’s best (and what you like). Things like these takes some time to implement, and should you move away from wordpress.com please let us know how good the new host is ^^ I really want to find somewhere that lets me upload and insert pictures in batches.

    For my case, I’m running on 1280 x 768 resolution with my laptop, so the height of the pictures is a problem for portrait photos. I usually prefer to view the whole picture on screen ^^ I will upgrade to something with full HD capability later this year, but just want to let you know vertical distance is a problem too…I hate to scroll down two pages to view a picture :P

    Just don’t rush things, and try testing things out bit by bit and you’ll have everything the way you like it soon. What kind of graphic design stuff are you looking for in general?

    • meronpan said

      if/when i do move off, it’ll probably be a bluehost server running wordpress.org ^^; i still can’t believe their $6/month price for unlimited (practically) everything… unfortunately, that means that unless they update the wordpress post editing interface, guess i’d still be stuck with one at a time image insertion into posts -_-

      hmmm yes, height… personally i don’t mind scrolling through a high res image… must resist designing for myself instead of everyone ^^;

      well, when i talk about graphic design, i’m just sayin… if you leave me with the sandbox theme and a stylesheet to edit… chances of me producing something that looks awesome are pretty slim ^^;; i’m a programmer so the technical part will work itself out eventually… but coming up with an attractive design/layout isn’t my forte ^^;;

  2. Kairu Ishimaru said

    Even if the image pixel changed into a higher value, it still the same..

    • meronpan said

      …forgive me but i don’t really understand what you meant ^^;; i’m talking about what size image to insert into the body of the post… which is definitely affected by… the size of the image ^^;;

  3. ELTboy said

    Welcome to Andreas09! ^^ I willl be getting the CSS upgrade too (sometime soon), just for some minor tweaks and most importantly a custom header. I know nothing about CSS, so now going through crash course to see what I can do to my blog.

    For now, I kept my pictures at 525px to cater for readers with 1024 screen resolution. Might move on to bigger images later given that many are on 1280 now anyway.

    Enjoying the new theme!

    • meronpan said

      make sure to use the css preview tool… very useful to make sure you don’t mess everything up ^^;

      the custom header image part for this theme was pretty simple… the following css pretty much takes care of it:

      #sitename {
      background-image:url(’https://meronpan.files.wordpress.com/2008/06/bannertea2.png’);
      background-repeat:no-repeat;
      height:160px;
      margin:0;
      }

      …you just have to upload a header image to one of your pages/posts, get the link to that image and substitute it. change the height appropriately and you’re pretty much done. if you’d like to position the graphic you can mess with the margins as necessary.

      that code alone will only add the image – if you need to get rid of the text, you can just hide it like i did:

      div#sitename h1,div#sitename h2 {
      visibility:hidden;
      }

      looking through the comments and poll results i think ~500px is going to be the way to go until i get a custom solution (i.e. one where the user selects their preference)

  4. gordon said

    i just realise u have a new domain name. actually i prefer the a non-widescreen layout. paragraphs in a widescreen format is kinda hard to read as the sentence will be very long. one has to read from extreme left to extreme right. just my humble 2 yen. ^^;

    • meronpan said

      hmm that is true… i suppose i could (probably) cap the maximum width with some css… but on the other hand users could just resize their browser… uguuu site design is complicated trying to cater to everyone ^^;;

  5. I like the widescreen format, and I was wondering what exactly you did to get it. The default layouts are all depressing and crappy :(.

    • meronpan said

      when you refer to widescreen format, are you talking about the fact that the layout expands to the width of the broswer? if so, when you’re choosing a theme, just filter by “flexible width” — all the resulting themes behave in that way.

  6. Blowfish said

    Id say stick with the 550px.Im running my PC at 1280 and i think that 750px isnt easy on the eye.It may be just me but it seems just too big for my preferences.
    Hope youll have some luck with the CSS.

    I wanted to do something for the community aswell and im relying on Jaymans for rotating community banners.Hope that change will be soon visible.

    • meronpan said

      i agree, 550 or so seems like a nice middle ground. i like gigantic images so i can see every last detail in the photo but designing for myself is pointless… i can just browse the original pics ^^; as i mentioned to inferno above, hopefully in the future i’ll migrate somewhere where i can have a user settable image size…

  7. sonic_ver2 said

    Coincidentally, i read this post in my secondary computer, which still uses a CRT monitor with 1024×768, and everything in this place seems soooo big for me. And also, Teana Lanster in the title bar is cropped right at the half of her head.

    Try to stick with picture under 500px. If people need a larger resolution, they should click it and open it on another individual tab.

    In Blogger’s image uploader, there’s a size option, you can pick for small, medium, or large. But large option in Blogger is still around 500px.

    • meronpan said

      i actually accounted for that cropping… at 1024 you should basically get half her face which i thought looked ok ^^;;; guess you didn’t like how it looked? ^^;

      true, people can click for larger resolution. personally i vastly prefer having a decent size pic in the post itself so i don’t have to click back and forth to see everything in detail. seeing all these comments was a nice reminder how everyone’s reading preferences are different and ideally i should come up with a flexible solution.

  8. James said

    I was using the same theme before the move ^^

    It’s a nice theme :)

    • meronpan said

      i do like the broswer filling layout a lot better since most of my monitors are pretty high resolution. now if only it came with a button that let the user choose posts’ max image size ^^;

  9. meimi132 said

    Me likes the 750px. Tis nice. Though I wouldn’t mind it bigger than that lol.

    And don’t be sorry!! I’m glad for the info regarding the Japanese lol.

    Hen na shoujo! :woop: lol

    • meronpan said

      i like the 750px too, but it gets cut off pretty bad in 1024x and looks like people don’t like super tall images ^^;; alas… first i do when i move (someday) will be to create custom views to people can view 750px or 1024x images in the posts ^_^

      glad you found the japanese info useful ^_^

  10. Shiddo said

    pictures around 500 are enought, they load fast even on slower machines as well as will show up properly on computers that use lower resolution. unless some1 is using large screen/tv from a distance pictures are quite hard to view. and as other mentioned its always possible to use thumball 500 pic and smaller and once they click they get fullsize etc.
    not to mention smaller pics make it easier to browse thru the post. oversized pics in post or full content(not using read more) posts on index are pain to read ^^

    • Shiddo said

      actualy u can use more space to paste more smaller pics/thumbs next to each other rather then large ones. dunno how this theme is written, but in larger res it would display like 2-3 next to each other and while shrinked it would move those pics on other row etc.

      also bout header. maybe make it either aligned from left and fade to right or to the center and fade on both sides. as like this when u shrink window poor Teana will get her face cut ^^

    • meronpan said

      again i think we come back to personal preference. ^^; i do like the read more buttons when browsing a blog’s front page, but once i’ve committed to reading a post, i don’t want to click any more to get to the content. Just my personal preference of course, but that means i’m happier if i don’t have to click on pics to appreciate all their detail.

      500ish pixels seems to be a fair enough compromise, so i’ll see how that goes for now.

      i dunno, i kinda liked the effect when you get half her face @ 1024 resolutions ^^; guess it wasn’t so popular for others ^^;;;

  11. Persocom said

    Looks pretty good to me. I like the 550px but 750 would be great for showing the fine details in figures. Big is good but too big can be a hassle when tons of images are being loaded. I must say I really like the Teana header image ^^ My site new site is basically ready, I just need to do a couple finishing touches, should be able to do my final blogger post tonight or tomorrow morning.

    • meronpan said

      glad you like the header. though don’t get too used to her since i end up changing banners from time to time :P

      looking forward to your new digs!

  12. taketombo said

    Ive always wanted to get into CSS and try it out but i just dont have the patience or time right now… ^^;
    The new layouts looking very nice though!

  13. Q said

    My computer can only handle up to 550px, as the ones above that have gone off screen somewhere for me already ^^;

    Which is the reason why most of the images in my blog are limited to 400px max for width @_@

    And as for the banner, I’ve checked out the full size, and found out that I can barely see half of it in total @_@ (i.e. *just* reached her right eye)

    • meronpan said

      good thing you and others have voiced your opinions ‘cuz for a while i was considering 650+px ^^; will definitely keep it down until i get a custom solution…

      i did go a little overboard on the banner ^^;; i was lazy – shoulda just set the background color of the container it was in rather than make the graphic long enough to still be visible at 1920x resolutions ^^;;

  14. optic said

    Most of the time, getting wrapped in CSS and php can get me so exhausted. Mentally, it’s tiring and I get enough of that already at work.

    Do love the changes and the new header. Adding a custom header on my current theme is difficult as it’s a “no-header” theme but I’m trying to work my way around it.

    I find 550px works best since u expanded the post view.

    • meronpan said

      since i’m managing now i kinda like messing with code for once… but i run into a different problem – since i’m not very fluent in css it takes forever for me to get anything done! and time flies when i code so i’ll be working on something, squeak out a tiny feature… and see that it’s time to sleep -_-

      assuming the header of your theme is in a nice container, it’s probably very similar to the changes i did for my custom header

  15. The new layout looks great to me. ^^ I think I’m the only one who likes the 468px, but my resolution isn’t that high.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: