Yea everytime I copy n paste codes I also get the unnessasary Number line Right in front of it now, due to the forumotion.com's new theme or w\e


EXAMPLE...

instead of just copying the frkn code which I need to put in the CSS, I have to manulay remove every single frkn number infront of it...

Code:

1./* sticky nav main */
2.#fa_sticky_nav {
3.  font-size:0; /* hide whitespace */
4.  text-align:center;
5.  background:#FAFAFA;
6.  border-bottom:1px solid #CCC !important;
7.  height:30px;
8.  position:fixed;
9.  right:0;
10.  z-index:999;
11.  overflow:hidden;
12.  transition:top 200ms linear, width 600ms ease-in-out;
13.}
14.
15.#fa_sticky_nav li { display:inline } /* navlist adjustment */
16.
17.
18./* sticky menu links */
19.#fa_sticky_nav a.mainmenu {
20.  color:#39C;
21.  font-size:12px;
22.  font-weight:bold;
23.  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
24.  background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
25.  display:inline-block;
26.  padding:0 10px;
27.  height:30px;
28.  line-height:30px;
29.  transition:200ms;
30.}
31.
32.#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
33.  background-position:0 25px;
34.}
35.
36.
37./* sticky nav toggler */
38.#fa_sticky_toggle {
39.  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA;
40.  border:1px solid #CCC;
41.  border-right:none;
42.  display:inline-block;
43.  height:29px;
44.  width:30px;
45.  position:fixed;
46.  right:0;
47.  z-index:999;
48.  transition:top 200ms linear;
49.}
50.
51.#fa_sticky_toggle:hover { background-position:-30px 0 }
52.
53.
54./* make hidden toolbar similar to toggler */
55.#fa_toolbar_hidden {
56.  border-radius:0 !important;
57.  border:1px solid #CCC;
58.  border-right:0;
59.  border-top:0;
60.}
61.
62.
63./* post offset fix */
64..post div[style*="-30px;"] {
65.  top:-60px !important;
66.}


Dark theme : (Preview)

Code: Select Content


1./* sticky nav main */
2.#fa_sticky_nav {
3.  font-size:0; /* hide whitespace */
4.  text-align:center;
5.  background:#333;
6.  border-bottom:1px solid #222 !important;
7.  height:30px;
8.  position:fixed;
9.  right:0;
10.  z-index:999;
11.  overflow:hidden;
12.  transition:top 200ms linear, width 600ms ease-in-out;
13.}
14.
15.#fa_sticky_nav li { display:inline } /* navlist adjustment */
16.
17.
18./* sticky menu links */
19.#fa_sticky_nav a.mainmenu {
20.  color:#CCC;
21.  font-size:12px;
22.  font-weight:bold;
23.  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
24.  background:url('http://i21.servimg.com/u/f21/18/21/41/30/row10.gif') repeat-x 0px 30px;
25.  display:inline-block;
26.  padding:0 10px;
27.  height:30px;
28.  line-height:30px;
29.  transition:200ms;
30.}
31.
32.#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
33.  color:#FFF;
34.  background-position:0 25px;
35.}
36.
37.
38./* sticky nav toggler */
39.#fa_sticky_toggle {
40.  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnida11.png') no-repeat 0 0 #333;
41.  border:1px solid #222;
42.  border-right:none;
43.  display:inline-block;
44.  height:29px;
45.  width:30px;
46.  position:fixed;
47.  right:0;
48.  z-index:999;
49.  transition:top 200ms linear;
50.}
51.
52.#fa_sticky_toggle:hover { background-position:-30px 0 }
53.
54.
55./* make hidden toolbar similar to toggler */
56.#fa_toolbar_hidden {
57.  border-radius:0 !important;
58.  border:1px solid #222;
59.  border-right:0;
60.  border-top:0;
61.}
62.
63.
64./* post offset fix */
65..post div[style*="-30px;"] {
66.  top:-60px !important;
67.}

You can of course personalize the CSS to fit your forum. Wink

Exclamation Note : The navbar is fixed to 30 pixels in height ( height:30px; ), you can increase or remove this limit if your navlinks are becoming cut off.



 2. Installing the JavaScript

Now to install the sticky navbar go to Administration Panel > Modules > JavaScript codes management and create a new script.

Title : Sticky Navbar
Placement : In all the pages

Code: Select Content


1.(function() {
2.  if (!window.FA) window.FA = {};
3.  if (FA.Nav) {
4.    if (window.console && console.warn) console.warn('FA.Nav has already been defined');
5.    return;
6.  }
7.
8.  FA.Nav = {
9.   
10.    // TARGET NODES BY VERSION
11.    // PHPBB2  : .bodyline > table + table
12.    // PHPBB3  : #page-header .navlinks
13.    // PUNBB    : #pun-navlinks
14.    // INVISION : #submenu
15.    targetNode : '#page-header .navlinks',
16.   
17.    customNav : '', // custom navlinks
18.   
19.    keepDefault : true, // keep the default navlinks
20.    collapsible : true, // show hide button
21.   
22.   
23.    // offset states
24.    offsets : {
25.      tbVisible : {
26.        bottom : 30,
27.        top : '30px'
28.      },
29.     
30.      tbHidden : {
31.        bottom : 0,
32.        top : '0px'
33.      },
34.     
35.      toggler : '30px'
36.    },
37.   
38.    activeOffset : {}, // active offset for the sticky nav
39.   
40.    visible : false, // sticky nav is visible
41.   
42.    // check the state of the static nav
43.    checkState : function() {
44.      if (!FA.Nav.animating) {
45.        var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
46.     
47.        if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
48.          if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
49.          FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
50.          FA.Nav.visible = true;
51.        } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
52.          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px';
53.          FA.Nav.barSticky.style.top = '-30px';
54.          FA.Nav.visible = false;
55.        }
56.      }
57.    },
58.   
59.    animating : false, // sticky nav is animating
60.   
61.    // animate the sticky nav when the toolbar is toggled
62.    animate : function() {
63.      if (FA.Nav.visible) {
64.        FA.Nav.animating = true;
65.        FA.Nav.barSticky.style.transition = 'none';
66.     
67.        $(FA.Nav.barSticky).animate({
68.          top : FA.Nav.activeOffset.top
69.        }, function() {
70.          FA.Nav.barSticky.style.transition = '';
71.          FA.Nav.animating = false;
72.          FA.Nav.checkState();
73.        });
74.      }
75.    },
76.   
77.    // toggle sticky navigation and remember preference via cookies
78.    toggle : function() {
79.      if (FA.Nav.barSticky.style.width == '100%') {
80.        my_setcookie('fa_sticky_nav', 'hidden');
81.        FA.Nav.barSticky.style.width = '0%';
82.      } else {
83.        my_setcookie('fa_sticky_nav', 'shown');
84.        FA.Nav.barSticky.style.width = '100%';
85.      }
86.      return false;
87.    }
88.   
89.  };
90. 
91.  $(function() {
92.    // set default offsets based on toolbar state
93.    FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
94.    if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
95.   
96.    // find the static nav
97.    FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
98.   
99.    if (FA.Nav.barStatic) {
100.      FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
101.      if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
102.      FA.Nav.barSticky.id = 'fa_sticky_nav';
103.      FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
104.      FA.Nav.barSticky.style.top = '-30px';
105.         
106.      document.body.appendChild(FA.Nav.barSticky); // append the sticky one
107.         
108.      // sticky nav toggler
109.      if (FA.Nav.collapsible) {
110.        FA.Nav.toggler = document.createElement('A');
111.        FA.Nav.toggler.id = 'fa_sticky_toggle';
112.        FA.Nav.toggler.href = '#';
113.        FA.Nav.toggler.style.top = '-30px';
114.        FA.Nav.toggler.onclick = FA.Nav.toggle;
115.         
116.        document.body.appendChild(FA.Nav.toggler);
117.      };
118.       
119.      window.onscroll = FA.Nav.checkState; // check state on scroll
120.      FA.Nav.checkState(); // startup check
121.     
122.      // toolbar modifications
123.      $(function() {
124.        // animate sticky nav and change offsets when the toolbar is toggled
125.        $('#fa_hide').click(function() {
126.          FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
127.          FA.Nav.animate();
128.        });
129.       
130.        $('#fa_show').click(function() {
131.          FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
132.          FA.Nav.animate();
133.        });
134.      });
135.    }
136.  });
137.}());



Hey there,

Before pasting the code, make sure the text editor is set to the coding part, not WYSIWYG format.

Testing:

Code:

CSS Coding {
     background-color:  red;
     text-align:  center;
}

Result:
       CSS Coding {
           background-color:  red;
           text-align:  center;
       }

It works fine for me.  What are you using mobile device or PC?  Also which browser are you using?

Everyone who will be offering help, you need to understand that the topic starter is talking about copying and pasting code in the CSS stylesheet, which does not have a mode switcher.

I'm using Windows 10, PC  - And I like the old  Internet Explo still.

And I still get the numbers using the different editor.

1. CSS Coding {
   
2.      background-color:  red;
   
3.      text-align:  center;
   
4. }
   

I will record with bandicam on how I'm copy n pasting if needed lol.

Does this also happen on the forum, not just the CSS stylesheet? If it does, ask your members if they are having the same issue.

Here is a video of whats happening..
Just to verify, I'm having this problem on the forumotion.com forum,NOT my forum.

Why are you highlighting the code instead of using the select button?

The select button does not work for me Neither... Ill show you what that does.

This is starting to sound like a browser issue.  Have you tried any other browser?

Yup, i guess so, just tried with chrome, and select content works just fine... well thats a shame how i can't do it with Internet exploar guess imma just have to switch between the two.

[Solved]

I know this is archived, but I figured I'd give you some more information.

Technically, this shouldn't occur, because the line numbers are actually a CSS list-style-type ; it's not real text that you can copy, however, your version of IE seems to say different. This comes down to a browser problem, and to be perfectly blunt, IE is outdated and no longer supported by Microsoft, so you should really consider using a more up-to-date browser. Primarily because the internet will continue to evolve, and the more you stay on an older browser, the less compatible the internet will become.