• Resolved actlatham

    (@actlatham)


    Hi guys,

    I’m currently putting the finishing touches on my site mnuk-launch.co.uk.

    Can anyone help me out with the code to center a page title ?

    many thanks

    Alex

Viewing 7 replies - 1 through 7 (of 7 total)
  • Try this:

    /* Remove icon  */
    #main-wrapper .format-icon:before {
    content:    none;
    }
    /* Center Title  */
    .page .entry-title {
    margin-left: 50%
    }

    Adjust the 50% to your site.

    Thread Starter actlatham

    (@actlatham)

    Legend. Thank you.

    Alex

    Missed a ;

    /* Remove icon  */
    #main-wrapper .format-icon:before {
    content:    none;
    }
    /* Center Title  */
    .page .entry-title {
    margin-left: 50%;
    }

    The code to remove the icons is good, but it removes all icons on website, not just on pages. This removes it only on pages:

    .page #main-wrapper h1.format-icon:before {content: none;}

    But the centering… is actually indenting in that code, and it scales erratically with page width. Besides, there’s a big risk that it will affect lists of posts (or other content) displayed on pages (by plugins or custom templates). Here’s how to responsively center the page title and only the page title (with icon or not):

    .page h1.entry-title {
    text-align: center;
    }

    @acub’s the Legend ??

    None of this seems to be working for me. No matter what I use to remove the page icons (looks like a clipboard) nothing seems to work.
    My site is https://66.147.242.194/~mountby1/

    and this is all of my css code:

    .carousel .item {
    line-height: 300px;
    overflow: hidden;
    max-height: 700px;
    }
    body {
    background: none repeat scroll 0 0 #FAFAFA;
    color: #4682B4;
    padding-bottom: 0;
    }
    .carousel-inner > .active {
    left: 0;
    /* Fix slider in IE */
    z-index: 9;
    }
    .carousel-caption {
    background-color: transparent9;
    /* IE8 and below */
    background: rgba(0, 0, 0, 0.2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#33000000′, endColorstr=’#33000000′, GradientType=0);
    /* IE6-9 */
    max-width: 60%;
    padding: 5%;
    line-height: 14px;
    vertical-align: middle;
    /* fix for IE to align the grey box to center */
    top: 25%;
    display: inline-block;
    position: relative;
    margin-left: 11%;
    /*display:inline; IE7 and below */

    }
    .btn.btn-primary.fp-button {
    display: none;
    }
    /*Make Carousel fade. Delay between slides needs(?) to be > 7000ms for this to work well*/
    .carousel-inner > .item {
    -webkit-transition: 2s ease-in-out opacity;
    -moz-transition: 2s ease-in-out opacity;
    -ms-transition: 2s ease-in-out opacity;
    -o-transition: 2s ease-in-out opacity;
    transition: 2s ease-in-out opacity;
    }
    .carousel-inner > .next.left,
    .carousel-inner > .prev.right {
    opacity: 1;
    z-index: 1;
    left: 0;
    }
    .carousel-inner > .active.left {
    opacity: 0;
    z-index: 2;
    left: 0/* Remove icon */
    #main-wrapper .format-icon:before {
    content: none;
    }
    /* Center Title */
    .page #main-wrapper h1.format-icon:before {content: none;}
    .page h1.entry-title {
    text-align: center;
    }

    Sorry to be such a pain, but I’m new to wordpress and am learning code very, very slowly. Thank you so much for any help you may be able to give me. ??

    @april475: hint: for code to be displayed properly, both containing backticks (start and end) need to be on their own lines, alone.

    The

    #main-wrapper .format-icon:before {
    content: none;
    }

    doesn’t work because it’s not properly read. The previous declaration is not closed and no browser is smart enough to close it for you, to understand #main-wrapper .format-icon:before for what it is: a CSS selector. Instead, they try their best to read it as an attribute declaration which results in an error.
    Just type

    ;
    }

    between left: 0 and /* Remove icons */ and you’re good to go.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to center a Page Title?’ is closed to new replies.