Jump to content
Sign in to follow this  
nrbeatty

Home Icon vs Home text for static home page (WhiteHousePro)

Recommended Posts

nrbeatty

Hi guys, I watched the tutorial video, and I have a static home page named "Home" and my blog directed to a "News" page. How do I employ the home icon instead of the text, similar to the iblogPro demo. A related simple question: is there built-in theme functionality to re-order the pages, or should I just use a plug-in such as "My Page Order" to do the trick. (As you know, the built-in wordpress method of re-ordering pages is horrible)

Share this post


Link to post
Share on other sites
catrina

Hi, Do you have a home icon you want to use to replace the "Home" text? For the page re-ordering, there is no built-in theme functionality to do the trick, but you can install the plug-in and it should work fine.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
nrbeatty

Hi Catrina, I guess I do not. I wasn't sure if the "house" icon that is in the demo for iblogPro was included with WhiteHousePro. I don't have access to the image of the home in iBlogPro. As well, I'm not clear on whether I would just need the home image (i.e. the silver house) or if I would need to create the whole button (i.e. silver home icon plus the blue background to make the entire menu button for WhiteHousePro). Any chance of making that home icon available across the themes? And if so, is there a line of code from the iblogpro forums to implement this? Thanks! Nick

Share this post


Link to post
Share on other sites
catrina

If you have Photoshop knowledge, you can try to create a whole button that coordinates with the menu and implement it. If you can't, then perhaps you should get in touch with Anna at anna(at)pagelines.com or Bryan at bryan(at)pagelines.com (for customization issues). As for making that iBlogPro home icon available across all themes, I'm not sure if it will be, but I'll forward your question to someone else.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
nrbeatty

Thanks for the info- it sounds like the house icon doesn't reside "on top" of the button in iBlogPro, but rather is a part of the button- I'd have to create a button using the house plus a "WHP color-matched Blue." Assuming I had the ideal home button ready to go, and ftp'd to my host files, is there a line of custom code available to implement this? Thank you for your time, Nick

Share this post


Link to post
Share on other sites
nrbeatty

Hey Adam, Great- I appreciate the re-direct to another topic; I missed that one in searching. Is there any difference in functionality b/n yours vs Bryan's response on that topic? So, in conclusion, for WHP, you have to create your own button, then use the code in the other topic (http://www.pagelines.com/forum/topic.php?id=2602) to make it happen.

Share this post


Link to post
Share on other sites
bryan-hadaway

I'm a little fuzzy on the rest of what you're trying to accomplish, but as far as ordering pages, yes there is a built in function; Appearance > Menus You can fully control the order of the main menu and footer menu pages. Or were you referring to something else? Thanks, Bryan

Share this post


Link to post
Share on other sites
nrbeatty

I switched this post to unresolved because I was referred to another post (id=2602, which was helpful) but I'm having trouble in that topic, and it is marked as resolved. Please see my last post in this resolved topic. http://www.pagelines.com/forum/topic.php?id=2602 (Note: My issue is with creating a home button, not with ordering pages)

Share this post


Link to post
Share on other sites
nrbeatty

Hey again, Without trying to cross-post too much, I posted a final post on topic2602, with one tiny caveat.

Creating a home button that is an image: 1) Activate custom menus (Appearance > Menus >> Create one, and add the home page of course) 2) Within the Menus inteface, toggle-down the "screen options" menu in the upper-right corner, and make sure "CSS Classes" is checked. 3) Within the Menus interface, toggle-down your Home page box, and add "home-icon" (without quotes) to the "CSS Classes" field. 4) Go to WhiteHousePro(or other theme) > Theme Options > Custom Code > Custom CSS box, and paste the following code: #nav li.home-icon a { background:URL('URLForYourHomeImage') no-repeat center center; text-indent:-2000px; width:40px; } #nav li.home-icon a:hover { background:URL('URLForYourHomeImage') no-repeat center center; text-indent:-2000px; width:40px; } width:40px; } As an example, the url 'http://www.pagelines.com/demos/iblogpro/wp-content/themes/iblogpro4/images/home-icon-trans.png' was provided, but don't hotlink this url off that server- use your own url. :) That's the full monty. (note: One tiny flaw: The background color of the Home button wasn't changing on hover, so I just made the hover image a different image with a different color...If that tiny edit was made to the hover class, it would be 100%)

Share this post


Link to post
Share on other sites
nrbeatty

Any thoughts on that minor caveat? Check out aocpmr.org. You'll see that when you hover over Home, it doesn't change color, and when you are parked on the Home page, the button is also not colored as such- the other buttons darken when you're parked on them.

Share this post


Link to post
Share on other sites
nrbeatty

Hey Adam, I meant this url - I made a mistake in the previous post:

Any thoughts on that minor caveat? Check out aocpmr.org. You'll see that when you hover over Home, it doesn't change color, and when you are parked on the Home page, the button is also not colored as such- the other buttons darken when you're parked on them.

Share this post


Link to post
Share on other sites
cmunns

The CSS you have applied for the icon will overwrite the normal hover state. You would have to apply a background on the image itself to achieve the same effect. I love your header, Nice typography and very clean!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×