Editing Freshy theme help!!!!

friendtofriend96 · Member · Jan 19, 2011 at 10:57 am
Copy link

Add topic to favorites
Hi,
basically i know what i am about to ask has been asked at least a dozen times. but i have looked at every other explanation and still it leads me no where.
i have purchased the custom css upgrade so i could change the colour scheme and location of text in the freshy theme for my blog. all has been succesful so far but i hit a barrier when trying to change that green colour the tabs are coloured, in the navigation menu. i have read enough to know its an image gif etc. but i cannot find it in the css – due to me having to learn what css actually was by myself i think i have done quite well and i understand it a fair bit. if you could tell me what the relevent code is and what part needs replacing with my ‘own’ image instead of that green image.

I have been struggling with this for a while now and any information would be a great help.

my blog is http://www.friendtofriend.org.uk

Thanks in advance – Chris (friend to friend)

The blog I need help with is: (visible only to logged in users)
friendtofriend96 · Member · Jan 19, 2011 at 12:54 pm
Copy link
also i was woundering, when i find the image how do i get the replacement image that i have created into the css sheet?
panaghiotisadam · Member · Jan 19, 2011 at 2:57 pm
Copy link
I think it’s best to get the original images first and base yours on them. You can find them if you check the source code of your page; they are these:
http://s0.wp.com/wp-content/themes/pub/freshy/images/menu/menu_triple.gif
http://s0.wp.com/wp-content/themes/pub/freshy/images/menu/menu_start_triple.gif
http://s0.wp.com/wp-content/themes/pub/freshy/images/menu/menu_end_triple.gif

You edit them, upload them via Media > Add New, and copy their URLs. Then you add this to your CSS:

.menu li a { background: url(MIDDLE IMAGE URL HERE) !important; }

.menu li a.first_menu { background-image: url(LEFT IMAGE URL HERE) !important; }

.menu li a.last_menu_off { background-image: url(RIGHT IMAGE URL HERE) !important; }

But maybe thesacredpath or hallluke can give you a better answer.
friendtofriend96 · Member · Jan 20, 2011 at 11:23 am
Copy link
Thanks, this seems to be working a treat so far. I have only been able to view the start and end original images though, when i click the top link nothing appears. could you shed any light on why this is?
panaghiotisadam · Member · Jan 20, 2011 at 11:39 am
Copy link
You’re welcome.
If you zoom in, you’ll see the thing: it’s not exactly nothing, it’s a 1px-wide slice of the same horizontal stripes you’ve got in the other two. So you can easily create your own after editing those other two.
friendtofriend96 · Member · Jan 20, 2011 at 12:10 pm
Copy link
Ah yes i see it now, what i actually did was after creating the start and end images to the colours i wanted, i just chopped a part of the middle from each of the three teirs and stuck them on the end to create what looked like a middle, i was then left with all three peices and did as you said copying the url’s after uploading them, pasting them in the relevent css code. its not quite perfect yet, its a bit messy as you can see take a look if you want:

http://www.friendtofriend.org.uk

but its definatly a step in the right direction. So thank you very much for your input.
If you possibly see what the problem is or require any code pasting i would be very grateful for your advice.

Thanks again, Chris (friend to friend)
friendtofriend96 · Member · Jan 20, 2011 at 2:55 pm
Copy link
Hi, just to update from that last post:

i have pretty much finished it, and i must say it is looking exactly how i imagined.

THANK YOU SO MUCH PANAGHIOTISADAM!

the two that seem to have worked perfectly are the start and middle images, but when doin the procedure again for the end image nothing happens and it is slightly messed up.

THERE IS STILL A SMALL SECTION OF TE OLD NAV TAB SOMEHOW SEEPING THROUGH.

i presume it is something to do with the coding for the end image.

here is what i have pasted into my css:

.menu li a { background: url(http://friendtofriend96.files.wordpress.com/2011/01/middle1.gif) !important; }

.menu li a.last_menu_off { background: url(http://friendtofriend96.files.wordpress.com/2011/01/menu_end_white.gif) !important; }

.menu li a.first_menu { background-image: url(http://friendtofriend96.files.wordpress.com/2011/01/menu_start_white.gif) !important; }

can you noticed anythin up with the end image? (sorry its placed in the middle of the three on my css)

if you have any idea what it could be please let me know

Thanks – Chris (friend to friend)
panaghiotisadam · Member · Jan 20, 2011 at 9:44 pm
Copy link
You’re welcome!

Sorry, my test blog had more page tabs so I hadn’t noticed that problem. There’s a fourth image as well:
http://s0.wp.com/wp-content/themes/pub/freshy/images/menu/menu_bg.gif
It’s not like the others, it’s just the center section (80px high).
So you create its equivalent , upload it etc., and add this:

.menu { background: url(BG IMAGE URL HERE) !important; }

As for the end image, correction:

.menu li a.last_menu,
.menu li a.last_menu_off {
background-image: url(http://friendtofriend96.files.wordpress.com/2011/01/menu_end_white.gif) !important;
background-position: top right !important;
}
friendtofriend96 · Member · Jan 21, 2011 at 12:11 pm
Copy link
Hi

Thanks that little bit that was seeping through has gone. Although it did prove tricky as it kept getting rid of what i had already done. the beggining and middle images reverted back to being black and green, which is what happens if i try the fix for the end image, when i preview it it shows up the end sction done in my blue and white but the rest reverted back again….. not sure why this is, its probably something i am not doing right when pasting it into the css.

Hmm :

All is well though as it looks great as it is without the end image.

Thanks again!
panaghiotisadam · Member · Jan 22, 2011 at 11:55 am
Copy link
You’re welcome again!

Sorry, I’m only previewing the changes, and I’m not getting this problem when previewing. So I’m just shooting in the dark now:

1) Check your original CSS and try adding the stuff I have omitted – for instance change this:
.menu { background: url(BG IMAGE URL HERE) !important; }
to this:
.menu { background: url(BG IMAGE URL HERE) 50% 0 #515151 repeat-x; !important; }

2) Try replacing all five instances of this:
.menu
to this:
menu.primary

I’ll also ask hallluke or thesacredpath (they are CSS experts while I’m not) to come have a look when I see them drop by again.
panaghiotisadam · Member · Jan 22, 2011 at 11:56 am
Copy link
Oops – I forgot the period:

.menu.primary
hallluke · Member · Jan 23, 2011 at 11:51 pm
Copy link
To replace the end image (this is what you’re looking to achieve, right?) you need to create an image that is the mirror version of your starter image, most image editing software can flip things like this easily. Once you’ve done that, upload and save the image to your media library and target it with the following CSS rule:

.menu.primary li a.last_menu, .menu.primary li a.last_menu_off {background-image: url("NEW-URL")!important;}
friendtofriend96 · Member · Jan 24, 2011 at 10:53 am
Copy link
Thank you very much panaghiotisadam & hallluke.

Brilliant responses, your advice worked like a charm. I am very happy with the end result, i also want to say how much i appreciate you taking your own time to help me out.

One thing i have only just noticed that i didnt take into consideration when editing the navigation tab is the text colour, the standard colour being white is spot on but when the selected page is selected and the tab highlights white, th text colour is black – i would like this to be the blue. I have had a go at trying to change this but all i seem to do is change the white text to blue.

Any ideas?

Many thanks again – Chris (Friend to Freind)
panaghiotisadam · Member · Jan 24, 2011 at 7:31 pm
Copy link
You’re welcome!

As for your new question:

.menu.primary li.current_page_item a { color: #0044aa !important; }

Some color upon hovering might also be good:

.menu.primary li a:hover { color: #f78b0c !important; }

PS If you’re using Firefox, install the Firebug and Aardvark add-ons: help you examine your page and identify selectors.
friendtofriend96 · Member · Jan 25, 2011 at 10:30 am
Copy link
Thanks panaghiotisadam

And yes your right hovering colour would be good but what i have found is that hovering works only when i do what you said before, adding .menu.primary instead of just .menu also adding the .primary part was what enabled the end image of the tab to work, problem is i think i may have made a mistake when creating the images as when hovering the gradient is not in line.

Ill leave it up for you to see while i have a go at re-editing the images.

Thanks – Chris
friendtofriend96 · Member · Jan 25, 2011 at 1:27 pm
Copy link
Just to update you from the last message,

I have re-edited the images took a little more time on them and there looking fairly good. what do you think?

I opted against having a hover colour for the text and just created a hover ‘box’ also added gradients to each of the colours.

Once again thank you for your persistant help throughout!

Chris
hallluke · Member · Jan 25, 2011 at 4:36 pm
Copy link
It looks good, I like it. Complements the rest of your changes very nicely.
panaghiotisadam · Member · Jan 25, 2011 at 5:21 pm
Copy link
@Chris : Yes, it’s more elegant than my original suggestion. (But you’ve got out CSS wizard’s verdict, so you don’t need mine!)
friendtofriend96 · Member · Jan 26, 2011 at 3:38 pm
Copy link
Cheers lads – Thanks for your comments on the new look.

I most definatly value feedback from experts such as yourselfs

Most grateful for your constant help on this subject also now i know what i need to do if ever i want to edit this section again.

Thank You on behalf of Friend to Friend

Chris
friendtofriend96 · Member · Jan 26, 2011 at 3:41 pm
Copy link
(sorry for the ‘lads’ if either of you are female)

No items found.