Forum Replies Created
-
AuthorPosts
-
askdesignParticipant
Download the style.css file to your computer. Make a copy of the file. Then, you could do a search and replace for the background color element:
.avada-html-layout-boxed, .avada-html-layout-boxed body, .avada-html-layout-boxed body.custom-background, html:not(.avada-html-layout-boxed):not(.avada-html-layout-framed), html:not(.avada-html-layout-boxed):not(.avada-html-layout-framed) body { background-color: #1e1ed8; background-blend-mode: normal; }
Change from: background-color: #1e1ed8;
Change to: background-color: #0c0c0d;
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantLooks like you've got this solved, yes?
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantRESOLVED: This is a tutorial, not a question.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantOne way to do it is to make it "invisible", like this:
.header-left { float: left; position: relative; width: 25%; z-index: 99; visibility: hidden; }
And then reduce the height of the header:
.site-header > .wrap { padding: 20px 0; margin-top: -50px; }
Anne S. Katzeff
Designer | Artist | TeacherJune 28, 2020 at 2:00 pm in reply to: Larger background image in Essence Pro Theme (Cover more space?) #499675askdesignParticipantCurrent code:
.margin-overlay { margin-top: -100px; }
Modified code:
.margin-overlay { margin-top: 0; }
However, if the .margin-overlay class is used elsewhere, you'll have to
be more specific for the change to be applied only on the Home page. Try
adding to the .ab-block-post-grid class, like this:Modified code:
.ab-block-post-grid { margin-bottom: 0; margin-top: 0; }
If necessary, be more specific to restrict the change to the area you want.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipant1. Make the font bigger of 'A CLOUDY LAB' in the header.
Current style.site-title a { font-size: 32px; font-weight: bold; }
Modified style
.site-title a { font-size: 42px; font-weight: bold; }
2. Make the font bigger of Menu (HOME, VSPHERE, HOMELAB, ABOUT).
Current style.nav-primary .genesis-nav-menu a { font-size: 18px; }
Modified style
.nav-primary .genesis-nav-menu a { font-size: 24px; }
3. Get rid of that black space where Home is written whole together right under need the header.
I don't see the black space you're referring to, sorry.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantIt looks like you found a solution, yes?
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantTry the following:
(1) Clear your browser cache
(2) If your site uses a CDN, be sure to clear that cache as well
(3) Another set of styles may be overriding the one you changed. Get more specific in your edited code:.ab-block-post-grid header h2.ab-block-post-grid-title a { color: #1c69c2; text-decoration: none; }
Are you placing the custom code inside the Customizer?
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantURL doesn't exist.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantChange the max-width from 1140px to the wider width you want:
Original code =.site-inner, .wrap { margin: 0 auto; max-width: 1140px; }
Revised code =
.site-inner, .wrap { margin: 0 auto; max-width: 1400px; }
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantHere's one way to do it:
.title-area { float: left; padding: 10px 0; text-align: center; width: 100%; margin-top: -48px; } .no-off-screen-menu .site-title, .no-off-screen-menu .site-description { text-align: center; text-indent: 0; }
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantMake a backup of the stylesheet before editing it!
To place it into the Magazine Pro stylesheet, search for it in the style.css file and either edit the element directly, or place the revised code underneath the original code. The stylesheet can be downloaded and edited on your computer (then you upload the revised file) OR you can edit it in WordPress:
Appearance > Theme Editor > style.cssIn Google DevTools, it shows the CSS line where the code resides:
Line 1879..footer-widgets-1 { width: 100%; text-align: center; }
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantIt looks like you figured it out:
.genesis-nav-menu a:hover, .genesis-nav-menu .current-menu-item > a, .genesis-nav-menu .sub-menu .current-menu-item > a:hover { color: #15a9a9; }
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantPlease provide the URL, so that someone can assist you.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantFor the footer widgets, I see only Footer 1 displayed. Are you saying that the widget areas for Footers 2 and 3 don't exist? If so, I would try re-installing the theme.
If you are comfortable editing the functions.php file, this is the code that should exist in it:
// Add support for 3-column footer widget. add_theme_support( 'genesis-footer-widgets', 3 ); // Register widget areas. genesis_register_sidebar( array( 'id' => 'front-page-1', 'name' => __( 'Front Page 1', 'digital-pro' ), 'description' => __( 'This is the 1st section on the front page.', 'digital-pro' ), ) ); genesis_register_sidebar( array( 'id' => 'front-page-2', 'name' => __( 'Front Page 2', 'digital-pro' ), 'description' => __( 'This is the 2nd section on the front page.', 'digital-pro' ), ) ); genesis_register_sidebar( array( 'id' => 'front-page-3', 'name' => __( 'Front Page 3', 'digital-pro' ), 'description' => __( 'This is the 3rd section on the front page.', 'digital-pro' ), ) );
BE SURE TO MAKE A BACKUP OF YOUR THEME BEFORE DOING ANY EDITS!
For the text color, the original code is:
.site-footer a, .site-footer p { border-bottom-width: 0; color: #f2f2f2; }
I've changed it to red to make it visible, but you can use any color you want:
.site-footer a, .site-footer p { border-bottom-width: 0; color: #a73737; }
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantOn the demo site, the settings are:
.content-sidebar .content, .sidebar-content .content { max-width: 680px; }
and
.sidebar-primary { float: right; width: 375px; }
You can change these widths. For example:
.content-sidebar .content, .sidebar-content .content { max-width: 780px; }
and
.sidebar-primary { float: right; width: 275px; }
Anne S. Katzeff
Designer | Artist | TeacherJune 20, 2020 at 7:01 pm in reply to: Change the text color of the "Copyright…"in the footer menu in Genesis Sample #499410askdesignParticipantPlease provide the URL so that someone can assist you.
On the demo site, here's what I was able to find:
.site-footer p { margin-bottom: 0; }
I added the color:
.site-footer p { margin-bottom: 0; color: #ca1f1f; }
Use whatever color you like.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantTry this:
.nav-primary { float: none; text-align: center; margin: 0 auto; }
.nav-primary .genesis-nav-menu { display: block; }
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantChrome, Firefox, and Safari each have their own developer tools that will help you select the HTML code for an element and identify its associated CSS code. To access Chrome DevTools, go to the View menu > Developer > Developer Tools or use keyboard shortcut CMMD-Option-I (Mac) / CNTRL-Shift-I (Windows). Use the Selector tool arrow to click on an element. On the left side of the Devtools panel, you'll see the HTML; on the right side is the CSS.
For the headline color (More About Us) of the first post on your home page, here's what I found:
.ab-block-post-grid header .ab-block-post-grid-title a { color: #293038; text-decoration: none; }
To change the color, click on the tiny box to the left of the hashtag and a color wheel will pop up. Find the color you want and change it. I chose a blue:
.ab-block-post-grid header .ab-block-post-grid-title a { color: #1c69c2; text-decoration: none; }
Of course, changing it with DevTools only gives you a preview. It doesn't change the real CSS file. That will be your next step. Copy the revised code and paste it into the actual CSS file. There are a variety of ways to do this. The code I've given as an example above is in the Atomic Blocks plugin. Other code you want to modify may reside in other plugins or the main CSS.
So, I'm going to recommend that you place all of your revised CSS in the Customizer: Appearance > Customize > Additional CSS.
Good luck and have fun!
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipant*** RESOLVED ***
Hi Matt,
That is good detective work! Now that you've told me, of course it makes perfect sense!I also wrote to the theme developer (Bloom Blog Shop), and here's what they said:
You can add the code snippets to the functions.php from Genesis, or what may be easier is to download this plugin:
https://wordpress.org/plugins/genesis-simple-edits/
Then you can go to Genesis > Simple Edits and edit the footer credits there!I used Simple Edits and it's fine, but I also will try out your method.
Thank you so much,
Anne
Anne S. Katzeff
Designer | Artist | Teacher -
AuthorPosts