An update changed our versatile banner - I don't know where we can add CSS

Wow! You’re awesome…Thank you.

2 Likes

are there any codes in these fields of the Versatile Banner component? (it’s ok if there isn’t)

Here’s what I am showing…

1 Like

excellent. I’ll be back shortly :slight_smile:

2 Likes

Hey Lilly, really appreciate your help but you don’t have to do anything for us…

1 Like

almost done. sorry i got interrupted by someone that took my time.

1 Like

the text you gave me was different in case - the headers are all caps. i have to rewrite some of the content.

1 Like

No, don’t worry about it…Really…Its much appreciated but I think our developer will make sense of it when he gets back on tomorrow morning…

Sorry, I had some unexpected interruptions. Also, took me a bit to match similar fonts (looks like you may have some special ones but you should be able to see where to change them). I stripped it all down and re-wrote, and also retyped the all-caps headers. Also note that the info you posted is not the same as what is in the banner and both are past date. You will likely want to update those.

in the HTML CSS - COMMON tab of a theme or theme component insert this (you can make a new component if you like):

#homepage-banner-black {
    width: 95%;
    background-color: black;
    display: block;
    padding: 4px;
    margin-left: auto;
    margin-right: auto;
}

#homepage-banner-red {
    width: 95%;
    background-color: red;
    display: block
    padding: 4px;
    margin-left: auto;
    margin-right: auto;
}

#red-banner-header {
    font-size: 18px;
    color: white;
    background: red;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-weight: 600;
    font-family: Oswald, Arial, Sans-serif;
}

.banner-font-family {
    font-family: Tahoma, Sans-serif;
    font-weight: 600;
    font-size: 14px;
}

.header-link {
    font-size: 15px;
    color: white !important;
    font-weight: 600;
}

table.banner-table-outer {
    border: 0px;
    padding: 10px;
    width: 100%;
    table-layout: fixed;
}

tbody.banner {
    border: 0px;
    padding: 8px;
    display: block;
}

.banner-table-black {
    margin-top: 10px;
    margin-left: 10px;
    background-color: black;
    width: 100%;
}

tr.banner-table-tr {
    border: 0px;
}

tr.banner-red-tr {
    background-color: black;
    border: 0px;
}

td.banner-table-td {
    border: 0px;
    width: 300px;
}

Then in the main-heading-content area of the Versatile Banner component, insert all of this:

<div id="homepage-banner-red">
</div>
<div id="homepage-banner-black">
    <div class="banner-font-family">
        <table width="100%" align="center" class="banner-table-outer">
            <tbody class="banner">
                <tr class="banner-red-tr">
                    <td class="banner-table-td" colspan=4></td>
                </tr>
                <tr class="banner-table-tr">
                    <td class="banner-table-td" colspan=4> <span id="red-banner-header">LIVE Q&amp;A SCHEDULE -</span>
                    </td>
                </tr>
                <tr class="banner-table-tr" height="10px">
                    <td class="banner-table-td" colspan=4></td>
                </tr>
                <tr class="banner-table-tr">
                    <td class="banner-table-td">
                        <a
                            href="https://forum.georgegammon.com/t/upcoming-live-q-a-5-23-2023-reply-with-your-george-gammon-questions/12481">
                            <span class="header-link"> GEORGE GAMMON: </span>
                            <br />
                            Tuesday May 23 @8 PM EST</a>
                    </td>

                    <td class="banner-table-td">
                        <a
                            href="https://forum.georgegammon.com/t/upcoming-live-q-a-5-23-2023-reply-with-your-lyn-alden-questions/12446">
                            <span class="header-link"> LYN ALDEN: </span>
                            <br />Thursday May 23 @4 PM EST</a>
                    </td>

                    <td class="banner-table-td">
                        <a
                            href="https://forum.georgegammon.com/t/upcoming-live-q-a-5-25-2023-reply-with-your-chris-macintosh-questions/12502">
                            <span class="header-link">CHRIS MACINTOSH: </span>
                            <br />Thursday May 25 @7 PM EST</a>
                    </td>

                    <td class="banner-table-td">
                        <a
                            href="https://forum.georgegammon.com/t/upcoming-live-q-a-6-5-2023-reply-with-your-brent-johnson-questions/12444">
                            <span class="header-link">BRENT JOHNSON: </span>
                            <br />Monday Jun 5 @7 PM EST</a>
                    </td>
                </tr>
                <tr class="banner-table-tr" height="10px">
                    <td colspan=4></td>
                </tr>

                <tr class="banner-table-tr">
                    <td class="banner-table-td">
                        <a
                            href="https://forum.georgegammon.com/t/upcoming-live-q-a-6-12-2023-reply-with-your-jason-hartman-questions/12491">
                            <span class="header-link">JASON HARTMAN: </span>
                            <br />Monday Jun 12 @4 PM EST</a>
                    </td>

                    <td class="banner-table-td">
                        <a
                            href="https://forum.georgegammon.com/t/upcoming-live-happy-hour-6-19-2023-reply-with-your-team-rcp-questions/12383">
                            <span class="header-link"> RCP HAPPY HOUR: </span>
                            <br />Monday Jun 19 @3:30 PM EST</a>
                    </td>

                    <td class="banner-table-td">
                        <a
                            href="https://forum.georgegammon.com/t/upcoming-live-q-a-5-29-2023-reply-with-your-patrick-ceresna-questions/12402">
                            <span class="header-link"> PATRICK CERESNA: </span>
                            <br />Monday May 29 @ 1 PM EST</a>
                    </td>

                    <td class="banner-table-td">
                        <a href="https://forum.georgegammon.com/t/rcp-podcast/6173">
                            <span class="header-link">RCP LIVE Q&A PODCAST</span>
                            <br />(Audio Only)</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
4 Likes

Result:

Again, apologies for the wait. If you would like any more help, please let me know :slight_smile:

3 Likes

In case it would be of some usefulness, every CSS change is logged in Discourse.

admin/logs/staff_action_logs?filters=%7B"action_name"%3A"change_theme"%2C"action_id"%3A4%7D

Click on “Details”:

4 Likes