Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Add Nav Bar - Need a good example

  1. moniescloset
    Member

    Hey guys,

    I've been looking all day now for a good example on how to add a nav bar to my blog, but I can't seem to find any. I realize I need to modify the css and add some text/html widgets, but there is just so many forums and crap to sort through. I don't need any help modifying it, even though i'm new to this, i'm a programmer so I can figure it out, I just need a good somewhat clear (ie: not overly hacky) example.

    If someone whose done this can put up some sample code - maybe just how to add one button to the top of a blog, I would love you forever :)

    Thanks
    mona

    http://www.moniescloset.com

    The blog I need help with is moniescloset.com.

  2. timethief
    Member

    I can see the nav bar on your blog so it's not clear to me what you require help with. Bloggers who are free hosted on this wordpress.COM multiuser platform cannot edit our underlying templates. If we could then any edit made on one blog would likewise affect all other blogs with the same theme.
    http://support.wordpress.com/themes/editing-themes/
    Provided we purchase a CSS upgrade we can edit the stylesheet only http://support.wordpress.com/custom-css/
    This post describes the differences between wordpress.COM blogs and wordpress.ORG software http://en.forums.wordpress.com/topic/please-read-me-first-before-posting?replies=1

  3. timethief
    Member

    Also note that only wordpress.COM users who are signed in can see the nav bar.

  4. thesacredpath
    Staff

    Top navigation is not something that can be accomplished with CSS editing only. Adding a top navigation requires access to the underlying theme PHP/HTML files, and we do not have access to those here at wordpress.COM since this is a multi-user platform and we all share the same files so any change made by one person would change it for every other person using that theme.

    What you will have to do is either choose a different theme that has top navigation or rely widgets in the sidebar.

  5. moniescloset
    Member

    Sorry, I meant a top nav bar (ie: my pages links all across the top)

    Ya I did some more reading and I figured that. I didn't realize just how little control we actually had here before I signed up and started using the system. Thanks for the info!!

    Anyways, I really wish there was more consistency with the themes that are published, so that they all provide the same subset of features, and you can turn them on or off at your will. I noticed differences in many things, including templates etc. I love the theme I am using, and so I really just wanted to modify it, rather than switch to another theme which has far more cons than pros.

    Thanks for the help everyone!

    Mona

  6. thesacredpath
    Staff

    The themes here at wordpress.COM are not designed by wordpress, but by individual designers, so everything on the themes that you see, with very few exceptions, is the choice of the original theme designer and some put in a top navigation and some did not. It was their choice. Some people do not want top navigation, and some do. WordPress seems to have a pretty good mix of different themes with different features so that everyone can find one that meets most of their needs. Then with a little CSS experience and the paid CSS upgrade, they can change colors and such and stylize it as they wish.

  7. thesacredpath
    Staff

    If you have CSS experience, Sandbox 1 is basically wide open and you can do some amazing things with it including having top navigation or not, having one or two sidebars, etc. There are also several very good CSS skins that have been designed by some top-notch CSS guru's.

    This forum thread has some links to some very good sandbox CSS skins. You can also Google "sandbox skin" and find many more.

  8. panaghiotisadam
    Member

    @Mona: Why do you want a header nav bar? If the reason is having more prominent page tabs, then a possible workaround could be a text widget up top with image links to your pages.

  9. moniescloset
    Member

    ya thats kind of what i was looking for, to see if something like that was possible with my current skin. I thought maybe i could place a few text widgets, and set their properties so they look like a smooth nav bar?

    I'm a c++ programmer, and i'm trying to get into this css/html stuff, which is really why I started this thread.

    Do you have a link you could point me to, where a link widget is created with text color, widget color and placement? I would really appreciate it :)

  10. panaghiotisadam
    Member

    Sorry, I don't know anything about CSS modifications, so I can't help you with that. What I was thinking of was image links in a standard text widget (I can make that turn out any way I please using html only).

  11. moniescloset
    Member

    ya i understand. I just wanted a text widget example, where the link's position and properties (color, image etc) are set.

  12. panaghiotisadam
    Member

    Ok, here are some html thingies suitable for a text widget - hope they are useful...

    Image:
    <img src="URL_OF_IMAGE_HERE"></a>

    Linking image:
    <a href="URL_OF_PAGE_HERE"><img src="URL_OF_IMAGE_HERE"></a>

    Resizing to fit (although it's better to upload properly sized images): add this after the image URL and the quotation mark, with a space inbetween:
    width="NUMBER_HEREpx"

    Centering: add this after "img", with a space before and a space after:
    class="aligncenter"

    List of items that will show up the way other lists in widgets do (e.g. with that nice grey background in ChaoticSoul):

    <ul>
<li>FIRST_ITEM_CODE_HERE</li>
<li>SECOND_ITEM_CODE_HERE</li>
etc.
<li>LAST_ITEM_CODE_HERE</li>
</ul>

    Extra vertical space before, after, or between items (adjust by changing the number):
    <div style="height:8px;"></div>

    Text color:
    <span style="color:#HEX_NUMBER_HERE;">TEXT_HERE</span>

    Text line breaks:
    <br />

  13. vivianpaige
    Member

    Have you tried positioning the pages widget across the top? (Using CSS, of course.) That will give you the nav bar. Sorry I can't be of more help (because I don't have time to figure it out on your blog) but that's what I have on my blog.

  14. moniescloset
    Member

    Hey guys!!

    I just want to say thanks thanks and thanks....
    It took me all day but I think I've got. I created widgets, learned some CSS and positioned them. I stumbled across a *bug that took me a few hours to figure out. I was trying to position the text/links over top of of my custom header. I couldn't figure why the hover cursor didn't appear, ie: You can't press the link. Turns out, you can't place links over other the header image, not sure why you wouldn't be able to, seems like a bug to me? As soon as I positioned them below the header, the worked.

    Anyways let me know what you think

    http://www.moniescloset.com

    thanks again!!!

  15. moniescloset
    Member

    lots of mistakes in the previous post, didn't mean to rush....sure we wish we could edit :(

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags