- This topic has 10 replies, 3 voices, and was last updated 2 weeks, 5 days ago by
.
-
Posts
-
Just purchased and installed the Graduate Pro theme for a client. Would like to have the social media icons and “Connect with a Counselor box to appear on this new website in the header area (right side) like Graduate Pro demo. I don’t see an area in the customization section to make this happen. Please advise.
You can add social icons from the widget area. Go to Customizer >> Widgets >> Header Widget Area, from there you can add social icons from two different widgets, one with “Social Icons” and the other with “TP: Social Link”.
Here is the screen record of adding social links https://www.awesomescreenshot.com/video/30046278?key=1d39d61974e5a3be8771f8c984335f96
Thank you. I appreciate your reply.
I did finally figure it out right before you emailed me. However, when I added the button and two social media URLs I end up with a huge amount of white space that I can’t seem to get rid of.
Even if I delete the button and social media icons, I’m still left with a lot of space in the header area. https://new.numismaticcrimes.org/
Any ideas on how to correct this?
To fix lot of space in the header, you can add the bellow CSS to Additional CSS
.site-header .pull-right{
display: none !important;
}Banner image for web pages other than home page. I’m trying to remove the black overlay or reduce the opacity for the banner image. No changes work… tried removing background color altogether, tried reducing opacity, tried display: none and can’t get the black overlay removed. Please advise. We would like to see clear image with no overlay since image is already on the dark side.
.black-overlay {
width: 100%;
height: 100%;
background-color: #000000;
position: absolute;
top: 0;
opacity: 0.5;
left: 0;
}I added the code to Additional CSS and nothing changed. I would like this header area to look exactly like the demo of Graduate Pro when I add the social media icons and the “Connect with Counselor” but it doesn’t. The “Connect with Counselor” button is huge and takes up too much space. The social media icons drop to a second line which make the header area huge. How do I get what the demo displayed? Thanks.
Please, add this CSS. It include CSS to remove black overlay of the banner image and the CSS to fix the header space
#masthead .container .pull-right .widget .wp-block-buttons{
margin: 0px !important;
}#masthead .container .pull-right{
display: flex !important;
padding: 20px 0 !important;
}.main-navigation ul > li > a {
padding: 15px 15px !important;
}.black-overlay {
opacity: 0 !important;
}@media screen and (max-width: 992px){
#masthead .container .pull-right {
justify-content: center;
}
}@media screen and (max-width: 992px){
#masthead .container .pull-right {
flex-direction: column;
align-items: center;
}
}let us know if the above CSS does not works
We could still use some assistance with the large amount of excess white space in the header area here: https://new.numismaticcrimes.org/ We want the header area to look like the Graduate Pro demo website we checked out which was one of the main reasons we decided to purchase this one. We want the small social media icons to appear in a horizontal line right before the red (or gold in our case) contact button. How do we accomplish that and reduce the excess white space.
We would also like to remove the black overlay from the image at the top of every other web page… this example: https://new.numismaticcrimes.org/category/ncic-news/ because the original image is already very dark. Can you please advise?
Please help us with these issues or we may request a refund and go to a second theme we had in mind to use for our website redesign. Thank you.
@wcms, we provided you with CSS in the previous reply regarding the header space issue. Seems you have not added that CSS in the Additional CSS. However, if you want to have the same header as in the demo you can use “TP: Social Link” and “TP: Link Button” widgets on the Header Widget Area. Also, we will provide you a CSS to make a button color golden
Please follow the screen record
https://www.awesomescreenshot.com/video/30446626?key=09c11d1d41db1ef97373e45762893f2dHere is the CSS to make the button color golden – Add this to Additional CSS as in the screen record
.graduate_pro_link_buttons a{
background: #f99f2f;
}Regarding Black Overlay – Here is the CSS to remove the black overlay of the banner image from all pages
.black-overlay {
opacity: 0 !important;
}Please add this as in the screen record
https://www.awesomescreenshot.com/video/30446738?key=75d261845cfc6e140216acfbbf1ed215Additionally, the search field is not aligned with the menu items in the header. Here is the CSS to fix that issue
.main-navigation ul > li > a {
padding: 15px 15px !important;
}After adding all this CSS your site looks something like this
https://www.awesomescreenshot.com/video/30446798?key=a023baa8554a3f64e4e908d61a126b44
I hope this will solve all of the issues
Please let us know if you need any further assistance
Thank you! I had conflicting CSS added that was keeping me from getting to the layout that I wanted. This all worked out just fine.
We’re running into the same issue with the footer area as we did with the header area. You can see here: https://new.numismaticcrimes.org/ that we have huge blogs of white areas, however, we want the footer to look like what was displayed in the demo (https://themepalace.com/theme-demo/?demo=bXVNZENVRFdwWlArdTRLWTloRFhXZz09) with a solid color blue background and white text. We don’t find any settings allowing us to get rid of the big white boxes and design it like the demo. Can you help or point us in the right direction? Thanks!
- You must be logged in to reply to this topic.
