Posted 3 years ago #
I'm having a problem with the "WordPress Fun" theme/layout I got from SmashingMagazine.com.
The Category column at the lower left corner of my webpage is overflowing. And being the coding illiterate that I am, I've no idea where to start looking. I've tried looking through the theme files but they really make no sense to me.
I'll be more than happy to give access to the files and such. Here's my webpage.
Posted 3 years ago #
assume it was ok when you got it and something was done to make this happen. when ( what was done ) did the right-hand column move? was there a change in a page template? the style.css? etc.
Posted 3 years ago #
It originally had this problem, and then a friend of mine did some changes which fixed it. However, she had access to all the files and I've no idea what changes she made.
After moving to a new host, this problem reappeared. The confusing part is the theme was backed up from my old host before I moved it.
Posted 3 years ago #
two suggestions at this time. 1) if possible, invite your friend over to your house for dinner/wine but i am sure you thought of that. 2) if you had a good layout and lost it simply transferring to a new host your host might look at it. and pay close attention to the fix.
Posted 3 years ago #
Well, that friend of mine was my previous host as well and I moved because we had some disagreements lol. So asking her to help out again... Is pretty much out of the question...
I'm using Surpass Hosting, would they actually entertain me? I'm not even sure where that friend of mine made the changes...
@Kai911
Replace this;
.sub-container .category ul {
padding:0;
height:20em;
}in your style.css file (line 618),
with this;
.sub-container .category ul {
padding:0;
min-height:20em;
}The template author set a specific height for that list (ul), which is what is preventing the background image from extending below your list of categories.
Tested in: Firefox and IE.
Posted 3 years ago #
The file that she edited was the Stylesheet (style.css). Go to Appearance -> Editor in the administrator.
Scroll down to the lines:
.sub-container .category ul {
padding:0;
height:20em;
}Change the height from 20em to something that suits your site. 24em seems to work quite well.
Cheers!
Posted 3 years ago #
@dbmartin: Hi! It's you again! Thanks for helping me out once more!
@Dave: Thanks for your suggestion as well! I tried it out and it works well except that it's static as well and I don't want it to be static. Thanks anyway :)
Now I face another problem... When I make too many categories, the whole background image moves down instead of just extending...
lol, no prob. :)
This is what you currently have (style.css line 594):
.sub-container .category {
background:transparent url(images/categories.jpg) no-repeat scroll center bottom;
border-top:1px solid #333333;
padding-top:10px;
position:relative;
width:342px;
}Change it to:
.sub-container .category {
background:transparent url(images/categories.jpg) repeat-y scroll center top;
border-top:1px solid #333333;
padding-top:10px;
position:relative;
width:342px;
}Initially the theme author set the background image to be centered and aligned at the bottom and not repeating, the script above aligns it to the top and only repeats it on the y axis (vertical).
Just a heads up, I checked the settings for the other columns in your footer and they're all set similarly to your category column, so you may want to think about updating those as well.
Posted 3 years ago #
Hi Martin!
Thanks for your help (once more). Thanks for checking out the settings for the other columns as well. I changed all of them, but the problem I'm facing now is even more baffling. Maybe you can take a look at my site? I'm not sure how I should explain it.
The background image seems to be overflowing this time. Overflowing out of the borders of the column.
I checked it out. Here's the issue. There aren't any borders set on the columns, they're part of the background image. The only border set on the column is a top border, which is why the background images were orginally styled like so:
transparent url(images/categories.jpg) no-repeat scroll center bottom
Aligning the image to the bottom shows the bottom border (which is part of the image), aligning it to the top, shows the top border.
Because of the size of the actual image, and the height of your category list, you basically have three choices;
1. Set it like so:
transparent url(images/categories.jpg) repeat-y scroll center bottom
Which will show the top border of the image.
2. Set it like so:
transparent url(images/categories.jpg) repeat-y scroll center top
Which will not show a bottom border (like it does now).
3. Edit the actual background image itself and make it longer to cover the full height of your lists.
Personally, #2 looks the best in my opinion b/c it's hardly noticeable, but test out each alignment and see which one you like better.
Posted 3 years ago #
It looks okay to me in Firefox3...
Because I'm a perfectionist, I went ahead and made larger images for the backgrounds:
http://www.martinish.com/sect_resources/categories.jpg
http://www.martinish.com/sect_resources/discussed.jpg
http://www.martinish.com/sect_resources/links.jpg
You can download them from my site, and then replace your current ones with them, then set your column backgrounds like so:
transparent url(images/categories.jpg) repeat-y scroll center bottom
transparent url(images/discussed.jpg) repeat-y scroll center bottom
transparent url(images/links.jpg) repeat-y scroll center bottom
It should now display a "border" around the entire column.
I'll keep the images on my server for a day, and then take them down.
Let me know if you need anything else! :)
Posted 3 years ago #
I've a question though, if I simply replace the background image with larger ones, if the list increases will this happen again?
Posted 3 years ago #
Hi martin, where do I change these again? Not too sure and am afraid of twiddling with it lol
@Kai911 Yes, theoretically it could happen again if the list increases, but these new images are twice the size of the old ones, so the chances of that happening are unlikely.
Download the images from my site and upload them to your images directory:
"wp-content/themes/WordPressFun/images/". This will overwrite your current images.
Then, in your style.css change the background properties for each column:
.sub-container .category (line 594):
background: transparent url(images/categories.jpg) repeat-y scroll center bottom
.sub-container .discussed style.css (line 634)
background: transparent url(images/discussed.jpg) repeat-y scroll center bottom
.sub-container .links style.css (line 685):
background: transparent url(images/links.jpg) repeat-y scroll center bottom
That should do it!
(edit: I see you already uploaded the new images. Now just change the background properties as suggested and you'll be good to go!)
Posted 3 years ago #
Hey! It works great! It's much better now. There's still a little misalignment at the bottom though... Can anything be done about that?
Thanks for your help and patience man. =X Appreciate it a lot!
No prob.
You can correct the bottom alignment, but be careful, when you start changing a theme style too much, you may get unexpected consequences. Before making any changes, make a backup copy of your style.css file. That way, if anything get's screwed up, you can always just upload your backup and reset everything.
In any case, find the corresponding blocks of code and replace with the following:
style.css (line 602)
.sub-container .category .edge-cat {
background:transparent url(images/cat_edge.png) no-repeat scroll center bottom;
bottom:-1px;
height:46px;
margin-left:298px;
position:relative;
width:43px;
}style.css (line 641)
.sub-container .discussed .edge-dis {
background:transparent url(images/green_edge.png) no-repeat scroll right bottom;
bottom:-1px;
height:45px;
margin-left:244px;
position:relative;
width:44px;
}style.css (line 692)
.sub-container .links .edge-links {
background:transparent url(images/red_edge.png) no-repeat scroll right bottom;
bottom:-1px;
height:48px;
margin-left:282px;
position:relative;
width:50px;
}I haven't extensively tested it, but it works in Firefox.
Posted 3 years ago #
Thanks man! It worked wonders! I've also tested it out in IE8 Beta and it looks fine there!
Looks like you seriously went through everything in detail! I really, really appreciate the great help you gave me.
No prob!
This topic has been closed to new replies.
