Css template + Gimp template = One Gimped out site.

Discussion in 'Other' started by rebaler, Dec 5, 2008.

  1. rebaler

    rebaler Member

    Joined:
    Dec 3, 2007
    Messages:
    71
    Likes Received:
    0
    Trophy Points:
    6
    Occupation:
    High school
    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.
     
  2. sky-fyre

    sky-fyre Active Member

    Joined:
    Aug 27, 2008
    Messages:
    2,126
    Likes Received:
    0
    Trophy Points:
    36
    im pretty good at css/html but ive only just started making css/gimp layouts, which suck =P

    still, id love to help code =)
     
  3. rebaler

    rebaler Member

    Joined:
    Dec 3, 2007
    Messages:
    71
    Likes Received:
    0
    Trophy Points:
    6
    Occupation:
    High school
    :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.
     
  4. sky-fyre

    sky-fyre Active Member

    Joined:
    Aug 27, 2008
    Messages:
    2,126
    Likes Received:
    0
    Trophy Points:
    36
    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
     
  5. rebaler

    rebaler Member

    Joined:
    Dec 3, 2007
    Messages:
    71
    Likes Received:
    0
    Trophy Points:
    6
    Occupation:
    High school
    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.
     
  6. sky-fyre

    sky-fyre Active Member

    Joined:
    Aug 27, 2008
    Messages:
    2,126
    Likes Received:
    0
    Trophy Points:
    36
    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
     
  7. rebaler

    rebaler Member

    Joined:
    Dec 3, 2007
    Messages:
    71
    Likes Received:
    0
    Trophy Points:
    6
    Occupation:
    High school
    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 >.<
     
  8. rebaler

    rebaler Member

    Joined:
    Dec 3, 2007
    Messages:
    71
    Likes Received:
    0
    Trophy Points:
    6
    Occupation:
    High school
    -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:
    <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.
     
  9. The Gimp Pimp

    The Gimp Pimp Member

    Joined:
    Oct 17, 2008
    Messages:
    136
    Likes Received:
    0
    Trophy Points:
    16
    Home Page:
    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
     
  10. sky-fyre

    sky-fyre Active Member

    Joined:
    Aug 27, 2008
    Messages:
    2,126
    Likes Received:
    0
    Trophy Points:
    36
    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

    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):

    <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>
     
  11. rebaler

    rebaler Member

    Joined:
    Dec 3, 2007
    Messages:
    71
    Likes Received:
    0
    Trophy Points:
    6
    Occupation:
    High school
    @ 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
     
  12. sky-fyre

    sky-fyre Active Member

    Joined:
    Aug 27, 2008
    Messages:
    2,126
    Likes Received:
    0
    Trophy Points:
    36
    lol. i has a problem with bein more advanced than a newb and so i tend to do things the "better" way xD
     
  13. t2t

    t2t New Member

    Joined:
    Dec 1, 2008
    Messages:
    9
    Likes Received:
    0
    Trophy Points:
    1
    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
     
  14. sky-fyre

    sky-fyre Active Member

    Joined:
    Aug 27, 2008
    Messages:
    2,126
    Likes Received:
    0
    Trophy Points:
    36
    haha maybe i should do a tut somewhere squeezed onto my site :D would keep me busy, after i clean my room >.>
     
  15. t2t

    t2t New Member

    Joined:
    Dec 1, 2008
    Messages:
    9
    Likes Received:
    0
    Trophy Points:
    1
    u r too cute!

    t2t
     
  16. rebaler

    rebaler Member

    Joined:
    Dec 3, 2007
    Messages:
    71
    Likes Received:
    0
    Trophy Points:
    6
    Occupation:
    High school
    I plan on making a Tut. for how to mod the code to your needs after we get a good solid flawless code made by our lovly shadow
     
  17. sky-fyre

    sky-fyre Active Member

    Joined:
    Aug 27, 2008
    Messages:
    2,126
    Likes Received:
    0
    Trophy Points:
    36
    =) just lemme see what uve got and ill fix 'er up =D
     
  18. rebaler

    rebaler Member

    Joined:
    Dec 3, 2007
    Messages:
    71
    Likes Received:
    0
    Trophy Points:
    6
    Occupation:
    High school
    I haven't had time to edit it from what i posted here a page back...
     
  19. sky-fyre

    sky-fyre Active Member

    Joined:
    Aug 27, 2008
    Messages:
    2,126
    Likes Received:
    0
    Trophy Points:
    36
    oh ok. well, ill look at it =)
     
  20. rebaler

    rebaler Member

    Joined:
    Dec 3, 2007
    Messages:
    71
    Likes Received:
    0
    Trophy Points:
    6
    Occupation:
    High school
    lol, doing a touch up for a friend... here face looks sooooooooooooooooooooooo smooth, like creepy perfect smooth, thanks to blur and smudge
     

Share This Page