Mr Awesome
|
Hey guys, because I couldn't find any quick tips on changing the menu and header to 100% width of the page while keeping the contents within the sheet - I thought I would just put it up for you all. You can thank me with money, women, food, games consoles and everything another time but for the moment have this :)
Step 1: Make your template
Make your template as you normally would (with the header and menu within the sheet)
Step 2: Export your template
As said
Step 3: Navigate to "index.php"
Extract your templates zip file and/or navigate to "index.php" within your template folder
Step 4: Swap some simple code
Search for the following:
<div class="art-Header">
<div class="art-Header-png"></div>
</div>
<jdoc:include type="modules" name="user3" />
I found it on line 30
Move it directly above:
<div class="art-Sheet">
<div class="art-Sheet-body">
Save (and if needed replace the zip file)
Step 4: Install the template
Congrats you now have 100% width on menu and header.
*BINNNNNNNG*
Tested on Opera, Firefox, IE8, Safari.
Sextackular!
|
| |
Mr Awesome
|
btw for an example: www.odyssey.co.im/affiliates ;)
|
| |
marcin
|
hi
it looks interesting. however i have one little problem:here is my code
<div class="art-sheet">
<div class="art-sheet-tl"></div>
<div class="art-sheet-tr"></div>
<div class="art-sheet-bl"></div>
<div class="art-sheet-br"></div>
<div class="art-sheet-tc"></div>
<div class="art-sheet-bc"></div>
<div class="art-sheet-cl"></div>
<div class="art-sheet-cr"></div>
<div class="art-sheet-cc"></div>
<div class="art-sheet-body">
<div class="art-header">
<div class="art-header-jpeg"></div>
<div class="art-logo">
<h1 id="name-text" class="art-logo-name"><a href="<?php echo $baseUrl; ?>/">Nazwa</a></h1>
<div id="slogan-text" class="art-logo-text">Tekst sloganu</div>
</div>
</div>
<jdoc:include type="modules" name="user3" />
as you can see, it is not exactly same way as you showed.between
<div class="art-Sheet">
<div class="art-Sheet-body">
i have another stuff.so where exactly should i paste and what. in yours example:
<div class="art-Header">
<div class="art-Header-png"></div>
</div>
<jdoc:include type="modules" name="user3" />
in between those lines i have another stuff again. could you help me with that?
thanks
|
| |
Mick
|
Quote marcin:
hi
it looks interesting. however i have one little problem:here is my code
<div class="art-sheet">
<div class="art-sheet-tl"></div>
<div class="art-sheet-tr"></div>
<div class="art-sheet-bl"></div>
<div class="art-sheet-br"></div>
<div class="art-sheet-tc"></div>
<div class="art-sheet-bc"></div>
<div class="art-sheet-cl"></div>
<div class="art-sheet-cr"></div>
<div class="art-sheet-cc"></div>
<div class="art-sheet-body">
--------
<div class="art-header">
<div class="art-header-jpeg"></div>
<div class="art-logo">
<h1 id="name-text" class="art-logo-name"><a href="<?php echo $baseUrl; ?>/">Nazwa</a></h1>
<div id="slogan-text" class="art-logo-text">Tekst sloganu</div>
</div>
</div>
<jdoc:include type="modules" name="user3" />
as you can see, it is not exactly same way as you showed.between
<div class="art-Sheet">
<div class="art-Sheet-body">
i have another stuff.so where exactly should i paste and what. in yours example:
<div class="art-Header">
<div class="art-Header-png"></div>
</div>
<jdoc:include type="modules" name="user3" />
in between those lines i have another stuff again. could you help me with that?
thanks
Just a suggestion, try moving your example code which is below the line to above <div class="art-sheet">. Thanks for the tip Mr A.
|
| |
marcin
|
hi
once i change things around, template doesn't show up at all. i know that moving that code is not a rocket science. meybe it just doesn't work with every single template?
|
| |
MR ABC-WESOME
|
Quote marcin:
hi
once i change things around, template doesn't show up at all. i know that moving that code is not a rocket science. meybe it just doesn't work with every single template?
Are you taking the whole divs?
if the CSS breaks it can mean you are leaving code behind and the code is cancelling out the template. this can be anything as little as a ";"
|
| |
Mr Awe-inspiring-some
|
Thanks mick also - you're right that should do it as that is the main container.
|
| |
marcin
|
hi
almost fixed. i managed to get menu bar stretched. i can't make header 100% witdh.
what i was doing wrong was copying not entire header tag. i collapsed those and copied collapsed header tag. then jdoc tag.
but i can't get the header streched.
half way through 
|
| |
MR AWESOME
|
Sounds like you're not taking the whole header tag with you, the header tag (in my case) was directly above the menu, as it's floating divs they will stretch right across and then go under
<div class="art-Header"> <div class="art-Header-png"></div> </div>
was my header code, basically anything within the art-header tag needs to be moved up, cut and paste worked fine for me, can you paste your code?
|
| |
marcin
|
hi
here is my code from body tag to banner1 postion:
<body>
<div id="art-page-background-glare">
<div id="art-page-background-glare-image"></div>
</div>
<div id="art-main">
<jdoc:include type="modules" name="user3" />
<div class="art-Header">
<div class="art-Header-jpeg"></div>
<div class="art-Logo">
<h1 id="name-text" class="art-Logo-name"><a href="<?php echo $baseUrl; ?>/">Nazwa</a></h1>
<div id="slogan-text" class="art-Logo-text">Tekst sloganu</div>
</div>
</div>
<div class="art-Sheet">
<div class="art-Sheet-tl"></div>
<div class="art-Sheet-tr"></div>
<div class="art-Sheet-bl"></div>
<div class="art-Sheet-br"></div>
<div class="art-Sheet-tc"></div>
<div class="art-Sheet-bc"></div>
<div class="art-Sheet-cl"></div>
<div class="art-Sheet-cr"></div>
<div class="art-Sheet-cc"></div>
<div class="art-Sheet-body">
<jdoc:include type="modules" name="banner1" style="artstyle" artstyle="art-nostyle" />
user3 is above header cos template is with menu bar above.
what do you think?
|
| |
MR AWESOME
|
What happens when you replace:
<div id="art-page-background-glare"> <div id="art-page-background-glare-image"></div> </div> <div id="art-main"> <jdoc:include type="modules" name="user3" /> <div class="art-Header"> <div class="art-Header-jpeg"></div> <div class="art-Logo"> <h1 id="name-text" class="art-Logo-name"><a href="<?php echo $baseUrl; ?>/">Nazwa</a></h1> <div id="slogan-text" class="art-Logo-text">Tekst sloganu</div> </div> </div>
with
<div id="art-page-background-glare"> <div id="art-page-background-glare-image"></div> </div> <div id="art-main"> <jdoc:include type="modules" name="user3" /> <div class="art-Header"> <div class="art-Header-jpeg"></div> <div class="art-Logo"> <h1 id="name-text" class="art-Logo-name"><a href="<?php echo $baseUrl; ?>/">Nazwa</a></h1> <div id="slogan-text" class="art-Logo-text">Tekst sloganu</div> </div> </div> </div>
it looks like you didn't close off one of your div tags
|
| |
MR AWESOME
|
And if that IS the case and you just moved the text, it's very likely the original </div> is somewhere in your code.
|
| |
MR AWESOME
|
Scratch that, I missed the </div> in your original code...
|
| |
MR AWESOME
|
Can you publish it so I can take a look?
did you look at your template.css for the header? width should be 100% instead of fixed width if it's specified
|
| |
MR AWESOME
|
I made a quick template for example - you might have this:
div.art-Header {
margin: 0 auto;
position: relative;
z-index:0;
width: 998px;
height: 100px;
}
div.art-Header-png {
position: absolute;
z-index:-2;
top: 0;
left: 0;
width: 998px;
height: 100px;
background-image: url('../images/Header.png');
background-repeat: no-repeat;
background-position: left top;
}
change the widths to 100%
|
| |
marcin
|
hi
i am sorry, but i work on local machine, so i can't publish it to the ftp,
what i did, is a changed widths to 100%, nothing has changed. As you noticed, i have jpg, insted of png. is that make any change?
i know, that jpg don't support alpha channel, png do support it. so i thought, that everything what you wrote is correct, i made it correct, only problem is type of file in header...
is that might be the issue?
|
| |
mr awesome
|
na that's not the prob, send me the template.css and index.php file (stevenazari at hotmail dot com)
and I'll see what I can do
|
| |
mr awesome
|
or send me the artisteer file :) hehe
|
| |
marcin
|
so which one...? artx or css and php? i use ver 2.3.
|
| |
marcin
|
because artx is just a standard generated template...
|
| |
marcin
|
it worked when i changed from no-repeat to repeat in template.css... but that mean no pics in header.
|
| |
marcin
|
wow! finally!!!
so what i did is:
like you wrote, i changed bacground repeat from no-repeat to repeat, then position is top left.
if i wouldn't change position picture would repeat itself and instead of one i could see two pics. with position top left, there is only one picture in the middle.
can you see two pics if you change position from top left to center?
that was tough but i think problem is solved.
thanks very much for the help
What do you think?
|
| |
MR AWESOME
|
Great :) should be helpful for people in the future :)
I never got that issue I'm affraid, working on a 1080 display and works with no probs, not sure how yours came about like that?
nice template btw
|
| |
marcin
|
well, thanks for the help mate.
i think that i will spend some time to play around with this. its definitely woth it.
thanks
|
| |
marcin
|
hi
sorry but again, its me.
well, i had problem with the header, right. I fixed it by extending jpg width. in that case you need really wide screen to see repetition of the header. It is up to you how wide you want to extend it. so, it is not 100% solution, only workaround. that's it. but works.
thanks
|
| |
n3t
|
Hi Mr Awesome, thanks so much for your guide works perfect for the header, though i'm trying to get the footer to be the same size.
so, when i move the footer code up above <div class="art-Sheet"> obviously the footer moves underneath the header, and the size is 100% of the page, when i move it back down the bottom, it goes back to the standard size.
how can i make the footer 100% in its current position?
thanks again.
n3t.
|
| |
marcin
|
hi
have you tried to move entire footer div right befeore
<p class="art-page-footer"><a href="http://www.artisteer.com/?p=joomla_templates">Joomla template</a> created with Artisteer.</p>
?
remember about template.css
all footer widths should be changed to 100% and background-repeat should have value repeat. it worked for me, maybe will work for you.
|
| |
n3t
|
Hi Marcin,
Thanks for your reply, i managed to resolve the problem by putting an extra </div> above the <div class="art-footer"> line
thanks all, very happy :)
n3t.
|
| |
enboy
|
Hello fellow Artisteer,
Has anybody tried adding a module position into the header, say puting a search module in the same area as the menu (user3) position in a template that was modified to have a fluid header, menu I'm having a hard time figuring this out as my module position goes behind the user3 position,
Any ideas on how to solve this.
Thanks
|
| |
mr awesome
|
you mean like here www.stevenazari.co.cc ? :)
need to follow my instructions above but instead of putting it in the header part gotta put it in the user3 area.
note: takes a little bit of fiddling as you need to get widths right and a little bit of tweaking with the menu css as well as ordering the modules correctly
|
| |