Board indexArtwork and ResourcesResourcesOther

Want to make a post? Click here to register. It's free!

The GIMP Community
 

Other

Css template + Gimp template = One Gimped out site.

Post a reply

Css template + Gimp template = One Gimped out site.

Postby rebaler » Fri Dec 05, 2008 12:31 am

I can not find any sites with a clear tut. on making sites with gimp. Most send you around to other sites, giving you he basic outline. I will try my best to write a Css/html code template that others can use to code their site.


The idea is, write a simple template witch allows others to simply add their sliced layout. Also I will add a transparent box with a code that will allow you to make your layout buttons clickable. If anyone wishs to help with the code or would like to supply a web site template for this I would be very grateful. I understand this might be in the wrong section of the forum, and I understand this might be unclear to some people. So plz mods plz move if this is in the wrong section >.<, and if anyone has any questions plz ask.
Members don't see the above ad. Register now - it's free!
rebaler
Jr. Member
 
Posts: 71
Joined: Mon Dec 03, 2007 2:14 am
Top

Re: Css template + Gimp template = One Gimped out site.

Postby sky-fyre » Fri Dec 05, 2008 1:12 am

im pretty good at css/html but ive only just started making css/gimp layouts, which suck =P

still, id love to help code =)
Image
User avatar
sky-fyre
Hero Member
 
Posts: 2124
Joined: Wed Aug 27, 2008 6:49 pm
Location: in the sky... where nobody can stop me.
Top

Re: Css template + Gimp template = One Gimped out site.

Postby rebaler » Fri Dec 05, 2008 1:16 am

:P well I'm allmost done with the basic code. I can send it to you to look over it when I'm done ( most likely tomorrow). It's allmost all CSS atm... Havn't made it to the HTML for text and links yet. I have it so you don't have to slice your picture... and I'm gunna have
p.text1
{
position:absolute;
left:0px;
top:0px;
}

for the text, with details on how to move it to the Spot they want... and such.
rebaler
Jr. Member
 
Posts: 71
Joined: Mon Dec 03, 2007 2:14 am
Top

Re: Css template + Gimp template = One Gimped out site.

Postby sky-fyre » Fri Dec 05, 2008 1:20 am

ah =) comments are so useful xD but i dont usually use them ... never really had a need.

i usually do the html first, then do the css so i can see what it looks like. not once yet ive done it css first then html. =P
Image
User avatar
sky-fyre
Hero Member
 
Posts: 2124
Joined: Wed Aug 27, 2008 6:49 pm
Location: in the sky... where nobody can stop me.
Top

Re: Css template + Gimp template = One Gimped out site.

Postby rebaler » Fri Dec 05, 2008 1:27 am

lol, I'm building off an old under work site file I made to mess around with CSS, I'm making all the "class"s first, ( I don't know the terms for CSS I just know enough to do what I want and I consider that good enough). Im not gunna be using a lot of Html , just some examples to include in the code mainly.. the rest of it is just images, and transparent boxs that in the html will be linked to whatever... The p.text thing above is to add text into the spots where you want it.
rebaler
Jr. Member
 
Posts: 71
Joined: Mon Dec 03, 2007 2:14 am
Top

Re: Css template + Gimp template = One Gimped out site.

Postby sky-fyre » Fri Dec 05, 2008 1:30 am

ah. i suggest also using id ... i discovered its usefullness recently ^_^ saves the typing time for p.text, which instead you could put #text and also less class's. if u understand wut i mean lol. i have a terrible time explaining things xD
Image
User avatar
sky-fyre
Hero Member
 
Posts: 2124
Joined: Wed Aug 27, 2008 6:49 pm
Location: in the sky... where nobody can stop me.
Top

Re: Css template + Gimp template = One Gimped out site.

Postby rebaler » Fri Dec 05, 2008 1:34 am

I think the classes would be easier for people without any knowledge of CSS. img = image, layout = your template. img class=layout = !put link to layout here! lol but what does the ID do? jw why are we having two convos? one here one in PMs lol >.<
rebaler
Jr. Member
 
Posts: 71
Joined: Mon Dec 03, 2007 2:14 am
Top

Re: Css template + Gimp template = One Gimped out site.

Postby rebaler » Fri Dec 05, 2008 2:03 am

-won't let me edit posts >.<-

I finished the first version of the CSS layout. Will now work on turning it into an external sheet with a few basic Html sheets to start people off with their site. Also I'll work on some code clips for people who want to know how to do something, but are unsure of how they go about doing it.

here it is: ( not completely done but it's a start)
Code: Select all
<HTML>

<HEAD>
<style type="text/css">
body
{
background-image:
url('  *Insert background* ')
}
img.layout
{
position:absolute;
left:50%;
top:4%;
}
p.text1
{
position:absolute;
left:0px;
top:0px;
}
p.text2
{
position:absolute;
left:0px;
top:0px;
}
img.click1
{
position:absolute;
right:50;
top:20;
}
img.click2
{
position:absolute;
right:370;
top:-10;
}

</script>
</HEAD>

<BODY>
<img class=layout>
<img class=>
<img class=>
<img class=>
<font color=>
<p class="text1">
</p>
<p class="text2">
</p>

</FONT></Body></HTML>


After the final version is made I will work on turning it into a tut.
rebaler
Jr. Member
 
Posts: 71
Joined: Mon Dec 03, 2007 2:14 am
Top

Re: Css template + Gimp template = One Gimped out site.

Postby The Gimp Pimp » Fri Dec 05, 2008 2:15 am

When you say making sites with Gimp what do you mean? Is it not the same process as it would be with anything really or are you using some plugin that slices it for you?

edit: i guess my question is "what makes this for gimp, and not just any program out there?" since all youre doing is taking the images and telling them where to go, the website making process has little to do with gimp
User avatar
The Gimp Pimp
Full Member
 
Posts: 136
Joined: Fri Oct 17, 2008 2:01 am
Top

Re: Css template + Gimp template = One Gimped out site.

Postby sky-fyre » Fri Dec 05, 2008 2:36 am

trudat. but for quite a while i used not a single image to make a layout. but that was before i knew how to use gimp better =D

rebaler wrote:I think the classes would be easier for people without any knowledge of CSS. img = image, layout = your template. img class=layout = !put link to layout here! lol but what does the ID do? jw why are we having two convos? one here one in PMs lol >.<


trudat too. id is pretty same as class i think. and i dunno why we has double convos. yoo started the pm convo =P

and rebaler, the code should look more like this(comments are bolded):

Spoiler: show
<html> dont use caps!

<head>
<style type="text/css">
body
{
background-image:
url(' /*Insert background*/ ') comments are /* */
}
img.layout
{
position:absolute;
left:50%;
top:4%;
}
p.text1
{
position:absolute;
left:0px;
top:0px;
}
p.text2
{
position:absolute;
left:0px;
top:0px;
}
img.click1
{
position:absolute;
right:50px; define wut "50" is. i use px.
top:20px;
}
img.click2
{
position:absolute;
right:370px;
top:-10px;
}

</style> script??
</head>

<body>
<img class="layout" src="" alt="" /> dont forget the source and alt text is useful if the image doesnt show. remember the / at the end - xhtml (things like ipods will ignore open tags but im not sure about imgs. just to be on the safe side ^^
<img class="" src="" alt="" />
<img class="" src="" alt="" />
<img class="" src="" alt="" />
<font color=""> font colour can be defined in css like this: p {color:#ff000}
<p class="text1">
</p>
<p class="text2">
</p>

</font>
</body>
</html>
Image
User avatar
sky-fyre
Hero Member
 
Posts: 2124
Joined: Wed Aug 27, 2008 6:49 pm
Location: in the sky... where nobody can stop me.
Top

Re: Css template + Gimp template = One Gimped out site.

Postby rebaler » Fri Dec 05, 2008 2:53 am

@ gimppimp
oh true... it's for any program basicly... don't have to slice it just insert and edit some things...

I guess its for gimp because this is a gimp forum idk... I kind of did this off the fly so...

@shadow
like using class's, defining the font color/style are easier in the html for new people to CSS mainly because they want to look at a group of <p class="text"> blah blah blah </p> and look right above it and see what font it is. but if they define it in the CSS sheet thats just as easy but it is not in the same file...


oh the script... that was from the old file, told you I built it off an old html/css file.. that was a lil bit of java... that i never got rid of I thought I had it all oh well
rebaler
Jr. Member
 
Posts: 71
Joined: Mon Dec 03, 2007 2:14 am
Top

Re: Css template + Gimp template = One Gimped out site.

Postby sky-fyre » Fri Dec 05, 2008 3:21 am

lol. i has a problem with bein more advanced than a newb and so i tend to do things the "better" way xD
Image
User avatar
sky-fyre
Hero Member
 
Posts: 2124
Joined: Wed Aug 27, 2008 6:49 pm
Location: in the sky... where nobody can stop me.
Top

Re: Css template + Gimp template = One Gimped out site.

Postby t2t » Fri Dec 05, 2008 2:20 pm

did anyone finish this tutorial.... i am visual, can do the graphics, do slices, but am seriously challenged at this css code and html together have me challenged... I have seen only one such tutorial and it was very complex. I would like to see a simple 2 page web site with visuals and code...

anyone know where to find this??? am sure that I am not alone with this request!!!

help me, I want to learn more,

t2t
t2t
Newbie
 
Posts: 9
Joined: Mon Dec 01, 2008 4:20 pm
Top

Re: Css template + Gimp template = One Gimped out site.

Postby sky-fyre » Fri Dec 05, 2008 8:03 pm

haha maybe i should do a tut somewhere squeezed onto my site :D would keep me busy, after i clean my room >.>
Image
User avatar
sky-fyre
Hero Member
 
Posts: 2124
Joined: Wed Aug 27, 2008 6:49 pm
Location: in the sky... where nobody can stop me.
Top

Re: Css template + Gimp template = One Gimped out site.

Postby t2t » Fri Dec 05, 2008 9:15 pm

u r too cute!

t2t
t2t
Newbie
 
Posts: 9
Joined: Mon Dec 01, 2008 4:20 pm
Top
Next
Post a reply

Return to Other

Powered by phpBB® Forum Software © phpBB Group
cron

Preset Styles

Pick variation:

Main Menu

Login

Who is online

Users browsing this forum: No registered users and 2 guests
Follow via Twitter Follow via RSS