Need help? Check out our Support site, then


autofocus theme changing text

  1. Hi there,
    I'm using the autofocus theme for http://www.ace-eleven.com

    I am changing the appeareance of my blog with css customization, but I can't find how to change;
    -in navigation below;
    -the Browse text into capitals BROWSE
    -Older and Newer text into; NEXT and PREV

    I need some help with the codes to make these changes...anyone?
    thanks in advance for helping!
    ace

    The blog I need help with is ace-eleven.com.

  2. Hi Ace, for the Browse text on single post pages, we can use the following CSS to make it uppercase.

    #nav-below h3 {
        text-transform: uppercase;
    }

    On the Older and Newer links, due to the way the HTML is structured, I can't find a way to change the Older and Newer text, or even hide it for that matter without hiding the link to the posts.

  3. Hi Sacred P,
    Thanks for the code, that worked!

    it's a pity the older/newer text can't be changed... finding a way to change the took me a while couln't find it......

    Is there maybe a way to change the color of these texts into white? That would make them invisible as well.....
    Ace

  4. Sacred Path,
    I pasted the code below, the text isn't showing but so aren't the browse buttons....

    Is that what you were explaining, or is there a way to make the buttons visible?
    Ace

    `}
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, dialog, embed, figcaption, figure, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: 24px;
    margin: 0;
    padding: 0;
    text-rendering: optimizelegibility;
    vertical-align: baseline;
    }
    article, aside, details, dialog, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
    }
    html {
    overflow-y: scroll;
    }
    body {
    background: #fff none repeat scroll 0 0;
    color: #fff;
    font-family: "Gentium Book Basic","Times New Roman",serif;
    font-size: 17px;
    }
    a {
    color: #111;
    outline: medium none;
    text-decoration: none;
    }

  5. ok that last code DID work!

  6. Super, and you are welcome.

  7. rats, that code also changed the text on post and pages, they became invisible!

    Anyone has an idea of how to change or remove the
    'older and newer' navigation texts in the Autofocus theme?

    Thanks in advance!
    Ace

  8. Here's the best way I can think of to change the wording for your prev/next links. It adds the text to the link itself which isn't ideal but it's the best I can come up with:

    body.single-post #nav-below .nav-previous, body.single-post #nav-below .nav-next {
    	visibility: hidden;
    }
    body.single-post #nav-below .nav-previous a, body.single-post #nav-below .nav-next a {
    	visibility: visible;
    	float: left;
    }
    body.single-post #nav-below .nav-next a {
    	float:right;
    }
    body.single-post #nav-below .nav-previous a::before {
    	content: "PREV ";
    }
    body.single-post #nav-below .nav-next a::after {
    	content: " NEXT";
    }

    If you just want to hide the existing wording then you can use the same code just without the last 2 bits. Let me know how it looks.

  9. Hi,
    Is it possible to replace the texts of the navigation buttons with an image ?
    Hope so!
    Thanks Ace

  10. You mean the ones to the sides of each post that are currently « and »? There's a way to do it but it's a bit hacky as it involves hiding the text by setting the font size to 0, I couldn't figure out a better way.

    Here's the code for you to try anyway, just make sure you include the URL to the images you want to use instead and set the matching dimensions so that it fits properly:

    #nav-above .nav-previous a, #nav-above .nav-next a {
    	display: block;
    	height: 40px;
    	width: 40px;
    	font-size: 0;
    }
    #nav-above .nav-previous a {
    	background: url("http://placehold.it/40x40") no-repeat center;
    }
    #nav-above .nav-next a {
    	background: url("http://placehold.it/40x40") no-repeat center;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic