Browser issues, widget layout

[Chris Marsh]

site: http://www.sjtl.org

Couple of questions:
1. For some reason the logo doesn’t show up in Firefox – it’s fine in Chrome, though.
2. The Home Bottom widget has quite a gap between it and the top section. Is there any way to close that up a little?
3. Lastly, can the timing of the slideshow be adjusted???

With thanks,

Chris

[Bill Robbins]

Chris,

Let me see if I can help you out.

1) Your logo is showing up in Firefox for me. There’s a quick screenshot of it at http://d.pr/6yOx. If you still can’t see it, try clearing out your browser’s cache and seeing if it’s visible then.

2) You can reduce that space. Here’s how. Go to the appearance section and select edit to open up the theme editor. From the list of files on your right, choose style.css and look down until you see this spot:

header nav {
position: absolute;
right: 0;
top: 40px;
}

and replace it with this:

header nav {
position: absolute;
right: 0;
top: 65px;
}

then save your changes.

3) You can edit the slideshow timing. WordPress’ built in editor doesn’t let you edit javascript files, but there is a plugin you can install that will let you. It’s called the Solid Code Theme Editor. You can search for it under Add New plugins and add it. That will let you be able to edit a file called custom.js.

Once there, you’ll see a section that looks like this:

$j(‘.featured’).orbit({
animation : ‘fade’, // fade, horizontal-slide, vertical-slide, horizontal-push
animationSpeed : 800, // how fast animtions are
timer : true, // true or false to have the timer
advanceSpeed : 4000, // if timer is enabled, time between transitions
pauseOnHover : false, // if you hover pauses the slider
startClockOnMouseOut : false, // if clock should start on MouseOut
startClockOnMouseOutAfter : 1000, // how long after MouseOut should the timer start again
directionalNav : true, // manual advancing directional navs
captions : false, // do you want captions? // if so how quickly should they animate in
bullets : true // do you want navigation bullets?
});

There are descriptions off to the right beside each option. The animation speed is for how long in milliseconds each transition occurs and the advance speed is how long each slide is active.

It is a bit more difficult to get to this to edit it by having it in this file, but it also reduces the number of javascript conflicts significantly so that’s why we have it there. Sorry for the extra trouble.

If I can help with anything else, please let me know,
Bill

[Chris Marsh]

Thanks for your help!
One thing that would be really helpful – a list of the font selectors used in the theme.
I can’t find the tag for the front page widgets, and it would be great to know what the selectors are – ie widget headings, menus etc.
Currently enjoying Google Fonts!!!

Chris

[Bill Robbins]

Google Fonts can be so useful. Here are a few of the tags you might find helpful for working with the fonts:

Widget titles: h4.widget-title
Top Navigation Items: header .menu a, header .menu a:visited
Sub-navigation Items: .menu li li a, .menu li li a:visited
Page/Post Titles: h1
All content level items: body, p, li, ol, ul, span, div, label, legend, form, fieldset, input

If you need any more help, please let me know.

[Chris Marsh]

Thanks for your help!
Logo doesn’t seem to appear in firefox on widows – it’s fine on a mac! :s
http://www.sjtl.org

i seem to be understading CSS a bit more…
is there any way I can tweak the widget boxes by adding a background colour?
or better still, I’d like to add some sense of depth, like the footer on this site:
http://www.stbd.org.uk/index.phphttps://support.organizedthemes.com/forums/topic/browser-issues-widget-layout/

also, I’ve not worked out how to set up a podcast page which lists all the published sermons. any clues?

thanks,

chris

[Bill Robbins]

Chris,

I took a look at your site in Firefox 5 on Windows and your logo looked great. You might try clearing your cache and trying again. If you still have trouble let me know.

The nice thing about CSS is that it reads like English so that makes learning it so much easier than a programing language. The default selector for a widget is like this:

.widget {
background-color: #ccc;
}

That would add a silver background color to all the widgets on the site.

You could add shadows similar to the ones on the St. Barnabas site you showed me. Those are actually made with a background image. There are some free ones you might could use at: http://designmoo.com/5381/realistic-web-shadows-free-psd/

If you have any other questions, let me know.

[Chris Marsh]

Looking great…
what code do I need to add images as widget backgrounds, and where does the code go?
Also, I’ve managed to get the logo to move, but I’d love it at the absoulte top of the page … and now the menu has gone a bit too high… how can I get it in the middle of the logo/banner??

[Bill Robbins]

Chris,

I found a couple of spots that may be causing the height some trouble in the style.css:

header {
height: 150px;
position: top;
z-index: 1002;
}

and

header nav {
position: left;
right: 0;
top: 65px;
}

header ul.menu {
float: right;
list-style: none;
margin: 0;
top: 65px;
}

You could try replacing those with these:

header {
height: 150px;
position: relative;
z-index: 1002;
}

header nav {
position: absolute;
right: 0;
top: 37px;
}

header ul.menu {
float: right;
list-style: none;
margin: 0;
}

Try that and see if it doesn’t help a bit.

For adding a shadow image, it depends on where you want to add it. If it’s at the bottom of a box, you can sometimes add it as a background image at the top of the box below it. Sometimes it’s easier to add a an empty div just after the spot where you want the shadow to be and then place it in that empty div.

The best advice I can give is to experiment until you find the best results and have fun.

[Author]

Posts