Public Side SCSS/CSS

  • Resolved wp-fred

    (@wp-fred-1)


    5 years, 4 months ago

    Hi Bilal,

    Thanks for a great plugin! I really like the simplicity, design and functionality.

    Maybe I am overlooking how to add default scss/css which is applicable for all breakpoints. But I could not find in the documentation how to enable default scss/css, which is applicable for all breakpoints

    Feature Request:
    I am not sure if this is the appropriate place for feature requests, but I have the following feature request:

    When selecting “Frontend” in the metabox, I see all breakpoints, like Desktop, Tablet (horizontal), Table (vertical), Mobile (landscape), Mobile (portrait) and Retina.

    I think it would be more intuitive to have a Default/ALL TAB as well, where I can put all the ‘Default’ SCSS or CSS code. The code specific for each breakpoint I then can put in each TAB. Does this make sense?

    Thanks!
    wp-fred

    • This topic was modified 5 years, 4 months ago by wp-fred.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Bilal TAS

    (@bilaltas)

    5 years, 4 months ago

    Hi Fred,

    Thanks for your great feedback!

    To be able to have a default style file, you can simply create a new custom code and import it into the “Global” editor tab which has globe icon.(@import “xx-scss-desktop.scss”) So, you can use your SCSS variables in all of your breakpoints, including the global one.

    As I understand from your request, it’s also about the global editor. 🙂 You can write your general CSS/SCSS into the global editor, which has no media query. I’m calling it “Global Editor” because it’s being configured on settings page. With the “Mobile First” approach, it’s the “Mobile Portrait” tab. On “Desktop First” approach, the “Desktop” tab is the global editor, with an earth icon. 🙂

    Additionally, with the PRO version of Custom Codes we’re currently developing, you can simply select any custom code to import into your any custom code, without writing @import scripts.

    I hope these help you code better and faster with Custom Codes.

    Thank you again,
    Bilal

    Thread Starter wp-fred

    (@wp-fred-1)

    5 years, 4 months ago

    Hi Bilal,

    Sorry for my late reply. Thank you for reaching out.

    When using the global editor changes to css are not only valid for front-end but also applicable to back-end as well. Problem here is I am using dark-mode on front-end, but I don’t want to use dark-mode on back-end, which is simply not needed and a lot of extra work to get it done.

    So my css needs to be applicable to front-end only. Therefor I would like to have one tab with all major css settings, and a desktop, mobile, tablet, retina tabs for specific css settings related to screensize.

    Hope you understand the point.

    Thanks!
    wp-fred

    • This reply was modified 5 years, 4 months ago by wp-fred.
    • This reply was modified 5 years, 4 months ago by wp-fred.
    • This reply was modified 5 years, 4 months ago by wp-fred.
    Plugin Author Bilal TAS

    (@bilaltas)

    5 years, 4 months ago

    Hi Fred,

    Looks like it’s about the location you select. If it’s on “Everywhere”, acts like you mentioned. You should select “Frontend” option to make it applied to only frontend.

    For the SCSS settings, you can simply create an “Settings” custom code and @import it into the custom code you are working on. That’s the easiest solution for the free version.

    Please let me know if you still have any issue.

    Thanks,
    Bilal

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Public Side SCSS/CSS’ is closed to new replies.