Hi, Guest ~ Login or Register

How To Design CSS template like This

Posted in Website Designing » XHTML and CSS - Sunday 19th August 2007 at 12:30PM

cybersix
Member

User Avatar

Joined August 2007
Posts: 1

I'm interested in this wordpress theme..
http://www.blogohblog.com/wp-content/pop/2007/07/blogohblog.gif

http://www.blogohblog.com/wp-content/pop/2007/07/blogohblog.gif

Can somebody teach me how to coding that for normal CSS template ?
Not for wordpress..

__________________________________
 

Pages

You are on page 1 of 2, displaying a maximum of 20 replies starting from 0.
Pages: 1 » 2

Replies (21)

Replied - Friday 7th September 2007 at 1:31AM [Post Link]

Will
Administrator

User Avatar

Joined October 2005
Posts: 133
Howdy cybersix. First of all, try http://www.cssslicingguide.com/ - it was written by me, and I'm guessing you're just wondering how to slice.

__________________________________
Will Morgan
Freelance Web Developer
Next feature: How to fit 25 hours into a day!
 
Replied - Saturday 8th September 2007 at 1:14PM [Post Link]

Xplicid
Member

User Avatar

Joined April 2007
Posts: 56
How to make it into a normal, non wordpress layout?

Just go view -> Source, and copy it all. Then delete all the unwanted text.
But you don't learn anything thadda way. Do what Will shaid.

[That's seriously the easy way out.. If your wanting to learn, code it using the www.cssslicingguid.com/'s guide].

__________________________________
Go play in traffic. Thx. Luv ya.
 
Replied - Saturday 8th September 2007 at 2:14PM [Post Link]

adam2z
Member

User Avatar

Joined October 2005
Posts: 113
thats not actually learning though... is it rhys?

__________________________________
 
Replied - Saturday 8th September 2007 at 2:25PM [Post Link]

Xplicid
Member

User Avatar

Joined April 2007
Posts: 56
[QUOTE] adam2z said (8th September @ 13:14pm):

thats not actually learning though... is it rhys?



[QUOTE] Xplicid said:

[That's seriously the easy way out.. If your wanting to learn, code it using the www.cssslicingguid.com/'s guide].



._.

__________________________________
Go play in traffic. Thx. Luv ya.
 
Replied - Saturday 8th September 2007 at 2:33PM [Post Link]

adam2z
Member

User Avatar

Joined October 2005
Posts: 113
so we're in agreement. smashing! now fetch my top hat.

__________________________________
 
Replied - Saturday 8th September 2007 at 3:57PM [Post Link]

Alex
Member

User Avatar

Joined July 2007
Posts: 31
Looking through someone else's code is still learning.

__________________________________
Aim2Break Records
 
Replied - Saturday 8th September 2007 at 4:40PM [Post Link]

darkmonkey
Member

User Avatar

Joined June 2007
Posts: 9
It depends how well you look through it. Admittedly, I learnt like that, but some just can't.

__________________________________
 
Replied - Sunday 9th September 2007 at 1:18AM [Post Link]

Xplicid
Member

User Avatar

Joined April 2007
Posts: 56
I'm still learning like that. Almost every site I go to I look through their source.
But just because you view -> source, and copy and paste it doesn't mean you coded the layout. Leave the copyright there!

__________________________________
Go play in traffic. Thx. Luv ya.
 
Replied - Sunday 9th September 2007 at 3:27AM [Post Link]

Brad
Member

User Avatar

Joined April 2007
Posts: 85
Source viewers are there for a reason - it's not illegal to use them. Looking at sources is useful, but working out your own methods to do things is the fun way of doing things. It can be frustrating, and a great way to lose hair, but it's beneficial.

You'd want to start off by giving the body tag something like the following elements:

body {
background-color: #fff;
margin: 8px 12px 8px 12px;
font-family: "Verdana";
font-size: 12px;
}

Now for the header. This is easy, but first we're going to define the elements for the left and right sides (this doesn't gave to be exclusively used for the header, though...):

.left { text-align: left; float: left; }
.right { text-align: right; float: right; }
.clear { clear: both; }

As you can see, we've defined .left to align left (this is the position the text in that div), and float left (on the left side, basically). Exact same for the right, except we've aligned it right, and floated it left. The .clear class simply sets the sides of an element where other floating elements are not allowed (straight from w3schools).

Let's define the .header class:

.header {
background-color: #000;
color: #fff;
}

That's self-explanatory...

From there you should be able to figure it out. Just try, and if you can't figure it out, email me (look in my profile for my email). :)

__________________________________
Brad Purchase
Programmer, Designer, and Apple Tart.
 
Replied - Sunday 9th September 2007 at 10:15AM [Post Link]

Will
Administrator

User Avatar

Joined October 2005
Posts: 133
Why text-align: right; Brad?

__________________________________
Will Morgan
Freelance Web Developer
Next feature: How to fit 25 hours into a day!
 
Sponsored Link
Replied - Sunday 9th September 2007 at 11:11AM [Post Link]

Tubby
Member

User Avatar

Joined July 2007
Posts: 47
Brads coding can be crazy.

__________________________________
All posts are my own opinion.
 
Replied - Sunday 9th September 2007 at 2:31PM [Post Link]

Brad
Member

User Avatar

Joined April 2007
Posts: 85
Err, yeh. I like to be cautious. It should work though...

__________________________________
Brad Purchase
Programmer, Designer, and Apple Tart.
 
Replied - Sunday 9th September 2007 at 2:36PM [Post Link]

adam2z
Member

User Avatar

Joined October 2005
Posts: 113
the text-align right will align the text right, it has nothing to do with, and has no effect on the page's structure.

__________________________________
 
Replied - Tuesday 11th September 2007 at 2:35AM [Post Link]

Xplicid
Member

User Avatar

Joined April 2007
Posts: 56
He have an e-mail in his profile? Maybe one of you wouldn't mind e-mailing him telling him we've (Brad :D) actually helped him? One post, never to return. OH NOES!!

__________________________________
Go play in traffic. Thx. Luv ya.
 
Replied - Tuesday 11th September 2007 at 8:55PM [Post Link]

Brad
Member

User Avatar

Joined April 2007
Posts: 85
[s]I hate those kinds of people...[/s]

__________________________________
Brad Purchase
Programmer, Designer, and Apple Tart.
 
Replied - Tuesday 11th September 2007 at 10:17PM [Post Link]

Kyle
Member

User Avatar

Joined August 2007
Posts: 24
I think people get scared to easily.

__________________________________
Kyle Baker
Wanna be Programmer, Web Designer, Rockstar
 
Replied - Saturday 15th September 2007 at 9:23AM [Post Link]

Xplicid
Member

User Avatar

Joined April 2007
Posts: 56
[QUOTE] Kyle said (11th September @ 21:17pm):

I think people get scared to easily.



So true. Everything should be downgraded a notch. Noobs (as you call them) come here for help, and most times (not all) get shot down. "Search google fool".. "It's just a simple include" or whatever. If ya know what I mean..

No their not exact quotes.. But close to it.

You know I'm right.

__________________________________
Go play in traffic. Thx. Luv ya.
 
Sponsored Link
Replied - Saturday 15th September 2007 at 12:33PM [Post Link]

Will
Administrator

User Avatar

Joined October 2005
Posts: 133
If you want scary forums, check out Oink's forums. AND their IRC! Full of elitist faggots like myself, just worse.

__________________________________
Will Morgan
Freelance Web Developer
Next feature: How to fit 25 hours into a day!
 
Replied - Saturday 15th September 2007 at 12:48PM [Post Link]

adam2z
Member

User Avatar

Joined October 2005
Posts: 113
oink is intentionally an elitist community. they dont have to be welcoming, their product is just that good. AvengeX's product IS the community.

__________________________________
 
Replied - Saturday 15th September 2007 at 6:05PM [Post Link]

darkmonkey
Member

User Avatar

Joined June 2007
Posts: 9
Touché

__________________________________
 

Pages

You are on page 1 of 2, displaying a maximum of 20 replies starting from 0.
Pages: 1 » 2