- Are you sure you want to sign out?
Delete Message
- Are you sure you want to delete?
Sign In
Make a donation
- Tutorials: Classic (66)
- Tutorials: Trendy (59)
- Help for Admins (7556)
- Help for Users (2677)
- Chat Room Help (101)
- Forums: Missing (249)
- Restore Custom Settings (97)
- Star Community Showcase (72)
- Tips (31)
- Trendy CSS Help (2)
Forum Staff
Other Aimoo Forums
Title:Pommie's Tips&Tricks
Views: 1917
Views: 1917
Okidoki, I will post some of my experiments here with the CSS editor.
Mind you guys, I'm an amateur myself so all you pro-webdesigners,...don't laugh....lol
First tip is for placing the header image a little lower so that the image doesn't hit the ceiling and starts right off from the top of the screen.
The standard size for a Header image in the trendy-version is 1000 width.
Never mind the height, that can also be adjusted but the width is pretty much fixed as it is in pixels.
CSS is pretty much the same as html except it's far more efficient but also much more picky then html.
You need the exact name that is used for an element otherwise it won't recognize it.
If you would be designing a website from scratch it doesn't matter, you can name anyway you like but, this is a CSS editor wich means that aimoo named everything.
Luckily I have Google Chrome since shortly (thank you Karrier) and when I right-click on a piece of the forum and select inspect element there's a good chance I find the elements name.
That's what I call snooping...lol
When you have uploaded a header image and you would like to place it a little down from the top of the screen you go to;
Control Panel - Skin & Style - Forum CSS.
Don't be scared, you can't destroy anything....lol
In the empty white field you type;
.head_img {
margin-top: 20px;
}
then you click submit and the header image has moved a little down the page.
Mind you, CSS is particular about the dots and brackest you use.
Forget one puntuation, semicolon or use the wrong brackets and it won't change at all.
You need the curly braces and have to end each command with a semicolon followed by a closing bracket as I have typed in the example.
I think this will be enough for you to start playing with.
Hugs from Pommerlis.
Date Posted: 06/11/2009 10:02 AM
Share to:
I'm a graphics artist and I make images with various graphics software.
When I have a forum I want to adjust the forum to my images, not my images to my forum.
So for the welcoming part, I had created an image which was to high. If I made it any shorter it wouldn't be worth the trouble so I wanted to adjust the height of the welcome image/background.
Go to;
Control Panel - Skin & Style - Forum CSS
Then type;
.forum_name {
height:125px;
}
My image is higher then 125px, it's actually 172 px high.
You do need to fiddle a few time to get the correct height so it will look the way it should.
Thing is, don't make it to high though. It will really not look that great since it's meant to be an accent rather then an eye-catcher like the header itself.
But this is a part of the forum you can do some fun-parts with.
Hugz from Pommerlis
Date Posted:08/11/2009 3:48 AM
Share to:
O pooh,....then you made this gorgeous, cute welcome image and then this text is covering parts of it.
Welcome to & invite is all over your image and then some.
Like I said, the forum has to adjust to my images.
So I started snooping around as to which text that was and how I could center so it wouldn't be criss-cross over my breath-taking art.....ahem.
I found a way to do that.
Again, you go to;
Control Panel - Skin & Style - Forum CSS
and then I typed;
.f_columntitle_c {
margin-left: 100px;
}
I rather gave it a margin since that way I can change the size of the outline whenever I want to change the image.
I could have said also text-align: center; but aligning is usually an absolute fixed position as opposed to margins that can vary in different sizes.
I could use pixels, like here but also em which would look like 5em or something.
Hugz from Pommerlis.
Date Posted:08/11/2009 7:12 AM
Share to:
Did you guys notice?
There is the percentage in the Trendy version now. In the Edit-Skin when you select the size&width you can choose the option to set your trendy forum to 100%!
A percentage is a mathematical variable which means that 100% will fill up my wide screen the same way as it does a small-size monitor. I know,...I know,....I have to stop watching numb3ers so much......
But, this means that when I use images for my header I'll have to juggle to center them and position them the way I was used to.
In my Lab I have been practising with this.
How to have my preferred 100% and at the same time center my header image with no-repeating it?!
I'll give you my example I used in my Lab, of course you can use any old image.
First I go to my control panel and choose forum CSS.
I want a header image to sit on top of my forum so I write down the name of thingy I wish to change followed by the wacky bracket.
.head_img {
After that I enter and start to tell the CSS which particular part I wish to change. Don't forget the double-dots there.
background:
I would like the background to be my image I uploaded to photo-bucket so right after the double dots I give the CSS the url. It would start to look like this.
.head_img {
background: url
The url has to be the direct link or excact adress, included the exact name of the jpg.
.head_img {
background: url( *the direct link to the image* .jpg);
}
Now comes the tricky part. Telling the image where to go and not to repeat.
It took me a while to figure this one out since I expected all the commands to follow seperatly under each other on a new line but that wasn't the case.
To tell the header image to center and not repeat in thise case would be to let those command just follow the url after the bracket.
Like so;
.head_img {
background: url( *the direct link to the image* .jpg) no-repeat center;
margin-top: (space from the top screen)px;
height: (of you image background)px;
}
All the other commands such as margins & height can be written underneath the url.
And voíla, image inserted, centered and not repeating via CSS on a forum-width of 100%
Hope this helps any of you guys.
Hugz from Pommerlis.
Date Posted:29/11/2009 5:56 AM
Share to:
Hi Pommerlis,
Admin added the 100% option quite recently, I'm glad you find it useful. Thanks so much for posting all these little tips on using the CSS function, they'll be a great help to anyone wanting to use it, and it's very much appreciated.
Date Posted:29/11/2009 8:37 AM
Share to:
You're all very welcome. I enjoy doing this.
Incase anyone wants to snoop at what I'm up to in my Lab and what in the name of Cesar's poodle I'm talking about I'll give the link to my Lab.
Date Posted:03/12/2009 4:52 AM
Share to:
Okay, you can change and adapt any kind of background in the Trendy Version.
Except,....when you change the background of the Content Area it changes it to the same background as the Text-Area in the Threads.
Which means that if I use a Background image for the content area it will be the same background as in the posts in the Threads.
Hmmm....now I would like the Background of the Content Area to be a nice image with maybe a "Marble" effect but I would like the text-box in which I write my message and posts to be a single color.
I found a way to adapt that in the CSS function.
The Text-box in which you write your posts is called
.f_text_t
So you go to your Control Panel - Skin & Style - Forum CSS
In the text-area you write:
.f_text_t {
background-color: *Hexnumber of color for example* #FFFFFF;
}
Click Submit and voíla.
The area in which you type your posts will have a different background-color as your Content Area.
Don't forget the brackets, the : and the ;
At the moment I'm creating a new skin for my graphics forum in my Lab. If you would like to snoop around there, feel welcome.
Hugz from Pommerlis.
Hugz from Pommerlis.
Date Posted:28/12/2009 8:07 AM
Share to:
I also discovered how to create a nice little border around the text-area so the posted message will not hang in "mid-air" after it's posted.
For this you just add the right commands and the total code will look something like this;
.f_text_t {
background-color: *for example* #FFFFFF;
border: *for example* 1px;
border-color: * for example* #000000;
border-style: * for example* solid;
}
This whole code in the CSS will create a text-area for your thread-posts independant on how the background of your content area will look.
Hope this helps any.
Hugz from Pommerlis.
P.S.: For creating some space so that the letters don't appear to be glued to the border-line you might want to add some padding.
Just insert and add as command:
padding: 10px 10px 10px 10px;
(Message edited by Pommerlis On 28/12/2009 9:24 AM)
Date Posted:28/12/2009 9:18 AM
Share to:
This is great Pommerlis, thanks you.
I've just been over for a look and I love the way you've changed how your threads look, it makes them much easier to read with the border around the text. Great work.
Date Posted:28/12/2009 9:30 AM
Share to:
You're very welcome Dev.
I've uploaded the new skin to my "official"...forum today.
So the Lab is in a standard Aimoo skin again ready for new experiments.....lol
Anyhew, that text-area with borders can also be created in the "Today" page.
You know, when you click "Today" in the Trendy Version you get a list of all the most recent posts and messages. All in one long list.
I've "boxed" them in pretty much the same as the posts in the threads.
The text-area's on the Today-page is called the
.auto_scroll
Now it pretty much works the same as with the text-area;
Control Panel - Skin & Style - Forum CSS
.auto_scroll {
background-color: *any color of your choice for example #FFFFFF*;
border: 1px;
border-color: *any color of your choice for example #000000*;
border-style: solid;
padding: 12px 12px 12px 12px;
}
The padding, or the space between the actual content and the border-line can be changed to your needs aswell. Also the thickness of the border can be changed of course.
The border-style used is: solid but you could choice a different style like: dotted.
Click submit and voíla, text is boxed in on the Today page.
Date Posted:01/01/2010 7:41 AM
Share to: