Яυɼiɑȋɾ (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
ruriair) wrote in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
undertheblue2013-02-26 06:33 pm
ruriair) wrote in undertheblue2013-02-26 06:33 pm
Entry tags:
Tutorial: How to style icon pages.
I'm moving this over here from my main account.
This guide is assuming you already know some basic CSS or have a concept of how it works.
.element {
property: stuff;
}
or
#element {
property: stuff;
}
Therefore you should know to always put a semicolon after each property and to close your damn code FOR EACH SEPARATE ELEMENT with a bracket. >| See also: Milou's much better guide on LJ. It shows how to do a lot of fancy tricks.
Above is how things are basically laid out. Containers within containers within containers.
The .icons-container is what it says on the tin: it is what everything about the icons page fits into.
In order to get two or more columns of icons to display, you will likely have to increase the width of this big container to a large percentage (like 70% or 80%) of the page or however many pixels you want. (600px, 800px, etc.) It really depends on your own theme. The more room the icons have to fit across, the more will try to fit on that "row". The size of the screen resolution will also affect how much space the icons have, so you might get icons displaying in three columns for you, but in two on someone else's screen. /shrug
According tomomijizukamori, "The use of fixed widths (pixels), however, doesn't play well with the official layouts (all fluid-width; percentages) - and the 'secret' to multicolumns is to set .icon (described below) to 50% width (or 33% if you want three columns). I really don't recall how I got mine to work with three columns, I just remember messing with the main container as well as the .icon element a lot. I don't use official layouts so mess with what you have until stuff works for you!
This is also where, if you wanted things to match your entries in appearance, you'd input the background color and all that. i.e. a white ("#ffffff") background to match how your journal entries are white.
Hint: You can put a background color on any element.
"Padding" is as if you were shipping something in a box and put foam around the inside. More padding, more space between your object and the box. The mark-up could be "padding: 5px 10px 10px 5px;". 5px on the top, 10px on the right and bottom, and 5px on the left. Or, you could put "padding: 5px;" and have 5px equally on all sides. Defining padding and also an element's background color creates a faux border look. Milou's guide has more on actual border's though.
The same thing (minus faux borders) works with the "margin" property, it's just if you had foam put around on the outside of the box, keeping it away from other boxes. Margins, however, can also go negative to move objects around on a page. "margin: -5px 10px 10px 10px;" will move something up 10px on your screen. Play around with padding and margins to get things where and how you want.
If you have Chrome, you can right click on a page and select "inspect element" to view and edit CSS right there, transforming the page you're viewing. This is extremely useful. Just remember to copy and paste whatever changes you make into DW's actual Custom CSS page, because you aren't actually editing anything for real until you put the CSS on DW itself. Other browsers may have a similar feature.
.icons-container h2 is the header on the icons page that says "Current Icons" or whathave you.
Here is where we can learn how to style text with the font property:
font: weight (bold or normal) size (#px) family (Arial, Courier New, Impact, etc.);
For example:
This will display the header like this.
I abuse font styling all the time; so should you!
The "text-align" property can be set to make the text appear on the "left" or "right" side of the screen, to be "center", or to "justify". The last one means it will stretch to fit the entire width of its containing element, and it's something I'd recommend for your entries than headers/titles. You can apply the text-align property to anything, even the .icons-container itself to automatically center all content contained in it if you want.
If you have an unofficial custom layout someone made, you probably were instructed to uncheck the "Use Layout's Stylesheet" box on the Custom CSS page, leaving everything on the icons page as raw code and unordered lists.
.sorting-options is what defines "Upload Order" versus "Keyword Order", and its one of the things that may display as an unordered list. To fix that and any list issue, you just take the governing element and add li to the end of it before you style, and then you tell it to display as something other than a list.
Hint: you can also set things to display as "block". Pick whichever works for you. They kind of do different things sometimes.
Hint: li stands for "list item". The more you know.
Another thing that displays as a list is your icon keywords, comments, and descriptions. They are governed by the .icon-info element. So to fix that and the above in one, i.e. combine elements and style them with the same properties, add a comma between the elements.
Just remember that damn li.
Speaking of the icon info, they are each governed by separate sub-elements, allowing for each to have a different look if you want.
Keywords: .icon-keywords
Comments: .icon-comments
Description: .icon-description
Want them different colors? Put color: #hexidecimal then. The hexidecimal is the six-digit code of the color you want. The digits range from 0-9 and then from A-F and govern red red green green blue blue for some technical reason. idfk.
#0000ff = Blue
#00ff00 = Green
#ff0000 = Red
Find some color wheel generator thing online to get the hexidecimal for the color you want if you don't know how to manually figure it out.
Hint: I like #fafafa or #eaeaea for background colors, #666666 for text, and #cccccc for borders. #e71a1c is a fine red too.
Hint: #ffffff is white and #000000 is black.
The actual words "Keyword", "Comment", and "Description", as well as "Default" next to your default icon, are also governed by specific sub-elements.
Default: .default.label
Keyword: .keywords-label
Comment: .comment-text
Description: .description-text
Don't want one of those to appear at all? No problem. Hide it with the "display" property. (Or hide all by combining them with a comma if you want.) You will not hide your actual keywords, comments, or descriptions, just their labels.
.icon-image is the container of each actual icon. You can set it to "float" left or right of the icon info. In fact, you might want to set the icons to float left, and the info to float right. (Idk that's what I did. Who knows what it really did.)
Hint: the actual icon-icon, meaning the image file, is governed by .icon-image img, in case you wanted to shrink the image down a bit or round its corners or sth.
And hey, guess what? This is crazy, but the .icon-image and .icon-info elements are contained in another element: .icon
So to keep the icons and text from sitting all the way on opposite sides of the screen, set a width to the .icon element. You may need more width if you have a lot of text. This is also where, if your icons and text aren't lining up with each other, or aren't going into multiple columns, you can have them sit in neat rows with the display property.
And as said above, if you want two or three columns of icons instead of one, setting .icon to smaller widths (50%, 33%, or whatever amount in pixels) will help create that effect.
!important is what tells your browser "HEY. IGNORE EVERYTHING ELSE AND HONOR THIS CODE ABOVE ALL OTHERS!" So if you somehow have a property saying .icon should have a blue background, and another saying .icon should have a green background, the browser will honor whichever one has !important in it regardless of the order it reads them in.
This butt's gon' be green. Something not working right? Set it to be !important. Still not working? Well then something dun goofed bad.
I only have a free account, so there are more elements I don't know about for paid accounts that have more icons, but there's the gist of how you style stuff.
Comment if you have questions and I might be able to assist. (◡﹏◡✿) Comments disabled until I revamp it. If you really need help, private message me.
This guide is assuming you already know some basic CSS or have a concept of how it works.
property: stuff;
}
or
#element {
property: stuff;
}
Therefore you should know to always put a semicolon after each property and to close your damn code FOR EACH SEPARATE ELEMENT with a bracket. >| See also: Milou's much better guide on LJ. It shows how to do a lot of fancy tricks.
Above is how things are basically laid out. Containers within containers within containers.
The .icons-container is what it says on the tin: it is what everything about the icons page fits into.
In order to get two or more columns of icons to display, you will likely have to increase the width of this big container to a large percentage (like 70% or 80%) of the page or however many pixels you want. (600px, 800px, etc.) It really depends on your own theme. The more room the icons have to fit across, the more will try to fit on that "row". The size of the screen resolution will also affect how much space the icons have, so you might get icons displaying in three columns for you, but in two on someone else's screen. /shrug
According to
momijizukamori, "The use of fixed widths (pixels), however, doesn't play well with the official layouts (all fluid-width; percentages) - and the 'secret' to multicolumns is to set .icon (described below) to 50% width (or 33% if you want three columns). I really don't recall how I got mine to work with three columns, I just remember messing with the main container as well as the .icon element a lot. I don't use official layouts so mess with what you have until stuff works for you!This is also where, if you wanted things to match your entries in appearance, you'd input the background color and all that. i.e. a white ("#ffffff") background to match how your journal entries are white.
Hint: You can put a background color on any element.
"Padding" is as if you were shipping something in a box and put foam around the inside. More padding, more space between your object and the box. The mark-up could be "padding: 5px 10px 10px 5px;". 5px on the top, 10px on the right and bottom, and 5px on the left. Or, you could put "padding: 5px;" and have 5px equally on all sides. Defining padding and also an element's background color creates a faux border look. Milou's guide has more on actual border's though.
The same thing (minus faux borders) works with the "margin" property, it's just if you had foam put around on the outside of the box, keeping it away from other boxes. Margins, however, can also go negative to move objects around on a page. "margin: -5px 10px 10px 10px;" will move something up 10px on your screen. Play around with padding and margins to get things where and how you want.
If you have Chrome, you can right click on a page and select "inspect element" to view and edit CSS right there, transforming the page you're viewing. This is extremely useful. Just remember to copy and paste whatever changes you make into DW's actual Custom CSS page, because you aren't actually editing anything for real until you put the CSS on DW itself. Other browsers may have a similar feature.
.icons-container h2 is the header on the icons page that says "Current Icons" or whathave you.
Here is where we can learn how to style text with the font property:
font: weight (bold or normal) size (#px) family (Arial, Courier New, Impact, etc.);
For example:
This will display the header like this.
I abuse font styling all the time; so should you!
The "text-align" property can be set to make the text appear on the "left" or "right" side of the screen, to be "center", or to "justify". The last one means it will stretch to fit the entire width of its containing element, and it's something I'd recommend for your entries than headers/titles. You can apply the text-align property to anything, even the .icons-container itself to automatically center all content contained in it if you want.
If you have an unofficial custom layout someone made, you probably were instructed to uncheck the "Use Layout's Stylesheet" box on the Custom CSS page, leaving everything on the icons page as raw code and unordered lists.
- Like so.
- This is a list.
- It is unordered.
- As opposed to this!
- Ordered list!
- Whoop whoop old HTML.
.sorting-options is what defines "Upload Order" versus "Keyword Order", and its one of the things that may display as an unordered list. To fix that and any list issue, you just take the governing element and add li to the end of it before you style, and then you tell it to display as something other than a list.
Hint: you can also set things to display as "block". Pick whichever works for you. They kind of do different things sometimes.
Hint: li stands for "list item". The more you know.
Another thing that displays as a list is your icon keywords, comments, and descriptions. They are governed by the .icon-info element. So to fix that and the above in one, i.e. combine elements and style them with the same properties, add a comma between the elements.
Just remember that damn li.
Speaking of the icon info, they are each governed by separate sub-elements, allowing for each to have a different look if you want.
Keywords: .icon-keywords
Comments: .icon-comments
Description: .icon-description
Want them different colors? Put color: #hexidecimal then. The hexidecimal is the six-digit code of the color you want. The digits range from 0-9 and then from A-F and govern red red green green blue blue for some technical reason. idfk.
#0000ff = Blue
#00ff00 = Green
#ff0000 = Red
Find some color wheel generator thing online to get the hexidecimal for the color you want if you don't know how to manually figure it out.
Hint: I like #fafafa or #eaeaea for background colors, #666666 for text, and #cccccc for borders. #e71a1c is a fine red too.
Hint: #ffffff is white and #000000 is black.
The actual words "Keyword", "Comment", and "Description", as well as "Default" next to your default icon, are also governed by specific sub-elements.
Default: .default.label
Keyword: .keywords-label
Comment: .comment-text
Description: .description-text
Don't want one of those to appear at all? No problem. Hide it with the "display" property. (Or hide all by combining them with a comma if you want.) You will not hide your actual keywords, comments, or descriptions, just their labels.
.icon-image is the container of each actual icon. You can set it to "float" left or right of the icon info. In fact, you might want to set the icons to float left, and the info to float right. (Idk that's what I did. Who knows what it really did.)
Hint: the actual icon-icon, meaning the image file, is governed by .icon-image img, in case you wanted to shrink the image down a bit or round its corners or sth.
And hey, guess what? This is crazy, but the .icon-image and .icon-info elements are contained in another element: .icon
So to keep the icons and text from sitting all the way on opposite sides of the screen, set a width to the .icon element. You may need more width if you have a lot of text. This is also where, if your icons and text aren't lining up with each other, or aren't going into multiple columns, you can have them sit in neat rows with the display property.
And as said above, if you want two or three columns of icons instead of one, setting .icon to smaller widths (50%, 33%, or whatever amount in pixels) will help create that effect.
!important is what tells your browser "HEY. IGNORE EVERYTHING ELSE AND HONOR THIS CODE ABOVE ALL OTHERS!" So if you somehow have a property saying .icon should have a blue background, and another saying .icon should have a green background, the browser will honor whichever one has !important in it regardless of the order it reads them in.
This butt's gon' be green. Something not working right? Set it to be !important. Still not working? Well then something dun goofed bad.
I only have a free account, so there are more elements I don't know about for paid accounts that have more icons, but there's the gist of how you style stuff.