Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Linking Logo, Permalinks, Display Block

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #31604
    mwdewitt
    Member

    I have three questions. Yes, these are newbie questions, but be kind.

    The first one should be a simple fix in my HTML. How do I link my header logo to my home page?

    My second question is about permalinks in WordPress. Right now, my permalink for my pages looks a little something like this: http://localhost/?page_id=5/. I went and changed my permalink so it would describe the page a little better, so now it says this: http://localhost/projects/. The first permalink works, the second one, not so much. And before you ask, yes, I went into my HTML and changed the link to reflect the new permalink, but it does not seem to be working. What I wanted to know was, is it because I am working off of a local host? Or is it something else?

    My third question deals with how my links are highlighted on the page. In my social networking sidebar, I have “display: block” so that the highlighted area covers the full width of the link. Here is a picture of the website with a highlighted link…

    http://img7.imageshack.us/i/screenshot2wx.png/

    Here is the code I am using…

    /*
    WIDGETS
    */

    .widget {
    background: #FFC800;
    width: 150px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 14px;
    }

    .widget .inside {
    padding: 14px;
    }

    .widget ul {
    color: #FFFFFF;
    margin-left: 14px;
    }

    .widget ul a {
    color: #FFFFFF;
    font-weight: bold;
    display: block;
    }

    .widget ul li a:hover {
    background: #FFFFFF;
    color: #FFC800;
    }

    .thumb {
    width: 62px;
    float: left;
    margin-bottom: 10px;
    margin-left: 14px;
    }

    So, I decided that looked nice and I wanted to use it in the footer. But when I use the same technique in the footer, this is what it looks like…

    http://img268.imageshack.us/i/screenshot3yu.png/

    The text and bullets are stacked on top of one another. Here is a look at the code I am using…

    /*
    FOOTER
    */

    #footer {
    height: 250px;
    padding-top: 10px;
    background-color: #FFFFFF;
    background-image: url(images/footer-bg.png);
    background-repeat: repeat-x;
    background-position: center bottom;
    }

    #footer-inside {
    width: 800px;
    margin-top: 12px;
    margin-right: auto;
    margin-left: auto;
    }

    #footer p {
    color: #FFFFFF;
    font-weight: bold;
    text-align: justify;
    }

    #footer-about, #footer-syndication, #footer-navigation, #footer-friends {
    width: 186px;
    float: left;
    margin-right: 14px;
    }

    #footer ul a {
    color: #FFFFFF;
    font-weight: bold;
    display: block;
    }

    #footer a:hover {
    background: #FFFFFF;
    color: #333333;
    }

    #footer ul {
    color: #FFFFFF;
    list-style-position: inside;
    }

    Any suggestions on how to fix any of these problems would be greatly appreciated. If you need to see some more code, or something else, just ask and I will deliver. Thanks in advance!

    #60706
    renancoelho
    Member

    To the first question: You simply wrap the logo with a anchor tag.
    Example:

    To the second: Sorry, I haven’t used word press yet.

    To the third: Usually I would prefer to take a look at the website live and check it out with firebug. However, I can see here that on the footer you applied:

    #footer ul{
    list-style-position: inside;
    }

    However I did not see the same on the other ul… try removing the list-style-position. if you want the same effect on both, then use the same css…

    Hope it helps..

    #60709
    mwdewitt
    Member

    I took out the “list-style-position” and added a margin of 14 pixels under “#footer ul” and it fixed my third problem.

    I still can not seem to get the header logo to link in my HTML or CSS file. I will post what I have and you can tell me exactly where to put it so it will work.

    I found this code on WordPress Support…

    And it seems to work, but I would like to know if there is a simpler way to do it.

    Here is my CSS…

    /*
    HEADER
    */

    h1#logo {
    width: 367px;
    height: 100px;
    text-indent: -9999px;
    float: left;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
    background-position: left top;
    margin-left: -44px;
    }

    #top-bar .description {
    color: #FFFFFF;
    width: 325px;
    float: left;
    font-weight: bold;
    margin-top: 70px;
    margin-left: -218px;
    }

    form#searchform {
    float: right;
    margin-top: 37px;
    }

    And here is my HTML for the header…


    >








    <br /> <?php<br /> if (function_exists('is_tag') && is_tag()) {<br /> single_tag_title("Tag Archive for ""); echo '" - '; }<br /> elseif (is_archive()) {<br /> wp_title(''); echo ' Archive - '; }<br /> elseif (is_search()) {<br /> echo 'Search for "'.wp_specialchars($s).'" - '; }<br /> elseif (!(is_404()) && (is_single()) || (is_page())) {<br /> wp_title(''); echo ' - '; }<br /> elseif (is_404()) {<br /> echo 'Not Found - '; }<br /> if (is_home()) {<br /> bloginfo('name'); echo ' - '; bloginfo('description'); }<br /> else {<br /> bloginfo('name'); }<br /> if ($paged>1) {<br /> echo ' - page '. $paged; }<br /> ?><br />












    >

    #60651
    renancoelho
    Member

    Well, that code from wordpress should work as well. In that case you should put the logo inside the div. However, I really cant see why the other way using the anchor tag would not work. Also, I think I just saw the problem… you are placing the anchor tag inside the h1 tag… try the other way around…

    yourdomain.com being whatever your home url address is…
    Let me know if it worked… It should…

    #60655
    mwdewitt
    Member

    It works! Thank you! And it makes more sense to me and looks so much better than that code I got from WordPress Support. Now all that is left to figure out is the permalink. If anyone can give me advice on what is going on with my permalinks, I would greatly appreciate it. Thank you in advance!

    #60663
    renancoelho
    Member

    It may be because you’re doing it in a local host. However, I just looked at WordPress.org and it says you cannot change the permalinks, hence the name permalinks, permanent links. I have not used wordpress yet… Opps… I have to go now… I will write back later today…

    #60668
    renancoelho
    Member

    The reason for the anchor being outside is because if you look at his css you will notice that the image that he wants to use as a link is in the h1 tag, he put it as a background, therefore to target the whole h1 the anchor must be outside, if inside it will only target whatever is inside the anchor… there are many other ways to do this, I just thought that would be the easiest one, for the set up that he has…

    #60676
    mwdewitt
    Member

    You can actually change the permalinks at any point during the process. The only problem with that, is that if someone links to an article in your blog, and you have changed the permalink, then the link the third-party has will not work. But, yeah, you just go under Settings > Permalinks and you can change it to whatever you want to as long as you update your HTML to reflect the changes. At least, that is how I understand it.

    #60590
    TheDoc
    Member

    I wouldn’t put the blog title / logo in the H1 tag – that should be reserved for the actual page title. If it’s the home page, that’s fine, but if you’re on a single post page, the h1 should be reserved for the title of that post.

    #60334
    mwdewitt
    Member

    How should I go about (coding) linking the logo to the home page? I am sorry, I am very new to all of this, so I only know of a few methods. Also, I am still having problems with my permalinks.

    #60335
    TheDoc
    Member

    Can simply wrap it in an anchor tag:

    Then just make sure to display the anchor as block:
    #logo { display: block; width: ##; height: ##; etc... }

    #60356
    mwdewitt
    Member

    Well, I tried it your way, and it must be something I have set up in my CSS, because if I put the logo in an anchor tag, it turns it into a giant button and when I roll over it it gets the background color I have set for my other buttons, which I do not want happening. The logo appears on all my pages and has the title of the website in the logo, so I am going to revert my code back to having it in the h1 tag, although I do understand your logic behind not doing that. Thanks anyway!

    And if anyone can help me out with my permalinks I would be much obliged. Thanks in advance!

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘Other’ is closed to new topics and replies.