Help! That was HOT! Evolution Theme Tweaks

[athlon24]

As of my, I am really enjoying the evolution theme, especially the red one. And I thanks Sarah for giving a lot of input in my query.

Mmm, I don't if this will work. I am designing a bigger rss button and I want to transfer the subscribe to email from the header to the about box in the siderbar because I want to change it into a subscription area. I can retain the rss button on the header, but if it does not look good without the email subscription maybe I'll take it away and change it with some ads. Any ideas? :D

[sarahG]

Not sure what you're after. Opinion? If so then move the RSS button to line up with the right side of the sidebar. Put your subscribe by email form into the about box and just a couple of tweaks to the CSS is all that's needed.

If you actually need to know how then try it first and come back if something goes wrong :)

[athlon24]

@Sarah I moved the emailico class to the sidebar, under the about class and I'm stuck now. And is there any way, I can move the rss button more to the right side, maybe near to the edge. U can look at it now. http://thatwashot.com

[sarahG]

In the stylesheet find the selector

.headerMenu .rssIco{

and change the float: left; to float: right; - That will move your email icon.

In regards to the subscribe boxes. What do you want to do with them? Personally I'd remove the colouring set on both the input box and button, which you can do in the stylesheet. And then give the form a bit of padding or margin.

[athlon24]

I am planning to put the enter your email inside the input box then at least, I can make it centered. and the subscribe button goes with it. What's the tag for subscribe box?

[sarahG]

You seem fairly capable with HTML so here is the code that you yourself moved originally

<div class="emailIco">
Subscribe by Email
<form action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=YOURIDHERE', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" name="email" class="field" /><input type="hidden" value="http://feeds.feedburner.com/~e?ffid=YOURIDHERE" name="url"/><input type="hidden" value="NAMEOFYOURBLOGHERE" name="title"/><input type="hidden" name="loc" value="en_US"/> <input name="submit" type="submit" class="newsbutton" value="SUBSCRIBE" /></form>
</div>


Looking at this, if you look at the input type of text, you'll see it has a class of field. Then the submit button has a class of newsbutton. So search for these in your CSS file. You also need to change the link for feedburner as it current says YOURIDHERE.

If you want to hack themes about then you need to have at least a basic understanding of HTML and CSS, which I'm sure you do, so learn try and look for the right selectors before getting someone else to do it for you.

If you run Firefox then download the web developer toolbar extension. In that you have an 'Outline' -> Current Element. When this is activated if you hover the mouse over any element on the page you'll see all of the tags, ids and classes that can control that item.

[athlon24]

I've downloaded web developer toolbar. And It's working now.

I'm quite a newbie. CSS is very very new to me. And I only have very minimal html orientation. The last time I code is VB6 so at least, I can identify that there's some structure. but I'm lost in CSS and php syntax and language. i can't even put the rss-icon in the center. my bad.

The tags, ids and classes are in the stylesheet, right? Then I will edit it there?

---------
now I'm really stuck. I'm trying to modify, emailico, but nothing is happening now. whatever value i put on margin-left, it doesn't move. :(

[sarahG]

Okay.. the problem is the style is targeting the emailIco div in the header menu, but you've moved it. So change

.headerMenu .emailIco{
display:block;
width:200px;
border:none;
margin-left:50px;
float:right;
color:white;
font-size:16px;
}


to

.emailIco{
margin-left:50px;
}

I've also stripped out the properties that you don't need.

I also recommend you start reading (if you aren't already) my posts on a Thursday at 8pm GMT on Blogging Tips as I'm writing about basic CSS and HTML so it should be of interest :)

Also, get the free chapters for this book - http://www.sitepoint.com/books/css2/ it's a very good book, and highly recommended, but if you can't afford the book the preview chapters are free and are 150+ pages

[athlon24]

yeah. I read your posts on blogging tips. I am a subscriber of BT. :D and Thanks for the links. As of now, I can't afford it. Maybe later. I'll be looking to that...

I changed the code but still nothing happens to the email field. :(

[sarahG]

You've moved the field back now so I assume you're keeping it there? The code above definitely worked as I changed it via my online CSS editor and it changed on your site, however if you're keeping it as it now then no worries.

As per the book, still get the free chapters. They're worth reading through whilst you save for the book.

[athlon24]

yeah, I decided to put it back into place, because I can't really keep up. Thanks for all the input, I'll study first before tweaking the theme again. :D

I will try to make my own theme, and you're welcome to critique it anytime.

[sarahG]

If you really want it moving around feel free to create me an WP admin account and make the theme files writable. I'll log into your WordPress and do the changes for you and then you can delete the account again.

Although I can't do this until tonight or tomorrow night as I'm working during the day. Just PM me the details if you want to still have it changed.

[athlon24]

That was so kind of you. I will pm you for the username and password.

I was trying to put the rss button that I came up with to the about page box and also below it is the email subscription. The round rss button is in the folder images. I think, you saw how far I got, It is something like that. I am also trying to change the background color of the about to something that will blend to the rss button, but when i changed the values nothing happened. :D *Cheers*

[sarahG]

I'll try and take a look tonight for you :)

[athlon24]

Thank you sarah, I owe you a lot. I just have some few questions. How can I change the background of the input box in the subscribe email and change the default text inside it? :D

[sarahG]

The back ground is changed by adding the property background-color: #rrggbb to the class I said in the PM that was the input box class (sorry I forget which one it is). To add text within the box you need to add a value attribute to the input tag.

Although, to be honest I wouldn't change either of those. Changing the background colour will most likely lose the contrast between the text and the background, only a pale colour would still be okay and it wouldn't look as prominent as white does. Add text into the box is only best done when the text is removed automatically (by JavaScript) when the user clicks into the box. Considering your level of knowledge, I doubt that will be happening. So instead someone has to click into the box, delete your text and then add their own which is making a user jump through hoops to subscribe to your site.

[athlon24]

Ok. I'll take your suggestion. I won't bother with it anymore. Thanks a lot.

Another thing, the search box is lowered somehow, can I adjust so it fits properly. Where can I set it? :D

[sarahG]

In your default-red.css file find the selector .about_bottom and change the margin-bottom number to something less than 20px.

[athlon24]

I changed it with 10px but still, nothing is happening. It does not move. :(

[sarahG]

Yes it has. Trying clearing your cache and refreshing if you don't see the change, but it has moved. Remove the margin bottom altogether if necessary, there will still be a slight gap there.

(Press Ctrl+F5 to force a full refresh of the files)

[athlon24]

tried that, but still, the yellow box in search does not exactly fit in its white box. :( And also, where can I change the the distance between pictures and text in the post. Because I think it is too close?

[sarahG]

Okay, now I'm lost. The search box is not yellow? The search button is red, the input box is white with a grey border...

In regards to images in posts, you need to find the two selectors .alignright and .alignleft. Add to alignright

margin: 0 0 10px 10px;

and add to alignleft

margin: 0 10px 10px 0;

[athlon24]

mmm, the input box is white, yes it is. That is the background but there is a yellow box in it that doesn't fit. I'm using firefox 3.

[sarahG]

You'll have to post up a screen shot and circle what you mean as I don't have a clue where you're looking!

[athlon24]

Here is the screenshot of what I am taking about. I circled the search box in the right side.

http://thatwashot.com/wp-content/uploads/2008/10/search.jpg

The white and the yellow box is not aligned.

[sarahG]

Ahhh right okay. The yellow isn't a box created by the web page but by Google Toolbar.

The reason it's like that is due to the design of the theme. The input box has effectively been hidden and a background used. So you will have to edit the background if you want this to appear right - http://thatwashot.com/wp-content/themes/bt-evolution/evolution/images-red/search_field.jpg

[athlon24]

So you mean, I just to make the search box bigger and that will solve the problem.

And so you mean, other users cannot see the yellow box?

[sarahG]

Edit the search box to be slightly higher and wider and it should be fine yes.

Some people will see yellow if they have the Google toolbar installed and have it set to highlight the input boxes that it can prefill for them. Others won't, as I don't, but then again I use Firefox and don't use the Google Toolbar on any browser.

[athlon24]

@Sarah
:( got a problem in my site again. I just realized that my sidebar looks funny on IE. One of my reader told it to me. I'm done for again. :(

:( and not only in the sidebar, everything is messed up in the bottom in post pages. :(

[sarahG]

Well there's been no CSS changes to affect either the tabs or the bottom. I've looked through your code and to start with, the additional tab you added has broken markup so you need to fix that. You've got

<div class="TabContent" style="display:none" id="div0">

<li>
<ul>
<li><a href="http://thatwashot.com/archives/2008/10/17/10-ironic-truth-about-blog-addiction/">10 Ironic Truth about Blog Addiction</a></li><li><a href="http://thatwashot.com/archives/2008/10/14/english-is-my-2nd-language-can-i-blog/">English is my 2nd Language, can I blog?</a></li><li><a href="http://thatwashot.com/archives/2008/10/15/crafting-the-birth-of-my-new-blog/">Crafting the Birth of my New Blog</a></li><li><a href="http://thatwashot.com/archives/2008/10/16/how-to-explain-money-blogging-to-your-grandma/">How to Explain Money Blogging to Your Grandma</a></li><li><a href="http://thatwashot.com/archives/2008/10/20/forum-contest-with-over-1500-prize/">Forum Contest with over $1500 in Prize</a></li><li><a href="http://thatwashot.com/archives/2008/10/26/hottest-way-to-moderate-wp-comments/">Hottest Way to Moderate WP Comments</a></li><li><a href="http://thatwashot.com/archives/2008/10/27/honda-in-2025-land-sea-and-air/">Honda in 2025: Land, Sea and Air</a></li><li><a href="http://thatwashot.com/archives/">Archives</a></li><li><a href="http://thatwashot.com/about/">About</a></li><li><a href="http://thatwashot.com/contact-me/">Contact Me</a></li> </ul>

</li>

</div>


However the outer li tag either needs a ul around it or removing if you can. I don't know what code you've got here as you're clearly running and function so you'll either need to put the function within a ul or if the <li></li> was put it by you, remove it.

Get that fixed first and then you can see if it fixes the other issues. At present Internet Explorer may be trying to work out what should be done with that as it's broken markup, and so is closing another list item too early to compensate.

[athlon24]

Thanks for that, Sarah. I removed the li and the sidebar is now ok. But the email subscription box is in far right side. and where can I change the font-color? I want to change it into black. Still, in IE.

[sarahG]

For the font colour, in your ie.css style sheet (under the css directory) add

legend { color: black }

For the input box add (to the same file

.emailIco{
margin-left: 11px;
}

and change the value of 11 to higher or lower to get it in the right position.

[athlon24]

@Sarah
I'm sorry, my question is not clear about the font-color. The color that I want to change is the text inside the email subscription box. What's the name of the property controlling that?

[sarahG]

Which text? The 'Subscribe by Email' text that's in blue on IE? it's

legend { color: black }

[athlon24]

Not the subscribe to email. What I'm talking about is the color of the text in the input box. When you type your email, it is gray, and you can barely see what you're typing.

and i tried to put the

.emailIco{
margin-left: 11px;
}

but it doesn't move the box.

[sarahG]

You said the font colour in IE hence why I assumed you meant the legend which is in blue. The input box text colour is the same in all browsers. In your CSS file find

.field {
color:#CCCCCC;

Remove the property color.

For the margin, I'll have to point hurricane to this as that's the only thing I can think of. He's the expert on CSS.

[ap4a]

Before I start looking into it, is this still an issue? As something appears to have been changed as the subscription box is further to the left in IE than it is in Firefox, and not to the right.

[athlon24]

@i'm not quite sure what was done to the code. It was originally in the header but i asked i to be transferred in the sidebar. But when I cannot follow what sarahG has been saying, I have given her a temporary account to my account so she tranferred it, but in IE it does not align properly.

[sarahG]

Yesterday, if you look through your previous posts you'll see you said that

But the email subscription box is in far right side. and where can I change the font-color? I want to change it into black. Still, in IE.

I gave you the code that was adding margin to the div holding the subscription field, and you've added this to the IE only stylesheet. Now in IE, the subscription form is sitting to the left, so either

a: The code I gave you worked and you need to edit the 11px to make it align correctly or
b: something else you did yesterday afternoon has changed the form.

On further investigation, the code I gave you to add to the stylesheet DID work. I've just downloaded a HTML copy of your site and tested it myself and it works perfectly. The only addition you need is to fix the legend in the right place, so in your IE stylesheet change the .emailIco code and add in the following

/* margin of email subscription */
.emailIco {
margin-left: 11px;
}

.emailIco legend {
margin: 0 0 0 5px;
}

Then your Subscription form will be aligned.

[athlon24]

yeah, you're right. I just checked it and it's in place now. Maybe the cache didn't clear yesterday that's why when I checked it again after editing, it is still in the same position. I owe you a lot sarah. Thanks much.

[sarahG]

Whenever you're working on changes on a site, be sure to force a cache refresh by using Ctrl + F5. Otherwise you can be there for hours fixing something that's already fixed.

[athlon24]

ctrl + f5. Thanks for the advice, i'll keep that in mind.