Change Background and Font of Drop Down Menu

After much persistence, I finally found the answer to my question, thanks to another poster: SandpiperGFX (@wladamscarr).

If you copy and paste her coding, be sure to check it for mysterious colored dots that appeared when I placed the code in the Customizer. Once those were deleted, her CSS worked.

By the way, Inkhive seems to be totally non-responsive.

Hi Everyone, Sorry for the delay. I’m not using Plum anymore and have moved to SquareSpace; however, I’m attaching all of my notes here. Hope it helps you with future development! *Note this is from 2017, much may have changed by now ??

Best regards, Wendy

/* Set Product Background Color on all pages, move to front of stack and add padding */

.woocommerce ul.products li.product {

    background-color: rgba(74, 192, 185, 0.5);

    padding: 0px 0px 80px 0px;

                                border: none;

    z-index: 1;

}

/* Remove Product Name from Masthead Area */

.woocommerce .in-header-title {

                display: none;

}

/* Remove Woo Breadcrumb Banner Color on Product Page */

.woocommerce .woocommerce-breadcrumb {

    margin: 0 0 1em;

    padding: 0;

    font-size: 1.25em;

    text-align: left;

    background: #4ac0b9;

    border-bottom: none;

    padding: 5px 10px;

}

/* Hide ProductID/Keywords on Product Page */

.woocommerce div.product .product_meta {

    display: none;

}

/* Reduce Size of Product Image on Product Page */

.woocommerce div.product .images {

                                width: 30% !important;

}

/* Corrects Tab Overlap */

.woocommerce div.product .woocommerce-tabs ul.tabs li {

    border: 1px solid #e6e6e6;

    display: inline-block;

    position: relative;

    z-index: 0;

    border-radius: 4px 4px 0 0;

    margin: 0 0px;

    padding: 0 1em;

}

/* Soften White Box on Tabs */

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {

    background: #fff;

                                opacity: 50%;

    color: #4c4c4c;

}

/* Customize Cart Pg*/

/* Change Table Font Size and Header Txt Color */

.woocommerce table {

    font-size: 18px;

                                color: #000;

}

/* Change Color of Price and Total $ Amounts */

.woocommerce span {

    color: #000;

}

/* Change Font Size for Proceed to Checkout Button */

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {

    font-size: 18px;

}

/* Change Product Name Txt Color  */

.woocommerce-cart table.cart a {

    color: #000;

}

/* Make Table Background Green */

.woocommerce table.shop_table {

    border: 1px solid #2c807c;

                                background: #2c807c;

                                opacity: .75;

}

/* Remove Default Product Background Color in Table */

.woocommerce table.shop_table tbody tr:nth-of-type(n+1) {

    background: #2c807c;

}

/* Extend Size of Coupon Code Txt Block */

.woocommerce table.shop_table #coupon_code {

    width: 150px !important;

}

/* Darken White Overlay Color of Update Cart Button  */

.woocommerce #respond input#submit.disabled, .woocommerce #respond input#submit:disabled, .woocommerce #respond input#submit[disabled]:disabled, .woocommerce a.button.disabled, .woocommerce a.button:disabled, .woocommerce a.button[disabled]:disabled, .woocommerce button.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button[disabled]:disabled, .woocommerce input.button.disabled, .woocommerce input.button:disabled, .woocommerce input.button[disabled]:disabled {

    opacity: 0.95;

}

/* Remove Extra Background Spacing (24px) Under Update Cart Button */

.woocommerce table.shop_table {

    margin: 0px -1px 0px 0px;

}

/* Change Font Size of 'Cart Totals' on Cart Page */

.woocommerce-cart .cart-collaterals .cart_totals h2 {

    font-size: 18px;

    font-weight: bold;

                                margin-top: 25px;

}

/* Change Formatting on Checkout Page */

/* Change background-txt color of coupon banner  */

.woocommerce .woocommerce-info {

                                background-color: #2c807c;

    color: #fff;

                                width: 100%;

}

/* Change Formatting-Background Color of 'i' icon */

.woocommerce .woocommerce-info::before {

    border: 4px solid #4ac0b9;

    border-radius: 30px;

                                background-color: #4ac0b9;

}

/* Adjust Position of 'i' icon */

.woocommerce .woocommerce-error::before, .woocommerce .woocommerce-info::before, .woocommerce .woocommerce-message::before {

    top: .75em;

}

/* Change txt color of 'click here to enter code' */

.woocommerce a {

                                color: #fff;

                                text-decoration: underline;

}

/* Change txt color of 'click here to enter code' - on hover */

.woocommerce a:hover {

    color: #66324f;

                                text-decoration: underline;

}

/* Coupon Enter Dropdown Background Color */

.woocommerce form.checkout_coupon, form.login, form.register {

    border: 2px solid #66324f;

}

/* Checkout Table Background Color - Font Size Adjustment (Forced Other Background Color Changes That Are Corrected Below) */

.woocommerce {

    background-color: #2c807c;

    font-size: 18px;

}

/* Remove Forced Background from Elementor 6-Pack Display at Bottom of PaperPack Pg */

.woocommerce.columns-6 {

    background-color: #4ac0b9;

}

/* Remove Forced Background from Cart Collateral Area on Cart Pg */

.woocommerce .cart-collaterals, .woocommerce-page .cart-collaterals {

    Background: #4ac0b9;

}

/* H3 Header - Font Size Adjustment */

.woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout .woocommerce-shipping-fields h3 {

    font-size: 20px;

}

.woocommerce-checkout .woocommerce-additional-fields h3, .woocommerce-checkout .woocommerce-additional-fields h3 {

    font-size: 20px;

                                font-weight: bold;

}

/* Spread Newsletter Text Across width of Woocommerce Table */

#woocommerce-billing-fields .woocommerce-form form-row form-row-wide create-account {

    padding: 30px;

                                margin: 0 0 6px;

}

/* Adjust Left Margin for Create Account Checkbox on Checkout Pg */

#woocommerce-account-fields .woocommerce-form form-row form-row-wide create-account woocommerce-validated {

                                padding: 30px;

}

/* Add Padding to Left, Right and Bottom of Col 1 and 2 For Aesthetics */

.woocommerce .col2-set, .woocommerce-page .col2-set {

    padding-left: 10px;

                                padding-right: 10px;

                                padding-bottom: 30px;

}

/* Change Payment Area Background Color and Font on Checkout Pg */

.woocommerce-checkout #payment {

    background: #2c807c;

}

.woocommerce-checkout #payment div.payment_box {

    color: #fff;

                                background-color: #66324f;

                                opacity: 0.75;

}

.woocommerce-checkout #payment .payment_method_paypal .about_paypal {

    color: #66324f;

                                font-size: 20px;

}

/* Adjust Alignment of 'Accept Terms Checkbox Label */

.form-row terms.wc-terms-and-conditions .woocommerce form .form-row label, .woocommerce-page form .form-row label span {

    padding-left: 20px;

}

/*-------------------------*/

/* Overall Site Formatting */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {

    border: 0;

    font-family: Papyrus;

    font-size: 100%;

    font-style: inherit;

    font-weight: inherit;

    margin: 0;

        margin-right: 0px;

    outline: 0;

    padding: 0;

    vertical-align: baseline;

}

  h2.site-description {

                                font-family: Papyrus;

}

                h1.widget-title.title-font {

                                font-family: Papyrus;

}

#masthead .masthead-container {

    position: relative;

}

#masthead .container {

    margin: auto;

    padding-top: 0px;

                                width: 100%;

                                margin-bottom: 0;

}

#masthead .masthead-container::before {

                                margin: 0;

}

#masthead .masthead-container::after {

                                margin: 0;

}

/* Elementor Area Background */

                .mega-container {

                                margin: 0;

                                padding-left: 75px;

                  padding-right: 75px;

                                overflow: visible;

                                max-width: inherit;

                                background:#4ac0b9;

}

#content {

                                margin-top: 0;

}

.mega-container::before {

                                                margin: 0;

                background: rgba(74, 192, 185);

}

                .mega-container::after {

                                                margin 0;

                                background: rgba(74, 192, 185);

}

#primary-mono {

    padding: 0 10px;

}

.col-md-8 {

    width: inherit;

}

/* Remove Page Title On All Pgs */

#primary-mono .entry-header {

                                Visibility: visible;

}

/* Banner Settings */

                #masthead .masthead-inner .site-branding:before {

 content:"";

 height:100%;

 width: 500px;

 background:#4ac0b9;

 position:absolute;

 left:-500px;

 top:0

}

                #masthead .masthead-inner .site-branding:after {

 content:"";

 height:175px;

 width:175px;

 background:rgba(74, 192, 185, 0);

 position:absolute;

 right:-178px;

 top:-52px;

 border-left:solid 90px #4ac0b9;

 border-top:solid 90px #4ac0b9;

 border-bottom:solid 90px transparent;

}

#masthead .masthead-inner .site-branding {

 background:#4ac0b9;

 right:5px;

 position:relative;

 padding:30px 0;

 z-index:9;

 margin-right:60px

}

                .social-icons {

    background: rgba(74, 192, 185, 0.5);

        background-color: rgba(74, 192, 185, 0.5);

    float: right;

    text-align: right;

    padding: 30px 0;

    position: relative;

    margin-left: 60px;

}

.social-icons::before {

    content: "";

    height: 175px;

    width: 175px;

    background: rgba(74, 192, 185, 0);

    position: absolute;

    left: -178px;

    top: -53px;

    border-left: solid 89px transparent;

    border-bottom: solid 90px transparent;

    border-top: solid 90px rgba(74, 192, 185, 0.5);

    border-right: solid 90px rgba(74, 192, 185, 0.5);

}

.social-icons::after {

    content: "";

    height: 100%;

    top: 0;

    width: 75px;

    background: rgba(74, 192, 185, 0.5);

    position: absolute;

    right: -75px;

}

#masthead {

    display: block;

    background: url(https://sandpipergfx.com/wp-content/uploads/2017/09/BackgroundOcean_Header.jpg) no-repeat;

                  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

                background-size: cover;

}

#masthead {

    color: #333;

    min-height: 400px;

                                position: relative;

    overflow-x: hidden;

}

/* Single Page Alignment */

/* Remove Opaque Black layer from Masthead */

#masthead .layer {

    background: rgba(0, 0, 0, 0);

}

/* Move Menu Above Content Area */

#site-navigation.single {

    padding-top: 0px;

                                width: 100%;

                                transform:translateY(-50px);

                                background: rgba(0, 0, 0, 0.5);

}             

/* Changes Menu/Submenu Txt to White on Single Pages */

#site-navigation.single ul li a {

                                color: #fff;

}

/* Sets Text and Background Color of Hidden Submenu */

#site-navigation.single ul li ul.children li:nth-child(n+1) a, #site-navigation.single ul li ul.sub-menu li:nth-child(n+1) a {

    color: #fff;

                                background: rgba(0, 0, 0, 0.2);

}

/* Sets Text and Background Color of Submenu Items on Hover */

#site-navigation.single ul li ul.children li:nth-child(n+1) a:hover, #site-navigation.single ul li ul.sub-menu li:nth-child(n+1) a:hover {

    color: #fff;

                                background: rgba(0, 0, 0, 0.6);

}

/* Black Background on Menu Item on hover */ 

#site-navigation.single ul li:hover a {

                                color: #fff;

                                background: rgba(0, 0, 0, 0.5);

}

/* Defines Submenu Container for li placement - Flip Up Area */

#site-navigation.single ul li ul.sub-menu {

                                top: auto;

                                width: 200px;

}

/* Defines Sub-Submenu Container for li placement - Flip Up Area */

#site-navigation ul li ul.children li ul, #site-navigation ul li ul.sub-menu li ul {

    -webkit-transform-origin: left;

    left: 100%;

    top: auto;

    bottom: 0;

    opacity: 0;

    visibility: hidden !important;

    opacity: 0 !important;

    -moz-transform: rotateY(65deg) !important;

}

/* Smooth Transition Menu - Flip Up */

#site-navigation ul li ul.sub-menu {

                                background: rgba(0, 0, 0, 0.5) !important;

                                transition: 1s all ease;

    -webkit-transition: 1s all ease;

    -moz-transition: 1s all ease;

    -ms-transition: 1s all ease;

    -o-transition: 1s all ease;

    transform: perspective(350px) rotateX(40deg) translateY(-20px) scale(1.1);

    -webkit-transform: perspective(350px) rotateX(40deg) translateY(-20px) scale(1.1);

    -moz-transform: perspective(350px) rotateX(40deg);

}

/* Footer Area */

/* Recolor two bars above footer */

#primary-mono .entry-footer {

    border-top: solid 1px #4ac0b9;

    border-bottom: solid 2px #4ac0b9;

    padding-top: 7px;

    margin-top: 25px;

}

/* Recolor top margin of footer */

#footer-sidebar {

    background: #ddd;

    border-top: solid 3px                  #4ac0b9;

clear: both;

}

#colophon {

    background: #4ac0b9;

    padding: 15px 10px 15px 10px;

    color: #f5f5f5;

    font-size: 13px;

    text-align: center;

}

/*Hide Blog Date and Author Metadata on Blog Home Pg*/

#primary .grid .out-thumb .postedon .posted-on {

display: none;

}

#primary .grid .out-thumb .postedon .byline {

display: none;

}

/* Color of Blog Post Title on Blog Home Pg */

#primary h1 a {

                color: #66324f;

}

/*Color of Blog Excerpt Txt on Blog Home Pg*/

#primary .grid .out-thumb .entry-excerpt {

    color: #66324f;

}

/* Individual Blog Display Date */

#primary-mono .posted-on a {

    color: #66324f;

    font-family: papyrus;

}

/* Individual Blog Paragraph Text Size */

p {

    font-size: 18px;

    line-height: 1.6;

}

To Change Header Color – Edit color settings in the following areas:

#masthead .masthead-inner .site-branding:before

#masthead .masthead-inner .site-branding:after

#masthead .masthead-inner .site-branding

.social-icons

.social-icons::before

.social-icons::after

Note: You may need to adjust the settings of the ‘triangle’ position in [#masthead .masthead-inner .site-branding:after] and [.social-icons::before] sections to line up the margins for seamless transition.  If you don’t you will see a thin line of the .jpg image (behind the banner), showing through.  The following worked for me:

[#masthead .masthead-inner .site-branding:after] right:-179px; top:-56px;

[.social-icons::before]  left: -179px; top: -56px;

To Change Footer Color – Edit color settings in the following area:

#colophon

#footer-sidebar

To Remove Footer ‘Theme’ info – take the following text out of the Theme Footer (footer.php) file

                                                <?php printf( __( 'Powered by %1$s.', 'plum' ), '<a href="'.esc_url("https://inkhive.com/product/plum/").'" rel="nofollow">Plum Theme</a>' ); ?>

                                                <span class="sep"></span>

To Change Font – Sitewide – edit the font-family for the following sections:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td  {

font-family: XXXXXX

}

h2.site-description {

font-family: XXXXXX

}

h1.widget-title.title-font {

font-family: XXXXXX

}

Pop up detailing licensing info:

<html>

<head>

<style>

body {font-family: "Lato", sans-serif;}

.tablink {

    background-color: #66baba;

    color: white;

    float: left;

    border: none;

    outline: none;

    cursor: pointer;

    padding: 14px 16px;

    font-size: 17px;

    width: 50%;

}

.tablink:hover {

    background-color: #777;

}

/* Style the tab content */

.tabcontent {

    color: white;

    display: none;

    padding: 50px;

    text-align: center;

}

</style>

</head>

<body>

<div id="Standard" class="tabcontent">

  <h3>Standard License Rights</h3>

  <p>Applies to items purchased which are to be used in personal projects not intended for sale. Business usages are not permitted under the Standard License (please see Extended License details).

The Standard License grants you ongoing permission to use the Item to create personal use end products that are not intended to be sold. For the purposes of this Standard License, ‘sold’ means you plan to sell, license, sub-license or distribute the end-product for any type of fee or charge.

<ul>

                <li>Personal use only.</li>

                <li>One license per computer</li>

                <li>You may modify or manipulate the Item, or incorporate it into other content and make a derivative work from it.</li>

                <li>You may use the Item in a new end-product so long as it is not used alone, but instead as elements or parts of a new design (regardless of how much the item has been modified or how much of the new design it makes up).</li>

                <li>You may not sublicense, resell, share, transfer, or otherwise redistribute the Item on its own (e.g. as stock, in a tool or template, with source files, and/or not incorporated into an end-product) under any circumstances, not even for free.</li>

                <li>You may not sell the end product, or sell access to the end product. This does not prevent you from charging a single client for your services to create the end-product, in which case the client will be bound by the terms of this license, preventing them from selling the end product. If you or your client wants to sell the end-product, you or they must purchase an Extended License.</li>

                <li>You may not use the item for business purposes, e.g. advertising, promotions, packaging, etc. You must purchase the extended license for all business-related needs.</li>

                <li>You may not make the Item available on a digital asset management system, shared drive, or the like for the purposes of sharing or transferring the Item, and you must not permit an end user of the end product to extract the Item and use it separately from the end product.</li>

                <li>You may not publicly display the Item: (a) as a standalone file in any digital format on the internet; or (b) in any digital format without imposing technical or written restrictions to prevent the unauthorized use of the Item by third parties. You agree to take all commercially reasonable steps to prevent third parties from accessing and/or duplicating the Item.</li>

                <li>You may not register as a trademark the Item or the end-product incorporating the Item – not even logos. If you use the Item to create a logo for yourself or a client, keep in mind that third parties can use the Item too, even in another logo.</li>

                <li>You may not falsely represent, expressly or by way of reasonable implication, that any Item was created by you or a person other than <u>Sandpiper gfX</u> (the copyright holder).</li>

</p>

</div>

<div id="Extended" class="tabcontent">

  <h3>Extended License Rights</h3>

  <p>An Extended License allows the item purchased to be used in artwork intended to be sold, or used for any business-related purposes.

An Extended License certificate comes with every Extended License purchase from XXXXXXXXXXX. The Extended License grants you ongoing permission to use the Item to create end products that are intended to be sold or used for business purposes (e.g. advertising, promotions, packaging, etc.). For the purposes of this Extended License, ‘sold’ means you plan to sell, license, sub-license or distribute the end-product for any type of fee or charge.

?             The Extended License allows you to use Items in any manner permitted under the Standard License, and you may use Items to create end products that are intended to be sold or used for business purposes (e.g. advertising, promotions, packaging, etc.).

?             You do not have the rights to resell the product as if it were your own.

?             You may not falsely represent, expressly or by way of reasonable implication, that any Item was created by you or a person other than XXXXXXXXXXX (the copyright holder).

?             You do not have the rights to distribute the product with client proofs, or in unflattened files.

?             You do not have the rights to share the product with clients or other designers (they must purchase their own extended or standard license).

?             You do not have the rights to offer the product in a giveaway or promotion.

</p>

</div>

<button class="tablink" onclick="openLicenseType('Standard', this, '#222156')" id="defaultOpen">Standard</button>

<button class="tablink" onclick="openLicenseType('Extended', this, '#222156')">Extended</button>

<script>

function openLicenseType(LicenseType,elmnt,color) {

    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("tabcontent");

    for (i = 0; i < tabcontent.length; i++) {

        tabcontent[i].style.display = "none";

    }

    tablinks = document.getElementsByClassName("tablink");

    for (i = 0; i < tablinks.length; i++) {

        tablinks[i].style.backgroundColor = "";

    }

    document.getElementById(LicenseType).style.display = "block";

    elmnt.style.backgroundColor = color

}

// Get the element with id="defaultOpen" and click on it

document.getElementById("defaultOpen").click();

</script>

</body>

</html>