• Resolved Pena47

    (@pena47)


    Hi,

    I started a blog and can’t manage to get the main logo centered. I know very little about wordpress, but checked the header.php file and found this:

    <a href="<?php bloginfo('url'); ?>"><?php $logo = (get_option('simplepress_logo') <> '') ? get_option('simplepress_logo') : get_bloginfo('template_directory').'/images/logo.png'; ?>
    	<img src="<?php echo $logo; ?>" alt="Logo" id="logo"/></a>

    Now I tried changing it to this with no luck (notice the align=center):

    <a href="<?php bloginfo('url'); ?>"><?php $logo = (get_option('simplepress_logo') <> '') ? get_option('simplepress_logo') : get_bloginfo('template_directory').'/images/logo.png'; ?>
    	<img src="<?php echo $logo; ?>" align=center alt="Logo" id="logo"/></a>

    Any idea what’s going on? Is it even an issue with the header.php, and am I looking at the right part of code?

    You can see the site if you need: http://www.ahdentistcare.com

    Thanks all.

    EDIT: So just some extra clarification, I’m referring to the image that says SimplePress, it is saved as logo.png, and it does show up on the site (just not centered as I want it).

Viewing 3 replies - 1 through 3 (of 3 total)
  • That is not the proper way to center align an element. You have to set the left and right margin to auto and display it as block.

    So in your theme it will be cleaner to just edit style.css and look for #logo around line 38.

    Change the margin property to this:

    margin: 63px auto 34px;

    And add this:

    display: block;

    Hope that helps.

    Thread Starter Pena47

    (@pena47)

    You, sir, are a genius. Thank you very much!

    I want to align my logo to the right of the screen. Below is the “.css” file. How do I go about it. The link to my site is http://www.flatlandsfinestwindows.com/ffwg

    Thanks for your help

    /*
    	Theme Name: BluePress
    	Theme URL: http://themepix.com/wordpress-themes/bluepress/
    	Description: BluePress is a free WordPress theme with featured posts option, post thumbnails and theme admin/options page. Suitable for any niche, especially for tech blogs. <strong>TIP: When you do new posts, dont forget to set Featured Image, this will help to show thumbnail image on posts and featured slider posts.</strong>
    	Author: ThemePix.com
    	Author URI: http://themepix.com/
    	Version: 2.0
    */
    
    /* LAYOUT */
    
    body {
        background: none repeat scroll 0 0 #FFFFFF;
    }
    #wrapper {
        background: url("images/wrapper.png") repeat-x scroll 0 0 transparent;
    }
    #outer-wrapper {
        margin-top: 0;
    }
    #contentwrap {
        background: url("images/content.png") repeat-y scroll 0 0 transparent;
    }
    a {
        color: #3366CC;
        text-decoration: none;
    }
    a:hover {
        color: #5588AA;
        text-decoration: underline;
    }
    #header {
        height: 116px;
    }
    #header h1 {
        font-family: Arial,Helvetica,Sans-serif;
        font-size: 44px;
        font-weight: bold;
        margin-bottom: 0 !important;
        padding: 20px 0 0 25px;
        text-shadow: 0 1px 0 #FFFFFF;
    }
    #header h1 a, #header h1 a:visited {
        color: #003B7A;
        text-decoration: none;
    }
    #header h2 {
        color: #003B7A;
        font-family: Arial,Helvetica,Sans-serif;
        font-size: 14px;
        padding-left: 25px;
    }
    .logoimg {
        margin: 25px 0 0 28px;
    }
    .feedtwitter {
        margin-top: 6px;
        text-align: left;
    }
    #pagemenucontainer {
        float: left;
        height: 32px;
        margin-top: 0;
    }
    #pagemenu {
        float: left;
        height: 30px;
    }
    #pagemenu, #pagemenu ul {
        line-height: 1;
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }
    #pagemenu {
    }
    #pagemenu ul {
        float: left;
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }
    #pagemenu li {
        float: left;
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }
    #pagemenu ul li {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }
    #pagemenu li a, #pagemenu li a:link {
        color: #333333;
        display: block;
        font-family: Arial,Helvetica,sans-serif;
        font-size: 12px;
        font-weight: bold;
        margin: 0;
        padding: 10px 20px;
        text-decoration: none;
        text-shadow: 0 1px 0 #FFFFFF;
        text-transform: none;
    }
    #pagemenu li a:hover, #pagemenu li a:active {
        background: none repeat scroll 0 0 #EDEDED;
        color: #000000;
        display: block;
        padding-bottom: 11px;
        text-decoration: none;
    }
    #pagemenu li.current_page_item a {
        background: none repeat scroll 0 0 #EDEDED;
        color: #000000;
    border-left: 1px solid #D2D2D2;
    border-right: 1px solid #D2D2D2;
    border-top: 1px solid #D2D2D2;
    border-bottom: 1px solid #EDEDED;
    
    }
    #pagemenu li:hover, #pagemenu li.sfhover {
        position: static;
    }
    #navcontainer {
        background: url("images/menu.png") no-repeat scroll 0 bottom transparent;
        display: block;
        height: 44px;
        overflow: hidden;
        padding: 0 0 26px;
        text-shadow: 0 1px 0 #000000;
    }
    #navcontainer .current-cat a {
        -moz-border-radius: 10px 10px 0 0;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
        background: none repeat scroll 0 0 #1F74BC;
        color: #FFFFFF;
        padding-bottom: 17px;
        text-shadow: 0 1px 0 #000000;
    }
    #content {
        padding: 2px 0 15px 3px;
    }
    pre {
        overflow: auto;
        width: 460px;
    }
    .post {
        border-bottom: 1px solid #DDDDDD;
        padding-bottom: 15px;
    }
    .post p {
        margin-bottom: 10px;
    }
    .title {
        color: #1A1B1B;
        font-family: Arial,Helvetica,Sans-serif;
        font-weight: bold;
        line-height: 22px;
        margin: 0 0 8px;
        padding: 15px 0 0;
    }
    .title a {
        color: #1A1B1B;
        text-decoration: none;
    }
    .title a:hover {
        color: #3366CC;
        text-decoration: none;
    }
    .pagetitle {
        font-family: Arial,Helvetica,Sans-serif;
        line-height: 22px;
        margin-bottom: 20px;
        text-decoration: underline;
    }
    .readmorecontent {
        text-align: right;
    }
    a.readmore {
        color: #3366CC;
        font-size: 13px;
        font-weight: bold;
        padding: 4px 15px;
        text-decoration: none;
    }
    a.readmore:hover {
        color: #5588AA;
    }
    .postdate {
        color: #626D70;
        font-family: Arial,Verdana;
        font-size: 11px;
        padding: 2px 0;
    }
    .postmeta {
        font-family: Arial,Verdana;
        font-size: 11px;
        padding: 2px 4px;
    }
    .postdate img, .postmeta img {
        border: medium none;
        margin: 2px;
        vertical-align: middle;
    }
    .entry {
        font-family: Arial,Verdana;
        font-size: 14px;
        line-height: 20px;
        padding-top: 8px;
        text-align: justify;
    }
    .navigation {
        padding: 25px 0;
    }
    blockquote {
        border-left: 3px solid #BCBBBB;
        color: #666666;
        font-style: italic;
        overflow: hidden;
        padding-left: 9px;
    }
    .post img {
        max-width: 680px;
    }
    img.wp-smiley {
        border: medium none;
        margin: 0;
        max-height: 12px;
        padding: 0;
    }
    .aligncenter, div.aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .alignleft {
        float: left;
    }
    .alignright {
        float: right;
    }
    .wp-caption {
        -moz-border-radius: 3px 3px 3px 3px;
        background-color: #F3F3F3;
        border: 1px solid #DDDDDD;
        margin: 10px;
        padding-top: 4px;
        text-align: center;
    }
    .wp-caption img {
        border: 0 none;
        margin: 0;
        padding: 0;
    }
    .wp-caption p.wp-caption-text {
        font-size: 11px;
        line-height: 17px;
        margin: 0;
        padding: 0 4px 5px;
    }
    .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:active {
        background: none repeat scroll 0 0 transparent !important;
        border: 0 none !important;
        color: #232323 !important;
        font-size: 15px !important;
        padding: 4px 8px !important;
    }
    .wp-pagenavi a:hover {
        background: none repeat scroll 0 0 #168FB8 !important;
        border: 0 none !important;
        color: #FFFFFF !important;
    }
    .wp-pagenavi span.pages {
        background: none repeat scroll 0 0 transparent !important;
        border: 0 none !important;
        color: #232323 !important;
        font-size: 15px !important;
        padding: 4px 8px !important;
    }
    .wp-pagenavi span.current {
        background: none repeat scroll 0 0 #408AC5 !important;
        border: 0 none !important;
        color: #FFFFFF !important;
        font-size: 15px !important;
        font-weight: bold;
        padding: 4px 8px !important;
    }
    .wp-pagenavi span.extend {
        background: none repeat scroll 0 0 transparent !important;
        border: 0 none !important;
        color: #232323 !important;
        font-size: 15px !important;
        padding: 4px 8px !important;
    }
    .sidebaradbox {
        -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-bottom-left-radius:10px
    -webkit-border-bottom-right-radius:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    border-radius: 10px;
        background: none repeat scroll 0 0 #F2F5F8;
        border: 1px solid #AECDE6;
        margin-bottom: 10px;
        padding: 10px;
        text-align: center;
    }
    .ad125 {
        margin: 10px;
    }
    .sidebar {
        color: #333333;
        margin: 0 0 10px;
    }
    .sidebar-right {
        margin: 0 6px 0 0;
    }
    .sidebar-left {
        margin: 0 0 0 2px;
    }
    .sidebar-left h2 {
    }
    .sidebar-right h2 {
    }
    .sidebar a {
        color: #3366CC;
        text-decoration: none;
    }
    .sidebar a:hover {
        color: #5588AA;
        text-decoration: underline;
    }
    #search {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 2px solid #AECDE6;
        height: 21px;
        padding-right: 3px;
        text-align: right;
    }
    #search input {
        background: none repeat scroll 0 0 transparent;
        border: 0 none;
        color: #444444;
    }
    #s {
        background: none repeat scroll 0 0 transparent;
        margin: 2px 0 0;
        padding: 2px 4px 4px;
        width: 140px;
    }
    #topsearch #s {
        width: 140px;
    }
    #topsearch #search {
        float: right;
        margin: -29px 0 0;
    }
    .sidebar h2 {
        -moz-border-radius: 8px 8px 0 0;
    -webkit-border-top-left-radius:8px;
    -webkit-border-top-right-radius:8px;
        background: url("images/h2bg.png") repeat-x scroll 0 0 transparent;
        color: #FFFFFF;
        font-family: Arial,Helvetica,Sans-serif;
        font-size: 14px;
        font-weight: bold;
        line-height: 18px;
        margin: -8px -8px 0;
        padding: 8px;
        text-shadow: 0 1px 0 #000000;
        text-transform: uppercase;
    }
    .sidebar ul {
        list-style-type: none;
        margin: 0 0 10px;
        padding: 0;
    }
    .sidebar ul li {
        -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
        border: 1px solid #AECDE6;
        list-style-type: none;
        margin: 0 0 5px;
        padding: 8px;
    }
    .sidebar ul ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .sidebar ul li ul li, .sidebar ul li li {
        -moz-border-radius: 0 0 0 0;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
        margin: 0;
        padding: 3px 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px dotted #cccccc;
    
    }
    #wp-calendar th {
        background: none repeat scroll 0 0 transparent;
        color: #666666;
        font-style: normal;
        text-transform: capitalize;
    }
    #wp-calendar caption {
        background: none repeat scroll 0 0 transparent;
        color: #333333;
        margin: 2px 0;
        padding: 2px 4px;
        text-transform: uppercase;
    }
    #wp-calendar td {
        color: #777777;
        font: 12px 'Lucida Grande','Lucida Sans Unicode',Verdana,sans-serif;
        letter-spacing: normal;
        padding: 2px 0;
        text-align: center;
    }
    #wp-calendar td:hover, #wp-calendar #today {
        background: none repeat scroll 0 0 #408AC5;
        color: #FFFFFF;
    }
    #wp-calendar td:hover a, #wp-calendar #today a {
        color: #FFFFFF;
    }
    #wp-calendar {
        empty-cells: show;
        font-size: 14px;
        font-weight: bold;
        margin: 0;
        width: 95%;
    }
    #footer {
        background: url("images/footer.png") no-repeat scroll 0 0 transparent;
        color: #666666;
        font-size: 13px;
        margin-top: 0;
        padding: 25px 19px 0;
        text-align: center;
    }
    #footer a {
        color: #666666;
    }
    #footer a:hover {
        color: #E8EFF1;
        text-decoration: none;
    }
    #credits {
        color: #888888;
        font-size: 11px;
        padding: 7px;
        text-align: center;
    }
    #credits a {
        color: #888888;
        text-decoration: none;
    }
    #comments h3 {
        margin-bottom: 10px;
    }
    #commentform input {
        margin: 5px 5px 1px 0;
        padding: 2px;
        width: 170px;
    }
    #commentform {
        margin: 5px 10px 0 0;
    }
    #commentform textarea {
        padding: 2px;
        width: 100%;
    }
    #respond:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
    }
    #commentform #submit {
        float: right;
        margin: 0 0 5px auto;
    }
    .alt {
        margin: 0;
        padding: 10px;
    }
    .commentlist {
        padding: 0;
        text-align: justify;
    }
    .commentlist li {
        list-style: none outside none;
        margin: 15px 0 10px;
        padding: 5px 5px 10px 10px;
    }
    .commentlist li ul li {
        margin-left: 10px;
        margin-right: -5px;
    }
    .commentlist p {
        margin: 10px 5px 10px 0;
    }
    .children {
        padding: 0;
    }
    #commentform p {
        margin: 5px 0;
    }
    .nocomments {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .commentmetadata {
        display: block;
        margin: 0;
    }
    .post_thumbnail {
        background: none repeat scroll 0 0 #EEEEEE;
        border: 1px solid #DDDDDD;
        margin: 0 10px 10px 0;
        padding: 5px;
    }
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header Logo is not Centered’ is closed to new replies.