[Resolved] How to implement a border

Home Forums Support [Resolved] How to implement a border

Home Forums Support How to implement a border

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #47253
    Achim Klein

    I’d like to implement a border left and right of the complete content to seperate optical between content and background. I tried border padding and margin with different classes, but without any success.
    With .inside-header it’s getting smaller, with .container it’s getting wider. For the navigation bar I didn’ find any possibility.

    Could you help me? Thanks a lot in advance.

    #47256
    Tom
    Lead Developer
    Lead Developer

    How about something like this?

    .inside-article {
          border: 1px solid #DDD;
    }
    #47272
    Achim Klein

    Hi Tom,

    many thanks for the very quick answer.
    With content I meant the complete site except the background, but inclusive the header, the navigation and the footer.

    .inside-article is only for the main article.
    Is there another class which I didn’t find?

    #47287
    Tom
    Lead Developer
    Lead Developer

    Give this a try:

    .container {
         border: 1px solid #DDD;
    }

    It may need a little tweaking, but that should be the element you’re looking for πŸ™‚

    #47338
    Achim Klein

    Thanks for the tip.
    Whether it was not exactly what I’m looking for, I found a solution.
    It was a combination of some classes:

    .site-header {
    	border-left: 40px solid #ABC6C9;
    	border-right: 40px solid #ABC6C9;
    }
    .main-navigation {
    	border-left: 40px solid #ABC6C9;
    	border-right: 40px solid #ABC6C9;
    }
    .container {
    	border-left: 40px solid #ABC6C9;
    	border-right: 40px solid #ABC6C9;
    }
    .site-footer {
    	border-left: 40px solid #ABC6C9;
    	border-right: 40px solid #ABC6C9;
    }
    #47406
    Tom
    Lead Developer
    Lead Developer

    Glad you found a solution! That’s a lot of border! πŸ˜‰

    #374572
    vemvem6

    I found this topic from search and it did MOST of job for me with

    `.inside-article { border: 1px solid #DDD; }’

    However, the section “leave a comment” is not addressed here (and the border effect is not applied). How can I target it with CSS?

    Thanks!

    #374708
    Leo
    Staff
    Customer Support

    This selector should work: .comments-area

    #375070
    vemvem6

    Awesome, thanks! Works like a charm πŸ™‚

    #375082
    Leo
    Staff
    Customer Support

    No problem πŸ™‚

    #430363
    jeremy

    HI IM TRYING TO ADD A BORDER TO MY WEBPAGE AROUND EVERYTHING INCLUDING HEADER IMAGE. I INSERTED THIS CSS BUT THE HEADER IMAGE HAS NO BORDER

    .site-header {
    border-left: 20px solid #222222;
    border-right: 20px solid #222222;
    }
    .main-navigation {
    border-left: 20px solid #222222;
    border-right: 20px solid #222222;
    }
    .container {
    border-left: 20px solid #222222;
    border-right: 20px solid #222222;
    }
    I WAS WONDERING THE WIDTH OF MY HEADER MAY BE SOMETHING TO DO WITH THIS ITS CURRENTLY SET AT 1300 PX
    PRETTY NEW TO CSS PLEASE BE GENTLE

    #430380
    Tom
    Lead Developer
    Lead Developer

    Have you considered doing something like this?: https://docs.generatepress.com/article/adding-a-container-wrapper/

    #430399
    jeremy

    Thanks for swift reply howecer this method dont seem to do anything i will have a play with it some more

    #430407
    Tom
    Lead Developer
    Lead Developer

    Once you’ve added the container div, you can apply a border to it which will surround every element within it. It should work perfectly for what you’re after πŸ™‚

    #430473
    jeremy

    cheers i played around a bit and added this
    body { border: 14px solid #222222}
    this seems to have done the trick. trouble is more luck than knowledge

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.