MyAnimeList.net

Forums

Recent Posts | My Watched Topics | My Ignored Topics | Search

Problems for beginner's to look out for
MyAnimeList.net Forum »» Club Discussion »» Shishio's Custom Lists & Profiles (with layouts, tutorials, and more!) 2014 MEMBER CARD DESIGN CONTEST UNDERWAY! »» Problems for beginner's to look out for

Must be a Club Member to Reply
#1
03-11-12, 10:52 PM

Offline
Joined: Feb 2010
Posts: 2184
This topic is part of our Tools, Tips, and Feedback section:
http://myanimelist.net/forum/?topicid=513201


Hey, if you're a beginner and planning to make over your list dramatically in the future, here's some quick info we can give you beginner's to avoid problems later on!

1. Every time you save your CSS with the blue button, refresh the page (or go back one page). For some reason on this site, after saving the CSS changes you've made in your edit box, the page (page with the CSS edit box) will move forward one page, and to a page with a CSS edit box that has the old CSS you just saved over before any changes were made to it. So if you edit that CSS further it won't have your changes you just made earlier!

To get around this: everytime you make new changes to your CSS and hit the blue button, you simply go back one page or refresh so you instead go to the newly changed CSS you just made. You want to edit that CSS since it displays the changes you saved earlier. Also if you close the page and go back your box later it will be the normal updated CSS too.

2. When you are going to install a new premade layout make sure you completely delete the old CSS you are replacing from your CSS edit box.

3. Avoid dark text on a dark background or light text on a light background. Its hard to read for users who want to look at your list!

4. People can only see fonts that they have installed. So if you installed an obscure font most people don't have, keep in mind they're not gonna see it! There is a trick to bypass this tho in my CSS tutorials.

5. When you copy codes be extra super careful you always copy the entire CSS and not extra parts of a post outside the CSS. Most of the time in this club, the codes are separated by being within a spoiler button or placed in bold! If you don't copy an entire code right, it can make it not work right.

6. Later on, if you make or make over an advanced layout that took a lot of time, check how your layout looks on other screen resolutions before you finish so that you don't find out later it looks different in other resolutions (if thats important to you). Use this site to check:
http://quirktools.com/screenfly/

Be sure to post any tips you can give new designers too!

I also have a tools and tips thread too for general info: http://myanimelist.net/forum/?topicid=395971
Modified by Shishio-kun, 12-19-12, 9:49 PM
 
#2
03-12-12, 3:25 AM

Offline
Joined: Jun 2011
Posts: 54
Dont use browser specific Code, Make sure your code works in the main internet browsers.
 
#3
03-12-12, 4:24 AM

Offline
Joined: Nov 2011
Posts: 225
Tip: Use zoom in browser for checking how it would look in different resolutions (since you're mostly concerned with how it would be positioned, it is simple and good check.

Tip: Watch the bandwith! The less is the better with no exceptions. You should probably consider reducing if overall (your CSS + all your pics) exceed 2Mb's)

Tip: Try to make your code clear and don't overuse selectors. This:
html > body > table#mal_control_strip > tbody > tr > td#mal_cs_powered > div#search > input#searchBox

and this:
#searchBox

target the same — the search box on top bar. But the 2nd looks better and makes your code cleaner
Comments also help a lot with navigation and when modifying your old code.
/* This text will not alter the way content displayed in any way */
Modified by VeriTi, 03-12-12, 4:38 AM
 
#4
03-23-12, 11:30 AM

Offline
Joined: Nov 2011
Posts: 225
Q: How do I make some piece of text disappear.
A: This is not an easy question because there is a variety of ways that will not work. Bulletproof method:
selector{
color: transparent; /* This makes text invisible */
letter-spacing: -1ex; /* Optional - makes text overlap itself so it occupies almost no space (little more than one letter */
content: none; /* Optional - for Opera removes whatever was inside originally like there was never anything */
}


Advice: fight your laziness
1) Do NOT use universal selector (*) for configuring font looks unless you have a reason to do it and there is no other way to be done.
2) There is only ONE correct way of using draft options like transition, and here it is on example:
-o-transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
transition: all .3s ease;


Three first lines make sure that it will work for most popular browsers: FF, Opera, Chrome & Safari. The last one puts a standardized way, so if current specification will be accepted, next versions of other browsers will 'catch' it without any need to modify the code.

Also, try not to use some non-standard stuff like linear-gradient because almost always it can be replaced with 1px wide gradient pic made in image editor

And one important thing:
Correct your code manually after you're done. Firebug or other dev tools are not omnipotent and the code you're going to get by autocomplete is often a huge mess. Reviewing a code also increases your CSS skill.
 
#5
03-23-12, 11:49 AM

Offline
Joined: Feb 2010
Posts: 2184
VeriTi said:
Q: How do I make some piece of text disappear.
A: This is not an easy question because there is a variety of ways that will not work. Bulletproof method:
selector{
color: transparent; /* This makes text invisible */
letter-spacing: -1ex; /* Optional - makes text overlap itself so it occupies almost no space (little more than one letter */
content: none; /* Optional - for Opera removes whatever was inside originally like there was never anything */
}


Advice: fight your laziness




1) Do NOT use universal selector (*) for configuring font looks unless you have a reason to do it and there is no other way to be done.
2) There is only ONE correct way of using draft options like transition, and here it is on example:
-o-transition: all .3s ease;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
transition: all .3s ease;


Three first lines make sure that it will work for most popular browsers: FF, Opera, Chrome & Safari. The last one puts a standardized way, so if current specification will be accepted, next versions of other browsers will 'catch' it without any need to modify the code.

Also, try not to use some non-standard stuff like linear-gradient because almost always it can be replaced with 1px wide gradient pic made in image editor

And one important thing:
Correct your code manually after you're done. Firebug or other dev tools are not omnipotent and the code you're going to get by autocomplete is often a huge mess. Reviewing a code also increases your CSS skill.



lol of course, the removing text question has to be the second most asked question! Good find! How could I have ever missed this?! ...WHAT A TWIST!

Does anyone know if 'font-color: transparent' work in IE7 to IE8? I am pretty sure it didn't in IE6.
 
#6
03-23-12, 12:04 PM

Offline
Joined: Nov 2011
Posts: 225
Should in IE8, not sure about IE7... but lol probably 50% of stuff we discuss here won't work for it
 
#7
04-15-12, 7:42 PM

Offline
Joined: Feb 2010
Posts: 2184
Thanks for the help with this thread you two, I posted the suggested FAQs over to the Ask thread along with a lot of new ones.
 
#8
11-12-12, 8:32 AM

Offline
Joined: Nov 2009
Posts: 947
Nice .... Thanks for that Screenfly web page ... it will be useful :)


My Thanks to my friend Tobs from Naruto PT
 
Top
Help     FAQ     About     Contact     Terms     Privacy     AdChoices