Inspect Element and Css

Hello. I did some research and everyone says that it is impossible to save any changes you make on the inspect element tool of any web page since it is just there for other purposes such as seeing and looking for the designs and such. So, I have the skeleton lights up on my forum and it brought my banner down plus the lights. meaning there are aren't at the top of the page. I fixed it in the inspect element tool by changing part of the position code unfortunately it doesn't save the change. Do I just copy and paste the whole code into the CSS a certain way or is there another way to save a change from the Inspect element. How do I move the code or do I even do that? What ways can I keep any changes I make?
I code I was playing around with was: 

Code:

element.style {
    margin-top: 145px;
    position: initial;
    min-height: 100%;
    top: 0px;
}

And in case you need my forum link. Here you go:
http://www.winxforevermagic.net/

Dear @catgirl


Please remember to use the Code tool in your editor when posting a code
Thank you.

When making a code overwrite some over code that is running you should put the following on the end
!important and your code should be put at the top or bottom of the CSS files.

That should fix your problem with it not taking affect.

Sorry, I forgot. I will remember that for next time.

Also, are you saying that I post the code in my css and put !important at the end and it will let me keep the changes I wanted to keep when I made the changes in the IE (inspect element)?

It will only work in the CSS stylesheet if the items have an ID.

Hi there,

I believe this will help you and your questions regarding CSS: https://help.forumotion.com/t145688-so-you-want-to-code-learning-resources#tuto-css

Have a good afternoon!

@SLgray
How will I know if the item has an ID? Will it be part of the code itself?
@Draxion
I will check that out now. Thank you! It seems so helpful.

For example:  The ID for the toolbar of the text editor is div.sceditor-toolbar.

Oh...Okay. I get it now. So, I am only able to keep the changes by putting it in my CSS if and only if that code has the ID?

Using the developer tools in yor browser does not add the codes to your forum.

Oh okay. I think I get what you're saying. So, I will not be able to change the way my forum is by added the code from my IE to the CSS?
I know that the IE only shows what is on the forum.

I believe we are misunderstanding each other.

If you use the developer tools, you can use the information in your CSS stylesheet.

yea I am not 100% getting it but I am trying, believe me.  
Okay, so let's try this again. So, you are saying that i can use the code in the Inspect Element Developing tool in my CSS to make the changes I wanted to save. Correct?

Yes that is correct.

You can use the code you have in your devtools, however you'd have to change the ID to match the element you are trying to target.
Right now it says "element.style" which is just a general ID that Chrome's devtools uses to target an element that you have clicked on while in devtools. For the styling/CSS attributes that you added to "element.style" to work on your forum via your CSS Stylesheet you'd have to know what the actual ID is of the element you are teying to edit on the forum itself.
So let's say you're trying to edit the text editor's toolbar (like SLGray suggested above). You can find the toolbar via your devtools and you'll notice that when you click on it and begin to edit the styling in devtools it'll say "element.style" but it would still style the toolbar. This is because you have the toolbar selected for editing within devtools. Once you've finished styling, you can copy the edited CSS from devtools and paste it in your CSS Stylesheet but you'd have to change "element.style" into "div.sceditor-toolbar" for the CSS to work properly on your forum.
The reason is because there is no element with the name "element.style" within your forum, so if you don't change the ID accordingly, your CSS Stylesheet won't know which elements to target with the specific styles.

Hopefully that made sense >< Typed it out on my phone so it was a tad bit uncomfortable and limiting LOL

Thanks @Valoish .

SLGray wrote:Thanks @Valoish .

@SLGray No problem ^^ I hope it helped clarify things a bit more c:

Okay. I am starting to get it now. Sorry, sometimes I am a little slow.
So, all I need to do for the one that i want to keep the changes for is just change the element.style and put something like DIV. in it so it will work?

Not just 'DIV'. You'd have to find out what the name is for the element you are trying to style.

Edit: Now that I got a chance to look at the console and elements in devtools I think it'd be best to edit the JS that is found in the hosting file/link.. But unfortunately you wouldn't have access to that.
When I opened the console and looked for the hosting site name (sd-1.archive-host.com) I found this:

Code:

$(function() {
  // Happy Halloween from Forumotion !
  // If you wish, you may change the images below
  var lightOff = 'http://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Halloween/skull10.png',
      lightOn1 = 'http://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Halloween/skull_10.png',
      lightOn2 = 'http://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Halloween/skull_11.png',
  wire = document.createElement('IMG'), d = document.createElement('DIV'), lights = 0, rotate = 'positive', o = 0, o_thn = o, o_thn_reg = new RegExp('hallowLight-'+o), p = 0, p_thn = p, p_thn_reg = new RegExp('hallowLight-'+p);
  wire.src = 'http://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Halloween/wire10.png';
  wire.setAttribute('style','position:absolute;left:0;top:0;transform:rotate(0deg)');
  d.innerHTML = '<img src="'+lightOff+'"><img src="'+lightOn1+'"><img src="'+lightOn2+'">';
  d.style.display = 'none';
  document.body.appendChild(wire);
  document.body.appendChild(d);
 
  newLight(10,70), newLight(80,80), newLight(155,85), newLight(235,75), newLight(320,45), newLight(400,0);
  window.setInterval(function() {
    if (o === 6) o = 0;
    if (p === 6) p = 0;
    if (o_thn === 6) { o_thn = 0; o_thn_reg = new RegExp('hallowLight-'+o_thn); }
    if (p_thn === 6) { p_thn = 0; p_thn_reg = new RegExp('hallowLight-'+p_thn); }
    var img = document.getElementsByTagName('IMG'), light_o = new RegExp('hallowLight-'+o), light_p = new RegExp('hallowLight-'+p);
    for (i=0; i<img.length; i++) {
      if (p_thn != p && p_thn_reg.test(img[i].className)) {
        img[i].src = lightOff;
        p_thn += 1;
        p_thn_reg = new RegExp('hallowLight-'+p_thn);
      }
      if (light_p.test(img[i].className)) {
        if (Math.abs(o - p) === 2 || Math.abs(o - p) === 3) {
          img[i].src = lightOn2;
          p += 1;
        }
      }
      if (o_thn != o && o_thn_reg.test(img[i].className)) {
        img[i].src = lightOff;
        o_thn += 1;
        o_thn_reg = new RegExp('hallowLight-'+o_thn);
      }
      if (light_o.test(img[i].className)) {
        img[i].src = lightOn1;
        o += 1;
      }
    }
  },750);
 
  window.setInterval(function() {
    var img = document.getElementsByTagName('IMG');
    for (i=0; i<img.length; i++) {
      if (/hallowLight/.test(img[i].className)) {
        var val = Number(img[i].style.transform.replace(/rotate\((-\d+|\d+)deg\)/,'$1'));
        if (val <= -10) rotate = 'positive';
        else if (val >= 10) rotate = 'negative';
     
        if (rotate === 'positive') {
          val += + 1;
          img[i].style.transform = 'rotate('+val+'deg)';
        }
        if (rotate === 'negative') {
          val += - 1;
          img[i].style.transform = 'rotate('+val+'deg)';
        }
      }
    }
    if (document.body.style.marginTop != '145px') document.body.style.marginTop = '145px';
  },100);

  function newLight(x, y) {
    var l = document.createElement('IMG');
    l.src = lightOff;
    l.className = 'hallowLight-'+lights;
    l.setAttribute('style','position:absolute;left:'+x+'px;top:'+y+'px;');
    document.body.appendChild(l);
    lights += 1;
  }
});

And from what I saw in Elements, this line is the one that's causing the issues and shifting down your forum by 145px:

Code:

    if (document.body.style.marginTop != '145px') document.body.style.marginTop = '145px';

I'm not 100% sure though since I have minimal experience with JS so I could be wrong xD

Thank you for that information and yea something is wrong with my forum since my banner size in the home page is different than the other pages and the shift is also a problem and I have been trying to figure out the issue and how to solve all this for about two months now. Is there a way I could check to see if that is the problem?To see if you are correct? Like, is it maybe in my CSS style sheet and I am not aware of it.  And also, to check which DIV each code in the IE leads to, how would I do that as well. Once I can do that, I will be able to do the rest probably If I am able to do so.

Well for the 145px shift to be fixed, the JS code snippet I posted above would have to be edited - however, that isn't on your end. So you'd either have to contact Ange Tuteur (since he's the one who provided the decorations) and ask whether that would be doable or not.
Or.. If you could open your devtools and paste in the styling you have in your first first post, and then screenshot the screen for me (so it looks something like this) I can show you which element you should try targeting in your CSS Stylesheet.

PS. I tested the following JS in devtools and it seemed to work (but the existing JS you have up is conflicting with the new test I did so if you decide to try this.. Be prepared to face some flickering LOL)

What is I did was this:
Ctrl+Shift+I (dev tools) > Sources (top nav bar) > Snippets (left-side nav bar) > Right-click > New > Paste the following:

Code:

$(function() {
  // Happy Halloween from Forumotion !
  // If you wish, you may change the images below
  var lightOff = 'http://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Halloween/skull10.png',
      lightOn1 = 'http://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Halloween/skull_10.png',
      lightOn2 = 'http://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Halloween/skull_11.png',
  wire = document.createElement('IMG'), d = document.createElement('DIV'), lights = 0, rotate = 'positive', o = 0, o_thn = o, o_thn_reg = new RegExp('hallowLight-'+o), p = 0, p_thn = p, p_thn_reg = new RegExp('hallowLight-'+p);
  wire.src = 'http://sd-1.archive-host.com/membres/up/132720629421430912/FDF/Decoration/Halloween/wire10.png';
  wire.setAttribute('style','position:absolute;left:0;top:0;transform:rotate(0deg)');
  d.innerHTML = '<img src="'+lightOff+'"><img src="'+lightOn1+'"><img src="'+lightOn2+'">';
  d.style.display = 'none';
  document.body.appendChild(wire);
  document.body.appendChild(d);
 
  newLight(10,70), newLight(80,80), newLight(155,85), newLight(235,75), newLight(320,45), newLight(400,0);
  window.setInterval(function() {
    if (o === 6) o = 0;
    if (p === 6) p = 0;
    if (o_thn === 6) { o_thn = 0; o_thn_reg = new RegExp('hallowLight-'+o_thn); }
    if (p_thn === 6) { p_thn = 0; p_thn_reg = new RegExp('hallowLight-'+p_thn); }
    var img = document.getElementsByTagName('IMG'), light_o = new RegExp('hallowLight-'+o), light_p = new RegExp('hallowLight-'+p);
    for (i=0; i<img.length; i++) {
      if (p_thn != p && p_thn_reg.test(img[i].className)) {
        img[i].src = lightOff;
        p_thn += 1;
        p_thn_reg = new RegExp('hallowLight-'+p_thn);
      }
      if (light_p.test(img[i].className)) {
        if (Math.abs(o - p) === 2 || Math.abs(o - p) === 3) {
          img[i].src = lightOn2;
          p += 1;
        }
      }
      if (o_thn != o && o_thn_reg.test(img[i].className)) {
        img[i].src = lightOff;
        o_thn += 1;
        o_thn_reg = new RegExp('hallowLight-'+o_thn);
      }
      if (light_o.test(img[i].className)) {
        img[i].src = lightOn1;
        o += 1;
      }
    }
  },750);
 
  window.setInterval(function() {
    var img = document.getElementsByTagName('IMG');
    for (i=0; i<img.length; i++) {
      if (/hallowLight/.test(img[i].className)) {
        var val = Number(img[i].style.transform.replace(/rotate\((-\d+|\d+)deg\)/,'$1'));
        if (val <= -10) rotate = 'positive';
        else if (val >= 10) rotate = 'negative';
      
        if (rotate === 'positive') {
          val += + 1;
          img[i].style.transform = 'rotate('+val+'deg)';
        }
        if (rotate === 'negative') {
          val += - 1;
          img[i].style.transform = 'rotate('+val+'deg)';
        }
      }
    }
    if (document.body.style.marginTop != '0px') document.body.style.marginTop = '0px';
  },100);

  function newLight(x, y) {
    var l = document.createElement('IMG');
    l.src = lightOff;
    l.className = 'hallowLight-'+lights;
    l.setAttribute('style','position:absolute;left:'+x+'px;top:'+y+'px;');
    document.body.appendChild(l);
    lights += 1;
  }
});

Then right-click the new snippet you made and click on Run.
You'll notice that your forum header and the halloween lights are flickering between the top of the page and slightly shifted down (this is because the current JS you have up [the one with a top margin of 145px] is conflicting with the test code I posted above [which has a top margin of 0px])

So what this shows is that your forum is being forced to shift down by 145px by default because of the coding within the original JS.
And the line that's causing this shift in the original JS is this one:

Code:

    if (document.body.style.marginTop != '145px') document.body.style.marginTop = '145px';

Which I replaced for the test with this one:

Code:

    if (document.body.style.marginTop != '0px') document.body.style.marginTop = '0px';

So, since the JS code overwrites the CSS of your forum I don't think you'd be able to style an element via your CSS.. Even if you try to force the styling using "!important"..

Okay. I tried out that code you sent me and you were right, it was flickering because it was being forced to shift. And you say that it may not be possible to move the code into my CSS because of what I have in the devTools or something.However, I am not quite getting what you want me to screen shot because it sounds like you want me to screenshot my forum plus the DevTools which is what you already screenshotted in your example. i think I tried the lights last year and they didn't cause a problem, I might have something in my JS or my CSS that may be causing the banner size issue and the lights plus banner shift on the homepage. I am not 100% sure though.

What I meant with the screenshot is.. You said you managed to fix the shift using the CSS you posted in your first post, but that it was targeting "element.style" which didn't work in your CSS Stylesheet for your forum, correct?
Do you remember which element you clicked on while in devtools that caused the CSS to work?
If you do, just copy and paste the styling from the first post into the dev tools and screenshot that so I can see which element you clicked and styled.

If they worked perfectly last year, try to disable your existing JS codes (all the codes except for the Halloween lights code) one by one in your ACP and see if the issue is resolved or not.
If it isn't resolved after you'd disabled the JS one by one then it has to be the coding within the Halloween ligts JS.

What I did was...
Copy and paste the element.style function of code into css amd it didn't fix the lights or the ahift. I need to fix the position for the lights to be fixed at the top. I don't know about the banner it has some issues no matter what I do yo it but I need to fix that with the size 145px part. When I try to uncheck the box, it just shifts and then checks it again. So it won't work.

And also, th3 lights were the first decor that I put up I think. So now with this information what should I do first to test this?
Ps sorry for any spelling erros. I typed this with my phone and my keyboard sucks.

Oh, so you were having the same issue as I was. I tried to uncheck "margin-top:145px" from the body of the forum and it would just tick it back. Which means the JS is overriding and forcing the CSS to have that 145px top margin. So to fix that, the JS code would have to be altered but that is on Ange's side of things so I'd shoot him a PM and link to this thread so he can take a look. Or tag him LOL

Regardless of whether they were the first decor or not, I'm sure you had other Javascript codes in your ACP before that so what I would do is disable all the JS that you had up already before you put in the lights and see what changes (if anything)

And nw LOL I'm on my phone as well so ik the struggle. Thank God for the semi-useful autocorrect xD

Yea well my autocorrect wants to create words unknown to English and i will try that,and see if anything changes.

Edit

Nothing changed

Then it's definitely the Halloween Lights JS.
Try replacing the JS code you got from this topic with this one:

Code:

$(function() {
    $.getScript("http://flyhigh2012.webstarts.com/SkullLights.js");
});

And let me know if it works. c:

Okay. Well I don't know if it's my phone but now the banner and the lights are still the way they were but it bounced up at down. Take a look and tell me wjat,it's doing to you.

Did you replace the old code that you had with the one I posted?

Code:

$(function() {
    $.getScript("http://flyhigh2012.webstarts.com/SkullLights.js");
});

Yes I did.

(Just to let u know. I'm going to sleep now. So I'll reply again in the morning and before I do,, I'll check the code agin)
Edit
Still bouncing

That's odd.. It's still showing up in the Console..

It might be lag on Forumotion's part so let's wait until tomorrow and see what happens.

If it keeps flickering, then just go back to using the old code you had, and contact Ange x_x