Posted 1 month ago #
There is one minor annoyance with my site I cannot fix.
Please goto my blog and look in the header area where all the pages are listed. I want to get rid of that small sliver of green in between the search bar and the "Send Us and Email". Can anyone help?
Hopefully some of you will not only help, but visit the blog from time to time :)
Posted 1 month ago #
Anyone?
Posted 1 month ago #
I'm not seeing the problem in Firefox, IE6 or IE7, unless you are talking about the green area between the "speak up" button and the orange search bar.
If that's what you're talking about, the reason it is there is because the Search Bar is designed to be the same width as your right column menu. As far as I can tell, the gap is because of the padding (or margin - didn't examine the CSS too closely) between the content area to the left and the column menu to the right. The search bar also has this padding between itself and the menu buttons.
If it really makes you unhappy, you're probably going to have to edit the CSS layout of the site.
Posted 1 month ago #
That is the problem... so what should I look for in the CSS file to change it? I'm sort of new at this
Posted 1 month ago #
Ok, I took a look at this, but I haven't tested it in all browsers, so you'll have to see if it works. I make no guarantees -- this is just something I fooled around with a bit today because I had some time.
Make sure to make back up copies of your CSS files before editing them.
Your theme has a complicated scheme of multiple stylesheets -- there's a main one for the layout, and then an additional one for the spring-flavour theme, and some others that seem related to plugins.
My changes below comment out the old lines of the CSS so you can refer back to them if you want to reverse the changes.
Make these changes:
In blix-10/layout.css (line 184 or so). Find #navigation form and replace it with the following:
#navigation form
{
float: right;
height: 100%;
width: 189px;
padding-top: 0pt;
padding-right: 15px;
padding-bottom: 0pt;
padding-left: 15px;
/* EDITED Left border of search form removed */
/* border-left-width: 1px;
border-left-style: solid;
border-left-color: -moz-use-text-color; */
line-height: 0pt;
}In blixed-10/spring_flavour.css:
line 79 - replace #navigation style with:
#navigation {
/* EDITED changed background color from green to orange */
/* background-color:#A3C159; */
background-color:#FEC42D;
}line 83 - replace #navigation a with:
#navigation a {
color:white;
/* EDITED added green background to page link buttons */
background: #A3C159;
}As you see I also put the phrased EDITED in the comments. (Normally I use my own name.) It's a good idea to mark your changes with something you can search for later.
So basically what I've done above is to get rid of the white border on the left of the search bar area, and replaced the whole navigation bar background with the same orange color. But the page link buttons have no background assigned to them unless they are the current page or are being hovered over, so I assigned them a background of the original green of the navigation area. The result is the the orange searchbar background will appear to extend as far left as the buttons.
Again, have not fully tested, but if it doesn't work in all situations, it should at least give you an idea.
If you're planning to start editing the look of your themes, you'll have to start learning CSS. I found this guide indispensable when I was learning:
http://www.westciv.com/style_master/academy/css_tutorial/index.html
(they have plenty of material for free online).
You should also get a decent HTML/CSS editor, that can help. I myself prefer Dreamweaver because I'm used to it, but there are plenty of free ones out there.
Your theme, however, is not an easy one for a beginner in CSS because it has multiple cascading stylesheets.
PS My original assessment of the problem in my first post was incorrect. It doesn't have to do with the padding of the sidebar or content area; the navigation area is separate from those -- it's just designed to line up with what's below.
Posted 1 month ago #
slight error above should be -
line 83 - replace #navigation a with:
#navigation a {
color:white;
/* EDITED added green background to page link buttons */
background-color: #A3C159;
}You must log in to post.