4images Forum & Community
4images Modifications / Modifikationen => Templates & Styles (Requests & Discussions) => Topic started by: helvissa on February 23, 2007, 03:44:09 PM
-
Hello, I've had a look using "search" and can't find this, but I'm sure someone, somewhere must've asked this.
Here's my gallery: www.helvissa.com/gallery
All i've changed at the moment is the background colour in style.css.
What I'd like to do is make the gallery page look like the rest of the site, like here: www.helvissa.com/home.htm (the site's under construction, hence complete lack of content). The header is an image map.
How could I set up the gallery so it's, I suppose, embedded in one of my webpages, with the image map at the top so that people can navigate round the site?
(Please don't laugh at my design - it's very simple as I'm not a designer!)
-
you can modifly your templates to have this in it or just add it to the header.html.
Just make back ups before changing anything, that way if you dont like the way it looks you can revert back and try again or a different way.
-
(Please don't laugh at my design - it's very simple as I'm not a designer!)
Hello and welcome here;
I really like this fifties or sixties look. I remember such pictures as the swamp monster or the nutty professor... Why laugh?
If it can help, I have taken your code to begin to work on a a template visible here: helvissa first template (http://amissc.free.fr/4_2006/details.php?image_id=30)
Click on "Test template" to see its behaviour. And if you like it, simply click on "download" to have the whole template in a zip archive.
From here, you can begin to custom your template. Please feel free to ask any question.
Regards.
-
@manurom
That is very nice of you! I am guessing you didn't have much to do today :wink:
Why don't you design some templates for 4images and put in the forum? Looks like you are very good at it, so show your work off :D
(Please don't laugh at my design - it's very simple as I'm not a designer!)
Would never laugh as everyone has to start out somewhere
-
Why don't you design some templates for 4images and put in the forum?
Hi CeJay, and thanks
already done in respective forum, here: atoll template (http://www.4homepages.de/forum/index.php?topic=16392.0), and here: apple template (http://www.4homepages.de/forum/index.php?topic=16138.msg86885#msg86885). But I use to be a shy guy and not advertise my work.
I am guessing you didn't have much to do today :wink:
I did it with my 10 year old son and took us about 15 minutes, as 4images templates are really "user easy access", may I say, instead of some CMS where you loose your hair trying to custom :roll:. We captured helvissa's homepage, then downloaded the template with a mass downloader and last modified it. It hopely needed just some basic HTML skills.
@helvissa, I am awaiting your site's evolution. I will keep looking at it, and feel will enjoy its content.
Please feel free to ask help, as far as I would be able to.
Would never laugh as everyone has to start out somewhere
We all have been beginners at a time. I have learned a lot in this forum for free. I try to share my knowledge also for free, and I keep on learning.
BTW, many, many, many thanks to Acidgod, TheOracle, Chris, others and over all V@no for their submissions. They can't figure how much they have helped so much people using 4images' script.
-
BTW, many, many, many thanks to Acidgod, TheOracle, Chris, others and over all V@no for their submissions. They can't figure how much they have helped so much people using 4images' script.
I second that :!: :!:
-
Thank you CeJay! My next question was going to be, where do I edit it in the header, however.....
Manurom! You are officially AWESOME!!!! Thank you soooooo much for doing that for me. I'll definitely nab that if it's ok with you.
The website is for my band, so if you like 50's influenced music, hopefully you'll enjoy it. ;)
I do have some web design questions which aren't related to 4images, though - can I ask them here?
-
Ok, next question....!
To upload the template, do I just upload everything to the 4images directory on my site?
-
Hello;
unpack the downloaded zip file.
Then upload the entire folder called "helvissa" into your_site_gallery/templates/ folder
The structure will after be:
site_gallery_folder
|__admin
|__cache
...blah blah...
|__templates
|___default (folder)
|___helvissa (folder)
Feel free to contact through the forum or by PM.
-
I do have some web design questions which aren't related to 4images, though - can I ask them here?
Feel free to PM me. I will offer help on what ever I can.
However I don't know everything or would ever claim that I did, but some help is better then no help :wink:
-
Hello again, guys!
Right... I've uploaded all the files as in the instructions. I'm in the admin section, and in "General" I've gone to "Edit Templates". I've gone to "Select template-pack" and "helvissa" exists in the drop-down menu, so I've selected it, clicked load theme, and then scrolled down and clicked on "save changes". Then I click on "Go to the Gallery Home Page" but it's still the default. When I go back to "Edit Templates", it still says default in the "select template-pack" drop-down.
Erm... what's up with that???!
-
Nono!
Go to "General" >> "Settings", at the left.
Then choose at the right "General Settings" >> "Choose template directory" and there in the dropdown, select your template.
View attached image .
-
Ahhh! Ok... I've done that now. And... it works. Thank you! ;)
I want to change the colours of the gallery to match the rest of the site - do you know which files I need to go into to change them?
-
The template is driven by the file "style.css".
Edit it and make the changes you need. Every page layout will then change.
-
@ borniol
Can you give more description on what the layout looks like that you want implemented?
Maybe by providing a link. You can PM me the link if you want.
I can't speak for manurom (might agree tho) if it is something easy to do then can probably be no need to pay.
Also depending on the layout I think manurom is better fitted to design a custom template then I am. The few he has posted in previous post are nice templates and I have not done any to that extent yet.
In otherwards he is much better at it then I am :)
-
great, you should have your template in no time when you guys start working on it!
-
Thanks, Manurom. Now I need to work out which bits of the css to change!
The other thing I was going to ask is, can image maps go in css? (I mean in an ordinary webpage, not a 4images gallery css).
-
Thanks for the link! :D
I got a book out the library today ("Web Design in a Nutshell") and it looks like you can't put an image map in CSS. You can make an image map using CSS, but... I dunno... I think my head might explode!
-
Hi, everybody;
@helvissa, I think that thanks to borniol, you could find your own way to custom your site's colours.
I tried to get your imagemap CSS driven, and made this first release in style.css, adding theese lines:
/*--Helvissa's image map------------------------------------------------*/
#banner {
background-image: url(images/banner.jpg);
position:relative;
height: 250px;
width: 886px;
}
#menu a {
position: absolute;
height: 34px;
top: 214px;
text-decoration: none;
}
#menu a i { visibility: hidden; }
a#home { left: 30px; width: 64px; }
a#music { left: 104px; width: 67px; }
a#podcasts { left: 182px; width: 105px; }
a#info { left: 299px; width: 47px; }
a#gallery { left: 361px; width: 91px; }
a#forum { left: 463px; width: 75px; }
a#links { left: 545px; width: 66px; }
a#contact { left: 621px; width: 89px; }
I also changed the template file header.html like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{direction}">
<head>
<title>{site_name}</title>
<meta http-equiv="content-type" content="text/html; charset={charset}" />
<link rel="stylesheet" href="{template_url}/style.css" />
<script language="javascript" type="text/javascript">
<!--
var captcha_reload_count = 0;
var captcha_image_url = "{url_captcha_image}";
function new_captcha_image() {
if (captcha_image_url.indexOf('?') == -1) {
document.getElementById('captcha_image').src= captcha_image_url+'?c='+captcha_reload_count;
} else {
document.getElementById('captcha_image').src= captcha_image_url+'&c='+captcha_reload_count;
}
document.getElementById('captcha_input').value="";
document.getElementById('captcha_input').focus();
captcha_reload_count++;
}
function opendetailwindow() {
window.open('','detailwindow','toolbar=no,scrollbars=yes,resizable=no,width=680,height=480');
}
function right(e) {
if ((document.layers || (document.getElementById && !document.all)) && (e.which == 2 || e.which == 3)) {
alert("© Copyright by {site_name}");
return false;
}
else if (event.button == 2 || event.button == 3) {
alert("© Copyright by {site_name}");
return false;
}
return true;
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = right;
}
else if (document.all && !document.getElementById){
document.onmousedown = right;
}
document.oncontextmenu = new Function("alert('© Copyright by {site_name}');return false");
// -->
</script>
{if has_rss}
<link rel="alternate" type="application/rss+xml" title="{rss_title}" href="{rss_url}" />
{endif has_rss}
</head>
<body bgcolor="#FFFF99" text="#0F5475" link="#0F5475" vlink="#0F5475" alink="#0F5475">
<table width="886" height="250" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="886" border="0" cellspacing="0" cellpadding="0" class="tablehead">
<td>
</td><div align="center"><div id="banner">
<div id="menu">
<a href="http://www.helvissa.com/home.htm" id="home"><i>Home</i></a>
<a href="http://www.helvissa.com/music.htm" id="music"><i>Music</i></a>
<a href="http://www.helvissa.com/podcasts.htm" id="podcasts"><i>Podcasts</i></a>
<a href="http://www.helvissa.com/info.htm" id="info"><i>Info</i></a>
<a href="http://www.helvissa.com/gallery.htm" id="gallery"><i>Gallery</i></a>
<a href="http://www.helvissa.com/forum" id="forum"><i>Forum</i></a>
<a href="http://www.helvissa.com/links.htm" id="links"><i>Links</i></a>
<a href="http://www.helvissa.com/contact.htm" id="contact"><i>Contact</i></a>
</div>
</div></div>
</tr>
</table>
</td>
</tr>
</table>
As I am a Firefox user, I din't encounter any problem, until I tried it in MS Internet Explorer... what a mess!
The only way I found to solve my IE problems was to add theese non-sense lines in style.css:
/*--code below is to keep compatible with that boring MS IE-----------*/
a#home:hover,
a#music:hover,
a#podcasts:hover,
a#info:hover,
a#gallery:hover,
a#forum:hover,
a#links:hover,
a#contact:hover { border: none; }
Since there, it works for me both in IE and in FF. I did not try it in Opera browser.
BTW, the whole template had to be rewritten and has to be downloaded again entirely (sorry for this inconvenience).
As usual, live site result can be seen and downloaded here: http://amissc.free.fr/4_2006/details.php?image_id=32 (http://amissc.free.fr/4_2006/details.php?image_id=32)
Please test with your own browsers and feel free to post your impressions.
If it works for you, you only will have to change your links' urls once in the template file "header.html", to be shown in each template page.
@borniol: I had your pictures and began to work on it. Will tell you as soon as possible.
@helvissa, try to change the name of your image called "banner", as many adblock softwares block theese images. Simply call it "helvissa.jpg"...
@ all, regards.
-
Oh no!!! I better change it!
thanks for doing that, anyway. ;)
Can I add an image map to all my site's pages using CSS, then? Other than the gallery, that is? I thought it might be neater that way having it in CSS instead of having all that code stuff before the content of the pages.
(I hope it doesn't sound like an extraordinarily dense question to ask! And yes, I know it's a general html/css question....)
-
Hang on, I am being very dense. I think I can work out from those codes you've posted how to have css driving the image map on the rest of my site.
I'm quite excited as I've been reading about how to set out a webpage using css so it has different layout sections and you don't need to use a <table>! (see, I'm a nerd, I get excited by these things!) And then I read about the difference between jpg and gif and png and realised why some of the text imagey things I've been up to have gone awry. You do literally learn something new every day!
-
i've changed the colours as well now...
I used this: www.siteprocentral.com/html_color_code.html
Quite a handy little tool! All I did was type in the colour of the background and it came back with a palette of colours that go with each other.
-
I used this: www.siteprocentral.com/html_color_code.html
Quite a handy little tool! All I did was type in the colour of the background and it came back with a palette of colours that go with each other.
That is a nice little tool. I have used that several times before when building websites.
see, I'm a nerd, I get excited by these things!
Actually a lot of designers get this way when they start something new :wink:
-
i've changed the colours as well now...
I used this: www.siteprocentral.com/html_color_code.html
Quite a handy little tool! All I did was type in the colour of the background and it came back with a palette of colours that go with each other.
Hehe, I have had that saved in my favorites for awhile. It is a GREAT tool and have used many times. :)
-
Cool! It certainly did the job!