Homepage › Community Forums › Optimal Theme Support › Help with Final Tweaks
Tagged: Slider, widgets labels
The site I was having problems with regarding the site tite and description text I’ve overcome by chaning alignment to the center and it actually looks pretty good. I have two small issues to overcome before I can call it a day.
First the development site is at http://filmmakersvillage.com/krisannev2/
Issue/Tweak # 1: I’ve configured the slider at the same dimensions as is in the Optimal Theme demo whic is 1140×400 the slider seems to be covering the nice little shadow that is shown in the demo below the slider. I’m using the Layered Slider and not the Genesis slider so that may be the issue but on inspection it would appear as if the margin between the top of the slider and header is excessive. So my first thought is to remduce the margin/spacing, hoping that it will reveal the shawow below the slider.
Issue/Tweak #2: Scrolling down in the sidebar Home Featured Posts I’ve stacked two Featured Posts widgets. One for books and one for articles. For some reason the widget title for the “Articles” is right justified and I’d like to left justify. Scoured through CSS looking but can’t find it.
Thanks in advance. You’re help is much appreciated.
Dan
For the shadow, go to line 890 in your css and increase the bottom padding like this –
.slider .wrap {
background-image: url(images/slide-shadow.png);
background-position: center bottom;
background-repeat: no-repeat;
margin: 0 auto;
padding: 30px 0 40px !important;
width: 1140px;
}
You can adjust that number (40px) if you want. I think you currently have it set at 5px. Once you make that change it will look like this – http://i.imgur.com/3Gkgnqy.jpg
For the second issue, head over to line 1063 and add float: left;
to the .home-bottom .widget
like this –
.home-bottom .widget {
float: left;
margin: 0 0 20px;
padding: 0;
}
The end result will look like this – http://i.imgur.com/GS9UaGm.jpg
Hey Wes,
Thanks for the reply.
Was able to get the shadow below the slider no problem.
The other adjustment to add float:left to the home-bottom widget didn’t give me the same results as what you show in your screen shot.
It justified the text properly but the entire widget area shifted to the left which is now caused the removal of space between the home-bottom-widget and home bottom sidebar.
Any suggestions or ideas why I didn’t get the same results as you?
One last thing that I think I’d like to ask for some help on is to reduce the amount of space between the top of the slider and the header area.
Not sure if I should muck with the header size of 360 by 164 for something slimmer? Or if would be better to shift the entire header area down towards the slider a notch, or two.
thanks in advance.
Dan
Just took note of of the fact that it is only in Firefox where there is an issue between home-bottom-widget and home-bottom sidebar. Does this make the problem insurmountable?
In Chrome, all is well, but in Firefox and IE it’s an issue.
Thanks in advance for helping. Please advise.
Dan
Any chance Wes you can help me close out this issue with Firefox as described above?
I apologize for responding so late, I never got an Email notification when you replied….sometimes that happens (hopefully I can figure out why that’s happening).
Anyways, do you remember what changes you made to the css? For some reason this entire section is missing from your CSS –
@media only screen and (max-width: 1180px) {
.wrap,
.site-header {
max-width: 960px;
}
.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
width: 740px;
}
.content {
width: 620px;
}
.site-header .widget-area {
width: 590px;
}
.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content,
.content-sidebar-sidebar .content {
width: 400px;
}
.sidebar-primary,
.title-area {
width: 300px;
}
}
I would add that at the top of your Responsive CSS section and it should fix most of the issues….if not, just let me know.
Hi Wes,
Still have the Firefox issue at
http://krisannehall.com.
Any additional suggestions?
Dan
Your images are wider than the widget area and caused the entire widget area to extend further than what it’s designed to. Other browsers adjust the image to fit inside, but firefox didn’t for some reason.
To fix it, just add this to your css –
.home-bottom-sidebar img {
width: 100%;
}
The images will be responsive and fit inside the widget area instead of expanding it.
Let me know if that fixes it.