WordPress.org

Forums

Adelle
[resolved] Remove Zigzag lines in sidebar (33 posts)

  1. petitebeautyblogger
    Member
    Posted 1 year ago #

    Hi,

    I want to remove the zigzag lines on the sidebar and replace them with my own widget separator. I Have the image saved in my media library ready to use.

    .widget {
    background-image: url("IMAGE URL HERE");
    }

    I used the above Css code and added my file URL for the image but it doesn't appear to be working.
    What am I doing wrong!

    Thanks

    Reema

  2. Laxman Prajapati
    Member
    Posted 1 year ago #

    Hello Reema,

    Use this code :
    Your image insert in this directory: "project/wp-content/themes/yourtheme/images/"

    and this css file in add this code : "project/wp-content/themes/yourtheme/style.css"

    .widget {
    background: url("images/yourimage.png")
    }

    problem not solved than please give your site url than i help to you

    - Laxman

  3. petitebeautyblogger
    Member
    Posted 1 year ago #

    Hi,

    Sorry I can't locate the directory you have given me above.

  4. Laxman Prajapati
    Member
    Posted 1 year ago #

    Why ?

  5. petitebeautyblogger
    Member
    Posted 1 year ago #

    Use this code :
    Your image insert in this directory: "project/wp-content/themes/yourtheme/images/"

    I don't know where this can be found. I think I've misunderstood. What am I supposed to do with the above exactly?

  6. Laxman Prajapati
    Member
    Posted 1 year ago #

    You are use wordpress CMS or other ?

  7. petitebeautyblogger
    Member
    Posted 1 year ago #

    I'm using wordpress.org and customising with Css.

  8. Laxman Prajapati
    Member
    Posted 1 year ago #

    You are use wordpress cms than why not locate my below code

    you not fine this directort : project/wp-content/themes/yourtheme/images/ ?

    than you fine this directory : project/wp-content/themes/yourtheme ?

    find than create images new folder and insert in image

  9. petitebeautyblogger
    Member
    Posted 1 year ago #

    No I can't find it.

    Is there another way?

  10. Andrew
    Forum moderator
    Posted 1 year ago #

    Laxman is guessing the URL to your image, we don't actually know that. You should be aware of the path to your image that you want to use here.

  11. petitebeautyblogger
    Member
    Posted 1 year ago #

    I know where my image is saved, I have the URL as below

    http://www.petitebeautyblogger.com/wp-content/uploads/2014/01/img-thing.jpg

    but when I add it so the Css code below

    .widget {
    background: url("http://www.petitebeautyblogger.com/wp-content/uploads/2014/01/img-thing.jpg")
    }

    It doesn't remove the zigzag lines and replace it with the selected image.

  12. Andrew
    Forum moderator
    Posted 1 year ago #

    What is the issue specifically:

    1. You don't know where your image is that you want to use
    2. You know where your image is but the image doesn't display in the CSS

    Edit: Sorry I cross-posted just now

  13. Andrew
    Forum moderator
    Posted 1 year ago #

    Try this URL:

    background: url("/wp-content/uploads/2014/01/img-thing.jpg")
  14. petitebeautyblogger
    Member
    Posted 1 year ago #

    It doesn't work. I've added the code to the customer Css manager plugin. Is this right?

    I have also noticed that the image appears on the widget dashboard a few times and quite randomly over the page. If that makes sense.

  15. Andrew
    Forum moderator
    Posted 1 year ago #

    Let's see the Webpage in question

  16. petitebeautyblogger
    Member
    Posted 1 year ago #

    This is my site.

    http://Www.petitebeautyblogger.com

    I want to remove the sidebar zigzag lines and replace with my own image.

  17. Andrew
    Forum moderator
    Posted 1 year ago #

    Looks like you're not using the right CSS. This is a hint as to what CSS you should be using: http://snag.gy/cY3AT.jpg

    Which browser are you using by the way?

  18. petitebeautyblogger
    Member
    Posted 1 year ago #

    I'm using Internet explorer. I had to install the custom Css plugin to make other customisations.

  19. Andrew
    Forum moderator
    Posted 1 year ago #

    If you could switch to Chrome it has a built-in tool that lets you understand the underlying HTML and CSS to a Webpage.
    Just right click on the zigzag and press "Inspect element":
    http://developers.google.com/chrome-developer-tools/

  20. petitebeautyblogger
    Member
    Posted 1 year ago #

    I'm using Windows surface 2 and it's not possible to download chrome browser.

  21. Andrew
    Forum moderator
    Posted 1 year ago #

    Internet Explorer does have one built in too, http://msdn.microsoft.com/library/gg589507(VS.85).aspx

  22. petitebeautyblogger
    Member
    Posted 1 year ago #

    Thanks, I managed the zigzag lines into my image however all the lines have shifted up too much. How do I move them down so they separate each widget?

    This is the Css code that I used.

    .side-widget {
    padding: 20px 20px 30px 20px;
    margin-bottom: 20px;
    background: url('http://www.petitebeautyblogger.com/wp-content/uploads/2014/01/img-thing.jpg') no-repeat bottom center;
    overflow: hidden;
    clear: both;
    }

    http://Www.petitebeautyblogger.com

    Thanks

  23. Andrew
    Forum moderator
    Posted 1 year ago #

  24. batharoy
    Member
    Posted 1 year ago #

    Oh, you were so close @petitebeautyblogger. Prepend the class with side.

    .side-widget {
    background-image: url("IMAGE URL HERE") no-repeat bottom center;
    }
  25. petitebeautyblogger
    Member
    Posted 1 year ago #

    Hi,

    I've done that and it still doesn't work.

    http://www.petitebeautyblogger.com/wp-content/uploads/2014/01/line-2.jpg

    @batharoy - I've tried that Css code before and it didn't work. So I've reverted to the above. Any suggestions for the above problem?

    Thanks
    R

  26. Andrew
    Forum moderator
    Posted 1 year ago #

    There's still white space in your image, your image is 176 pixels tall

  27. petitebeautyblogger
    Member
    Posted 1 year ago #

    Does the white space at the moment need to be cropped out too?

  28. Andrew
    Forum moderator
    Posted 1 year ago #

    Yes

  29. petitebeautyblogger
    Member
    Posted 1 year ago #

    Ok it's worked but there's still some overlapping going on. What could be causing this? Could it be an image size issue?

    http://Www.petitebeautyblogger.com

  30. Andrew
    Forum moderator
    Posted 1 year ago #

    Try adding this:

    .side-widget {
        background: none;
        position: relative;
    }
    
    .side-widget:after {
        position: absolute;
        left: 0;
        bottom: 0;
        content: "";
        background: url('http://www.petitebeautyblogger.com/wp-content/uploads/2014/01/line2-e1389447387414.jpg') no-repeat bottom center;
        height: 55px;
        width: 100%;
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.