WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. petitebeautyblogger
    Member
    Posted 6 months 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 6 months 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 6 months ago #

    Hi,

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

  4. Laxman Prajapati
    Member
    Posted 6 months ago #

    Why ?

  5. petitebeautyblogger
    Member
    Posted 6 months 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 6 months ago #

    You are use wordpress CMS or other ?

  7. petitebeautyblogger
    Member
    Posted 6 months ago #

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

  8. Laxman Prajapati
    Member
    Posted 6 months 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 6 months ago #

    No I can't find it.

    Is there another way?

  10. Andrew
    Forum Moderator
    Posted 6 months 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 6 months 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 6 months 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 6 months ago #

    Try this URL:

    background: url("/wp-content/uploads/2014/01/img-thing.jpg")
  14. petitebeautyblogger
    Member
    Posted 6 months 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 6 months ago #

    Let's see the Webpage in question

  16. petitebeautyblogger
    Member
    Posted 6 months 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 6 months 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 6 months ago #

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

  19. Andrew
    Forum Moderator
    Posted 6 months 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 6 months ago #

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

  21. Andrew
    Forum Moderator
    Posted 6 months ago #

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

  22. petitebeautyblogger
    Member
    Posted 6 months 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 6 months ago #

  24. batharoy
    Member
    Posted 6 months 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 6 months 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 6 months ago #

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

  27. petitebeautyblogger
    Member
    Posted 6 months ago #

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

  28. Andrew
    Forum Moderator
    Posted 6 months ago #

    Yes

  29. petitebeautyblogger
    Member
    Posted 6 months 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 6 months 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%;
    }

Reply »

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.