The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Change Post background According to Group

Page 2 of 3 Previous  1, 2, 3  Next

View previous topic View next topic Go down

In progress Change Post background According to Group

Post by Spyro Dragon™ on December 21st 2014, 12:27 pm

First topic message reminder :

You know how there is a way to change the background IMG of the post according to if your female or male. . . is there a way we can do this but according to group..

Like Group FireDragon - will have a fire picture for their post background
Group IceDragon - will have a ice picture for their post background


etc.. etc..

possible?

Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down


In progress Re: Change Post background According to Group

Post by Spyro Dragon™ on December 25th 2014, 3:11 pm

They both do the same thing.... but im not sure if I like it or not, I might acualy use this option if they want it full or scrolling like this LOL

but I still would like to the other one fixed in all browsers...what angi had gave me fixed it on my screen but screwd it up on other browrsers...


Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by _Twisted_Mods_ on December 25th 2014, 7:04 pm

{
min-height:100%;
min-width:100%
background-repeat: no-repeat;
}

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Spyro Dragon™ on December 26th 2014, 1:09 am

haha I like this one too but it just makes the big picture follow ...

I added it in css like this just incase I might have put it in wrong
.spyro-background{
background: url(https://i39.servimg.com/u/f39/16/87/57/90/lunapi11.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: auto;
min-height:100%;
min-width:100%;
background-repeat: no-repeat;
}



but yea that just makes it follow. which I like...I haven't tried a small picture with it yet

Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Spyro Dragon™ on December 26th 2014, 1:15 am

and its still screwd up on other browsers like chrome..
on chrome the picture repeats itself

Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by _Twisted_Mods_ on December 26th 2014, 1:40 am

.spyro-background{
background: url(https://i39.servimg.com/u/f39/16/87/57/90/lunapi11.gif);
background-size: 100% 100%;
min-height:100%;
min-width:100%;
background-repeat: no-repeat;
}

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Spyro Dragon™ on December 26th 2014, 2:44 am


Now it looks like this

Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by _Twisted_Mods_ on December 26th 2014, 4:28 am

ok last try then i give up



Code:
.spyro-background {


background:url(http://i39.servimg.com/u/f39/16/87/57/90/lunapi11.gif);


filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(


 � � � �src='http://i39.servimg.com/u/f39/16/87/57/90/lunapi11.gif',


 � � � �sizingMethod='scale');


-webkit-background-size: cover;


-moz-background-size: cover;


-o-background-size: cover;


background-size: cover;


background-position: left top;


background-repeat: no-repeat;


}


Last edited by _Twisted_Mods_ on December 26th 2014, 8:21 am; edited 1 time in total

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by SLGray on December 26th 2014, 4:47 am

Please when you post code use tbe code tags.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

In progress Re: Change Post background According to Group

Post by _Twisted_Mods_ on December 26th 2014, 8:20 am

sorry i don't mean to sometimes i just forget

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Spyro Dragon™ on December 26th 2014, 6:10 pm


That one made it look like this


if theres no way to fix it on all browsers .. IE, chrome, firefox... Is there a way to force people to use IE before loading into the site?

Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by _Twisted_Mods_ on December 26th 2014, 7:37 pm

yea but you will loose almost all of your members.. no one uses IE anymore its outdated and old news

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Spyro Dragon™ on December 26th 2014, 10:54 pm

well can you find a way to fix it on all browsers... u fixed it on IE but it looks messed up on chrome..and when u fix it on chrome its messed up on IE...thers no way to fix it on all browsers?


And maybe everyone that visits ur site uses chrome but most people who visit mine use IE according to google anyltics




I would still like it to look the same on all browsers...

Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Spyro Dragon™ on December 29th 2014, 2:29 am

Bump

Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by _Twisted_Mods_ on December 29th 2014, 2:40 am

well you can edit your overall_ header template and add somthing like this above </head>

Code:
<!--[if IE]>
    <style>
place the css you want to use for IE here
</style>
<![endif]-->

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Spyro Dragon™ on December 29th 2014, 4:38 am

so wut code works with chrome and the rest?

Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by _Twisted_Mods_ on December 29th 2014, 5:03 am

your regular css should work on the others find the css that works on all the other browsers other then IE and use it in your regular css

then for IE use the css that works for it in the code i mentioned above

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Spyro Dragon™ on December 29th 2014, 6:37 pm

where did i go wrong?


If theres no way to fix it, tell me how to make it to where a popup will say something like " for best experience use IE " and have them click on it and the site open in a new tab in IE

Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Spyro Dragon™ on December 30th 2014, 6:47 pm

Bump

Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Spyro Dragon™ on January 1st 2015, 7:58 am

Bump

Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Ange Tuteur on January 1st 2015, 9:09 am

Remove the current CSS and scripts, and try using this :
Code:
$(function() {
  customBg('Spyro ▀█▀ Dragon', 'spyro-background', 'http://i39.servimg.com/u/f39/16/87/57/90/lunapi11.gif');
  customBg('ᴛᴡɪʟɪ ▀█▀ ᴅʀᴀɢᴏɴ', 'twili-background', 'image_here');
 
 
  function customBg(name, classname, image) {
    var ua = window.navigator.userAgent;
    $('.post:has(.name:contains('+name+'))').addClass(classname);
    if (ua.indexOf('MSIE ') > 0 || ua.match(/Trident/)) $('head').append('<style type="text/css">.post.'+classname+' td { background:none }.post.'+classname+' {background: url('+image+') no-repeat transparent }</style>');
    else $('head').append('<style type="text/css">.post.'+classname+' td { background:none }.post.'+classname+' {background: url('+image+') no-repeat center center / 100% 100% transparent }</style>');
  }
})

It's the same, however, the bg css will be automatically generated. Since IE has a tiling problem with rows and cells, the IE sheet excludes resizing and position of the background image.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Spyro Dragon™ on January 3rd 2015, 3:09 am

Now its messed up on Chrome..but fixed on IE

Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Ange Tuteur on January 3rd 2015, 4:00 am

Okay, try this :
Code:
$(function() {
  customBg('Spyro ▀█▀ Dragon', 'spyro-background', 'http://i39.servimg.com/u/f39/16/87/57/90/lunapi11.gif');
  customBg('ᴛᴡɪʟɪ ▀█▀ ᴅʀᴀɢᴏɴ', 'twili-background', 'image_here');
 
 
  function customBg(name, classname, image) {
    var ua = window.navigator.userAgent, td = 'td';
    $('.post:has(.name:contains('+name+'))').addClass(classname);
    if (ua.match(/Chrome/)) td = 'td:last-child';
    if (ua.indexOf('MSIE ') > 0 || ua.match(/Trident/) || ua.match(/Chrome/)) $('head').append('<style type="text/css">.post.'+classname+' > '+td+' { background:none }.post.'+classname+' {background: url('+image+') no-repeat transparent }</style>');
    else $('head').append('<style type="text/css">.post.'+classname+' td { background:none }.post.'+classname+' {background: url('+image+') no-repeat center center / 100% 100% transparent }</style>');
  }
});

Chrome is a lot more iffy with this method, so we're only going to make the postbody have the background image for it.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Spyro Dragon™ on January 3rd 2015, 4:29 am

Its still fixed on IE , but on Chrome it stll Repeats itself..

Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Ange Tuteur on January 3rd 2015, 4:36 am

See if this fixed it :
Code:
$(function() {
  customBg('Spyro ▀█▀ Dragon', 'spyro-background', 'http://i39.servimg.com/u/f39/16/87/57/90/lunapi11.gif');
  customBg('ᴛᴡɪʟɪ ▀█▀ ᴅʀᴀɢᴏɴ', 'twili-background', 'image_here');
 
 
  function customBg(name, classname, image) {
    var ua = window.navigator.userAgent, td = 'td', gc = '';
    $('.post:has(.name:contains('+name+'))').addClass(classname);
    if (ua.match(/Chrome/)) td = 'td:last-child', gc = '.post'+classname+' > td:first-child{background:#000 !important}';
    if (ua.indexOf('MSIE ') > 0 || ua.match(/Trident/) || ua.match(/Chrome/)) $('head').append('<style type="text/css">.post.'+classname+' > '+td+' { background:none }'+gc+'.post.'+classname+' {background: url('+image+') no-repeat transparent }</style>');
    else $('head').append('<style type="text/css">.post.'+classname+' td { background:none }.post.'+classname+' {background: url('+image+') no-repeat center center / 100% 100% transparent }</style>');
  }
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Spyro Dragon™ on January 3rd 2015, 6:27 am

still jacked on chrome.. Maybe its because im looking at the site on chrome via Mobile?

Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Ange Tuteur on January 3rd 2015, 6:35 am

I forgot a decimal on one of the rules for chrome. grrr!!!!!

Try now :
Code:
$(function() {
 customBg('Spyro ▀█▀ Dragon', 'spyro-background', 'http://i39.servimg.com/u/f39/16/87/57/90/lunapi11.gif');
 customBg('ᴛᴡɪʟɪ ▀█▀ ᴅʀᴀɢᴏɴ', 'twili-background', 'image_here');
 
 
 function customBg(name, classname, image) {
  var ua = window.navigator.userAgent, td = 'td', gc = '';
  $('.post:has(.name:contains('+name+'))').addClass(classname);
  if (ua.match(/Chrome/)) td = 'td:last-child', gc = '.post.'+classname+' > td:first-child{background:#000 !important}';
  if (ua.indexOf('MSIE ') > 0 || ua.match(/Trident/) || ua.match(/Chrome/)) $('head').append('<style type="text/css">.post.'+classname+' > '+td+' { background:none }'+gc+'.post.'+classname+' {background: url('+image+') no-repeat transparent }</style>');
  else $('head').append('<style type="text/css">.post.'+classname+' td { background:none }.post.'+classname+' {background: url('+image+') no-repeat center center / 100% 100% transparent }</style>');
 }
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Spyro Dragon™ on January 3rd 2015, 7:10 pm

Now it doesn't even show up on either of them

Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Ange Tuteur on January 3rd 2015, 7:25 pm

I checked your forum and it looks like there's a period at the end of your script. Remove that and try again.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Spyro Dragon™ on January 3rd 2015, 7:28 pm

Where the heck did that period come from.. and finally solved..

Imma change my signature to
- Is there Anything thatAnge Tuteurdoesn't know?

Thanks Ange tuteur for saving my life yet again..



Wait I just realized something.. on IE its streached out.. on Chrome its different ..acualy that's fine..but on IE theres this annoying Black line how to remove it?

Spyro Dragon™
Forumember

Male Posts : 202
Reputation : 2
Language : English

http://SpyroDragon.com

Back to top Go down

In progress Re: Change Post background According to Group

Post by Ange Tuteur on January 3rd 2015, 8:12 pm

You're welcome Smile

That line comes from the tables border spacing. Try adding this to your stylesheet :
Code:
.forumline { border-spacing:0 }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Page 2 of 3 Previous  1, 2, 3  Next

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum