Down with inline styles

  • The inline styles (e.g. style="display: block") hinder custom CSS coding. Instead, classes should be used (e.g. class="showsmoothscrollup") and a corresponding <style> should be added to the <head> (ideally before the theme stylesheet, so the stylesheet can easily overwrite the plugin’s <style>. Ideally, all of the styles (Pill, Tab, Text) should be done this way. The exact same effects that each of these produce can be achieved this way, allowing far easier customization.

    Otherwise, minimally there should be a “Custom CSS” or “No in-line styles” option included in the same dropdown as the Pill, Tab and Text options. With this option selected, there shouldn’t even be a <style> added to the head—there should only be the class change made when the viewer scrolls down to the set point of the page (e.g. class="hidesmoothscrollup" changes to class="showsmoothscrollup"). All the CSS coding would then be up to the web developer installing the plugin, making it 100% customizable with—no need to fiddle with trying to override CSS—and would allow for much cleaner code.

    That’s my suggestion for this plugin. Hope it helps. :j

    https://www.ads-software.com/plugins/smooth-scroll-up/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Konstantinos Kouratoras

    (@kouratoras)

    Hi!

    I just released 0.8 version with some code changes.

    The inline styles were replaced by one css and the according class for each situation, in order to reduce css files and remove all inline styles. I think it’s better this way now and it allows easier customization.

    Take a look, any feedback would be really appreciated.

    If you’re satisfied with that, you could change the 4-star rating to 5-star here:

    https://www.ads-software.com/support/topic/easy-scroll-to-top-solution

    ??

    Thread Starter Joe Rhoney

    (@joerhoney)

    I like the improvements you’ve made, it’s much better. You’re still using inline styles though, and these could be replaced with classes as well. Your JavaScript would just need to be modified to change classes instead of styles. That might be a big change though and I don’t know if all of your users would want that, which is why I recommended a new Custom CSS option. It would do nothing more than change the class when you scroll down to that certain point on the page.

    Also, just a suggestion (although it wouldn’t change my rating) consider writing your CSS selectors for the different button types like a.scrollup-pill instead of .scrollup-pill. The added a will make it more specific, thereby preventing a simple a{color:#006;} from overriding your text color (which would be likely to happen frequently). CSS coders will still be able to easily customize the text color, but won’t be forced to do so. I imagine a lot of your users are now finding that your scrollup buttons are using their website’s default link text colors instead of your packaged stylesheet’s link text colors as they were before you made this recent update.

    Hope that helps!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Down with inline styles’ is closed to new replies.