Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Jan 2014
    Posts
    16
    Member #
    38303

    How to remove the background from an arbitrary text widget in sidebar (WORDPRESS)

    If you visit this site, Symposiarch | Communal Critical Thinking you will notice on the side bar there are greyish squares outlining the position of the widget. How can I remove this? Like where it says submit, I don't want to see anything but white space.

  2.  

  3. #2
    Senior Member DC Web Design's Avatar
    Join Date
    Jan 2014
    Location
    Washington, DC
    Posts
    128
    Member #
    38178
    Liked
    37 times
    Quote Originally Posted by BitchPussy View Post
    If you visit this site, Symposiarch | Communal Critical Thinking you will notice on the side bar there are greyish squares outlining the position of the widget. How can I remove this? Like where it says submit, I don't want to see anything but white space.
    Quick fix:

    .widget .textwidget { background: none !important; }
    Will take care of it.

    Ideally, you should go through your CSS files and just remove background styles for the .textwidget selectors. I saw a couple different instances in inspector.

  4. #3
    Junior Member
    Join Date
    Jan 2014
    Posts
    16
    Member #
    38303
    How do I locate these within the styles.css? I'm trying to use the developer tools in chrome (the inspect element thing) but I can't figure out how to select the box in order to know which files I will have to alter - the .widget .textwidget fixes.

  5. #4
    Senior Member DC Web Design's Avatar
    Join Date
    Jan 2014
    Location
    Washington, DC
    Posts
    128
    Member #
    38178
    Liked
    37 times
    When you select the .textwidget div in inspector, look to the right to see the file name and line number for the relevant CSS styles. This is one example:

    symposiarch.org/wp-content/et-content/forumengine/css/customization.css?ver=3.8.1:221

    Where customization.css is the file name at 221 is the line number. Ignore the ver=3.8.1.

  6. #5
    Junior Member
    Join Date
    Jan 2014
    Posts
    16
    Member #
    38303
    So I'm looking at the cusomization.css file, and where it says line 221, it does not correspond to the code as shown in the inspector. Although, it is not listed as customization.css, rather it is customization.less. I tried renaming the file extension to .css, then reopened it in coda, but no good; same results.

    It says .textwidget, .widget_pages ul {
    background-color: #f0f0f0; in the inspector element.

    When I open up the customization file instead of the background-color: #f0f0f0, there is @background instead. I replaced @background with none, but it just resulted in an error when reapplying the theme to my wordpress site.
    }

    I suspect I have to change an @background somewhere? Any ideas?

    Once again, thank you for help!!!
    Last edited by BitchPussy; Jan 30th, 2014 at 11:48 AM.

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    It's compiling the less file on the fly. It may be nested, something like:
    Code:
    .textwidget
        /*Some CSS*/
        .widget_pages
            /*Some CSS*/
            ul
                /*The CSS you're probably looking for*/
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Senior Member DC Web Design's Avatar
    Join Date
    Jan 2014
    Location
    Washington, DC
    Posts
    128
    Member #
    38178
    Liked
    37 times
    Ah, didn't realize this was a LESS deal. It makes it a little bit trickier to debug because the LESS code is probably nested (like Ronald mentions above). On top of that, the #f0f0f0 color might be stored in a variable (like @lightGreyColor). I'd just do a search in your code editor of choice in the customization.less file and do searches for background-color: and the like, you'll find it eventually.

    Perhaps the theme came with some documentation better documenting their LESS code.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:44 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com