miocene Posted July 30, 2009 Share Posted July 30, 2009 I have noticed during trying out wordpress that some themes create the button images for the menu bar using some sort of script. Probably php.(view my wordpress test to see what I mean)How would one make such a script to create these kind of buttons? cos it would save going into photoshop and making 3 button images for every button. Link to comment Share on other sites More sharing options...
justsomeguy Posted July 30, 2009 Share Posted July 30, 2009 I only see 2 images for the button, the normal and over states, but if you check the CSS and HTML markup for the menu you'll see that it's just a regular UL list that they use CSS to apply the background images to. Link to comment Share on other sites More sharing options...
miocene Posted July 30, 2009 Author Share Posted July 30, 2009 Yes but the actual button images are generated using a script. I know this as I am able to add/remove/change menu buttons and the button are automatically generated according to what I type in for thier names in the admin panel form. Link to comment Share on other sites More sharing options...
justsomeguy Posted July 30, 2009 Share Posted July 30, 2009 The PHP just adds <li> elements to the menu <ul>. All of the graphics etc are done using CSS. There is only a single background image that gets used for all buttons, the text you see on the button is regular text over a background image, it's not part of the image itself. Link to comment Share on other sites More sharing options...
miocene Posted July 30, 2009 Author Share Posted July 30, 2009 Aaah OK. I looked as if the button text was part of the image.How does the css account for the variation in button width? I.e. the word "portfolio" is longer than "home" and the button image is stretched to account for this. Link to comment Share on other sites More sharing options...
justsomeguy Posted July 30, 2009 Share Posted July 30, 2009 There's one image with the left edge and corners, and another long image that shows the middle and right edge. The one with the middle is just as long as it needs to be for each button, as long as no button is longer than the image it will look fine. They call that the sliding window effect I think. Link to comment Share on other sites More sharing options...
miocene Posted July 30, 2009 Author Share Posted July 30, 2009 ok so it avoids the need for a repeat-x and 3 seperate images! cunning Link to comment Share on other sites More sharing options...
dsonesuk Posted July 30, 2009 Share Posted July 30, 2009 actually, it uses one long image (including hover image at bottom) assigned to the li a for the left side, and again for the li a span for the right side, and then, using padding + background-positioning to show the rounded corner ends of each. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.