tutorialayouts

Well, its been a while...

apologize — Tue, 23 Jul 2013 17:08:02 GMT

Who still uses this community?
And I apologize to those who have unanswered questions, but I am increasing my LJ involvement again so hopefully your future question won't go unanswered.

February Help Post

apologize — Thu, 02 Feb 2012 15:39:37 GMT

I'm terribly sorry its so late, but I just got working internet back today :(

This post is for users to ask questions about customization and coding issues they are having with their layouts to the mods and posters of the community. Please keep in mind that we may not be readily available to help immediately, so if it is a CSS emergency, you might try finding help at one of the communities listed in the profile.

Also keep in mind the we won't code or customize your layout for you, because then you wouldn't have learned anything by that. The point of this community is to find tutorials and guides to help you understand how to do that, and many other things. If you have a question about something that you can't find in the community, you don't know of a tutorial that can answer that question, or you need clarification on a tutorial you may ask them here.

This post will remain open for the remainder of the month. If you have suggestions about tutorials you think should be in the community, or you know of a tutorial that should be in the community please leave a comment here

Update!

apologize — Mon, 09 Jan 2012 21:17:59 GMT

Once again I apologize for getting the help post up a little late this month, but my internet is finally restored :)

Just a few updates, I've updated the GBCA, added all the new tutorials from 2011, and added all the help posts from August, until now so if you are interested you can check those out. Also, as I mentioned before this month's help post is finally up, so if you have any burning questions please ask them there. Also, I'd really like to get your guy's suggestions on the community, this place has been very slow lately and although it still proves very helpful to those who use it I would definitely like to it be much more helpful, and active from a user standpoint. I know CSS pretty well so I don't have to come to places like this for help unless its for something really advanced, but not everyone is in the same boat so I really want you guys to get your suggestions out there and talk about the problems with CSS you're having and what others could do to solve those problems. And again, this community is for beginners to experts so don't ever feel like you're not welcome here. So please, give your suggestions.

January Help Post

apologize — Mon, 09 Jan 2012 18:12:50 GMT

Mod Update!

apologize — Wed, 28 Dec 2011 20:23:47 GMT

Ah! So sorry I've been MIA! I did not plan on this happening but the internet in my house in currently under construction :/ so that is the reason for my absence but I would just like to congratualte nickygabriel on her wonderful layout which will be going up shortly! :)

Hopefully I can be back before January to post the January help post, otherwise just use the December Help Post! :)

Thanks,
AN

adding shadows

unreal — Mon, 26 Dec 2011 16:50:33 GMT

I'm working on a layout and I wanted to add a shadow to my entries. The reason is that I wanted the entries to look like they where lifted from the background. I went on a hunt and found out it's browser compatible.

CSS3 is not there yet for every browser but that doesn't mean you can't add a shadow to various browsers

This should work for Firefox 3.5+, Safari 3+, Google Chrome, Opera 10.50, Internet Explorer 5.5+

Firefox/Mozilla
-moz-box-shadow: 3px 3px 4px #000;

Safari/Chrome
-webkit-box-shadow: 3px 3px 4px #000;

Opera
box-shadow: 3px 3px 4px #000;

IE 8
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

Voor IE 5.5 - 7
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');}

Now if you want a shadow on all sides then that's also possible. It works in FF and IE 9. I suppose if you add the other codes it should also work in the other browsers. But I don't use them so I can't test them.

Firefox
-moz-box-shadow: 0 0 1em #dddddd;

Safari/Chrome
-webkit-box-shadow: 0 0 1em #dddddd;

Opera
box-shadow: 0 0 1em #dddddd;

IE 9
filter: progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=2)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=2)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=2)
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=2)

Contest Reminder!

apologize — Mon, 12 Dec 2011 02:16:26 GMT

Just a quick reminder for you guys, the 2 Annual Holiday Layout Contest is going on right now, and lasts until the 20th, so if you are interested in submitting a layout you have 9 days left in the contest, so check out the main post and get started on those holiday layouts!

TL Staff

December Help Post

apologize — Thu, 01 Dec 2011 18:32:08 GMT

This post is for users to ask questions about customization and coding issues they are having with their layouts to the mods and posters of the community. Please keep in mind that we may not be readily available to help immediately, so if it is a CSS emergency, you might try finding help at one of the communities listed in the profile.

Also keep in mind the we won't code or customize your layout for you, because then you wouldn't have learned anything by that. The point of this community is to find tutorials and guides to help you understand how to do that, and many other things. If you have a question about something that you can't find in the community, you don't know of a tutorial that can answer that question, or you need clarification on a tutorial you may ask them here.

This post will remain open for the remainder of the month. If you have suggestions about tutorials you think should be in the community, or you know of a tutorial that should be in the community please leave a comment here

The 2nd Annual Holiday Layout Contest!

apologize — Tue, 29 Nov 2011 19:11:50 GMT

Its that time of year again! And this time I remembered well before the holidays hit, so I hope you are all prepared! Same rules and guidelines as last year, so check those out to refresh your memory and get to layout-makin! :)

The winning layout will stay up for until Februrary 2012, and the winner will receive 500 LJ tokens and a custom userhead of their choice!

Rules
1. Original submissions only. This can't be a previous layout, or a remake of a previous layout, nor can this be anyone else's work.
2. One submission per person. However, if you decide after you submit that you are not pleased with your result, you may delete your submission and re-edit it until you are pleased. You may do this as many times as you'd like up until the final submission deadline.
3. The deadline is set for December 20, 2011 at 11:59 PST. Use this time zone converter to help you.
4. Anyone can enter.
5. Do not post or share this layout in any community until the contest is over (*this excludes the winner -- you may not post the layout in any community even after the contest is over)

Requirements
1. Must be a layout suitable for a basic/free account, and an S2 style.
2. Must include the sidebar, and/or various sidebar items (especially tags, and links) since they are necessary for this community. The blurb however is not necessary, and is up to your discretion.
3. A header is not necessary, but if you make one it should say tutorialayouts somewhere in it.
4. Should be compatible with screen resolutions 1024 and higher.
5. Needs to have date, subject, and tags visible in the entries.
6. Anything you use in the layout that is not of your creation must be credited to the creator.
7. Color scheme and layout style are left entirely up to you. But since it is a holiday themed layout, it should colored and styled appropriately, no matter which holiday you celebrate.

Submissions will be accepted in this post only. You will need to make sure you post it in this format when you submit your entry.

If you have any questions/concerns you can leave them in this entry, or you can shoot me a message. If you do not know how to make live previews, you can read through this tutorial. And you can use websites likes box.net or sendspace to host your text file.

Thanks!
TL Staff

Novemer Help Post

apologize — Wed, 02 Nov 2011 23:20:13 GMT

October Help Post

apologize — Tue, 04 Oct 2011 02:25:35 GMT

September Help Post

apologize — Wed, 07 Sep 2011 23:00:00 GMT

horizontal layout

unreal — Sat, 13 Aug 2011 15:19:34 GMT

I was asked if I could do a tutorial for this. However it was right before I went on vacation. So I didn't really have time until now. If there are still any questions after this tutorial then feel free to leave a comment.

- example of a horizontal layout

Content

Normaly you set your content between 400px/900px to have your entry and sidebar next to eachother. When creating a horizontal layout the width needs to be way bigger. For the example layout I used a width of 2300px;

Subcontent
You now have the width for the content but your entries also need a width. You do this by adding a width to the subcontent. I used 450px;
In my example I also gave it a fixed height because I don't like it when entries don't look the same. When adding a height you must also give it a overflow: auto; If you don't do that your entry text will get outside the entry.
To have them next to eachother you add a float: left; and a display: inline;

Display Entries
Your not there yet. You know need to a number of entries you want to display. If you add more then the width you gave the content then the rest will show up under the other entries. And when not customized right it will look bad. In my example I used 4 because I also wanted some room for a footer next to entries.

Footer
You can have your footer under the entries as always. But you can also have it next to the entries. To do this your footer needs to have a width, a left and a margin-top. For the example I used width: 100px; left: 2130px; and margin-top: 250px;

August Help Post

apologize — Mon, 01 Aug 2011 07:02:35 GMT

July Help Post

apologize — Fri, 01 Jul 2011 14:30:41 GMT

Look at me, right on time!

This post is for users to ask questions about customization and coding issues they are having with their layouts to the mods and posters of the community. Please keep in mind that we may not be readily available to help immediately, so if it is a CSS emergency, you might try finding help at one of the communities listed in the profile.

Also keep in mind the we won't code or customize your layout for you, because then you wouldn't have learned anything by that. The point of this community is to find tutorials and guides to help you understand how to do that, and many other things. If you have a question about something that you can't find in the community, you don't know of a tutorial that can answer that question, or you need clarification on a tutorial you may ask them here.

This post will remain open for the remainder of the month. If you have suggestions about tutorials you think should be in the community, or you know of a tutorial that should be in the community please leave a comment here

...And for those of you in the United States, I hope you have a great and festive weekend. And for those of you outside the US, I also hope you have a great weekend! :)

Minimalism breakdowns and horizontal scrolling.

apologize — Sun, 26 Jun 2011 02:37:25 GMT

Does anyone know of any minimalism breakdowns out there? I've been wanting to learn minimalism for a while, but I learn best by visual examples of all the elements, which would be especially helpful since minimalism seems drastically different from FS or SS. Also, its one of the breakdowns we don't have listed in the CSS Archive. I guess I could just pick apart a minimalism layout and teach myself, but I just wanted to check in case there are some floating around out there that I just haven't found yet. Also, if anyone knows of any other breakdowns we're missing, or updates to any breakdowns, or new breakdowns, please let us know here.

Also, we have a user that would like a tutorial on horizontal scrolling layouts, like this one by stimulus. If anyone would be willing to write a tutorial, we would greatly appreciate it!

Thanks,
Alexis Nicole.

June Help Post

apologize — Mon, 06 Jun 2011 19:09:40 GMT

Sorry! Its a little late

This post is for users to ask questions about customization and coding issues they are having with their layouts to the mods and posters of the community. Please keep in mind that we may not be readily available to help immediately, so if it is a CSS emergency, you might try finding help at one of the communities listed in the profile.

Also keep in mind the we won't code or customize your layout for you, because then you wouldn't have learned anything by that. The point of this community is to find tutorials and guides to help you understand how to do that, and many other things. If you have a question about something that you can't find in the community, you don't know of a tutorial that can answer that question, or you need clarification on a tutorial you may ask them here.

This post will remain open for the remainder of the month. If you have suggestions about tutorials you think should be in the community, or you know of a tutorial that should be in the community please leave a comment here

And the Ask the Layout Maker post is still open, click the image to go to the entry!

Ask the Layout Maker | Q&A Session

customcontent — Sun, 29 May 2011 03:08:18 GMT

I decided to have a Q&A session, because I know sometimes as users, aspiring layout makers, or current layout makers, you want to ask layout makers questions but aren't sure how you can do it, or may be hesitant to. Therefore, I'm opening up this little meme to allow users to ask layout makers questions about their inspiration, process, what they do if they can't get things to work right, what programs or firefox add-ons they use, etc. Basically anything you want to know about being a layout maker, or helpful advice you can get from layout makers. And obviously, layout makers can ask other layout makers questions as well, it's open to everyone to ask questions.

In addition, I ask that you guys pimp this post so that its not just me or malionette answering questions, that way we can have many layout makers answering!

sidenote; this isn't meant to be like our monthly help posts, please do not ask questions about how to customize certain aspects of layouts, etc. you can ask those questions in the May Help Post, or in the upcoming June Help Post. Thank you!

How to Make Animated Mood Themes with Mac

apologize — Wed, 25 May 2011 18:50:52 GMT

A while back, I posted a tutorial on how to make an animated mood theme. Well since then, I've starting using a Mac, instead of a PC, so naturally there are going to be some differences. For the most part, I still do things pretty much the same. But, I thought I'd update the tutorial to include how to create one with a Mac.

I'm not going to write another tutorial because, it would kind of be a waste of time, unless a lot people really object and want me to write one, just follow the following steps and it should work out fine.

First, start with this tutorial by killmotion. Its a guide to how to make screen caps on a Mac, which to be honest was the most challenging part of creating a mood theme, because there are not many free screen capping programs that are compatible with Macs. Follow that tutorial until the end, unless you already have an idea of what you're doing. She gives really good tips, and includes other helpful resources that will make your screen capping adventure much easier.

Then, once you've finished that tutorial, head back on over to my original tutorial and START FROM STEP 6 (SIX). Read the note right before step 6, just as a reminder, then you can move on. From here, everything will be exactly the same. I've updated it to include key changes between CTRL and Command, but other than that everything will be exactly the same.

If this proves to be too tricky for some, and if you ask nicely I will re-write an entire tutorial specifically for Macs, but this really shouldn't be too difficult to follow.

Any questions or comments?
Alexis Nicole

On another note: the community where that screencapping guide is posted, is a screen cap community so if you don't want to waste your time capping, you can look up movies, tv shows, music videos, etc. in that community and then use the 2nd half of my tutorial (from step 6), in order to finish creating the mood theme.

Just a quick update.

apologize — Mon, 09 May 2011 00:41:19 GMT

For those layout makers out there that use the just another window-resizer add-on, that add-on is not available for Firefox 4.0. So if you use that add-on, you unfortunately won't be able to upgrade Firefox unless you can find another add-on that is compatible with 4.0

Also, if you use the ljlogin add-on if you it is also not compatible with the newest version of firefox.

May Help Post

apologize — Sun, 01 May 2011 15:51:59 GMT

The 'Hover' Tutorial

apologize — Sat, 23 Apr 2011 04:37:07 GMT

I've gotten some questions about the 'hover' property and decided that I should make a tutorial since its apparently a pretty tricky property.

Tutorial Info
Programs used; Web Developer
Knowledge of CSS needed; Moderate

Understanding the 'Hover' Selector
The :hover selector is not a difficult property to understand, the basic definition of hover means how an element changes, or doesn't change when you mouse over them. The tricky part comes in when you start applying the :hover selector combined with other properties and understanding how all those properties work together to form your creation. But first, lets start with a basic example: in this layout, you can hover over any blue link and it will change color. The hover property is denoted by a colon (:) and the word hover. It is a property that is attached to a link, and as you will learn can be applied to other properties.

Example,


a, a:link, a:visited {
color: blue;
text-decoration: none;
}


a:hover {
color: red;
text-decoration: underline;
}

This means that the link will change from blue and not underlined, to red and underlined whenever a link is moused over.

In this second layout, we see the :hover selector being used in a different way. Instead of changing just the color of the navigation links, we now see it changing the style of the text as well.

It would look something like this, in the CSS.


div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {color: #5674b9;}

div#header a:hover, div#footer a:hover {
font-style: italic; 
font-family: georgia;
font-weight: normal;
color: purple;
text-decoration: none;}

The header and footer links will now appear purple, in Georgia font and italicized when you hover over them.

Outside the Link
The :hover selector isn't just a property that is exclusive to links, which is great because it can add neat effects to your layout. Let's begin with this example layout. While, the property is still being used for links, its being used in a non-traditional way. In this layout, hovering over the navigation changes the length of the background.

Which would look something like this:


ul.navheader li  {
display: block;
font-family: courier new;
font-size: 12px;
text-align: left;
font-weight: lighter;
padding: 0 3px 0 3px;
background: #ffdf2d;
margin-top: 5px;
text-transform: uppercase;
letter-spacing: 1px;


ul.navheader li:hover{width:13%;}

Furthermore, this layout shows how the hover selector can be applied an entire item, such as comment bar. In actuality, the bar and the actual comment link at 2 separate entities, much like most properties (header, sidebar, etc...). In this layout, the comment bar, by default is 'hidden', but we use the hover property to make it re-appear.

Looks something like this:


.comments {
font-family: "courier new", sans-serif;
font-size: 11px;
text-align: right;
background-color: #dcdcdc;
padding: 10px;
position: relative;
top: 44px;
margin-left: -10px;
width: 100%;
text-transform: uppercase;
background: rgba(0, 0, 0, .1);
opacity: 0;
}


.comments:hover{
opacity: 1; background: rgba(0, 0, 0, .1);}

So when you hover over the bottom of the entry, the comment bar will then appear.

Hover & Opacity
The Hover & Opacity properties are 2 that I like to use together often. Opacity is one way to changing the transparency of an item. In the previous example, the comment bar is completely hidden, until you hover over the area where the comment bar is supposed to appear. And in this layout, the images in the entries are all somewhat faded, however when you hover over them, they all turn to their normal opacity.

Like this:


.entry_text img{border: 1px solid #eee; padding: 10px; opacity: .60;}

.entry_text img:hover{opacity: 1;}

The highest value the opacity can take on is 1. It can go from 0-1, with any decimal in between. To learn more about opacity, read this.

Helpful Tips

Make Your Job Easier
As noted in a previous tutorial, I love using these tools when making layouts: Firebug & Web Developer.
In these two programs (I prefer, web developer), you can edit the CSS without ever having to manually update the layout. The web developer comes with more ways to understand a website, as well as other options to help create the website. As a layout maker, my job would be excruciatingly difficult if I didn't have these add-ons to help with the layout making process. If you don't use firefox, I highly suggest switching today.

Utilize Your Resources
Bookmark these websites: CSS Reference, Moz Extensions & CSS school
Each link provides extensive help on learning CSS. The first two focus on providing you with a plethora of CSS properties and give you examples on how to use them, and how to make them compatible for each browser. The last website gives you a breakdown of all the elements of CSS, as also gives you a way to try it for yourself so you can see how it works when applied to the CSS.

I can't stress these tips enough, the best way to learn is by experiment, experience, and trial and error. Tutorials like this one are for when you need that little push to help get you on your way, otherwise the best advice I can give is just to play around with the CSS and see what you can come up with and eventually you'll be writing tutorials like these for people who were once in your position.

If you have any question, I will be happy to entertain them. :)

April Help Post

customcontent — Sat, 09 Apr 2011 16:59:06 GMT

Sorry its a little late, these months just keep getting away from me.

This post is for users to ask questions about customization and coding issues they are having with their layouts to the mods and posters of the community. Please keep in mind that we may not be readily available to help immediately, so if it is a CSS emergency, you might try finding help at one of the communities listed in the profile.

Also keep in mind the we won't code or customize your layout for you, because then you wouldn't have learned anything by that. The point of this community is to find tutorials and guides to help you understand how to do that, and many other things. If you have a question about something that you can't find in the community, you don't know of a tutorial that can answer that question, or you need clarification on a tutorial you may ask them here.

This post will remain open for the remainder of the month. If you have suggestions about tutorials you think should be in the community, or you know of a tutorial that should be in the community please leave a comment here

March Help Post

apologize — Fri, 04 Mar 2011 02:44:05 GMT

is anybody out there?

apologize — Fri, 25 Feb 2011 05:25:33 GMT

Hi!

I just wanted to do my monthly check up. Last month's help post didn't get any comments, which I realize will happen but I feel like this community has become much more inactive than it has been in the past, which I realize I contributed to, and I'm not going to shut it down because of that inactivity. What I would like to know however, is how many people still find the community useful/helpful? The monthly help posts were kind of my way of assessing that but since the last few months (with the exception of Jan.) have been kind of slow in terms of those posts I just wanted to make sure that people were still coming to this community to help them with their layout needs. So, with that said does anyone still find the monthly help posts and the community useful/helpful?

I just want to remind everyone to be on the look out for new tutorials that pop up around LJ that you would think would be a good resource for this community. I know that malionette and I try, but its not always so easy especially if we aren't able to spend as much time on LJ as we would like, therefore I am leaving this task up to the members. There is suggestion guide for you to utilize. You can either suggest tutorials here, or you can post ones that you find that you would like to see in the community.

And don't forget to check the GBCA for an archive of all the posts made to this community.