double columns with highlights

  • Unknown's avatar
    gotmaester · Member ·

    I have the following for double columns:

    In my post:

    xxxxx text goes here xxxxx

    In the CSS.


    .my-columns {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
    }

    Is there a way for me to create special styles (i.e. highlight, italics, etc.) for text found only in the above container, so that I can use the WP drop down styles feature h1, h2, h3 while working with text in “my-columns” class (and not have it effect text elsewhere)?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    gotmaester · Member ·

    Here is a page where I am using this script:

    https://game-of-thrones-episodes.com/2017/07/19/the-end-of-house-frey/

  • Unknown's avatar
    gotmaester · Member ·

    What I am thinking of is creating a series of styles and putting them into the CSS as such.

    For example, (not something i would use–just for demonstration purposes)

    .my-columns h6 {
    font-size: 10pt;
    color: red;
    text-align: left;
    font-weight: 100;
    }

    But this does not work, apparently it conflicts with the following CSS that I have elsewhere in the code.

    div.single h6 {
    font-size: 12px;
    color: black;
    font-weight: 100;
    line-height: 1.25;
    margin-top: 15px;
    margin-bottom: 15px;
    }

  • Unknown's avatar
    gotmaester · Member ·

    Since no on is helping me, I am assuming that what I requested can’t be done.

    But can someone please check the following and let me know if they see anything wrong?

    .my-columns {
    padding-left: 15px;
    padding-right: 15px;
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
    font-size: 10pt;
    margin-top: 10pt;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
    margin-bottom: 20px;
    column-rule-width:1px;
    -webkit-column-rule-style: outset;
    -moz-column-rule-style: outset;
    -webkit-column-rule-color: #ccc;
    -moz-column-rule-color: #ccc;
    -column-rule-style: outset;
    -column-rule-color: #ccc;
    }

    https://game-of-thrones-episodes.com/2017/07/19/the-end-of-house-frey/

    Thanks

  • Unknown's avatar
    gotmaester · Member ·

    oops I had some pt’s in there, so I changed them to px’s

    also renamed class to .my-columns-synopsis

    .my-columns-synopsis {
    padding-left: 15px;
    padding-right: 15px;
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
    font-size: 11px;
    margin-top: 12px;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
    margin-bottom: 20px;
    column-rule-width:1px;
    -webkit-column-rule-style: outset;
    -moz-column-rule-style: outset;
    -webkit-column-rule-color: #ccc;
    -moz-column-rule-color: #ccc;
    -column-rule-style: outset;
    -column-rule-color: #ccc;
    }

  • kathrynwp · Staff ·

    Hi there! Someone will take a look at this today.

    Since no on is helping me, I am assuming that what I requested can’t be done.

    When you reply to your own thread, it takes it out of our “unreplied” forum queue, so it takes us longer to spot it. :)

  • Unknown's avatar
    gotmaester · Member ·

    ohhh, that’s good know… thanks.

    I have learned now from you how to create a

    .xxxxx{
    }

    and then add the code

    <div class=”my-columns”>xxxxx text goes here xxxxx</div>

    which has opened up so many possibilities.

    This is exciting.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, for assigning headings to stuff within columns, you can simply select the text within the editor you wish to have as h3 or h-whatever, and since that is applied at the HTML level, it will only affect that particular chosen text. You can then create a CSS rule to change the styling of that text. This example turns the bold text in your synopsis to red and makes it 150% in font size, and adds a slight text shadow. 

    .my-columns-synopsis strong {
  color: red;
  font-size: 150%;
  text-shadow: 1px 1px 0 #000
}
  • Unknown's avatar
    gotmaester · Member ·

    holy cow! There is so much I don’t know and CSS is soooo powerful! and makes things so easy, once you establish the right rules.

    Thanks :)

    Previously, before I learned the basics on how to do this, I was creating a text widget and then using the ID’s to correlate the widget to the formatting as follows (the reason I have to create so many widgets is that each widget is placed on a separate episode).

    /* IMDb */
    #text-224, #text-211, #text-213, #text-214, #text-215, #text-216, #text-217, #text-218, #text-234, #text-235, #text-236, #text-237,
    #text-238, #text-239, #text-240, #text-241, #text-242, #text-243,
    #text-244, #text-245, #text-246, #text-247, #text-248, #text-249,
    #text-250, #text-251, #text-252, #text-253, #text-254, #text-255,
    #text-256, #text-257, #text-258, #text-259, #text-260, #text-261,
    #text-262, #text-263, #text-264, #text-265, #text-266, #text-267,
    #text-268, #text-269, #text-270, #text-271, #text-272, #text-273,
    #text-274, #text-275, #text-276, #text-277, #text-278, #text-279,
    #text-280, #text-281, #text-282, #text-283, #text-284, #text-285,
    #text-286, #text-287, #text-288, #text-289, #text-290, #text-291, #text-292 {
    margin-top: -35px;
    width: 173px;
    font-size: 10pt;
    line-height: 1.3;
    text-align: left;
    background-color: #d9d9d9;
    padding: 12px;
    border-radius: 12px;
    padding-top: 30px;
    }

    But it was getting tedious. Now I don’t have to go look for the ID’s and then place them below in the CSS. All I have to do is for each IMDb widget I create but the links in a class

    .imdb {
    margin-top: -35px;
    width: 173px;
    font-size: 10pt;
    line-height: 1.3;
    text-align: left;
    background-color: #d9d9d9;
    padding: 12px;
    border-radius: 12px;
    padding-top: 30px;
    }

    and then put appropriate DIV CLASS tags in the widgets when I create them.

    That is a lot easier.

    QUESTION: Am I doing that right?

    On a similar note, I need some feedback on whether or not I am doing the outline column widget and its corresponding title on the left side of the page correctly:

    https://game-of-thrones-episodes.com/2017/07/19/the-end-of-house-frey/

    .episode-outline {
    margin-top: 0;
    width: 175px;
    font-size: 10pt;
    font-weight: 400;
    line-height: 1.1;
    text-align: left;
    background-color: #f3f3f3;
    padding: 10px;
    padding-top: 15px;
    border: 1px solid #ddd;
    }

    since I have all title widgets hidden I have to create the title myself in the outline widget.

    .season-title-1, .season-title-2,.season-title-3,.season-title-4,.season-title-5,.season-title-6,.season-title-7 {
    margin-top: -7px;
    width: 177px;
    height: 10px;
    font-size: 9pt;
    font-weight: 400;
    line-height: .8;
    text-align: center;
    color: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    }

    Note: Each season has a different color on the HBO official site, so I want to match these colors for consistency, and so I added the following, too.

    .season-title-1 {
    background-color: #535F4C;
    }

    .season-title-2 {
    background-color: #8E693D;
    }

    .season-title-3 {
    background-color: #823F3E;
    }

    .season-title-4 {
    background-color: #40798F;
    }

    .season-title-5 {
    background-color: #40798F;
    }

    .season-title-6 {
    background-color: #4C4F63;
    }

    .season-title-7 {
    background-color: #40798F;
    }

    That way when I create the episode outline, I just use the class tags inside the widget, and don’t have to worry about making a mess of things by doing something like I did above using the #IDS.

    This seems to be a whole lot simpler.

    QUESTION: Do you see any problem or even further shortcuts I could be doing with what I have?

    I would appreciate any feedback you can give me. Thanks.

  • Unknown's avatar
    thesacredpath · Member ·

    I think all you are doing is fine. Given the titles on the season outline widgets need to be different colors, I don’t see a way to do this differently that what you have.

  • Unknown's avatar
    gotmaester · Member ·

    I am so glad to hear from you. (I wondered if you might be on vacation.)

    I decided to do away with the color structure for the seasons because it was detracting from the site design. Now I am relying on just three colors blue (seasons, episodes) and red (scenes in the episodes).

    The following is real important and I need your help. So if you don’t mind…I would really appreciate it.

    please look at https://game-of-thrones-episodes.com/2017/07/24/varys-questioned-by-daenerys/

    I have created a FOLLOW THIS STORY ARC on the right column, but left the widget blank, and then created a <div> container on the post page to move text into that area. With about 1600 scenes, I don’t think want to be creating unique widgets.

    PROBLEM: I am having diffulty adusting The Z-indexs to get the links working in the <div> on the post page. The right column is on top of it. Is there a way to adjust this?

  • Unknown's avatar
    gotmaester · Member ·

    I will close this thread and call it resolved, but please respond to the above on a new thread which I will create.

  • The topic ‘double columns with highlights’ is closed to new replies.