WordPress.org

Ready to get started?Download WordPress

Forums

Iconic One
[resolved] shorten the division line between posts and sidebar widgets (5 posts)

  1. gagafashion
    Member
    Posted 9 months ago #

    Hi,
    there is a horizontal division line underneath each post and a vertical one between the posts and the sidebar widgets. And I would like to modify the latter.

    Currently it ends below the line underneath the last posts. I would love the vertical division line to end at the same level as the line underneath the last posts if possible.

    Can anybody help me do it?

    THANK YOU so much!

  2. linux4me2
    Member
    Posted 9 months ago #

    You would probably get more responses if you can post a link to your site; otherwise, only people running the same theme can respond. If you post a link to your site, anybody can take a look and give you a suggestion.

  3. gagafashion
    Member
    Posted 9 months ago #

    You are completely right. Thank you so much. The site is gagafashionland.com

    I tried everything I thought could modify the length of the line but most of the HTML codes unfortunately look like chinese to me...

    THANKS so much in advance!!!

  4. linux4me2
    Member
    Posted 9 months ago #

    The way the developer created the vertical line between the sidebar and the content was by adding the following on about line 1404 of your theme's style.css:

    .site-content {
        border-right: 1px solid #F1F1F1;
    }

    The lines between the content items are from this, on about line 874:

    .site-content article {
        border-bottom: 2px double #F3F3F3;
    }

    Since the article is inside the site-content div, and you have an additional element, the nav tags with the ID "nav-below" that has the "Older posts" navigation link, below the article and above the end of the site-content div, that accounts for the extra length of the right border.

    You have a few options. One would be to try moving the "nav-below" nav tag outside of the div with the ID "content" and see if that's enough. You'll may have to tweak the CSS of the "nav-below" element when you do that.

    The next option would be to add a div to enclose everything in "content" except that "nav-below" element, add a border-right for it, and remove the border-right for .site-content. You would add padding-right to the new div to move its right border out to where you want it.

    You would need to make the change--the added div or moved nav-below--for all your theme's pages; usually, that's index.php, single.php, and page.php so that it works on all the pages of the site.

    It's a 15-minute job for a developer, but if this HTML and CSS looks like Chinese to you, it's going to be a chore. It's worth learning, though.

    In any case, you really should create a child theme first and work with it so that your changes aren't overwritten if you ever update the parent theme.

  5. gagafashion
    Member
    Posted 9 months ago #

    THANK YOU!!!

Reply

You must log in to post.

About this Theme

About this Topic