Forum Replies Created
-
AuthorPosts
-
July 3, 2020 at 7:01 am in reply to: Header and footer white space on pages (Monochrome Pro) #499864askdesignParticipant
I don't see the white space issue with the header and footer. Have you fixed this?
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantI don't see any sliders or Call to Action.
For the footer, add a background-color style to the ".site-footer" element:
ORIGINAL CODE
.site-footer { color: #222; font-size: 12px; font-size: 1.2rem; padding: 40px 0; text-align: center; text-transform: uppercase; }
MODIFIED CODE`
.site-footer {
color: #222;
font-size: 12px;
font-size: 1.2rem;
padding: 40px 0;
text-align: center;
text-transform: uppercase;
background-color: #2a77b3;
}`
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantPlease provide the URL so that people can help you.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantThat URL brings up this error message:
This site can’t be reached
Anne S. Katzeff
Designer | Artist | TeacherJuly 3, 2020 at 6:50 am in reply to: Adjust vertical alignment of header menu, Monochrome Pro #499860askdesignParticipantThe URL you provided doesn't work.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantTry adding this to the CSS elements:
.footer-widgets { position: sticky; bottom: 65px; /* --- you'll have to play with this number --- */ z-index: 99; } .site-footer { position: sticky; bottom: 0; z-index: 999; }
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantI'm not sure which buttons you're referring to (there are lots of buttons on the site).
The social media buttons can be changed directly in the plugin. If you want to change the CSS manually, here's the code:
ORIGINAL CODE
#simple-social-icons-4 ul li a, #simple-social-icons-4 ul li a:hover, #simple-social-icons-4 ul li a:focus { background-color: #282828 !important; border-radius: 3px; color: #09baef !important; border: 0px #ffffff solid !important; font-size: 27px; padding: 14px; }
MODIFIED CODE
#simple-social-icons-4 ul li a, #simple-social-icons-4 ul li a:hover, #simple-social-icons-4 ul li a:focus { background-color: #282828 !important; border-radius: 3px; color: #09baef !important; border: 0px #ffffff solid !important; font-size: 37px; padding: 14px; }
For the Submit Button:
ORIGINAL CODE.hs-button { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; cursor: pointer; display: inline-block; font-weight: 700; line-height: 12px; position: relative; text-align: center; background-color: #ff7a59; border-color: #ff7a59; color: #fff; border-radius: 3px; border-style: solid; border-width: 1px; font-size: 14px; padding: 12px 24px; }
MODIFIED CODE
.hs-button { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; cursor: pointer; display: inline-block; font-weight: 700; line-height: 12px; position: relative; text-align: center; background-color: #ff7a59; border-color: #ff7a59; color: #fff; border-radius: 3px; border-style: solid; border-width: 1px; font-size: 24px; padding: 12px 24px; }
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantFor all h4 headers, there's a margin-bottom of 16px. You can modify the h4 entry-title by adding a new margin-bottom, as I've done below. This will leave the regular h4 style intact and only change the h4 entry-title.
ORIGINAL CODE
h1, h2, h3, h4, h5, h6 { color: #222; font-family: 'Raleway', sans-serif; font-weight: 500; line-height: 1.2; margin: 0 0 16px; }
MODIFIED CODE
h4.entry-title { margin-bottom: 6px; }
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantThe URL you provided doesn't work.
Anne S. Katzeff
Designer | Artist | TeacherJuly 1, 2020 at 7:07 am in reply to: Adjusting the size of the header image box in Magazine Pro #499790askdesignParticipantPlease provide the URL of the site.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantYour site title is currently an image, not text. If you took out the image and wanted to modify the text itself, here's what you do:
ORIGINAL CODE
.site-title a { color: #010101; font-style: normal; }
MODIFIED CODE
.site-title a { color: #816689; font-style: normal; }
It looks like you figured out how to change the entry title color:
.entry-title a { color: #816689; }
I'm not sure what you mean by sub-titles. If you provide an example, someone could help you with that.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantThe URL you provided doesn't work.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantThe exact code varies, depending on the theme. Use Chrome Dev Tools to select a specific link. Its html and associated style will appear in the devtools panels. You need to change the "border-bottom" property of the "a" tag or the "text-decoration" property. Here's are 2 examples of link code to modify:
ORIGINAL CODE
a { border-bottom: 1px solid #614899; color: #614899; text-decoration: none; } a:link, a:visited, a:hover, a:focus { color: (internal value); text-decoration: underline; cursor: auto; }
MODIFIED CODE
a { border-bottom: 0px solid #614899; color: #614899; text-decoration: none; } a:link, a:visited, a:hover, a:focus { color: (internal value); text-decoration: none; cursor: auto; }
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantMENU COLOR and THICKNESS (height)
(use whatever colors you want; just use mine as examples)
• ORIGINAL CODE:#primary-nav { background: #83d2ff none repeat scroll 0 0; } #header { background: #000; padding: 0; } .navigation ul li { float: left; line-height: 24px; position: relative; transition: all .25s linear; } OR #primary-navigation a { padding: 14px 15px; } #secondary-navigation a { padding: 12px 25px; }
• MODIFIED CODE:
#primary-nav { background: #a383ff none repeat scroll 0 0; padding: 10px 0; /* --- for increased height --- */ } #header { background: #2459be; padding: 10px 0;/* --- for increased height --- */ } .navigation ul li { float: left; line-height: 14px; /* --- for reduced height --- */ position: relative; transition: all .25s linear; } OR #primary-navigation a { padding: 8px 15px; /* --- for reduced height; works best without searchbox in navbar --- */ } #secondary-navigation a { padding: 6px 25px; /* --- for reduced height --- */ }
FOOTER COLOR
• ORIGINAL CODE:.copyrights { background-color: #83d2ff; }
• MODIFIED CODE:
.copyrights { background-color: #b6dd3d; }
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantRESOLVED
It looks like you've got this resolved.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantOne way to do it:
ORIGINAL CODE:.genesis-nav-menu .menu-item:hover > .sub-menu { left: auto; opacity: 1; } .genesis-nav-menu .sub-menu { /* left: -9999px; */ letter-spacing: 0; opacity: 0; position: absolute; transition: opacity 0.4s ease-in-out; width: 200px; z-index: 99; }
MODIFIED CODE:
.genesis-nav-menu .menu-item:hover > .sub-menu { /* left: auto; */ right: 192px; opacity: 1; } .genesis-nav-menu .sub-menu { /* left: -9999px; */ letter-spacing: 0; opacity: 0; position: absolute; transition: opacity 0.4s ease-in-out; width: 200px; z-index: 99; }
I tried
right: 200px;
But it wasn't right-aligned with the white bar, so I moved even further to the left.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantLooks like you've got this figured out! Great job!
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantIt's a very nice looking site. Clean and professional.
There are 3 areas that would benefit from adjustments:
(1) Primary navigation menu
The top set of menu labels is fine. It's the second set that could better be redone as a drop-down sub-menu for OUR WORK. The only exception would be REQUEST A CONSULTATION, which could be a sub-menu of CONTACT US.(2) REQUEST A CONSULTATION
This page is a little confusing. It's more of a REQUEST A QUOTE page, and the URL address actually says "Request a Quote", which is good. I recommend changing the page title from REQUEST A CONSULTATION to REQUEST A QUOTE.
You have a REQUEST A CONSULTATION button in the footer, which is great.(3) Overall, I think the site could use more images.
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantCarrie's tutorials are very good, but you do need to make adjustments to the tut she offers for Altitude Pro.
Here's another tut you could try:
https://www.wpbasics.org/how-to-add-a-utility-bar-to-the-altitude-pro-theme/Sridhar has lots of great tuts as well. They are behind a paywall, but you can subscribe for a month and get a lot of value:
https://sridharkatakam.com/tag/utility-bar/
Anne S. Katzeff
Designer | Artist | TeacheraskdesignParticipantI don't see the slider on your homepage. Resizing it to be full-width depends on the theme and the plugin.
Anne S. Katzeff
Designer | Artist | Teacher -
AuthorPosts