WordPress.org

Forums

[resolved] 1) Add box with coloured fill? 2) Shorten box widths? (3 posts)

  1. lmighton
    Member
    Posted 9 months ago #

    To this webpage http://igrsj.test.sites.olt.ubc.ca/about-grsj/about-igrsj/, I wish for the quote at the top to be in a coloured box that has shorter widths than the page width.
    How do I do these two things?
    If CSS style, what code do I put into the HTML?
    Thanks
    Lisa

  2. RossMitchell
    Member
    Posted 9 months ago #

    It looks like you have already done this.
    I see
    <div style="border: 1px solid red; padding: 5px; margin: 5px;clear:both;width:500px;">
    While this works it is not respected as best practice. The modern concept is that layout and presentation is controlled by the css files (this permits flexibility like responding to various displays), and have the content in the page itself. Embedding layout codes in the div statement breaks this separation.
    Better practice is to put a class in the div, and put the styling in the css file. So the div would change to:
    <div class="quote">
    and in your style.css file you would have:

    .entry-content .quote {
     border: 1px solid red;
     padding: 5px;
     margin: 5px;
     clear:both;
     width:500px;
    }

    This will style all such blocks the same, if you want to make it specific to this post only you would change the leadin to:
    .blog-1842 .entry-content .quote {

  3. lmighton
    Member
    Posted 9 months ago #

    Thank you
    Lisa

Reply

You must log in to post.

About this Topic

Tags