|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
We have 2 logo's. A funfair one, and a themepark one. In the header I have some code which looks at the current catagory, and sets the logo. For the background image, we do things different. We have different default stylesheets, and set the stylesheet with the funfair background logo as default. Default link: http://themepark.nl/ubb/ubbthreads.phpWith funfair logo: http://themepark.nl/ubb/ubbthreads.php?ubb=postlist&Board=15Is there any other trick someone can suggest to accomplish the same, we'd rather go back to just one stylesheet instead of 2.
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
in your 1 stylesheet (extra css) have 2 classes
class1 { background logo 1)
class2 { background logo 2)
now in your header insert code, where you are now selecting based upon category, add an inline style to set whichever class (1 or 2) to also be display:none
that would allow whichever one to show thru, because the other one is hidden.
i wrote it real quick, but there are probably more smoother ways to do it.
i'll be back from 'day job' later on and re-think, if this doesn't seem too nice a solution.
|
|
|
|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
I'll be gone from dayjob in about 5 minutes, but fyi, our current solution has the background image in the general css properties > body background-image: url('/images/timmie_background.gif');Will play with your suggestion when I get back home and got food stuffed in me 
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
yah, i do div's in the top (above the nav bar) for the header image stuff and don't use the body background.
that's how the extra css section comes into play with the html header insert..
|
|
|
|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
and don't use the body background. Is the background we have now doable then (since it covers more space then just the header).
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
yes, you can do an inline style for the body as to which one you want to apply.
if i'm correct, the css files will be loaded before the html insert, so the insert can decide whether to leave the default body styling along or override it with it's own redefine inline body style.
this is just my intuition, before googling and finding out the true order..
i know that yahoo UI has an extensive writeup as to ordering css and .js includes and where the DOM finally becomes valid, if you want to have a looksee..
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
ok, rather than have a body { background:url(....); } just have the body styled without the background image.. then in your header insert.. or i assume that's where you do your conditional for the logo on the left now.. you'd have a div that is placed first in the content and also floated right that will either contain the default logo as it's background or the funpark one. by floating it right, you allow the other stuff to flow normally and you essentially simulate what the body tag's background was doing.. the way i'd do it with the styling would be.. 1. <div bg="normal-bg"></div> (if the normal theme) or 2. <div class="alt-bg"></div> 3. then all the other header insert stuff after whichever one 4. then go go extra css in style editor and just have those two classes. .normal-bg{background-image:url(/forums/path/to/normal.bg);} .alt-bg{background-image:url(/forums/path/to/alt.bg);} note: you use php in your header insert to select between 1 and 2 make sense ?
|
|
|
|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
Almost! Gonna play with it now! thx!
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
i hope it did, cuz i confused myself! 
|
|
|
|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
okay... Did the following steps as a test: Ripped out --- background-image: url('/images/timmie_background.gif'); background-repeat: no-repeat; background-position: top right; --- from the body properties. added --- .normal-bg {
background-image: url('/images/timmie_background.gif');
background-repeat: no-repeat;
background-position: top right;
}
.alt-bg {
background-image: url('/images/kermis_background.gif');
background-repeat: no-repeat;
background-position: top right;
}--- To the extra properties. added ---
echo "<div bg=\"normal-bg\"></div>";
--- way on top in the header, just after the <? This did not show my normal background. Anything I am missing here? Cause I am missing out (brainwise) on that floating stuff you mentioned 
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
no.. it's close tho.. .normal-bg {
background-image: url('/images/timmie_background.gif');
background-repeat: no-repeat;
background-position: top right;
float:right;
}
.alt-bg {
background-image: url('/images/kermis_background.gif');
background-repeat: no-repeat;
background-position: top right;
float:right;
}and at the top.. i assume you had php code to swap the logo.. but i'd assume it's like {start of insert}
<?php
if ($normaltheme == true) {
echo '<div class="normal-bg"></div>';
} else {
echo '<div class="alt-bg"></div>';
}
?>
... whatever html you have here for the rest of the insert {end of insert} this assumes you can set a variable $normaltheme to true when you are on one site / url and to false when on other one..
|
|
|
|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
Still no go...
Maybe background: #ffffff; is doing something in the body properties, but I removed that, and still no go.
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
bleh, you gonna make me test this thing on my local pc aren't you? i was just winging it and hoping.. ok. i'll fire up a local test and try it i'm gonna steal your bg images !! (for test only)
|
|
|
|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
i'm gonna steal your bg images !! (for test only) Steal all you want
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
ok, i got it.. first, disregard everything i have said in this thread so far second, we'll just play with the DOM instead. in your header (Default Header), just execute the following to set the background css on the fly (after DOM loads)... <script language="javascript" type="text/javascript">
image = '#FFFFFF url(/ubbthreads/images/alt-bg.gif) no-repeat scroll right top;';
document.getElementsByTagName("body")[0].style.background = image;
</script>
that little snippet will basically overwrite whatever you already had for the body { background: xxx } stuff. so, you really only want to execute that above code for the alternate background. i assume in your html include, you have a
if ($normal) then {
echo<<<AWHOLEBUNCHACRAP
<table><tr><td>hi</td></tr></table>
AWHOLEBUNCHACRAP;
} else {
echo<<<ALTERNATECRAP
<table><tr><td>teehee</td></tr></table>
<script language="javascript" type="text/javascript">
image = '#FFFFFF url(/ubbthreads/images/alt-bg.gif) no-repeat scroll right top;';
document.getElementsByTagName("body")[0].style.background = image;
</script>
ALTERNATECRAP;
}
so just include that javascript in your alternte branch an voila
|
|
|
|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
first, disregard everything i have said in this thread so far Never make me laugh again so hard at the beginning of a post where I have to read serious stuff later on
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
hehe, i didn't know a better way to clear you mind of the crap i had typed before hand .. hehe
|
|
|
|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
hehe, i didn't know a better way to clear you mind of the crap i had typed before hand .. hehe It did the job very well I have this in my testheader now: What a wonderfull header!<br /><br />
Merry christmas to all!
<script language="javascript" type="text/javascript">
image = '#FFFFFF url(/images/kermis_background.gif) no-repeat scroll right top;';
document.getElementsByTagName("body")[0].style.background = image;
</script>And wowie, the image is changed, but it's a little bit too low now. ( http://themepark.nl/ubbtest )
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
well, if it's too low, that should possibly be the other stuff you might have in your body class..
this is only replacing that ONE line in your css for the
background
tag..
oh and maybe i typed the wrong stuff that you had in your existing background tag.. it was a quickie..
what is the full css of your existing body class in the styles editor?
and i don't get 'what is too low' ? it's really just an image, upper right, no repeat.. so it's the same as on your other sites..
what am i missing ?
also, keep in mind that your other 2 boards (real ones) have a table with lotsa rows on the right hand side that pushes the navbar and breadcrumbs down further..
so i don't think you have a problem.. no?
|
|
|
|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
css body stuff: background: #ffffff;
background-image: url('/images/timmie_background.gif');
background-repeat: no-repeat;
background-position: top right;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 9pt;
align: left;
color: #000000;And Too low basicly means it isn't right on top see http://themepark.nl/ubb/ubbthreads.php vs http://themepark.nl/ubbtest/ubbthreads.phpUpdate: just tried the code at the live board, and it's even way lower there.
Last edited by blaaskaak; 09/13/2007 7:51 PM.
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
well i was assuming you had a combined background definition.. ie: on one line. i'd combine those 1st 4 lines into one background: xxxxxxx line. background: #ffffff;
background-image: url('/images/timmie_background.gif');
background-repeat: no-repeat;
background-position: top right;becomes background: #ffffff url('/images/timmie_background.gif') no-repeat top right;i'm not sure if my replace replaces all 4..
|
|
|
|
|
Joined: Jun 2006
Posts: 16,365 Likes: 126
|
|
Joined: Jun 2006
Posts: 16,365 Likes: 126 |
Here i was thinking just add a new div and have it start at your header insert, and remove on your footer insert... untested, but it'd be an easy if/else
|
|
|
|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
I did the replace of the background to your suggestion, and also tried it with the ubb default stylesheet, and it still puts the background image not right on top.
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
try it giz.. then get back to me, because i already ran into 2 problems with that approach anyway blaask, here's a screenie with the ONE line i was talking about.. so it works.. ![[Linked Image from blehnet.com]](http://blehnet.com/screenies/blaask.jpg) i must be missing something if that isn't correct or too lowmaybe it's cuz i need more coffee.. :shrug:
|
|
|
|
|
Joined: Jun 2006
Posts: 16,365 Likes: 126
|
|
Joined: Jun 2006
Posts: 16,365 Likes: 126 |
'eh I would, but I'm too tired/exhausted/burnt out so :shrug:
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
lol, did you look @ the 2 images ? one is offset and the other is not.. it's the difference in the background images themselves! themepark bg is flush to the top. kernblabla bg has a margin pusing it down 'eh I would, but I'm too tired/exhausted/burnt out so :shrug: well trust me, i just saved you some time
|
|
|
|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
maybe it's cuz i need more coffee.. :shrug: Nope, you just need to get your IE7 tab out Works in firefox, not in IE6 or IE7...
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
bleh, /me fires up IE tab  aha! ok.. now i know what you mean by 'too low' /me looks @ quirks.. back soon.. ok, one thing for sure.. changing to ONE line in css works in IE6, IE7, FF so it's just the replace that is going wrong right now. ok, IE wants 'setAttribute' and standard browsers don't care.. so we need to do it for both..
|
|
|
|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
/me Blaaskaak: hits refresh every minute to see what is changed in above post
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
ok. got it.. first, disregard everything i have sa... wait.. don't do that !! <script language="javascript" type="text/javascript">
var bodytag = document.getElementsByTagName('body');
bodytag[0].className = 'alt-bg';
</script>
notice alt-bg . that is the class that you will simply copy from your current body class and paste down into your Extra CSS area. just change the image to the alternate image and it should work for you this is better, cuz you can go with a full class definition instead of 1 line replace at a time..
|
|
|
|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
first thing is to ignore.... wait.. don't do that !! ehr, mr dude, it's 3:45 AM here, one more of those and I'll wake up everybody And FYI: It works! Thanks a million kazillion times plus 2! Just for you I will enhance my happy birthday island with the supermod coloring also!
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
congrats!!! btw, the new class name is 'globalmodname' good nite
|
|
|
|
|
Joined: Jun 2006
Posts: 16,365 Likes: 126
|
|
Joined: Jun 2006
Posts: 16,365 Likes: 126 |
saving time is good... my crippleness probably has wlked a good 50mi this week; then skootered around stores for another lol...
|
|
|
|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
I just implemented it on the forum, even the next day it still works
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
and even in IE ???
|
|
|
|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
and even in IE ??? Yep. And will test monday on a mac We have a mac in our office, which is only there to have a look if our websites and stuff work ok on a mac
|
|
|
|
|
Joined: Apr 2007
Posts: 3,940 Likes: 1
Former Developer
|
|
Former Developer
Joined: Apr 2007
Posts: 3,940 Likes: 1 |
you ever use browswercam ? http://www.browsercam.com/that's if you wanna test for every browser under the sun
|
|
|
|
|
Joined: Aug 2006
Posts: 1,359
Veteran
|
|
Veteran
Joined: Aug 2006
Posts: 1,359 |
you ever use browswercam ? Nope, but it's bookmarked, thx!
|
|
|
|
0 members (),
1,613
guests, and
50
robots. |
|
Key:
Admin,
Global Mod,
Mod
|
|
|
|
![[Linked Image from siemons.org]](http://www.siemons.org/foto/yarp.gif)
