/* Theme Name: Beaver Builder Child Theme Theme URI: http://www.wpbeaverbuilder.com Version: 1.0 Description: An example child theme that can be used as a starting point for custom development. Author: The Beaver Builder Team Author URI: http://www.fastlinemedia.com template: bb-theme */ /* Add your custom styles here . . . */ /* For onlyselect.com */ /* ********************************************************************************* * * * Cookie Banner Styling * * * ********************************************************************************* */ #SelectWebGroup-Cookie-Banner { position: Fixed; z-index: 999; right: 9px; bottom: 9px; visibility: hidden; } #SelectWebGroup-Cookie-Banner .pp-button:hover i /* also for cookie button icons */ { color: #bbaf61 !important; } #consentRow .pp-button:hover i /* also for cookie consent button option icons */ { color: #bbaf61 !important; } /* use suitable button default background color for disabled Managed Cookie Popup buttons It did not always work when set in the module. Only worked always for enabled switch colour */ .uabb-rbs-switch:not(.checked) + .uabb-rbs-slider { background: #d7d7e4 !important; } /* ********************************************************************************* * * * Add Font Smoothing to all text * * * ********************************************************************************* I judge it increases readability and is pleasing on the eye, but makes fonts look lighter/thinner. (Makes a big difference in terms of perception) Effect will also vary in different browsers and at different font sizes. i.e. yes antialiased/smoothed fonts do look more readable, crisper and more pro but maybe thinner, smaller, seem lighter in colour and less bold (may meed to adjust for this) May be less suitable for headings and menus, or unless taken into account. See: https://davidwalsh.name/font-smoothing https://css-tricks.com/almanac/properties/f/font-synthesis/ */ body { /* font smoothing */ -webkit-font-smoothing: antialiased; /* Chrome, Safari */ -moz-osx-font-smoothing: grayscale; /* Firefox */ /* prevent false synthesis of non-existent bold and italic style font faces which may degrade their display */ /* keep font synthesis for now re want bold and italic if font does not have it */ /* font-synthesis:none; */ } /* ********************************************************************************* * * * Fly Free Product Description extra additions * * * ********************************************************************************* I manually added various elements to the standard WooCommerce Products Product Description Field (Only for 'Fly Free' song download Product) Namely: - a button module shortcode to action display more information about the song - a content row shortcode to display animate more information about the song (via JQuery) when the button is clicked (also conatining an additional 'add to cart' button row shortcode!) - a
to always display very small text at the bottom of the Product Description (Verdana font is readable at small sizes & ideal for that) Please note that I had numerous problems doing this re although the standard Woo Themer Product Tabs module works with many shortcodes and HTML for a Product Singular page, When in a Themer part for a Woopack QuickView, many HTML elements seem to get stripped or sanitized out. I found that to mostly work with both Singular and QuickView Product Description fields: - The button module (to display mor song info) needed to be a standard button. (i.e. PP and UABB versions did not format properly in the QuickView.) - The more info shortcode row worked if a row (not column) but even then the background and extra 'add to cart' got stripped in the QuickView. (But the manual download text link works) - The 'add to cart' button row shortcode within the more info row worked in Singular Product Description non-Quickview, but not with the quantity box. i.e. it just adds 1 every - I could not get the verdana font Product description footer as a saved row for QuickView, but it did work by manually adding a Div in the main product description and using css. - The JQuery for slideToggling the #flyfreeaddinfocontentrow is called on("click", '.FlyFreeMoreSongBackgroundModuleButton' - I also note that WP Text Editor fields commonly strips out various html added manually in non-visual mode. (i.e. e.g. footer spans keep clearing & this may be a contributing factor too) */ /* hide the product fly free download extra information until button shows it */ #flyfreeaddinfocontentrow { display: none; } .verdana { font-family: "Verdana",sans-serif; font-size: 12px; } /* ********************************************************************************* * * * WooCommerce & WooPack additional styling * * * ********************************************************************************* */ .woocommerce .txt-align-center .fl-module-content .fl-heading { text-align: center !important; } /* Make sure spinner in checkout/place order page is in center of screen re it was two high and out of viewport previously when press 'Place Order' button. This is probably to do with the theme, but it previously gave no indication the order was being sent, which may result in multiple button presses. See https://wpbeaches.com/position-woocommerce-checkout-spinning-icon-on-page/ */ .woocommerce .blockUI.blockOverlay:before { position:fixed!important; } /* remove space around woo notices on singular product page (e.g. when try to put more in cart than in stock) after have used [fl_woocommerce_notices] shortcode I defined to add it anywhere in HTML element after I removed notice from original position which was coverered up by transparent builder sticky header. (Cool technique) See functions.php for the shortcode creation and for the BB filter that removes the Woo notice from its original position */ .fl-theme-builder-woo-notices { padding: 0; } /* ********************************************************************************* * WooPack - Cart Page top Green box Message * * Had no left margin before 'continue shopping' link * ********************************************************************************* */ .woocommerce-notices-wrapper .wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__content .wc-forward { margin-left: 8px; } /* ********************************************************************************* * WooPack - Single Product Page top Green box Message * * Had no left margin before 'continue shopping' link * ********************************************************************************* */ .fl-theme-builder-woo-notices .wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content .wc-forward { margin-left: 8px; } /* makes sure button are blue colour re woopack somestimes made them magenta */ .qv button, .pg button { background-color: #242c46 !important; } /* make sure on sale badge is always red and round - use functions.php filter to set/change the actual text */ span.onsale { background-color: #de0f0f !important; border-radius: 100% !important; } /* for error at top when cannot add a product so is displayed over menu */ .woocommerce .woocommerce-error, .woocommerce-page .woocommerce-error { z-index: 100; } /* do not want the ordering drop down combo in product archive page */ .woocommerce-ordering { display: none; } /* ********************************************************************************* * WooCommerce - Single Product Page Product Tabs styling - Main non-quickview * ********************************************************************************* */ /* put a vertical gap between each product list bullet point in tabs panel text */ .woocommerce-Tabs-panel ul li { margin-bottom: 10px; } /* left justify tabs re looks cleaner - works for mobile and desktop - why 5px ? */ .woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0px 5px 0px 5px; } /* non-active/unselected tab */ .woocommerce div.product .woocommerce-tabs ul.tabs li { font-weight: 550; /* default is 700 */ background: #F6F7F9; } .woocommerce div.product .woocommerce-tabs ul.tabs li:hover { top: -1px; transition: top 0.25s; } .woocommerce div.product .woocommerce-tabs ul.tabs li:hover a { color: rgba(2, 25, 95, 1); } /* active/selected tab */ .woocommerce div.product .woocommerce-tabs ul.tabs li.active { font-weight: 650; /* default is 700 */ font-size: larger; background: white; color: rgba(2, 25, 95, 1); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active:hover { top: 0px; transition: top 0.25s; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active:hover a { color: rgba(0,10,40,0.85) !important; } /* ********************************************************************************* * WooPack - Single Product WooPack QuickView Product Tabs styling adds * ********************************************************************************* */ .woopack-modal .woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0px 5px 0px 5px; margin-bottom: 0px !important; /* quick view modal seems to have extra bottom margin */ } /* woopack quick view seems to have no padding vs 30px in main non modal view */ .woopack-modal .woocommerce div.product .woocommerce-tabs .wc-tab { padding: 20px !important; } .woopack-modal .woocommerce div.product .woocommerce-tabs ul.tabs li { border: 1px solid #e6e6e6; /* quick view modal seems to have diffent color border */ } /* Now for the woopack quick view, the same styling changes already applied to non-modal view - needs a .woopack-modal pre-target */ /* non active tab */ .woopack-modal .woocommerce div.product .woocommerce-tabs ul.tabs li { font-weight: 550; /* default is 700 */ background: #F6F7F9; } .woopack-modal .woocommerce div.product .woocommerce-tabs ul.tabs li:hover { top: -1px; transition: top 0.25s; } .woopack-modal .woocommerce div.product .woocommerce-tabs ul.tabs li:hover a { color: rgba(2, 25, 95, 1); } /* active/selected tab */ .woopack-modal .woocommerce div.product .woocommerce-tabs ul.tabs li.active { font-weight: 650; /* default is 700 */ font-size: larger; background: white; color: rgba(2, 25, 95, 1); } .woopack-modal .woocommerce div.product .woocommerce-tabs ul.tabs li.active:hover { top: 0px; transition: top 0.25s; } .woopack-modal .woocommerce div.product .woocommerce-tabs ul.tabs li.active:hover a { color: rgba(0,10,40,0.85) !important; } /* show some font gold upon hover but only white when selected */ /* .woopack-product-filters-wrap .woopack-product-filters .woopack-product-filter:hover { color: #bbaf61 !important; } */ /* test: this hits the gold text anomoly on both the main woo page and the woopack one i.e. hits all prices */ .woocommerce .price { color: #52565e !important; } .woopack-modal .woocommerce div.product p.price { color: #52565e !important; } /* + need to do in stock as well! */ /* .woopack-product-meta { position: absolute; bottom: 7px; right: 7px; } */ /* .button.product_type_simple i, .button.product_type_variable i { } */ /* gold custom icon upon hover */ .button.product_type_simple:hover i, .add_to_cart_button:hover i, .single_add_to_cart_button:hover i, .product_type_external:hover i { color: #bbaf61 !important; } .my_marketing_button .pp-button:hover i /* also for my marketing buttons with icons */ { color: #bbaf61 !important; } .FlyFreeMoreSongBackgroundModuleButton .fl-button:hover i /* also for see more details about fly free button */ { color: #bbaf61 !important; } /* makes it possibe to take up more than one line but the same space */ .woopack-product-title { min-height: 4.2em !important; } .woopack-product-quick-view: { color: #ffffff; } .woopack-product-quick-view:hover { background: #bbaf61; /* background: #dddddd; */ } /* hide result counts re it does not work with woopack grid */ .woocommerce-result-count { display: none; } /* gets rid of sku within meta returned and listed */ /* also see https://www.godaddy.com/resources/skills/how-to-hide-skus-on-woocommerce-product-pages */ .sku_wrapper { display: none; } /* add_filter( 'wc_product_sku_enabled', 'sv_remove_product_page_skus' ); function sv_remove_product_page_skus( $enabled ) { if ( ! is_admin() && is_product() ) { return false; } return $enabled; } */ /* might be a useful technique if can be adapted for woo product description / additional info tab */ /* https://observablehq.com/@rkaravia/css-trick-tabs-with-consistent-height */ /* .tab-content { display: flex; } .tab-content > .tab-pane { display: block; visibility: hidden; margin-right: -100%; width: 100%; } .tab-content > .active { visibility: visible; } */ /* ********************************************************************************* * WooPack - Scale Woopack product grid image upon hover * ********************************************************************************* rather than scaling image upon hover on image, I decided it better to scale image on hovering anywhere within the grid cell re more interactive */ .woopack-product-grid:hover .woopack-product-image { -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -ms-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03); } .woopack-product-image { -webkit-transition: 0.2s ease-in; -moz-transition: 0.2s ease-in; -o-transition: 0.2s ease-in; transition: 0.2s ease-in; } /* ********************************************************************************* * WooPack - re woopack-ajax-pagination previous link always goes to page 1 !!! * ********************************************************************************* But 'Next' works OK */ ul > li .prev.page-numbers { display: none; } /* ********************************************************************************* * WooPack - make img fill 100% width of Slider Container * ********************************************************************************* I was going to abandon the Woo Image slider = 'Yes' option re the Owl slider image defaulted to width: auto which on narrow screens when single column resulted in image looking too small and with mbig gap under image before the title. i.e. with space for image being much more than image size. This addition corrects it without adversely affecting the multi column layout on wider screens. So Can now set the Woo Product Grids Content Image Slider option to 'Yes' */ .woopack-product-image-slide img { width: 100% !important; /* was auto */ } /* ********************************************************************************* * WooPack - Quick View Modal is fixed position * * but not visible on narrow screens without this * ********************************************************************************* */ .woopack-modal-close /* */ { right: 5px; /* was -12px */ top: 5px; /* was -12px */ } /* re too much margin on top of product grid */ .woopack-grid-wrap { margin-top: 20px !important; } .woocommerce-breadcrumb a:hover { color: #001042 !important; } /* ********************************************************************************* * * * Make content width of UABB Modal Popups wider on screens less than 700px * * * ********************************************************************************* The default was 80% when screen was narrow which I considered gave too little content width and too much margin at that small size also needed to move exit close cross into the form vs outside it (in top right) */ @media ( max-width: 700px ) { .uabb-modal .uabb-content { /* width: 89% !important; */ width: 95% !important; } } .uabb-modal-close { /* top: 12px !important; right: 12px !important; left: auto; */ top: 8px !important; right: 8px !important; left: auto; } .uabb-modal-close:hover { .uabb-close-icon { color: rgba(10,12,29,0.95) !important; } } /* ********************************************************************************* * * * Terms and conditions UABB Modal Popup headings in different colour = blue * * and create better list item spacing * * * ********************************************************************************* just need to give UABB popup saved row an id = terms-and-conditions */ #terms-and-conditions-overlay .fl-heading { /* color: #000e38; */ color: rgba(10,12,29,0.95); } #terms-and-conditions-overlay ul li { margin-bottom: 8px; } /* ********************************************************************************* * * * Login Box HTML element for PB Login * * * ********************************************************************************* could not use BB text editor component re PB fields were too large on mobile */ /* set login html with white background */ .loginbox { background-color: rgba(255,255,255,0.80); /* position: relative; */ } .loginbox h1, h2 { text-align: center; color: rgba(37,32,71,0.87); } #login-logo { position: absolute; /* right: 10px; bottom: 10px; */ margin: 0 auto; /* right:10px; */ bottom: 10px; width: 100px; } /* ********************************************************************************* * * * Center footer themer layout elements in their divs * * * ********************************************************************************* see https://stackoverflow.com/questions/114543/how-can-i-horizontally-center-an-element Is actually quite complex to get right so all divs are properly horizontally centerd. (Many sites do not do it properly) APPROACH: use a series of side-byside #outer div (columns) each containing an #inner HTML multi-line Text block The main problem is that in all methods, the width of the inner div multi-line text block must be absolutely specified for the inner div to be horizontally centered within the outer div, otherwise it will not be centered and take up 100% of the outer div space. Therefore for most methods it will not be properly centered and expansion space is wasted. SOLUTION: specify the inner div width as fixed percentage (but that will still not center properly) or better still: set max-width: max-content; on the inner div which then centers the inner div exactly NOTE: max-width: max-content; maybe not supported on IE11 (released Oct 2013, approx 0.4% global use) but otherwise v good support Other complications are that the longest line sometimes wraps as the outer div gets smaller and inner div as a proportion of that is too small for full text line. SOLUTION: use white-space: nowrap; set on the inner div (but not such/any problem if use max-width: max-content; on inner div */ /* *** Method D (my Super simple method, but will always need an inner element width specified) and therefore will commonly not properly center inner element (i.e. it centers the specified width) unless max-width: max-content; used This simple method relies on fact a div is centered by default */ /* #inner { max-width: max-content; white-space: nowrap; border: 1px solid blue; } #outer { border: 1px solid red; } */ /* *** Method A (margin 0 auto, but will always need an inner element width specified) and therefore will commonly not properly center inner element (i.e. it centers the specified width) unless max-width: max-content; used */ #inner { max-width: max-content; margin: 0px auto auto auto; white-space: nowrap; /* border: 1px solid blue; */ } #outer { /* border: 1px solid red; */ } #innerforlogin /* special inner for login which allows wrap for login error message display box */ { max-width: max-content; margin: 0px auto auto auto; /* white-space: nowrap; */ /* border: 1px solid blue; */ } /* corrections for PB sublime reg form until Cozmoslabs fix the CSS */ #wppb-form-style-1-wrapper button.wppb-toggle-pw { top: 19px !important; bottom: auto !important; } /* This CSS seems to correct the login form knock-on effect from changing the register form CSS re only the login form has a wrapper called #wppb-login-wrap and it seems to use flexbox alignment. The order of these CSS lines is important.*/ #wppb-form-style-1-wrapper #wppb-login-wrap #wppb-loginform button.wppb-toggle-pw { align-items: start !important; } /* *** Method B (Flexbox, but will always need an inner element width specified) and therefore will commonly not properly center inner element (i.e. it centers the specified width) unless max-width: max-content; used */ /* #inner { max-width: max-content; white-space: nowrap; } #outer { display: flex; justify-content: center; } */ /* *** Method C (Table, but will always need an inner element width specified) and therefore will commonly not properly center inner element (i.e. it centers the specified width) unless max-width: max-content; used */ /* #inner { max-width: max-content; display: table; margin: 0 auto; white-space: nowrap; border: 1px solid blue; } #outer { border: 1px solid red; } */ /* make footer link headings in darker/gray */ #inner p span { /* color: #bbbbbb; */ /* color: #bbaf61; */ color: rgba(255,255,255,0.44); } /* hover size of partOfSWG image in footer */ #partOfSWG:hover { /*cursor: pointer; */ /* cursor: hand;*/ /* provide link indication as link would do */ /*color: red;*/ -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); } #partOfSWG { -webkit-transition: 0.5s ease-in; -moz-transition: 0.5s ease-in; -o-transition: 0.5s ease-in; transition: 0.5s ease-in; } #video-banner-single { position: relative; /*min-height: 665px;*/ /* 500px for mobile width */ /* height: 500px; */ vertical-align: top; } #background-video { /* height: 500px; */ } /* Style the video: 100% width and height to cover the entire window */ /* #background-video { margin-top: -100px; margin-bottom: 100px; } */ #background-video video{ width: 100%; height: 100%; position: absolute; object-fit: cover; /* object-position: 50% 75%; */ /* done dynamically inline now depending on actual video!!! */ z-index: 2; /* border-bottom: 1px solid transparent; */ } .fit-picture { width: 100%; height: 100%; position: absolute; object-fit: cover; z-index: 1; display: none; } /* #myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; } */ /* #background-video { width: 100vw; height: 100vh; object-fit: cover; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; } */ /* -------------------- M E N U N A V H E A D E R ----------------------- */ /* ************************************************************************************** * * * slightly scale enlarge menu user account icon upon hover * * * ************************************************************************************** see https://generatepress.com/forums/topic/home-icon-instead-of-text-in-menu/ */ .myMenu .my-user-account-icon .fa { -webkit-transition: all 0.30s ease; -moz-transition: all 0.30s ease; -ms-transition: all 0.30s ease; -o-transition: all 0.30s ease; transition: all 0.30s ease; } .myMenu .my-user-account-icon:hover .fa { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); -webkit-transition: all 0.30s ease; -moz-transition: all 0.30s ease; -ms-transition: all 0.30s ease; -o-transition: all 0.30s ease; transition: all 0.30s ease; } /* ************************************************************************************** * * * Round top menu items to look a bit like SelectDomain Logo * * * ************************************************************************************** */ .myMenu #menu-main-menu > li > a /* for top menu items without submenus */ { /* border-radius: 10px !important; */ } .myMenu #menu-main-menu > li .pp-has-submenu-container > a /* for top menu items submenus */ { /* border-radius: 10px !important; */ } /* ***************************************************************************************** * * * For Switch to Smaller or Cropped Logo upon scroll when menu header skrinks * * * ***************************************************************************************** Decided that vertically cropped logo of same size in all other respects looked better than small version of logo, upon page scroll (/menu header skrink) */ .logo-col .logo-small { /* display: none; */ } .logo-col .logo-crop { /* display: none; */ } /*** AWD Global Footer Themer Layout CSS ***/ /* just give main 2 link blocks the footerlinkblock class */ .footerlinkblock ul, .footerlinkblock li /* remove browser default styling for li and ul */ { list-style-type: none; list-style-position:inside; margin:0; padding:0; } .footerlinkblock ul li a { text-decoration: none; } .footerlinkblock ul li:hover a { /*text-decoration: underline;*/ } .footerlinkblock ul li { margin-bottom: 15px; } .footerlinkblock .cl-effect-4:hover a { color: #bbaf61; } /* -------------------- D O M A I N A R C H I V E T H E M E R L A Y O U T P A G E ----------------------- */ /* With Integrated UABB Advanced Posts grid for Domain Names, and FacetWP Filters in left coloumn NOTE: With original OneClickProperty.com (& AWD.co.uk) I used a different methods for this archive page. With those I used my own webpage class coded in PHP combined with using an HTML/PHP template file (with its own CSS) to render (via a shortcode) the custom layout cell of UABB Advanced Posts grid. It did the job but was quite complex! I also used my own complex media queries to adjust number of cells in a row and the width of cells and Facet search columns at every screen dimension. These queries involved overriding some of the UABB Advanced Posts module CSS wrt grid row breaks and got quite complex. The new approach devised here is simpler, now easier to implement & reproduce: 1. Each UABB Advanced Posts grid cell is designed as a Beaver builder 'saved column' and then rendered in the custom layout of UABB Advanced Posts module using [fl_builder_insert_layout slug="domain-name-cell"] shortcode. This makes it easier to design format and change the grid cells. Idea put the saved column on a singular page to design??? Note the rendered saved column layout could have also been a row with mutiple columns or a template with mutiple rows & columns !!! - so very flexible method. (Later discovered that you can render a saved row in a column/layer position but are likely to get anomolies re which background is taken, etc. i.e. from the saved row or the row it is inserted into. So stick to the rule that only insert saved column/layers using fl_builder_insert_layout slug='' into existing columns or rows. Note the saved column can be made up of nested columns! but the saved column editor does not allow adding saved columns into it! so will need to just nest a new column and format it with settings and modules OR just insert the column into a page, do the column nesting, and then save the outside/parent column as a saved column. Very flexible!! So only insert daved rows into a page and not into a column within a page. Saved templates are just saved multiple rows. Understanding BB column nesting unleashes much power and flexibility. 2. I use the standard BB and UABB Advanced post media queries and number of cell columns required at larger, medium and small device screen sizes If that does not suffice in terms of the breakpoints then can futher adjust within page by top left menu: Tools->Global & changing the medium and small device breakpoints. Note: The Wordpress Theme Customizer menu->General->Layout does not seem to work for this and is overriden by what is set in the actual page's Tools->Global->breakpoints settings. 3. The UABB Adv Posts grid main column (containing all cells) has its column width set as a % and I believe the cells will only work properly if used in that way. However, the columns left (Facet Colum) and right can be set using my own overriding CSS to absolute px (not %) widths (or have min px widths set) and that seems to work well Just be careful that if the right column is set so there is not enough room, then it will just not show. The advantage of this px vs % width is that the BB col min of 8% no longer enforced So I set the right column to quite narrow absolute width and facet column left of the UABB Adv Posts grid column to a minimum width that will still cope with the Facet contenets. Voila! - much simpler, more modular, & easier to amend or spin up any new archive page */ /* ***************************************************************************************** * * * Override Domain Archive page filter column widths * * * ***************************************************************************************** Problem was that BB columns can only be set in percentage terms and even then with a minimum 8% width. So left filter column was getting too narrow when on narrower screen sizes & right column was always taking up 8% width when 8% was too much and not needed on narrower screens. I tried just overriding left filter column (making it absolute min width, but that resulted in right filter column not being rendered on narrower screens So I also overrode right filter column and made it smaller and that worked! */ .filter-column-left { /* min-width: 150px !important; */ min-width: 180px !important; } /* Now removed right column & just have .filter-column-left containing facets & main grid column */ /* .filter-column-right { width:20px !important; } */ /* ***************************************************************************************** * * * Animation styling of filter-column-left * * * ***************************************************************************************** */ /* .filter-column-left { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } .filter-column-left:hover { -webkit-transform: scale(1.01); -moz-transform: scale(1.01); -ms-transform: scale(1.01); -o-transform: scale(1.01); transform: scale(1.01); } */ /* ************************************************************************************** * * * set min height for uabb-advanced-posts * * * ************************************************************************************** have already set filter column to equal heights as other columns but when uabb-advanced-posts is shorter it does not seem to work (probably FacetWP AJAX causing) So making the add class .uabb-advanced-posts module at least the height of the filter column including facets seems to solve it NB: - This min-heigh addition probably not required for when filter column not displayed when using Facetwp flyout on mobile/narrower devices. So could improve this with media query Will also need to increase this min-height value as add more facets into Filter column */ .uabb-advanced-posts { min-height: 600px !important; } /* ***************************************************************************************** * * * Animation styling of Domain Cell (actually saved column) in UABB Advanced Post Grid * * * ***************************************************************************************** */ .domain-cell { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .domain-cell:hover { cursor: pointer; -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -ms-transform: scale(1.02); -o-transform: scale(1.02); transform: scale(1.02); } /* ***************************************************************************************** * * * styling of Domain Cell Ribbon (actually saved column) in UABB Advanced Post Grid * * * ***************************************************************************************** see https://www.cssportal.com/blog/create-corner-ribbon/ & https://www.cssportal.com/css-ribbon-generator/ Note: This is interesting re how to add HTML elements to a page. The ribbon element has been added to single domain cells in cell grid on archive page & to browser imitation bar on domain name singular page, using this .ribbon class in both cases For the archive page: I just added my php [cellRibbonHTML] shortcode containing neccessary ribbon HTML (including colour & suitable text re verification) to a HTML module in the domain-name-archive-cell I have as a saved column and which I use in the UABB Advanced posts grid (inserted as a template layout via shortcode). For the sigular page: I already have an HTML module element which inserts the browser column within the parent column using shortcode [fl_builder_insert_layout slug="domain-name-singular-browser-address-box-col"] so I just added the [cellRibbonHTML] to that. Note: when adding an HTML module element for the ribbon or otherwise, make sure the margins for the HTML module element are all set to zero. And for the domain name singular page, for the .ribbon class I also had to add a class to the HTML module element of .browserAddressBoxHTML and set it via CSS to position: relative; re the ribbon is set as absolute positioning which means it positions to the top right corner of the first parent element that is relatively positioned. (And that was the top of the page/most-outter column in this case if I didn't add .browserAddressBoxHTML{position: relative;} Did not need to do it for archive page cells re there were probably already relatively positioned. Note: that you can within BB add columns to a main parent column (best to add the column arrangement before adding modules) - but beyond that I found it not possible to add any columns within the columns within that main parent column. That is, without using the [fl_builder_insert_layout slug="xxx"] 'saved column'/shortcode technique within the relevant BB module. */ .browserAddressBoxHTML { position: relative; } .ribbon { position: absolute; /* right: -4px; top: -4px; original*/ right: 0px; top: 0px; z-index: 1; overflow: hidden; width: 75px; height: 75px; text-align: right; /* opacity: 0.3; */ } .ribbon span { font-size: 14px; /* originally 10px */ font-family: "Inter", sans-serif; color: #fff; /* text-transform: uppercase; */ text-align: center; font-weight: bold; line-height: 22px; /* originally 20px */ transform: rotate(45deg); -webkit-transform: rotate(45deg); /* Needed for Safari */ width: 100px; display: block; background: #11A912; /* originally #79A70A; */ /* background: red; */ /* original background: linear-gradient(#9BC90D 0%, #79A70A 100%); */ /* background: linear-gradient(#11A912 0%, #11A912 100%); */ /* box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); */ position: absolute; top: 19px; right: -21px; } .ribbon.green span { background: #11A912; /* originally #79A70A; */ text-transform: uppercase; } .ribbon.red span { /* background: #E30000; */ /* originally #79A70A; */ background: #cc1700; /* originally #79A70A; */ } /* -------------------- F A C E T S O N A R C H I V E P A G E ----------------------- NOTE: The following are useful & very important in terms of using UABB Advanced Posts module with FacetWP Facets: (and are quite buried within the Docs) 1. Beaver Themer allows layout design for Archive pages (which is great) but for that to work properly, you MUST ONLY use the Main Query as Source in the BB UABB Advanced Posts Settings This ensures both FacetWP and Beaver Builder use the WP Archive Query. Even with this restriction it is possible to customize this existing Archive Query using WPs pre_get_posts filter. see https://facetwp.com/how-to-customize-archive-queries/ Can be used to sort the posts or modify any part of the query Don't use a custom WP_Query in archive templates re it is inefficient and results in the database getting queried twice. 2. UABB Advanced Posts / BB grid shows a default of 10 posts per page irrespective of the number of columns displayed due to the current device width. When the BB Grid Source is set to Main Query (which it must be for Themer Archive layout pages) then there is no option then to change this 10 post default in the module settings But the value is then determined by the WordPress value for the 'Blog pages show at most' field in Settings -> Reading, in the WordPress admin panel !!! So it seems that the default can be changed there, by adding a 'per Page' Facet, or by modifying the Archive Query with WPs pre_get_posts filter (3 ways !!!) 3. The Modules General No Results message setting for message displayed when there are no posts to display also supports shortcodes which lets you add more complex BB layouts (rows, columns, modules, templates) than just text. (the basic message looks rather plain. */ /* ************************************************************************************** * * * Override hide of FacetWP Flyout Template Row during development / editing * * * ************************************************************************************** */ .facetwp-flyout-tpl { /* display:block !important; */ } /* ************************************************************************************** * * * Colour flyout background * * * ************************************************************************************** */ .facetwp-flyout { /* background-color: white !important; */ /* not required re can set colour background in row containing flyout {content} */ /* background-color: rgba(121, 155, 192, 0.92) !important; */ } /* ************************************************************************************** * * * make flyout close box bigger so easier to see and close + set its colour * * * ************************************************************************************** */ .facetwp-flyout-close { font-size: 25px; color: #4D648D; } /* ***************************************************************************************** * * * onlyAccountDomains colour filter for logged-in users * * * ***************************************************************************************** */ .onlyAccountDomains i { color: #949ba3 !important; /* old blue gray from oneclick! means showing all domains */ opacity: 0.4; } .onlyAccountDomains.enabled i { color: green !important; /* green means engaging the 'only my domains' option */ opacity: 1.0; } /* ***************************************************************************************** * * * Only show onlyAccountDomains & Text 'buttons' if logged in * * * ***************************************************************************************** */ .onlyAccountDomains { display: none; } .logged-in .onlyAccountDomains { display: block; } .onlyAccountDomainsText { display: none; } .logged-in .onlyAccountDomainsText { display: block; } .onlyAccountDomains .fa { /* animate on hover */ -webkit-transition: all 0.30s ease; -moz-transition: all 0.30s ease; -ms-transition: all 0.30s ease; -o-transition: all 0.30s ease; transition: all 0.30s ease; } .onlyAccountDomains:hover .fa { -webkit-transform: scale(1.34); -moz-transform: scale(1.34); -ms-transform: scale(1.34); -o-transform: scale(1.34); transform: scale(1.34); } /* ***************************************************************************************** * * * Only show addDomain & Text 'buttons' if logged in * * * ***************************************************************************************** */ .addDomain { display: none; } .logged-in .addDomain { display: block; } .addDomainText { display: none; } .logged-in .addDomainText { display: block; } .addDomain /* hits the icon in the mobile flyout re the desktop column formating is stripped then */ { color: #283655 !important; } .addDomain .fa { /* animate on hover */ -webkit-transition: all 0.30s ease; -moz-transition: all 0.30s ease; -ms-transition: all 0.30s ease; -o-transition: all 0.30s ease; transition: all 0.30s ease; } .addDomain:hover .fa { -webkit-transform: scale(1.34); -moz-transform: scale(1.34); -ms-transform: scale(1.34); -o-transform: scale(1.34); transform: scale(1.34); } /* ***************************************************************************************** * * * Show link cursor hand when over onlyAccountDomainsText * * * ***************************************************************************************** */ .addDomainText:hover { cursor: pointer; } /* ***************************************************************************************** * * * Show link cursor hand when over onlyAccountDomainsText * * * ***************************************************************************************** */ .onlyAccountDomainsText:hover { cursor: pointer; } /* ************************************************************************************** * * * Control Width of Domain Extension Dropdown box - TO DO properly ??? * * * ************************************************************************************** */ .facetwp-type-fselect .fs-wrap .fs-label-wrap /* top wrap is pos relative within facet */ { /* was width: 220px; in facetwp's assets css front.css */ width: 100% !important; } .facetwp-type-fselect .fs-dropdown /* dropdown box is pos absolute within screen! */ { /* was width: 220px; in facetwp's assets css front.css */ /* width: 14.5% !important; */ /* default to follow facets column max screen width setting */ /* width: 100px !important; */ } /* now integrated this into my main new media query lattice below */ @media (max-width: 1300px) /* add media queries for medium and small screens so dropdown width follows responsive facet column widths */ { .facetwp-type-fselect .fs-dropdown { /* width: 30% !important; */ } } @media (max-width: 768px) { .facetwp-type-fselect .fs-dropdown { /* width: 92% !important; */ } } /* ************************************************************************************** * * * remove minimum width of .facetwp-search box re too large * * * ************************************************************************************** may have been better to just set a much lower minimum?? see https://stackoverflow.com/questions/32581517/how-to-remove-min-width80px-from-the-site */ .facetwp-search { min-width: unset !important; } /* ***************************************************************************************** * * * hide the author facet but whilst also making sure it still works * * I change its value programatically with JS on FWP object via 'My domains' button * * * ***************************************************************************************** e.g. see https://www.sitepoint.com/five-ways-to-hide-elements-in-css/ */ .author_facet { position: absolute; /* stops it taking up space in page flow */ visibility: hidden; /* display:none would have prevented any programmatical interaction */ top: -9999px; left: -9999px; } .flyout-row.name-post_author /* also do for flyout because although the fwp {content} takes over the facets, it seems to loose/strip the class entered for the module */ { position: absolute; /* stops it taking up space in page flow */ visibility: hidden; /* display:none would have prevented any programmatical interaction */ top: -9999px; left: -9999px; } /* ************************************************************************************** * * * set width of facet domain selection box * * * ************************************************************************************** */ .facetwp-facet-domain_type .fs-wrap { width: 100%; } /* ************************************************************************************** * * * set size and width of .facetwp-sort-select re too small * * * ************************************************************************************** */ .facetwp-sort-select { width: 100%; font-size: 20px; } /* ************************************************************************************** * * * set size .facetwp-per-page re too small * * * ************************************************************************************** */ .facetwp-per-page { font-size: 20px; } /* ************************************************************************************** * * * custom animated loader styling for FacetWP * * * ************************************************************************************** see https://gist.facetwp.com/?_keywords=animation just add .facet-container class to div you want to show loader in center There is also corresponding JS to insert & control behaviour of loader */ .facet-container { position: relative; } .facet-container-flyout .fl-col-content { /* position: relative; */ /* background-color: red; */ } .custom-loader, .custom-loader-flyout { position: absolute; /* background-image: url("/spinners/5.svg"); */ /* specify chosen custom loader/spinner */ /* background-image: url("/spinners/loading-spin.svg"); */ /* background-image: url("/spinners/loading-bars.svg"); */ /* background-image: url("/spinners/loading-bubbles.svg"); */ /* background-image: url("/spinners/loading-spinning-bubbles.svg"); */ /* background-image: url("/spinners/loading-spokes.svg"); */ /* background-image: url("/spinners/oval.svg"); */ background-image: url("/spinners/tail-spin.svg"); background-position: top ; background-position-y: 110px; background-repeat: no-repeat repeat ; background-size:75px 295px; } /* My Notes/Findings: - Background image parameters can all get very complex and have browser anomolies especially when using .svg images - most background-aaaa params have x and y arguments - background-image: url() can be relative or absolute address - background-position: gives first (or only) x, y position (background-position-x: & background-position-y: similarly) - background-repeat: can be 'repeat' (to repeat right next to) or 'space' to create space between. Can be set different for x and y axis If use space on an axis dimension, I found that could not then @keyframes animate 'background-position' on that axis (whereas could if used 'more cramped' repeat There is also a 'round' option for the argument, but could not get it to work or see a difference. (Investigate) - background-attachment: can be 'fixed' or 'scroll' to govern if background image(s) scroll with page scroll - background-size: gives x, y (px or %) size if single image(s), can set one axis and use 'auto' on the other. not always obeyed if use SVG - I believe @keyframes needs various browser prefixes to work on more browsers. */ /* ************************************************************************************** * * * Facet slider color & its reset button top margin * * * ************************************************************************************** */ .facetwp-bb-module .facetwp-slider .noUi-base .noUi-connect, /* within wide screen col */ .facetwp-slider-wrap .facetwp-slider .noUi-base .noUi-connects .noUi-connect /* within flyout */ { /* background-color: #eaedf1; */ /* as per oneclickproperty.com logo orange */ background-color: #DCE0E8 !important; background-color: #4D648D !important; } .facetwp-slider-reset /* also increase margin slightly above size slider reset range button */ { margin-top: 7px; } /* ************************************************************************************** * * * Right justify FacetWP per page facet in column * * * ************************************************************************************** */ .per-page-col .fl-module-content { float:right; } /* ************************************************************************************** * * * Size Font of FacetWP pager facet * * * ************************************************************************************** */ .facetwp-pager { font-size: 20px; /* & set text size */ } .facetwp-page.active /* can use this to colour/style current page number - did hover via BB column link hover style */ { color: #283655 !important; } /* ************************************************************************************** * * * Center justify in column the FacetWP count facet (+ white background of module * * * ************************************************************************************** */ .count-col .fl-module-content { text-align: center; font-size: 22px; /* & set text size */ } /* ************************************************************************************** * * * Color Facet Titles * * * ************************************************************************************** */ .facetwp-facet-title { color: #555555; /*overridden by column style */ } /* and for flyout which is h3 vs h4 and has .facetwp-facet-title stripped */ .flyout-row h3 { /* color: #555555; */ font-size: 18px; color: #283655; } /* -------------------- D O M A I N S I N G U L A R T H E M E R L A Y O U T P A G E ----------------------- */ /* ***************************************************************************************** * * * cope with bug where UABB popup saved row will not allow its col to have min of 0 * * * ***************************************************************************************** Without this the min-height will be +1 and a white line will appear at bottom of page popup is registered for in footer Just add class .popupCol to UABB popup's save row column and this will take care of it */ .popupCol { min-height: 0px; } /* ***************************************************************************************** * * * myPostID hidden ID to put domain post id into singular page to use in AJAX calls * * * ***************************************************************************************** put into HTML module element of page and hidden with CSS */ #myPostID { display: none; } /* ***************************************************************************************** * * * Hide Domain Edit Form on singular page unless I choose to show it * * * ***************************************************************************************** hide edit form by default on sigular page, JS edit domain click will later show it if logged in with account and is your domain Now done using UABB popups rather than hidden forms in hidden row */ .DomainFormRow { /* display:none; */ } /* ***************************************************************************************** * * * conditionally hide property edit & delete buttons depending on person logged in.* * i.e. show button only if admin or author of post logged in . see * * * * https://beyondbeaver.com/hide-page-elements-in-beaver-builder-using-url-parameters/ * * * ***************************************************************************************** */ .editDomainButton /* hide edit domain button unless php showeditbutton class has been added to body by filter */ { display:none; } .showeditbutton .editDomainButton { display:block; /* show edit button if .showeditbutton was added to body element using WP filter */ } .deleteDomainButton /* hide edit domain button unless php showeditbutton class has been added to body by filter */ { display:none; } .showeditbutton .deleteDomainButton { display:block; /* show edit button if .showeditbutton was added to body element using WP filter */ } .editAndDeleteDomainDualButtons /* referring to dual button edit and delete buttons */ { display:none; } .showeditbutton .editAndDeleteDomainDualButtons { display:block; } .makeOfferAndEnquireDomainDualButtons /* referring to dual button make offer and enquire buttons */ { display:block; } .showeditbutton .makeOfferAndEnquireDomainDualButtons /* only showing these offer/enquiry buttons if not owner of domain */ { display:none; } #makeOfferTriggerHiddenButton /* hidden button that triggers make offer popup modal */ { display: none; /* although hidden, can be triggered via js code */ } /* -------------------- P B / P M S & A C C O U N T S P A G E S ----------------------- */ /* ************************************************************************************** * * * my layout fix for PB terms and condition checkbox field too smaller right margin * * * ************************************************************************************** see my emails to CozMosLabs of 18 Feb 2021 to Cristian. PB CSS should be fixed in next version of PB CSS Bug exists is PB v 3.3.8 but not in earlier versions */ .wppb-form-field.wppb-checkbox-terms-and-conditions input[type="checkbox"].custom_field_toa { margin-right: 10px !important; } /* ************************************************************************************** * * * without this the UABB advanced tabs module buttons text colour overrode * * the button text colour in any form shortcode within the tab * * so I added a class to the tab module * * * ************************************************************************************** */ /* .my-account-tabs input[type=submit] { color:white !important; background-color: #283655; } */ /* this is better re it targets the edit profile form wherever it is contained in hit the reg and login pages submit button too */ #wppb-edit-user-main-edit-profile-form input[type=submit], #wppb-register-user-main-registration-form input[type=submit], #pms_login input[type=submit], #pms_recover_password_form input[type=submit] { color:white !important; background-color: #283655; } /* .my-account-tabs */ .form-submit /* also center the submit button re rest of PB form is left justified */ { text-align: center; } /* ************************************************************************************** * * * min height for UABB Advanced tabs re stops height changing dependend on tab * * * ************************************************************************************** */ .my-account-tabs .uabb-content-wrap { min-height:640px; /* i.e. make other tabs content at least as high as Edit profile content */ } /* ************************************************************************************** * * * format/override PB Success message padding and alignment * * * ************************************************************************************** */ .admin-bar #wppb_form_general_message { text-align: center; padding-top: 10px !important; padding-bottom: 10px; } /* -------------------- U A B B G R A V I T Y F O R M S T Y L E R ----------------------- */ /* ***************************************************************************************** * * * UABB Gravity form styler - additional styles * * * ***************************************************************************************** Note: I tried PP GF form styler but the resulting form submit GF text confirmations lost its ability to have clickable links in it So Now using UABB GF form Styler which does not have this problem. */ /* .gform_wrapper .gfield_select */ /* style dropdown so same height as other boxes */ /* { height: 50px !important; */ /* -webkit-appearance: none; */ /* see https://legacy.forums.gravityhelp.com/topic/dropdown-menu-same-style-as-text-field */ /* box-sizing: content-box; } */ /* Also now re taller needs top-margin reduced from the original 10px */ /* .fl-row .myUABBStyler .uabb-gf-style .gform_wrapper .gfield select */ /* it was v hard to get this targeted re there is already margin-top:10px !important in GF CSS */ /* { */ /* needs myUABBStyler class added to each UABB Styler module placed */ /* margin-top: 2px !important; */ /* without .fl-row, did not target UABB GF Styler if within popup row AND if not in popup row */ /* } */ /* ***************************************************************************************** * * * style gravity form AJAX Spinner size & position * * * ***************************************************************************************** */ .gform_footer { position: relative; } .gform_footer .gform_ajax_spinner { position: absolute; top: 50%; left: 50%; height: 50px; /* transform: translateX(-50%); */ transform: translate(-50%, -50%); color: #000e38; /* #f16320; make it oneclick orange */ } /* ********************************************************************************* * * * hide gravity forms validation error box at top of form * * re input fields already explain any validation errors * * * ********************************************************************************* */ .gform_validation_errors { display: none !important; } /* ********************************************************************************* * * * re other GF form styling and overrides to overcome theme styles * * * ********************************************************************************* i.e. overcoming orbital theme and default theme styling */ /* make button full width on contact form */ #gform_submit_button_1 /* re this is button 4 */ { /* width: 100% !important; */ } /* bigger label text size */ .gform-field-label.gform-field-label--type-sub { font-size: 1em !important; } /* less or specific space between rows */ /* .gform-theme--foundation .gform_fields */ /* apply to all forms */ .gform-theme--foundation #gform_fields_1 /* only apply to contact form */ { grid-row-gap: 20px !important; } .gform-theme--foundation #gform_fields_2 /* only apply to contact form */ { grid-row-gap: 20px !important; } body .gform-theme--foundation .gform_wrapper .gform_ajax_spinner { /* color: green !important; background-color: red !important; */ } /* form 1 = contact form */ form#gform_1 input#gform_submit_button_1 { background: #00092d !important; /* change submit button colour */ } form#gform_1 input#gform_submit_button_1:hover { background: #428aca !important; /* change submit button hover colour */ } /* form 2 = Newsletter form */ form#gform_2 input#gform_submit_button_2 { background: #00092d !important; /* change submit button colour */ } form#gform_2 input#gform_submit_button_2:hover { background: #428aca !important; /* change submit button hover colour */ } /* center GF contact and newsletter form submit button horizontally */ /* see https://workfromsomewhere.com/how-to-center-submit-button-on-gravity-form/ */ #gform_submit_button_1 { display: flex; align-items: center !important; justify-content: center; /* width: 50% !important; */ margin-right:auto; margin-left:auto; } #gform_submit_button_2 { display: flex; align-items: center !important; justify-content: center; width: 55% !important; margin-right:auto; margin-left:auto; } /* this purely removes the unattractive box shadow on GF focused input fields set the input field border properties incl focus/active within individual form Grav form styler modules Note: this box shadow removal technique will apply to all GFs */ .gform_wrapper .gform_body input[type=text]:focus, .gform_wrapper .gform_body input[type=email]:focus, .gform_wrapper .gform_body textarea:focus { /* outline: 2px solid red; */ /* outline-offset: -2px; */ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } /* ***************************************************************************************** * * * style gravity form Confirmation Message * * * ***************************************************************************************** Note for GF form text conformations: - can enter and format text - can enter BB layout slug shortcodes (e.g. column layout) - but alignment may need to be adjusted/overriden with manual CSS - column layout can include image but may need to override size, alignment with manual CSS */ .confirmation-logo-col { float:none; } .confirmation-logo .pp-photo-content { max-width: 45%; } /* -------------------- G E N E R A L / O V E R A L L ----------------------- */ /* ************************************************************************************** * * * Terms and Condition Popup text editor bullet list formatting * * * ************************************************************************************** */ .terms .fl-module-content ul li { margin-bottom: 10px; /* vertically space out the terms */ } /* ********************************************************************************************* * * * Removal of default thick blue/orange around dropdowns & tab header/accordion boxes etc * * * ********************************************************************************************* Notes: Have now added it to OneClickProperty too re property type facet search had it. Looks unprofessional and gets in the way using *:focus may be overkill re covers all situations & note that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused. But this catch-all is good for now. could mess up form focus so check see: https://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element */ *:focus { outline:none !important; /* important needed otherwise will only apply to some problem beaver builder items. e.g. to facet dropdowns but not accordion items */ } /* ***************************************************************************************** * * * minimum page length to stop header riding up on short pages * * * ***************************************************************************************** see https://wpbeaches.com/adding-a-sticky-footer-to-beaver-builder-theme-with-flexbox/ */ .fl-page { display: -ms-flexbox; display:-webkit-flex; display:-webkit-box; display:flex; -ms-flex-direction:column; -webkit-flex-direction:column; -webkit-box-orient:vertical; -webkit-box-direction:normal; flex-direction:column; min-height:88vh; } .fl-page-content { -ms-flex:1; -webkit-flex:1; -webkit-box-flex:1; flex:1; width: 100%; word-wrap: break-word; } /* ************************************************************************************** * * * Animated repeated background image logo on various page rows / elements * * * ************************************************************************************** just add .animatedRow class to the row or element (only tried with rows so far) My Notes/Findings: - uses css @keyframes animation of background-image's background-position parameter - Background image parameters can all get very complex and have browser anomolies especially when using .svg images - most background-aaaa params have x and y arguments - background-image: url() can be relative or absolute address - background-position: gives first (or only) x, y position (background-position-x: & background-position-y: similarly) - background-repeat: can be 'repeat' (to repeat right next to) or 'space' to create space between. Can be set different for x and y axis If use space on an axis dimension, I found that could not then @keyframes animate 'background-position' on that axis (whereas could if used 'more cramped' repeat There is also a 'round' option for the argument, but could not get it to work or see a difference. (Investigate) - background-spacing: specify xpx ypx spacing between images. I could not get it to work. - background-attachment: can be 'fixed' or 'scroll' to govern if background image(s) scroll with page scroll - background-size: gives x, y (px or %) size if single image(s), can set one axis and use 'auto' on the other. not always obeyed if use SVG - I believe @keyframes needs various browser prefixes to work on more browsers. */ .animatedRow .fl-row-content-wrap { background-image: url("/wp-content/uploads/2021/02/SelectDomain.com-Logo-1024x500.png"); background-position: top ; background-position-y: 110px; background-repeat: space repeat ; background-attachment: fixed; background-size: 300px auto ; animation: animatedLogo 1s linear 1 ;/* infinite; */ } @keyframes animatedLogo { from { background-position: 0px 0px; } to { background-position: 0px -100%; } } /* ************************************************************************************** * * * Colour Palette Notes - For SelectDomain.com * * * ************************************************************************************** - Great advice on https://www.canva.com/learn/100-color-combinations/ - I used 'Blueberry'-based type Pallett: Light to dark #D0E1F9 - Periwinkle (menus and highlights) #4D648D - Blueberry (used extensively as bold solid on form headers etc, or lighter version throughout for form backgrounds etc) #283655 - Indigo Ink (selective use for contrast) #1E1F26 - Midnight Blue (almost black. may use) Also added grey and white into the mix Standardised on Inter Google Font. Get antialiasing right later - See https://www.canva.com/design/DADfFNKhZWs/remix?action2=create&mediaId=DADfFNKhZWs&signupReferrer=blog&utm_source=blog&utm_medium=content&utm_campaign=100-color-combinations&_branch_match_id=902153752456965828 - I then used #4D648D Blueberry at various opacities for backgrounds & obtained the 'hex 100% opaque No opacity equiv' by using Sketch's colour picker on opacity adjusted Blueberry on white background E.g. Blueberry at 0.12 opacity on white brackground = #eaedf1 (used for form backgrounds) Blueberry at 0.20 opacity on white brackground = #DCE0E8 (used for facetwp spinner) Blueberry at 0.45 opacity on white brackground = #afb9cc (used for form boundary) Blueberry at 0.75 opacity on white brackground = #59657D (use for form copyright) Account Form: (Animation Zoom In 0.7 secs duration, no delay) Header: #4d648d background, rgba(255,255,255,0.91) = #EEF0F4 text, L/R top radius = 10, Form: #eaedf1 background, border width = 3, border color = #afb9cc Copyright: h6?? , text = #59657D, #eaedf1 background, radius 10 Account Page Row: Full Overlay Color = rgba(240,240,240,0.91), Photo = Center Scroll Fill Class = animatedRow, Animation None (I do it with CSS @keyframes) */