http://www.kriesi.at/support/topic/menu-button-image-rather-than-text Support Forum - Topic: Menu button image rather than text en-US Sun, 26 May 2013 07:30:50 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/menu-button-image-rather-than-text#post-12402 Sat, 05 Feb 2011 09:07:17 +0000 Dude 12402@http://www.kriesi.at/support/ <p>Glad that James could help you :) </p> http://www.kriesi.at/support/topic/menu-button-image-rather-than-text#post-12324 Thu, 03 Feb 2011 15:36:49 +0000 identityconsulting 12324@http://www.kriesi.at/support/ <p>Sorry...once again I see where I went wrong! Went into the ftp server and changed it there. Thanks very much! Worked perfectly! </p> http://www.kriesi.at/support/topic/menu-button-image-rather-than-text#post-12322 Thu, 03 Feb 2011 15:24:35 +0000 identityconsulting 12322@http://www.kriesi.at/support/ <p>Sorry about the justify thing, allof us at the company seem to be saying the same thing incorrectly in that case then...</p> <p>Umm, I don't seem to have a style1 or any other css apart from style.css, which doesn't have the code you mentioned? </p> http://www.kriesi.at/support/topic/menu-button-image-rather-than-text#post-12318 Thu, 03 Feb 2011 15:07:41 +0000 James Morrison 12318@http://www.kriesi.at/support/ <p>Hey,</p> <p>I did wonder whether you meant to align the text to the right rather than justify...</p> <p>The css/style1.css (or style2.css or style3.css depending on your colour choice) needs modifying to change this:</p> <pre><code>.nav li a { border-left: 1px solid #CCCCCC; }</code></pre> <p>to this:</p> <pre><code>.nav li a { border-right: 1px solid #CCCCCC; }</code></pre> <p>The style.css file also need editing to remove this code:</p> <pre><code>#top .nav li:first-child a { border: medium none; }</code></pre> <p>as at the moment simply changing the border-left to border-right will not apply for the 1st menu item and it would look wrong.</p> <p>James </p> http://www.kriesi.at/support/topic/menu-button-image-rather-than-text#post-12315 Thu, 03 Feb 2011 15:00:50 +0000 identityconsulting 12315@http://www.kriesi.at/support/ <p>Sorry, one last question!</p> <p>Each of the top menu buttons has a small line on each side. How would I add a line to the right of the final button in the sequence? (so it appears justified to the edge of any images as well etc.</p> <p>Thanks! </p> http://www.kriesi.at/support/topic/menu-button-image-rather-than-text#post-12314 Thu, 03 Feb 2011 14:56:09 +0000 identityconsulting 12314@http://www.kriesi.at/support/ <p>Aha, I worked it out myself. I misunderstood you slighty. I worked out it needed to be:</p> <p>text-align: right;</p> <p>thanks very much! </p> http://www.kriesi.at/support/topic/menu-button-image-rather-than-text#post-12313 Thu, 03 Feb 2011 14:49:55 +0000 identityconsulting 12313@http://www.kriesi.at/support/ <p>Hi.</p> <p>Really sorry, but it seems change the style.css to right justify the menu items hasn't worked...</p> <p>I'm talking about the top menu bar, which has things such as "home" and "portfolio" on it.</p> <p>I am using a custom menu, but it is supported by habitat (at least it appears to say it is) so that I can hide a couple of menu items.</p> <p>If what you've said applies to my situation still, could you post the sample code with that line in place? It may be thaqt I put it in the wrong place maybe... (Though I don't think so...) </p> http://www.kriesi.at/support/topic/menu-button-image-rather-than-text#post-12307 Thu, 03 Feb 2011 14:21:28 +0000 James Morrison 12307@http://www.kriesi.at/support/ <p>Hey,</p> <p>1.) You can modify the navigation menu to include an image relatively easily by editing the CSS for the menu items. The custom menu allows you to add a CSS class to the menu item link when you edit the item (if you don't see it, click on "Help" at the top right of the pae and check the CSS box) and add the class here.</p> <p>For example, for the Home link you could use a class of "home". You would then need to add the appropriate CSS to either replace the text with an image or set a background, background positioning and padding to suit the link depending on how many you have and how large the image is.</p> <p>2.) You can justify the text by adding this CSS:</p> <p><code>text-align: justify;</code></p> <p>to this code (style.css around line 207):</p> <p>.nav li a strong {<br /> display: block;<br /> font-size: 14px;<br /> font-weight: normal;<br /> }`</p> <p>James </p> http://www.kriesi.at/support/topic/menu-button-image-rather-than-text#post-12284 Thu, 03 Feb 2011 10:07:46 +0000 identityconsulting 12284@http://www.kriesi.at/support/ <p>Also, a side question. How would I right justify the text in the menu buttons? </p> http://www.kriesi.at/support/topic/menu-button-image-rather-than-text#post-12282 Thu, 03 Feb 2011 09:58:50 +0000 identityconsulting 12282@http://www.kriesi.at/support/ <p>Hi</p> <p>On the Habitat theme, I'd be interested in changing the menu buttons at the top (I'm using a mustom menu, from the menu's link on the dashboard)</p> <p>I'd like to have an image, which may or may not change when the mouse hovers over it (undecided). Is this possible with habitat?</p> <p>Finally, otherwise, I love the theme! Very easy to customise to my own tastes mostly. </p>