Previous Thread
Next Thread
Print Thread
Hop To
Joined: Aug 2006
Posts: 1,359
Y
Veteran
Veteran
Y Offline
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.php
With funfair logo: http://themepark.nl/ubb/ubbthreads.php?ubb=postlist&Board=15

Is there any other trick someone can suggest to accomplish the same, we'd rather go back to just one stylesheet instead of 2.


[Linked Image from siemons.org]
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
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
Y
Veteran
Veteran
Y Offline
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 smile


[Linked Image from siemons.org]
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
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
Y
Veteran
Veteran
Y Offline
Joined: Aug 2006
Posts: 1,359
Originally Posted by Sirdude
and don't use the body background.


Is the background we have now doable then (since it covers more space then just the header).


[Linked Image from siemons.org]
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
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
SD Offline
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
Y
Veteran
Veteran
Y Offline
Joined: Aug 2006
Posts: 1,359
Originally Posted by Sirdude
make sense ?


Almost! smile Gonna play with it now! thx!


[Linked Image from siemons.org]
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
Former Developer
Former Developer
Joined: Apr 2007
Posts: 3,940
Likes: 1
i hope it did, cuz i confused myself! laugh

Joined: Aug 2006
Posts: 1,359
Y
Veteran
Veteran
Y Offline
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
---
Code
.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
---
PHP Code

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 wink


[Linked Image from siemons.org]
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
Former Developer
Former Developer
Joined: Apr 2007
Posts: 3,940
Likes: 1
no.. it's close tho..

Code
.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 Code


<?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
Y
Veteran
Veteran
Y Offline
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.


[Linked Image from siemons.org]
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
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 laugh

i'm gonna steal your bg images !! (for test only)

Joined: Aug 2006
Posts: 1,359
Y
Veteran
Veteran
Y Offline
Joined: Aug 2006
Posts: 1,359
Quote
i'm gonna steal your bg images !! (for test only)


Steal all you want smile


[Linked Image from siemons.org]
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
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 laugh

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

Code
<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
PHP Code

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 wink

Joined: Aug 2006
Posts: 1,359
Y
Veteran
Veteran
Y Offline
Joined: Aug 2006
Posts: 1,359
Originally Posted by Sirdude
first, disregard everything i have said in this thread so far laugh


Never make me laugh again so hard at the beginning of a post where I have to read serious stuff later on smile


[Linked Image from siemons.org]
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
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 laugh

Joined: Aug 2006
Posts: 1,359
Y
Veteran
Veteran
Y Offline
Joined: Aug 2006
Posts: 1,359
Originally Posted by Sirdude
hehe, i didn't know a better way to clear you mind of the crap i had typed before hand .. hehe laugh


It did the job very well smile

I have this in my testheader now:

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


[Linked Image from siemons.org]
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
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
Y
Veteran
Veteran
Y Offline
Joined: Aug 2006
Posts: 1,359
css body stuff:

Code
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 smile

see http://themepark.nl/ubb/ubbthreads.php vs http://themepark.nl/ubbtest/ubbthreads.php

Update: 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.

[Linked Image from siemons.org]
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
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.

Code
background: #ffffff;
background-image: url('/images/timmie_background.gif');
background-repeat: no-repeat;
background-position: top right;

becomes
Code
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
UBB.threads Developer
UBB.threads Developer
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


I am a Web Development Contractor, I do not work for UBBCentral. I have provided free User to User Support since the beginning of these support forums.
Do you need Forum Install or Upgrade Services?
Forums: A Gardeners Forum, Scouters World
UBB.threads: UBBWiki, UBB Styles, UBB.Sitemaps
Longtime Supporter & Resident Post-A-Holic
VNC Web Services: Code Modifications, Upgrades, Styling, Coding Services, Disaster Recovery, and more!
Joined: Aug 2006
Posts: 1,359
Y
Veteran
Veteran
Y Offline
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.


[Linked Image from siemons.org]
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
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 wink

anyway blaask, here's a screenie with the ONE line i was talking about.. so it works..

[Linked Image from blehnet.com]

i must be missing something if that isn't correct or too low

maybe it's cuz i need more coffee.. :shrug:

Joined: Jun 2006
Posts: 16,365
Likes: 126
UBB.threads Developer
UBB.threads Developer
Joined: Jun 2006
Posts: 16,365
Likes: 126
'eh I would, but I'm too tired/exhausted/burnt out so :shrug:


I am a Web Development Contractor, I do not work for UBBCentral. I have provided free User to User Support since the beginning of these support forums.
Do you need Forum Install or Upgrade Services?
Forums: A Gardeners Forum, Scouters World
UBB.threads: UBBWiki, UBB Styles, UBB.Sitemaps
Longtime Supporter & Resident Post-A-Holic
VNC Web Services: Code Modifications, Upgrades, Styling, Coding Services, Disaster Recovery, and more!
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
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

wink

Originally Posted by Gizmo
'eh I would, but I'm too tired/exhausted/burnt out so :shrug:


well trust me, i just saved you some time wink

Joined: Aug 2006
Posts: 1,359
Y
Veteran
Veteran
Y Offline
Joined: Aug 2006
Posts: 1,359
Originally Posted by Sirdude
maybe it's cuz i need more coffee.. :shrug:


Nope, you just need to get your IE7 tab out smile

Works in firefox, not in IE6 or IE7...


[Linked Image from siemons.org]
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
Former Developer
Former Developer
Joined: Apr 2007
Posts: 3,940
Likes: 1
bleh, /me fires up IE tab tongue

aha!

ok.. now i know what you mean by 'too low' laugh

/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
Y
Veteran
Veteran
Y Offline
Joined: Aug 2006
Posts: 1,359
/me Blaaskaak: hits refresh every minute to see what is changed in above post smile


[Linked Image from siemons.org]
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
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 !! laugh

Code
<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 smile

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
Y
Veteran
Veteran
Y Offline
Joined: Aug 2006
Posts: 1,359
Originally Posted by Sirdude
first thing is to ignore.... wait.. don't do that !! laugh


ehr, mr dude, it's 3:45 AM here, one more of those and I'll wake up everybody smile

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! smile


[Linked Image from siemons.org]
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
Former Developer
Former Developer
Joined: Apr 2007
Posts: 3,940
Likes: 1
congrats!!!

btw, the new class name is 'globalmodname' laugh

good nite wink

Joined: Jun 2006
Posts: 16,365
Likes: 126
UBB.threads Developer
UBB.threads Developer
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...


I am a Web Development Contractor, I do not work for UBBCentral. I have provided free User to User Support since the beginning of these support forums.
Do you need Forum Install or Upgrade Services?
Forums: A Gardeners Forum, Scouters World
UBB.threads: UBBWiki, UBB Styles, UBB.Sitemaps
Longtime Supporter & Resident Post-A-Holic
VNC Web Services: Code Modifications, Upgrades, Styling, Coding Services, Disaster Recovery, and more!
Joined: Aug 2006
Posts: 1,359
Y
Veteran
Veteran
Y Offline
Joined: Aug 2006
Posts: 1,359
I just implemented it on the forum, even the next day it still works smile


[Linked Image from siemons.org]
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
Former Developer
Former Developer
Joined: Apr 2007
Posts: 3,940
Likes: 1
and even in IE ??? laugh

Joined: Aug 2006
Posts: 1,359
Y
Veteran
Veteran
Y Offline
Joined: Aug 2006
Posts: 1,359
Originally Posted by Sirdude
and even in IE ??? laugh


Yep. And will test monday on a mac smile

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 smile


[Linked Image from siemons.org]
Joined: Apr 2007
Posts: 3,940
Likes: 1
SD Offline
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
Y
Veteran
Veteran
Y Offline
Joined: Aug 2006
Posts: 1,359
Originally Posted by Sirdude
you ever use browswercam ?


Nope, but it's bookmarked, thx!


[Linked Image from siemons.org]

Link Copied to Clipboard
ShoutChat
Comment Guidelines: Do post respectful and insightful comments. Don't flame, hate, spam.
Recent Topics
Post Counts zeroed out
by Baldeagle - 11/03/2024 3:05 PM
Who's Online Now
0 members (), 1,613 guests, and 50 robots.
Key: Admin, Global Mod, Mod
Random Gallery Image
Latest Gallery Images
Los Angeles
Los Angeles
by isaac, August 6
3D Creations
3D Creations
by JAISP, December 30
Artistic structures
Artistic structures
by isaac, August 29
Stones
Stones
by isaac, August 19
Powered by UBB.threads™ PHP Forum Software 8.0.1
(Snapshot build 20240918)