1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How Do I Frame/ Box Text Like This?

Discussion in 'Web Design' started by JoeyHustler, Jul 22, 2017.

  1. JoeyHustler

    JoeyHustler Regular Member

    Joined:
    Sep 27, 2016
    Messages:
    214
    Likes Received:
    89
    Gender:
    Male
    I was on a website once and it showed a box like that, with images inside and text and a title and it looked really good, I have published a top 10 product review post but I want to frame each product review and I want the frame just to go around the content I want with images and paragraphs and links inside the frame, whenever i use Shortcode Ultimate it removes links,images, spaces, and it just looks f**cked.

    the box im talking about:
    [​IMG]

    Anyone know how to exactly do that with actual images, paragraphs inside the frame?
    thanks.
     
  2. jackalope

    jackalope Newbie

    Joined:
    Jun 13, 2017
    Messages:
    24
    Likes Received:
    9
    Are you using wordpress?
     
  3. JoeyHustler

    JoeyHustler Regular Member

    Joined:
    Sep 27, 2016
    Messages:
    214
    Likes Received:
    89
    Gender:
    Male
    Yes i am
     
  4. jackalope

    jackalope Newbie

    Joined:
    Jun 13, 2017
    Messages:
    24
    Likes Received:
    9
    Without doing too much coding you could add to your css file something like:
    Code:
    .outer {
    border:2px solid blue;
    background:lightblue;
    color:white;
    }
    
    .inner {
    background:white;
    color:black;
    padding:5px;
    }
    And then in the text version of the post you could paste in:
    Code:
    <div class="outer">
    header text goes here
    <div class="inner">
    body text/images/etc goes here
    </div></div>
    I'm assuming with this code that you're looking to have a bunch of boxes like that on any given post or page. If you just want one box like that, you would want to apply that css to the post, with the post title in the outer part and the post content in the inner. If that's the version link me to the site or something and I'll adjust the css.

    I've just set some text color names there, you would probably want to pick something more specific.

    Edit: the padding in inner might not be necessary, depending on what's already happening in your theme.
     
  5. AryabhattZero

    AryabhattZero Power Member

    Joined:
    Jul 28, 2015
    Messages:
    763
    Likes Received:
    296
    You forgot border-radius: 4px;
     
  6. jackalope

    jackalope Newbie

    Joined:
    Jun 13, 2017
    Messages:
    24
    Likes Received:
    9
    I totally didn't even notice it.
     
  7. JoeyHustler

    JoeyHustler Regular Member

    Joined:
    Sep 27, 2016
    Messages:
    214
    Likes Received:
    89
    Gender:
    Male
    Thank you, where does the border-radius go?
    What is your skype?