Title: code editor not working? Last modified: April 11, 2022 --- # code editor not working? * Resolved [flugzeug](https://wordpress.org/support/users/flugzeug/) * (@flugzeug) * [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/) * tl;dr: How can I change the declarations in the right column of siteorigin css? They don’t seem to belong to any of the selectors in the left column. * I am trying to change the background color of the main menu in mobile view (at the moment it is white text on white background). * I have plugged in Siteorigin css. In their editor, I have two windows below my page. The left is showing selectors; the right side is showing code variables. * Now, I can pick a selector and change properties. For instance, I can pick a red background, and that works nicely. HOWEVER, I want a transparent background. And this is where I get lost. * Because on the right hand window of the siteorigin css editor, CSS code variables are shown, including background-color: #f9f9f9. This seems to be the culprit, preventing my background image to show through. But I have no idea where this‘ background-color: #f9f9f9’ belongs or how to change it. * Where do the declarations in the right column belong and how can I change them? * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcode-editor-not-working-3%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 15 replies - 1 through 15 (of 15 total) * Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/) * (@misplon) * [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/#post-15554645) * Hi, thanks for reaching out. * Please, see the arrows in my screenshot: [https://imgur.com/a/mY1jYS6](https://imgur.com/a/mY1jYS6). The arrows indicate the chosen CSS selector. Add your declaration, such as a background color, and then click the Save icon if you’d like to continue editing or the Tick icon if you’d like to exit to the basic editor. In the basic editor, you’ll be able to see your changes written to CSS. * Thread Starter [flugzeug](https://wordpress.org/support/users/flugzeug/) * (@flugzeug) * [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/#post-15555283) * Hi, thanks for your support, and for the screenshot. Based on that, I think I can state my question more precisely. * As in your example, I can pick a selector and add/change declarations for that selector, e.g. the background color. In fact, that would be sufficient if I wanted to make the background, say, red. * But as I make the back-ground color transparent, there seems to be something underneath that is not transparent, masking the background image of my page. And I have no idea what, or which selector, is buggering things up for me. * The only suspicion is that the color is #f9f9f9, given as background-color in the window to the right of the one with the selectors. In your screenshot, too, the background-color for the chosen selector seems to be transparent, whereas it says: ‘background-color: #fff’ in the window on the right. * So how can I identify the selector giving me trouble; and where do the declarations in the window on the right come from? * I hope my questions make sense. * Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/) * (@misplon) * [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/#post-15555424) * Hi * _So how can I identify the selector giving me trouble;_ * In this instance, you’d need to a good understanding of HTML and CSS to locate the selector. * _and where do the declarations in the window on the right come from?_ * The selectors in the bottom panel are from the page source. * Please, send a link to the page you’re working on, and we’ll take a look. * Thread Starter [flugzeug](https://wordpress.org/support/users/flugzeug/) * (@flugzeug) * [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/#post-15563453) * The page I’m working on is auf-kante.de The issue arises in mobile view (i.e. small width window). In that case the primary menu is a dropdown, and the links are white text on white background. * _The selectors in the bottom panel are from the page source._ In addition to the selectors, there are CSS declarations in the window on the bottom right. The declarations shown change with the selector that I pick. However, they do not seem directly correlated with the picked selector, as I can change, say, the background-color of the selector; but the background-color in the bottom right window does not change accordingly. I’m puzzled. * Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/) * (@misplon) * [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/#post-15563515) * Hi, thanks for the link. * You can adjust the mobile menu link colors as follows: * ``` .ast-header-break-point .main-navigation ul .menu-item .menu-link { border-color: #000; color: #000; } [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg.ast-close-svg { fill: #000; } ``` * Astra theme support would probably be in the best position to assist with color changes if you aren’t able to locate the appropriate selector with SiteOrigin CSS. We can assist directly with Custom CSS within our premium support scope where we have the budget to do so. * Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/) * (@misplon) * [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/#post-15563539) * Regarding the bottom panel. The left pane at the bottom displays available CSS selectors found in the selected HTML. The pane on the right shows declarations linked to the chosen/selected selector. * Please, find a quick screenshot description here: [https://imgur.com/a/JF91giZ](https://imgur.com/a/JF91giZ). * Hope that helps. If you’re unable to make a particular change with SiteOrigin CSS, you can perhaps check if Astra has an available setting or if theme support can lend a hand. * Kind regards * Andrew - This reply was modified 4 years, 1 month ago by [Andrew Misplon](https://wordpress.org/support/users/misplon/). * Thread Starter [flugzeug](https://wordpress.org/support/users/flugzeug/) * (@flugzeug) * [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/#post-15565163) * I had tried those selectors to no avail. So I assume the challenge is–as you say–to dig into the whole thing to find the right selector. (I am a newbie, and still test-driving before committing to premium versions of SiteOrigin CSS and Astra). * Regarding the declarations on the right, I am still puzzled, though. They very much do not seem to be associated with the chosen selector: * The first screenshot has background-color black (#ffffff) for the chosen selector. However, the right hand pane says: background-color: #f9f9f9. Doesn’t matter, as I can make the background black. link: [https://imgur.com/a/FB4DQ1V](https://imgur.com/a/FB4DQ1V) * However, the second screenshot shows my problem. I can make the background for the chosen selector transparent, but something else is masking the image. And, again, the declaration in the right hand pane does not match the chosen selector. What is going on? link: [https://imgur.com/a/ggiI9WI](https://imgur.com/a/ggiI9WI) * Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/) * (@misplon) * [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/#post-15565172) * Hi, thanks for your reply. * The declarations in the right panel are the available declarations for the chosen selector, excluding your custom CSS. Your Custom CSS values won’t appear in the right panel; only the original value will. Hopefully, this helps to understand what you’re seeing. * Please, write your change to Custom CSS by clicking the tick icon. I can then take a look and see where the issue is. At the moment, a change for the mobile menu background color isn’t present in your Custom CSS. * Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/) * (@misplon) * [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/#post-15565179) * The background-color field doesn’t have a transparent option at the moment. In the following screenshot [https://imgur.com/a/ggiI9WI](https://imgur.com/a/ggiI9WI), if you click the tick button, there won’t be a value to write to Custom CSS. * `transparent` is a valid value for the `background-color` property: * [https://www.w3schools.com/cssref/pr_background-color.asp](https://www.w3schools.com/cssref/pr_background-color.asp) * You can select any color, save the change to Custom CSS and then change the value from the color you’ve chosen to `transparent`. * Regardless, please, save your changes to Custom CSS and I’ll take a look. * Thanks * Andrew * Thread Starter [flugzeug](https://wordpress.org/support/users/flugzeug/) * (@flugzeug) * [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/#post-15565550) * I have now chosen red as background color. (The code is: .main-header-menu.ast- nav-menu.ast-flex.submenu-with-border.astra-menu-animation-fade.stack-on-mobile{ background-color: red; } ) * The red color show is showing, when going to mobile view, i.e. a narrow browser window. Just the same, I _can_ type transparent, and it does save as custom CSS code. But I can’t see it, presumably because there is something else underneath it, that is opaque… * Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/) * (@misplon) * [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/#post-15565591) * Hi * The background color showing behind the mobile menu background color is added by the following selectors: * `.ast-mobile-header-wrap .ast-mobile-header-content, .ast-desktop-header-content` * Kind regards * Andrew * Thread Starter [flugzeug](https://wordpress.org/support/users/flugzeug/) * (@flugzeug) * [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/#post-15565950) * CSS go home, you’re drunk. * Tried the above, to no avail; and I have tried more to home in on what’s going wrong: * I made the background red with: .main-header-menu .menu-item { background-color: red; } * Next, I can add: .page_item.page-item-106.menu-item { background-color: X; } If X=blue, then one of the links is blue. But if X=transparent, then said link is white. What’s going on? Why would this link be red, but if I slap on a _transparent_ background, then it becomes white? I have no idea… * Plugin Author [SiteOrigin](https://wordpress.org/support/users/siteorigin/) * (@siteorigin) * [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/#post-15565975) * Hi, thanks for the update. * Ideally, theme support would be assisting with this theme-related customization. If you have any queries about the basic usage functions of SiteOrigin CSS, for example, the discussion we had about selectors and declarations, we can certainly assist within our free support scope. * Try removing your rules added for the menu and add the following: * ``` .ast-mobile-header-wrap .ast-mobile-header-content, .ast-desktop-header-content { background: rgba(255, 255, 255, 0.8); } .ast-header-break-point .main-header-menu { background-color: transparent; } .ast-header-break-point .main-navigation ul .menu-item .menu-link { border-color: #000; color: #000; } [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg.ast-close-svg { fill: #000; } ``` * That’ll add a slightly transparent mobile menu background with black links. I hope that helps as a starting point. You can set the 0.8 value to 0 if you want the background to be fully transparent. Unfortunately, I can’t assist with this customization much further but if you have any basic usage questions about the plugin, I’d be happy to help. * Thanks again. * Andrew * Thread Starter [flugzeug](https://wordpress.org/support/users/flugzeug/) * (@flugzeug) * [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/#post-15566507) * OK, I guess what I did is make all links blue; then one of them transparent, so it’s not blue anymore; answering my previous question. So the task is to identify all _objects_ underneath the menu links, and an associated selector… * Plugin Support [Andrew Misplon](https://wordpress.org/support/users/misplon/) * (@misplon) * [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/#post-15566534) * Thanks for the update. * If queries about the SiteOrigin CSS interface or functionality arise, please, let us know. * Kind regards * Andrew Viewing 15 replies - 1 through 15 (of 15 total) The topic ‘code editor not working?’ is closed to new replies. * ![](https://ps.w.org/so-css/assets/icon.svg?rev=2556879) * [SiteOrigin CSS](https://wordpress.org/plugins/so-css/) * [Support Threads](https://wordpress.org/support/plugin/so-css/) * [Active Topics](https://wordpress.org/support/plugin/so-css/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/so-css/unresolved/) * [Reviews](https://wordpress.org/support/plugin/so-css/reviews/) * 15 replies * 3 participants * Last reply from: [Andrew Misplon](https://wordpress.org/support/users/misplon/) * Last activity: [4 years, 1 month ago](https://wordpress.org/support/topic/code-editor-not-working-3/#post-15566534) * Status: resolved