Community Forums › Forums › Archived Forums › Design Tips and Tricks › Autho Pro Home Page Question
- This topic has 15 replies, 2 voices, and was last updated 8 years, 5 months ago by mrlennyman.
-
AuthorPosts
-
November 3, 2015 at 10:20 am #170001mrlennymanMember
Hi there,
I have two queries.
1. Is it possible to remove padding from some of the widget areas on the Home page of the Author Pro theme, but not others? The front page widgets all seem to come under the same conditions for style and I cannot figure out how to change it.
2. Is it possible to increase the size of the logo, while keeping it mobile responsive? I would like something a little bigger, but not massively so. Is there some code fixes for this?
Many thanks.
November 3, 2015 at 10:40 am #170006PorterParticipantNovember 3, 2015 at 11:07 am #170014mrlennymanMemberIt's still under construction so you will have to login to view...
http://travelkidsclub.com/wp-admin/
User: Studio P
PW: 6AR6aDY9mu075fVblQQv3tPf
CheersNovember 3, 2015 at 11:21 am #170020PorterParticipantWhich widget areas (explain them the best you can) are you looking to change?
November 3, 2015 at 11:30 am #170021mrlennymanMemberOn the home page there are 5 Widget Areas, numbered, Front Page 1-5. As they appear on the home page, they show as the welcome widget (number 1) then under that, the silly cartoon (number 2) and then a text widget under that with a quote (number 3) and so on.
I want to be able to remove the padding from Front page 2 (the silly B&W cartoon), so that it fills the entire area of the widget.Does that make sense?
November 3, 2015 at 11:53 am #170031PorterParticipantTo remove the padding, search style.css for this:
.flexible-widgets.widget-full .widget { margin-bottom: 0; padding: 80px; }
and replace it with this:
.flexible-widgets.widget-full .widget { margin-bottom: 0; padding: 80px 0px; }
You can change the padding to 80px 0px 0px 0px; if you want remove the bottom spacing as well.
Then add this:
.front-page-2 .widget-area img { width: 100%; }
The second bit (just above) is only needed if the image you supply is less than 1280px, as you're currently blowing up the image, which doesn't always look great. It may effect how responsive it is though, so you might as well keep it in.
November 3, 2015 at 12:14 pm #170037mrlennymanMemberThanks for that.
I followed those instructions, but that changes the padding on ALL the widgets, not just the second one.
Is it possible to change the padding for just one of the widgets, while leaving the others at their original levels?
Cheers for your helpNovember 3, 2015 at 12:21 pm #170039PorterParticipantYou should be able to specify padding for just that area by adding this:
.front-page-2 .flexible-widgets .widget-full .widget { padding: 80px 0px; }
We're just adding the ".front-page-2" selector to be more specific, add that code somewhere after this one:
.flexible-widgets.widget-full .widget { margin-bottom: 0; padding: 80px; }
November 3, 2015 at 12:29 pm #170043mrlennymanMemberI tried that...doesn't seem to recognize that instruction - nothing changes.
Any other ideas for it?
November 3, 2015 at 12:39 pm #170045PorterParticipantTry:
.front-page-2 .flexible-widgets .widget-full .widget { margin-bottom: 0px; padding: 80px 0px; }
And if that fails:
.front-page-2 .flexible-widgets .widget-full .widget { padding: 80px 0px !important; }
November 3, 2015 at 12:48 pm #170049mrlennymanMemberI tried them both and still doesn't seem to do anything.
If I created a pic which matched the background that could possibly work too. I could create the image accordingly, with the padding included (if that makes sense.
Do you know how to change the colour of the individual "Front-page widgets"?
November 3, 2015 at 12:59 pm #170056PorterParticipantIt seems you have a few places in action right now, that are all competing for preference. Try this:
Find this:
.flexible-widgets.widget-full .widget { margin-bottom: 0; padding: 80px; }
Change it to:
.front-page-2 .flexible-widgets .widget-full .widget { margin-bottom: 0px; padding: 80px 0px !important; }
Make sure this is added (I don't see it right now):
.front-page-2 .widget-area img { width: 100%; }
Do that, and even if it doesn't work, keep the code live so when I look, I can see what's going wrong. That's working on my end, and I see everything correctly, so it should work.
November 3, 2015 at 1:08 pm #170059mrlennymanMemberOK...that looks a lot better as it is now 100% wide...
But it appears that it has still removed the padding from other widgets too...but I like the way it looks now - thank youThere is still white space at the bottom of the image which I would like to be removed if possible, without removing that space from the other widgets
November 3, 2015 at 1:16 pm #170061PorterParticipantAlright, one step at a time!
For the additional spacing at the bottom, it's caused by:
.widget-area.flexible-widgets .widget { float: left; margin-bottom: 40px; margin-left: 2.564102564102564%; }
You'd have to remove that 40px. Like the other situations, this will effect all of them, removing the 40px below on everything - see how you like that. If you want to specify just this one, you should be able to do:
.front-page-2 .widget-area.flexible-widgets .widget { float: left; margin-bottom: 0px; margin-left: 2.564102564102564%; }
ADD that, don't replace the old one (if you want to change just this one).
November 3, 2015 at 1:36 pm #170063mrlennymanMemberOne step indeed!!
Thanks heaps...that has gotten me very close to what I want. Much appreciated. I'll be working with a new image in that position tomorrow so will wait for any final adjustments until then.
Thanks again for your time and patience...it means a lot.
November 3, 2015 at 3:12 pm #170076mrlennymanMemberBy the way, one last thing...I just had a quick look on the mobile site and there is a lot of padding around the image which is quite small.
Do you know where the media settings in css are to add the same styling to the display in mobile devices?
Thanks again.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.