The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Inspect Element and Css

5 posters

Page 1 of 2 1, 2  Next

Go down

Solved Inspect Element and Css

Post by Guest October 10th 2016, 11:00 pm

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/


Last edited by catgirl on October 23rd 2016, 11:11 pm; edited 1 time in total
avatar
Guest
Guest


Back to top Go down

Solved Re: Inspect Element and Css

Post by Ape October 11th 2016, 12:28 pm

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.


Inspect Element and Css Left1212Inspect Element and Css Center11Inspect Element and Css Right112
Inspect Element and Css Ape_b110
Inspect Element and Css Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Inspect Element and Css

Post by Guest October 11th 2016, 1:03 pm

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)?
avatar
Guest
Guest


Back to top Go down

Solved Re: Inspect Element and Css

Post by SLGray October 11th 2016, 8:49 pm

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


Inspect Element and Css Slgray10

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

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Inspect Element and Css

Post by Draxion October 11th 2016, 9:17 pm

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! Smile
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Solved Re: Inspect Element and Css

Post by Guest October 11th 2016, 9:55 pm

@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.
avatar
Guest
Guest


Back to top Go down

Solved Re: Inspect Element and Css

Post by SLGray October 11th 2016, 10:02 pm

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


Inspect Element and Css Slgray10

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

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Inspect Element and Css

Post by Guest October 11th 2016, 10:12 pm

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?
avatar
Guest
Guest


Back to top Go down

Solved Re: Inspect Element and Css

Post by SLGray October 11th 2016, 10:17 pm

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


Inspect Element and Css Slgray10

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

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Inspect Element and Css

Post by Guest October 11th 2016, 10:20 pm

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.
avatar
Guest
Guest


Back to top Go down

Solved Re: Inspect Element and Css

Post by SLGray October 11th 2016, 10:38 pm

I believe we are misunderstanding each other.

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


Inspect Element and Css Slgray10

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

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Inspect Element and Css

Post by Guest October 12th 2016, 12:38 am

yea I am not 100% getting it but I am trying, believe me. Smile 
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?
avatar
Guest
Guest


Back to top Go down

Solved Re: Inspect Element and Css

Post by Draxion October 12th 2016, 3:12 am

Yes that is correct.
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Solved Re: Inspect Element and Css

Post by Valoish October 12th 2016, 3:44 am

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
Valoish
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Inspect Element and Css

Post by SLGray October 12th 2016, 4:47 am

Thanks @Valoish .


Inspect Element and Css Slgray10

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

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Inspect Element and Css

Post by Valoish October 12th 2016, 5:09 am

SLGray wrote:Thanks @Valoish .
@SLGray No problem ^^ I hope it helped clarify things a bit more c:
Valoish
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Inspect Element and Css

Post by Guest October 12th 2016, 10:07 pm

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?
avatar
Guest
Guest


Back to top Go down

Solved Re: Inspect Element and Css

Post by Valoish October 12th 2016, 11:00 pm

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
Valoish
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Inspect Element and Css

Post by Guest October 12th 2016, 11:32 pm

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.
avatar
Guest
Guest


Back to top Go down

Solved Re: Inspect Element and Css

Post by Valoish October 13th 2016, 12:29 am

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"..
Valoish
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Inspect Element and Css

Post by Guest October 13th 2016, 12:48 am

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.
avatar
Guest
Guest


Back to top Go down

Solved Re: Inspect Element and Css

Post by Valoish October 13th 2016, 12:56 am

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.
Valoish
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Inspect Element and Css

Post by Guest October 13th 2016, 1:06 am

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.
avatar
Guest
Guest


Back to top Go down

Solved Re: Inspect Element and Css

Post by Valoish October 13th 2016, 1:14 am

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
Valoish
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Inspect Element and Css

Post by Guest October 13th 2016, 1:17 am

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

Edit

Nothing changed
avatar
Guest
Guest


Back to top Go down

Solved Re: Inspect Element and Css

Post by Valoish October 13th 2016, 1:53 am

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:
Valoish
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Inspect Element and Css

Post by Guest October 13th 2016, 1:56 am

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.
avatar
Guest
Guest


Back to top Go down

Solved Re: Inspect Element and Css

Post by Valoish October 13th 2016, 2:07 am

Did you replace the old code that you had with the one I posted?
Code:
$(function() {
    $.getScript("http://flyhigh2012.webstarts.com/SkullLights.js");
});
Valoish
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Inspect Element and Css

Post by Guest October 13th 2016, 2:09 am

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
avatar
Guest
Guest


Back to top Go down

Solved Re: Inspect Element and Css

Post by Valoish October 13th 2016, 2:12 am

That's odd.. It's still showing up in the Console..
Inspect Element and Css Cfb5fad9ef024847b7a06954f1b6cd61
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
Valoish
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Page 1 of 2 1, 2  Next

Back to top

- Similar topics

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