absonant

[community] frequently asked questions.

2006-07-17T23:36:11Z

Why is the line underneath the title in the Spring Kiss template not showing up?
Because you're using Internet Explorer.

Why do my custom comment pages look screwed up?
Because the layouts are coded for free accounts and they don't have access to custom comments pages. I will not code these comment pages for you since I dislike them.

Why do my linebreaks look strange when I view my layout in Internet Explorer?
To get rid of this, open your CSS file in a text editor and remove letter-spacing: 1px;. It will also decrease your letter spacing to the default amount, though.

Will you make a template for Boxer, Opal, Component or any other base that is exclusively for paid accounts?
No.

Will you make me a header or customize my layout for me?
No.

Why does [thisandthisandthis] box not show up?
Most likely because you did not order Livejournal to make it show up. To do this (in S2), you must visit the customize area and follow the instructions there. This is not (with a few exceptions that are always noted) defined in the CSS.

What do you mean by "text editor"?
I mean a program like Notepad - a simple light program that will allow you to edit the content of a file. Word is fine too but I personally prefer Notepad because it's lighter.

Will you take my firstborn?
MAYBE.

absonant @ 2006-07-18T01:29:00

2006-07-17T23:29:44Z

Layouts are back up again. Not repaired quite yet, but back up.

absonant @ 2006-06-10T18:50:00

2006-06-10T16:51:32Z

Hey, dolls.

Just posting to let you know that I'm working on a fake boxer design for S2 (you can view it at my journal for now) and that I'm trying to fix some bugs and make the codes more efficient for current designs. Things will be back up soon.

I don't know what it is but, it has something - I don't know. The design has something old school grungy, but the simplicity is stunning and it's all about shapes. I like the shapes.

absonant @ 2006-05-11T17:53:00

2006-05-11T15:56:19Z

I am done. I am done with this.

All templates will be taken down indefinitely.

I don't ask for credit or money or anything. I will answer any questions, I will write tutorials to answer them. You all have my e-mail, my AIM even. I am here if you need help. I am nice.

Someone edited the Spring Kiss template a bit and redistributes it as her own template. I looked at the CSS and it's based on mine, not only is the style of coding exactly the same, she uses the same order of elements, the same order in everything. She even uses the same padding and margin.

All I ask is that you do not redistribute my works, and that you do not claim them as your own. Apparently, this is too much to ask. I don't understand, I don't get why people keep doing this. Apparently, I am an unreasonable person.

But you know what. My finals are coming up. I'm about to make tests that will define my future. I don't need this, I don't need to be upset about this and I can't allow myself to be. I'm sorry, I know most of you aren't like this. But some are, and that's enough.

I'm taking all templates down until I decide that I'm ready again.

ETA:
No, no, of course you don't need to take your templates down! I'd never ask that of you. You can continue to use them as long as you want, 'kay? This isn't your fault. This has to do with only four or five people and you don't have to take anything down.

[community] News.

2006-05-09T17:41:09Z

Hi darlings,

I looked at absonant's userinfo today, and I saw that we have reached 716 members and 600 watchers. Sixhundred. Wow. Thank you so much for being a part of this, so much.

Also, I'm sorry I have been so inactive lately! I've been working on styles for the style contest, you can find my designs here. Once the contest is over and once my finals are, too (this will be by June first), I'll convert some of the styles for Livejournal and they will be up for grabs. In the meantime, if you could tell me what you think of them, that would be lovely. Feedback is the best way to improve, really.

I would just like to post a reminder that all questions must be asked in reply to the question post because otherwise I can't find them back. And once again, please, please read the readme file and the community information first. Please. It saves all of us a lot of time - it isn't that I don't want to answer questions. It's that when questions have already been asked and answered, it's so much more efficient to just read the answer rather than mailing me and waiting for a reply.

Finally, I want to thank you for all the nice mails and IMs and comments I've received, you are all far too kind. I'm glad to see that my designs are found useful. Thank you for being a part of this.

[community] news || [community] questions

2006-04-28T23:27:10Z

Hi, darlings.

Thank you for all your nice words of support. My exams went okay I think, and I have three weeks now until finals so I'll have the time to answer your questions and maybe a request or two.

I just have one request for all of you - I know that I have posted before that all questions could be posted as a reply to that post but, experience has taught me that it's rather inefficient. Now, when I don't remember exactly what questions had been asked, I have to search all my posts to find the question so I can answer it. So from now on, if you could use the form below to ask questions and post them in a comment to this post only, that would make things much easier for you. If you have already asked your question in reply to another post, there's no need to re-post, I'm going to check all the post one more time tonight and this weekend. Also, tutorial requests and theme requests can still be posted as a reply to their respective posts.

Thank you!

[community] News.

2006-04-17T23:35:25Z

I will no longer be answering questions that have been answered previously in the community's information posts. If I do not reply to your comment within a week or so (either with an answer or with a reply letting you know that I'm working on it), your question has already been answered.

Also, I'm going on a semi-hiatus for a month or so. I'm in my final year of highschool and my final exams are coming up, my future is being defined, in a way. I'm sorry but, I really need to focus on school right now. This means that I will be around to answer quick questions and all that but, I won't be able to post long tutorials and/or new themes.

Finally, something nifty:

It is amazing, you receive 1GB for free, and it's awesome for sharing music or other large files. Plus, you can use it for backups and stuff. Very nifty, really.

So, see you in a month or so and thank you for being here.

[theme] Heads Up | S2 | Flexible Squares | One sidebar

2006-04-11T19:59:05Z

Theme: Heads Up
Style system: 2
Base: Flexible Squares
Design: One sidebar

After downloading the .zip file, open the readme.html file in your browser. It contains all the instructions for installation.
recent view friends view archive (calendar) view day view	download zip file

[community] News.

2006-04-11T18:40:24Z

Hi, everyone. First of all, let me give you a proper welcome. absonant has more than hundred members already, and that after two days! I am incredibly honoured and happy to see you all here, and I do hope that I won't disappoint you.

I want to apologize, especially to those who have been here since the first hour, for the heaps of posts that I have been making. I am incredibly sorry to clutter your friends lists, and even more sorry that it might continue for a bit in the near future. I wish I could backdate entries so they would not show up on your friends list but, unfortuantely Livejournal won't allow backdated entries in communities.

Also, it has come to my attention that the tutorial for adjusting the width for the Spring Kiss template didn't work for the calendar. An addition has been made to the tutorial, if you have this problem please check it out.

Coming up is a new template, I hope to finish it tonight and make the last adjustments tomorrow. In the meantime, please take a look at the gorgeous affiliates.

Thank you.

[community] General information.

2006-04-11T18:30:45Z

introduction
community organization
the style systems
generator
smooth sailin' and flexible squares
important links

------

introduction

\Ab"so*nant\, a. [L. ab + sonans, p. pr. of sonare to sound.] Discordant; contrary; -- opposed to consonant.

Why absonant? Because it is a pretty word. Because I have an obsession for pretty and rare words. Because it represents me in the sense that it means going against the crowd, being different, discordant. I'm quite fond of discordance in some cases.

This community is owned by aery, once upon a time known as n_o_c_t_u_r_n_e. I opened it in April 2006, because I had made some Livejournal templates that I felt did not belong at my graphics community _sinelinea, for they were not art in any way. They were just a collection of CSS lines.

Also, I had received too many questions regarding my previous layouts and felt it was time to keep everything in one place - explanations, tutorials and questions included. So here we are.

All layouts are to be downloaded in a zip file, you will need a program to unzip it (for instance, winzip). The zip file will contain all information regarding installation. I have a strange preference for shades of gray combined with reds, pinks and oranges, so most templates will have those base colours. However, colours are easy to change, so if you dislike the looks, you can customize them as you wish.

------

community organization

The entries in this community are categorized in various ways. There are four main archive posts, all will be updated as we go. They are linked from the main page, and also at the bottom of this post, in the important links section. All entries are also archived through tags. In the archive posts as well as in the tags, you will find some categories that you may not be familiar with:

style system
This indicates whether the layout is based on style system one or style system two.

base
This indicates what original LJ base the layout uses. The three I use most frequently are generator for S1 and smooth sailin' and flexible squares for S2.

design
This indicates the main design feature of the layout - does it use a sidebar or not, is it perhaps a scrollbox? It speaks for itself, mostly.

theme
To make organizing easier, I have given all my templates a name. The theme indicates the name - this way you can easily find, say, all tutorials and features for the template you want to use.

The community, tutorials and #archive tags are quite obvious I think, so I will not explain them any further.

------

the style systems

Style system one is the oldest LJ system for layouts, style system two has been added more recently. The two major differences for free accounts between S1 and S2 are that in S1, one is not able to use tags, and that in S1, the userpictures do not show up with every post, whereas they do in S2. For paid accounts, S2 offers much more customization options, but the customizing is more complicated than in S1. For free accounts, S1 can be customized through overrides, S2 can only be customized using CSS. Whatever layout you download will contain the correct instructions for installing.

The instructions for adding more content in the sidebar for S1 layouts can be found in the tutorials. Adding more content in the sidebar in S2 layouts is easier, but it has restrictions. Through the customization area you can add free text boxes, and through the links area you can add links but that is all. The free text boxes do not allow HTML tags, and the links do not allow any further customizing.

------

generator

Generator is the base I use most for S1 layouts. The advantage of generator, is that it allows any content at all to be added in the sidebar, with no restrictions. The disadvantage is that it can only be customized dramatically in S1, thus does not allow the use of tags, nor the appearance of userpictures with every entry.

------

smooth sailin' and flexible squares

Smooth Sailin' is my favourite S2 base, because it allows ten free text boxes in the sidebar, a tags box and a search box. In fact, it allows everything that Flexible Squares allows as well, plus a little more. The disadvantage of Smooth Sailin' though, is that it is much harder to customize. Thus, whenever I can I will use SS, when I can not, I will use FS. Whenever you download a layout that does not use a sidebar, it is usually FS, but it is in the sidebar that the greatest difference is made, so when there is no sidebar, it really does not matter all that much.

------

important links

themes
tutorials
terms of service
affiliates
got questions?
frequently asked

[archive] Community.

2006-04-09T14:40:12Z

Here you can find a list of important entries regarding the community and the templates in general. Please read through these links before you ask me any questions. Thank you.

Terms of Service
Affiliates
General information
Userinfo
Got questions?

[community] Affiliates.

2006-04-09T14:33:41Z

If you would like to be affiliated with absonant, please reply with the name of the community/journal in question. I will only affiliate with communities or journals that in one way or another share codes and/or overrides. This is not a graphics community thus I will not affiliate with graphics communities.

Feel free to use one of these buttons to link back to http://absonant.livejournal.com

Please upload them to your own server. Thank you!

[community] Terms of service.

2006-04-09T14:27:13Z

Please read these carefully before downloading and using one of my templates, and also before asking questions. They're really not that long as I don't have many rules or whatever, so please do. Thank you.

The templates here are made for free accounts primarily. Naturally, they can be used on paid accounts as well, but not all features are covered. In S2, for instance, paid users have the option to keep customized comment pages. The coding for these pages is not included in any of the layouts. The reason for this is simple - I myself do not have a paid account, thus can not view these pages, thus can not code them.

You are free to edit the templates in any way you wish. A selection of tutorials can be found here, you can also request a tutorial and I will do my best to write it as soon as possible.

I do not require credit of any kind. However, I ask of you that you do not claim the templates as your own, and that you do not reproduce my work in any way without my prior permission. This means that if you use one of my templates as a base for a layout you want to share, you will have to ask my permission first. It is not more than a formality - I will grant it to you. The reason I do this however is, that in the past many people have used my layouts as a base for shared layouts. People who have downloaded those shared layouts then came to me with questions and remarks, but often the code had been edited in ways that evoked errors, and it took me ages to find those errors. So please just ask me first when you want to use one of my templates as a base for a shared layout.

You may not hotlink any css files. Ever. You may not ask questions regarding layouts in my personal journal. You may contact me through this community or through raptured@gmail.com.

All the templates have been created from scratch by myself, handcoded in Notepad and I have put a lot of time in them. I do not ask a lot, I do not even ask for credit. Please respect my wishes.

Thank you for reading.

[archive] Tutorials.

2006-04-09T14:10:27Z

Here you will find a list of tutorials posted, sorted by subject.

Adding a header

Organizer

Spring Kiss

Altering width and positioning

Organizer

Spring Kiss

This list was last updated on April 9th, 2006. If you wish to request a tutorial, please do so using this form:

[archive] Themes.

2006-04-09T13:58:27Z

Here, you will find a list of all themes created. It will be updated as we go.

Spring Kiss
S2 | Smooth Sailin' | One sidebar

download

Organizer
S2 | Flexible Squares | No sidebar

download

Heads Up
S2 | Flexible Squares | One sidebar

download

This list was last updated on April 12th, 2006. If you want to request a template, please post a comment using the following form:

Please keep in mind that I only do templates, meaning that you cannot request custom layouts. Also, please note that you requesting is no guarantee for me creating. I'll do my best, though.

[tutorial] adjusting width and positioning.

2006-04-09T13:43:43Z

Theme: Spring Kiss
Style system: 2
Base: Smooth Sailin'
Design: One sidebar

This tutorial will show you how to make your entries wider or less wide, and also how to de-center and reposition it. Prior CSS knowledge could come in handy but is not necessary:
I. customizing the width
II. customizing the width of the sidebar
III. de-centering the journal

------

I. Customizing the width
Open up your CSS file in a text editor and find the following passage:

.pageblock {
padding: 2px;
position: relative;
width: 800px;
left: 50%;
margin-left: -400px;
background-color: #FFFFFF;
}

You can change 800px to anything you wish. However, to keep it centered, you must make sure that the number after margin-left: equals half of the width. If, for instance, I only want my journal to be 700px wide, I would change it to:

.pageblock {
padding: 2px;
position: relative;
width: 700px;
left: 50%;
margin-left: -350px;
background-color: #FFFFFF;
}

II. Customizing the width of the sidebar
Now, if my journal is less wide, I might want my sideboxes less wide, too. For that, I'll need this passage:

.sidebox {
width: 230px;
background-color: #F5F5F5;
padding: 2px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px dotted #e4e4e4;
padding-bottom: 5px;
}

If I want my sideboxes to be only 200px in width, I simply change the code accordingly:

.sidebox {
width: 200px;
background-color: #F5F5F5;
padding: 2px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px dotted #e4e4e4;
padding-bottom: 5px;
}

You do not need to alter the width of the entries as well. They adjust themselves automatically. Now there is another problem though - when you make the sidebar thinner, the calendar exceeds the width of the sidebar. To change that, you'll need to find these passages:

#latestmonth table {
position: relative;
left: 50%;
margin-left: -120px;
}

#latestmonth td {
padding: 5px;
}

By decreasing the padding, you can make the calendar less wide. To keep it in the middle of the sidebox, you'd also have to adjust the margin-left, though. For a sidebar of 200px wide, the code would look like this:

#latestmonth table {
position: relative;
left: 50%;
margin-left: -90px;
}

#latestmonth td {
padding: 1px;
}

This means that there are limits for how thin you can make your sidebar if you wish to keep the calendar sidebox. You can also hide your calendar by going to the customization area.

III. De-centering the journal
To de-center everything, you need the same passage as you used for altering the width:

.pageblock {
padding: 2px;
position: relative;
width: 800px;
left: 50%;
margin-left: -400px;
background-color: #FFFFFF;
}

You can now play around with the left and margin-left values until your journal is positioned in the way you like it.

------

Got questions?

[tutorial] adjusting width and positioning.

2006-04-09T12:23:36Z

Theme: Organizer
Style system: 2
Base: Flexible squares
Design: No sidebar

This tutorial will show you how to make your entries wider or less wide, and also how to de-center and reposition it. Prior CSS knowledge could come in handy but is not necessary:
I. customizing the width
II. de-centering the entries

I. Customizing the width
You may have a header that is wider or less wide than the entries, and want to make the entries fit underneath your header neatly. To alter the width, you'll need to open your CSS file in a text editor and find this passage:

#content {
width: 500px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
padding-left: 2px;
padding-right: 2px;
}

You can change the number after width: into whatever you wish. Your code may become, for example:

#content {
width: 650px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
padding-left: 2px;
padding-right: 2px;
}

II. De-centering the entries
To de-center, you will need the same passage as to change the width:

#content {
width: 500px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
padding-left: 2px;
padding-right: 2px;
}

Now, you have two options - you can use relative positioning or absolute positioning. The codes are:

position: absolute;
left: *px;

and:

position: relative;
left: *px;

You can also change px to %. Just play around with numbers until your journal is positioned in the way you like.

------

Got questions?

[tutorial] adding a header.

2006-04-09T12:08:34Z

Theme: Organizer
Style system: 2
Base: Flexible squares
Design: No sidebar

This tutorial will show you how to insert a header. Some prior CSS knowledge could come in handy but it is not necessary:
I. inserting the header image
II. making the image visible
III. repositioning the header image

------

I. inserting the header image
Imagine you want to use this header:

Open up your CSS file in a text editor and find this passage:

div.headerimage {
}

Here's where you insert your header image, using this code:

background-image: url(http://IMAGE.jpg);

Your full code now becomes:

div.headerimage {
background-image: url(http://IMAGE.jpg);
}

The header image does not show up yet, which is why we continue on...

II. Making the image visible
To make the image show up, we need to increase the width and height of the div layer that contains it. The image is in this case 504 by 304 px, so we make the width and height accordingly:

width: 504px;
height: 304px;

The full code becomes:

div.headerimage {
background-image: url(http://IMAGE.jpg);
width: 504px;
height: 304px;
}

The layout now looks like this:

III. Repositioning the header image
Now, this layout is centered and I like that, so I use the following code to center the header image as well:

margin: 0 auto;

The full code becomes:
div.headerimage {
background-image: url(http://IMAGE.jpg);
width: 504px;
height: 304px;
margin: 0 auto;
}

The layout now looks like this:

------

Screenshots may look slightly different for IE, but the codes work for all browsers. Got questions?

[tutorial] adding a header.

2006-04-09T11:33:16Z

Theme: Spring Kiss
Style system: 2
Base: Smooth Sailin'
Design: One sidebar

This tutorial will show you how to insert a header. Some prior CSS knowledge could come in handy but it is not necessary. I'll be demonstrating two possibilities - a header that takes up part of the width (like this) and a header that takes up the complete width (like this).

Tutorial One: part of the width
I. inserting the header image
II. repositioning the entries and sidebar
III. repositioning the header menu
IV. transparency
V. formatting the journal title

Tutorial Two: the whole width
I. hiding the journal title
II. inserting the header image
III. repositioning the entries and sidebar
IV. repositioning the header menu
V. transparency

------

I. Inserting the header image
Imagine you want to use this header:

Open up your css file in a text editor and find the following passage:

.pageblock {
padding: 2px;
position: relative;
width: 800px;
left: 50%;
margin-left: -400px;
}

Now, you need to add this code to that passage:

background-color: #FFFFFF;
background-image: url(http://IMAGE.jpg);
background-repeat: no-repeat;

The full code would then become:

.pageblock {
padding: 2px;
position: relative;
width: 800px;
left: 50%;
margin-left: -400px;
background-color: #FFFFFF;
background-image: url(http://IMAGE.jpg);
background-repeat: no-repeat;
}

Your layout now looks like this:

Not quite right, is it? That's why we continue on the the next step:

II. Repositioning the entries and sidebar
To shift your entries down, you'll need to find this passage:

.bodyheaderblock {
margin-top: 35px;
}

You can now play around with the number to shift your entries down. I change it to 180 px, so the new code becomes:

.bodyheaderblock {
margin-top: 180px;
}

The layout now looks like this:

Still not quite right, thus we continue on to...

III. Repositioning the header menu
Now this part depends a bit on your header. The one I'm using as an example is not very wide, so I want to fit the links in next to it, underneath the journal title. However, you can use the same way as I do now to reposition your menu like you wish, just use different numbers. The passage you'll need:

.header-menu {
}

See, there's actually nothing there yet. We're going to add some information now. To position it, you need this code:

position: relative;
top: *px;
left: *px;
width: *px;

You can change the asterisks to the number you want. I use the following:

.header-menu {
position: relative;
top: 0px;
left: 270px;
width: auto;
}

I use width: auto because I want all the links to be in one line and it fits. The layout now looks like this:

IV. Transparency
Now, the white of the menu still overlaps the header image. To change that, you'll need to find this passage:

.pageheaderblock {
background-color: #FFFFFF;
}

Replace it with this

.pageheaderblock {
background: transparent;
}

This is how it looks now:

V. Formatting the journal title
The only thing that isn't quite right yet, is the dotted border that still covers the image. To change that, we need this passage:

.header-title {
margin-top: 30px;
font-family: century gothic;
font-size: 35px;
font-weight: bold;
color: #e4e4e4;
text-align: right;
letter-spacing: -2px;
text-transform: lowercase;
border-bottom: 1px dotted #e4e4e4;
line-height: 30px;
}

We add some margin on the left so the border is shorter:

margin-left: 270px;

The full code now becomes:

.header-title {
margin-top: 30px;
font-family: century gothic;
font-size: 35px;
font-weight: bold;
color: #e4e4e4;
text-align: right;
letter-spacing: -2px;
text-transform: lowercase;
border-bottom: 1px dotted #e4e4e4;
line-height: 30px;
margin-left: 270px;
}

The layout:

------

I. Hiding the journal title
Now imagine you want to use this header:

In this case, I want to get rid of the journal title entirely. We need this passage:

.header-title {
margin-top: 30px;
font-family: century gothic;
font-size: 35px;
font-weight: bold;
color: #e4e4e4;
text-align: right;
letter-spacing: -2px;
text-transform: lowercase;
border-bottom: 1px dotted #e4e4e4;
line-height: 30px;
}

Now this is easy - we simply replace everything with:

opacity: 0;
filter: alpha(opacity=0);

The full code becomes:

.header-title {
opacity: 0;
filter: alpha(opacity=0);
}

The layout:

II. Inserting the header image
Like in the first case, we are going to insert the header. The passage we need is the same:

.pageblock {
padding: 2px;
position: relative;
width: 800px;
left: 50%;
margin-left: -400px;
}

We are also adding the same code:

background-color: #FFFFFF;
background-image: url(http://IMAGE.jpg);
background-repeat: no-repeat;

However, since this is a larger header, we want it centered. Thus we also need:

background-position: top center;

The full code would then become:

.pageblock {
padding: 2px;
position: relative;
width: 800px;
left: 50%;
margin-left: -400px;
background-color: #FFFFFF;
background-image: url(http://IMAGE.jpg);
background-repeat: no-repeat;
background-position: top center;
}

The layout now looks like this:

III. Repositioning the entries and sidebar
To shift your entries down, you'll need to find this passage:

.bodyheaderblock {
margin-top: 35px;
background-color: #FF0066;
}

Play around with the number to shift your entries and sidebar down. I change it to 244px. My code now becomes:

.bodyheaderblock {
margin-top: 244px;
background-color: #FF0066;
}

The layout looks like this:

IV. Repositioning the header menu
The header we use now is wide, so I want to place the menu at the bottom of it. The passage is the same as before:

.header-menu {
}

I also use the same code to position as before:

position: relative;
top: *px;
left: *px;
width: *px;

The numbers I use now are different, though:

.header-menu {
position: relative;
top: 250px;
width: auto;
text-align: center;
}

I still use width: auto because I want them on one line. I also want my links centered, though, so that is why I added text-align: center. If you do not want it centered, you can still use left: *px as demonstrated in the previous tutorial. The layout now looks like this:

V. Transparency
This part is the same - I want to change the white to transparent. To change that, you'll need to find this passage:

.pageheaderblock {
background-color: #FFFFFF;
}

Replace it with this

.pageheaderblock {
background: transparent;
}

The layout now looks like this:

------

Positioning may vary slightly in Firefox/Netscape and IE. Got questions?

[theme] Organizer | S2 | Flexible Squares | No sidebar

2006-04-09T11:31:25Z

Theme: Organizer
Style system: 2
Base: Flexible Squares
Design: No sidebar

After downloading the .zip file, open the readme.html file in your browser. It contains all the instructions for installation.
recent view friends view archive (calendar) view day view	download zip file

[theme] Spring Kiss | S2 | Smooth Sailin' | One sidebar

2006-04-09T11:30:10Z

Theme: Spring Kiss
Style system: 2
Base: Smooth Sailin'
Design: One sidebar

After downloading the .zip file, open the readme.html file in your browser. It contains all the instructions for installation.
recent view friends view archive (calendar) view day view	download zip file