Background Color No Login Question

    • 233 posts
    August 25, 2020 3:34 PM EDT

    Hello

    When I am logged in as ADMIN or a NORMAL SUBSCRIBER (non-admin) I see white background for the birds show in middle of screen.

    When I just visit the site and don't login, I see light blue background (not white). Suggestion on how to remedy?

    • Moderator
    • 6923 posts
    August 25, 2020 4:17 PM EDT

    More info please? What is that widget? Is it a custom coded html block? Is it something else? You may need a CSS tweak for non logged in to fix it but I'm not sure which widget it is to help. Inspect element in your browser will help you a lot with this too.

    • 233 posts
    August 25, 2020 4:33 PM EDT

    Hi Donna

    It is a Rich Text Block widget. Only code it has is simple HTML table (similar widget on MEMBER HOMEPAGE that displays correctly):


    This post was edited by Gary at August 25, 2020 4:34 PM EDT
    • Moderator
    • 6923 posts
    August 26, 2020 4:45 AM EDT

    I suggest using inspect element to compare logged in and visitor view (be logged in on chrome and not logged in on firefox for example) and see what css classes are there in the logged in. More than likely, you need to add css for that widget. If you would, next time please use the code tag (next to the smiley in the editor) and paste in the code so I can try the same code on my test site and see what's up. I can't do it from a pasted image.


    This post was edited by socialenginestaff at August 26, 2020 4:45 AM EDT
    • 233 posts
    August 26, 2020 10:12 AM EDT
    <table class="minimalistBlack"><!--first-->
    <tbody>
    <tr valign="top">
    <td class="fillcell" align="center"><img src="/images/plate-200-shore-lark-441.jpg" width="115" height="152" border="0"> <img src="/images/plate-390-lark-finch.jpg" width="115" height="152" border="0"> <img src="/images/plate-181-golden-eagle-600.jpg" width="115" height="152" border="0"> <img src="/images/plate-350-rocky-mountain-plover.jpg" width="115" height="152" border="0"> <img src="/images/Plate-432-Burrowing-Owl.jpg" width="115" height="152" border="0"><!--  <img src="/images/plate-231-long-billed-curlew-final.jpg" width="99" height="130" border="0"><img src="/images/Plate-122-Blue-Grosbeak-final.jpg" width="99" height="130" border="0"> <img src="/images/Plate-57,-Loggerhead-Shrike-final.jpg" width="99" height="130" border="0"> --></td>
    </tr>
    </tbody>
    </table>
    <p> </p>

    This post was edited by Gary at August 26, 2020 10:13 AM EDT
    • 233 posts
    August 26, 2020 10:15 AM EDT
    /* Custom */
    table.minimalistBlack {
      border: 1px dashed #000000;
      width: 100%;
      text-align: left;
      border-collapse: collapse;
    }
    img.fillcell {
      height: 90%;
      padding: 10px;
      width: 90%;
    • Moderator
    • 6923 posts
    August 26, 2020 11:20 AM EDT

    The widget for guest view was made not to have a background. So, you need to add it. I tested this and it looks ok but you will need tweaking. I'm no CSS expert.

    #global_page_core-index-index .layout_middle > .generic_layout_container.layout_core_rich_text_block {
    padding: 15px;
        background: #FFFFFF !important;
        margin-bottom: 20px;
        border-radius: 1px;
        box-sizing: border-box;
    }
    • Moderator
    • 6923 posts
    August 26, 2020 11:21 AM EDT

    BTW, I hate using "important" in CSS as its frowned upon but the main CSS uses it to have no background and I don't know any way around that other than adding it.


    This post was edited by socialenginestaff at August 26, 2020 11:21 AM EDT