WordPress.org

Forums

Customising Twenty Eleven theme (25 posts)

  1. RossB
    Member
    Posted 3 years ago #

    I have some questions on customising the twenty eleven theme. I'm not sure whether it would be preferred for these questions to be asked in separate posts to make them easy to find by others with the same queries. If so, could someone who knows about these things pls let me know, and I will be happy to re-post each query separately.

    So, to the queries, which I'll enumerate in order of most interest to me, and for the sake of clarity and convenience.

    1. I want to make the tags that appear at the end of each post invisible. Is this easily doable, pls?

    2. Can I easily decrease the size of the header (especially the depth)?

    3. Can I get rid of the blog title and subtitle from the top of the
    page and 'float' (superimpose) it over a customised header image?

    4. Alternatively, could I make the whole header a clickable link, and 'hide' the blog title, while still having it there so search engines can continue to pick it up?

    5. Can I reduce the depth of the white area above the header? Or get rid of it entirely?

    6. Is it easily possible to move the 'Search' box down so it is 'floating' (superimposed) over the header - say, in the top right corner?

    7. Can I get rid of the Comment bubble and just have a text link (eg: 'Add a Comment' or 'Reply') next to the blog post date?

    Cheers all
    Ross

  2. alchymyth
    Forum Moderator
    Posted 3 years ago #

    start by creating a child theme http://codex.wordpress.org/Child_Themes

    this is to avoid that any customisations are overwritten with the next upgrade of your wordpress version; it is also important to have an unedited default theme as a fallback theme in case of serious theme problems.

    once your child theme is setup and working, it may be neccessary for you to post a link to your site, to get suggestions for some of your questions.

  3. RossB
    Member
    Posted 3 years ago #

    Thanks, alchymyth. I hadn't heard about child themes until your post, but on doing more research I understand the concept now. Great idea. I'm setting one up today, then will get back.

    In the meantime, I have a very basic question. Regardless of whether it's a child theme or the theme itself being customised, is it possible to somehow do it without changing the current theme of the blog? It seems to me that it's necessary to activate a theme if you want to customise it; otherwise, the theme's files (style.css, header.php etc) are not accessible for modding.

    In other words, I'd like to work on customising a new theme 'offline' that can be activated once completed, and in the meantime my blog would continue with its current theme. Thus, the change to the new theme would be instant, rather than being a public work in progress.

    Possible or not, pls?

    Cheers
    Ross

  4. alchymyth
    Forum Moderator
    Posted 3 years ago #

    It seems to me that it's necessary to activate a theme if you want to customise it; otherwise, the theme's files (style.css, header.php etc) are not accessible for modding.

    you would need to select the theme from the 'select theme to edit' dropdown in the 'appearance' 'editor' page in the dashboard, above the list of theme files. the theme has to be in the themes folder of your wordpress installation.

    there are ways to work on a theme while another theme is active in the front - have a search on the web or forum -
    for instance: http://digwp.com/2009/12/develop-themes-behind-the-scenes/ (this is not a recommendation, as i haven't worked with it)

    and then there is the possibility to install wordpress locally on your computer; search for 'wordpress local installation' or 'wordpress local installation xampp'

  5. RossB
    Member
    Posted 3 years ago #

    Thanks, alchymyth. Appreciated.

    I have now created a TwentyEleven child theme and it shows up in my dashboard, and is able to be activated. So, all OK there, it seems.

    However, I note a caption under the child theme that states: "Changes made to the templates will affect both themes."

    I was under the impression that if you made changes to the child theme they were not also made to the parent theme. Have I got this wrong?

    Cheers
    Ross

  6. alchymyth
    Forum Moderator
    Posted 3 years ago #

    I was under the impression that if you made changes to the child theme they were not also made to the parent theme.

    you are right - i don't know what the text refers to.

    1. I want to make the tags that appear at the end of each post invisible. Is this easily doable, pls?

    try and start with adding this to style.css of your child theme:
    .tag-links { display: none; }
    if you want to remove the tags links from single posts, copy content-single.php into your child theme; edit it and find:
    $utility_text = __( 'This entry was posted in %1$s and tagged %2$s by <a href="%6$s">%5$s</a>. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'twentyeleven' );
    change to:
    $utility_text = __( 'This entry was posted in %1$s by <a href="%6$s">%5$s</a>. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'twentyeleven' );

    2. Can I easily decrease the size of the header (especially the depth)?

    add this to functions.php of your child theme (if you don't have a functions.php in you r child theme, create one and put <?php at the beginning):

    //after theme setup section
    add_action( 'after_setup_theme', 'twentyeleven_child_theme_setup' );
    function twentyeleven_child_theme_setup() {
    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 160 ) );
    }

    3. Can I get rid of the blog title and subtitle from the top of the page and 'float' (superimpose) it over a customised header image?

    add this to style.css of your child theme:

    #branding { position: relative; }
    #branding hgroup { position: absolute; top: 0px; }

    4. Alternatively, could I make the whole header a clickable link, and 'hide' the blog title, while still having it there so search engines can continue to pick it up?

    the header is clickable by default; under 'dashboard' 'apperance' 'header' tick 'display text' [no]

    5. Can I reduce the depth of the white area above the header? Or get rid of it entirely?

    #page { margin-top: 0; }

    6. Is it easily possible to move the 'Search' box down so it is 'floating' (superimposed) over the header - say, in the top right corner?

    comes automatically with fix no.3; don't do fix no.4

    7. Can I get rid of the Comment bubble and just have a text link (eg: 'Add a Comment' or 'Reply') next to the blog post date?

    get rid of comment bubble:
    .entry-header .comments-link{ display: none; }
    copy content.php into your child theme; edit it and locate:
    <?php twentyeleven_posted_on(); ?>
    directly after it, for instance, add:
    <?php if ( comments_open() ) : echo ' - '; comments_popup_link( 'Add a Comment', '1 Comment', '% Comments'); endif; ?>

    open to improvements

  7. RossB
    Member
    Posted 3 years ago #

    Firstly, thanks so much for all your help, alcymyth. Much appreciated.

    I'm slowly working through your suggested mods. Re 1, I've made your first edit to the style.css of your child theme, but there was no visible effect to the tags as they appear online. Obviously, I also need to follow up with your content-single.php edits. Two points of clarification here, pls.

    a) First, I copy the entire contents of the parent content-single.php file to another such file, which I then upload into the child theme - correct?
    b) Will your edit remove the single post tags entirely, or leave them there for each post while rendering them invisibile publicly? It's the latter I'm seeking to achieve, not the former. Just thought I should check before I go ahead with this edit.

    Cheers!
    Ross

  8. Shasta
    Member
    Posted 3 years ago #

    Hi RossB,

    Check your ISP - you might be able to have two installations of WP with no extra cost. If so, that gives you a development option without the hassle of installing locally or making hacks. (It also gives you a backup against hacks, but not server loss, if you synch it regularly when not developing.)

  9. RossB
    Member
    Posted 3 years ago #

    Hi shastaw

    Thanks for that tip! I'll have a look into what my ISP offers...will also have to check up on synching (never heard of that until now).

    Cheers!
    Ross

  10. RossB
    Member
    Posted 3 years ago #

    Hi alchymyth. An update.

    Re 1: I've followed through on your complete instructions and the tags are no longer visible - hurrah! However, there are now two little vertical division lines (I guess the tags used to be enclosed within them). I can live with these, but just wondering if they can easily be reduced to just one vertical divider line?

    Also, as stated previously, I am concerned that I have not just made the tags invisible, but have deleted them altogether (which I don't want to do, as I think that will compromise SEO or at least the ability to be picked up by search engines.

    Re 2 and 3: Have actioned both as per your suggestions, but no changes are apparent to the appearance of the theme. Maybe I should have copied and pasted the entire parent functions.php file to the child theme, rather than just created a new functions.php file and copied your code to it.

    If this is getting too protracted and time-consuming, I'll see if I can hunt down some possible solutions or learn enough to converse a little more tech-articulately via Google!

    Cheers
    Ross

  11. alchymyth
    Forum Moderator
    Posted 3 years ago #

    there are now two little vertical division lines

    to avoid these, you really need to edit the template files - there is nothing with css to get rid of them, as far as i can see.

    Also, as stated previously, I am concerned that I have not just made the tags invisible, but have deleted them altogether (which I don't want to do, as I think that will compromise SEO or at least the ability to be picked up by search engines.

    if you want the search engines to 'use' the tags, leaeve tha tags in place where they were - imho, 'good' search engines will not use 'hidden' tags nor anything that is not visible to the user.

    Re 2 and 3: Have actioned both as per your suggestions, but no changes are apparent to the appearance of the theme.

    the header size might only have effect on images uploaded after the change(?); although the addition to style.css should have immediate effect.

    Maybe I should have copied and pasted the entire parent functions.php file to the child theme

    definitively - no. this would create fatal errors.

    can you post a link to your site?

  12. RossB
    Member
    Posted 3 years ago #

    Hi alcymyth

    Been caught up for a couple of days and unable to get back to modding my blog until now.

    I've pondered on your comment about leaving the tags in place, and have decided to go with the tags. So, reinstated! Ta for the crash education!

    I've done some messing with the CSS in the Style Sheet and after a lot of frustration have managed to get the header to the size I want. I've replaced the default header with a very plain customised one - that will have to suffice until I get around to designing something better.

    I'm beginning to like the clean, content-focused design of the Twenty Eleven theme, but there is one annoying aspect that I would GREATLY appreciate some advice on. As will be apparent when my site is viewed (pls see http://theboomtownrap.perthpunk.com/wordpress/), the white posting area comes to an abrupt and untimely end under the Sitemeter link, and the grey background then goes right across the page from that point down. This looks weird and unsightly, especially happening as it does just after the first pic of the photo series that concludes the post. This only happens on the home page. If I click on the post, or any other post, the white area does not end like that, instead continuing on ad infinitum no matter how far down the page I scroll.

    Do you have a fix for this please?

    Cheers!
    Ross

  13. alchymyth
    Forum Moderator
    Posted 3 years ago #

    it seems, where you inserted the sitemeter (into sidebar.php ?), you added an extra closing div:

    </div><!-- #secondary .widget-area -->
    
    <!-- Site Meter XHTML Strict 1.0 -->
    <a id="idSiteMeterHREF" href="http://www.sitemeter.com/stats.asp?site=s16boomtownrap" target="_top"><img ...
    ertc
    ...
    .sitemeter.com/js/counter.js?site=s16boomtownrap">
    </script>
    <!-- Copyright (c)2006 Site Meter -->
    </div>

    the last </div> is in excess.
    to have the sitemeter clearly in the sidebar, possibly move the sitemeter section to before this line:
    </div><!-- #secondary .widget-area -->

  14. RossB
    Member
    Posted 3 years ago #

    Fixed! Thanks a lot, alchmyth!

    Only the comment bubble to go...will try to get on to that over next 24 hours and report back.

    Thanks so much for staying with me through this. It was a much-needed change that I'd been putting off for a long time, but you've taken a lot of the pain out of it!

    Cheers
    Ross

  15. nikbea
    Member
    Posted 3 years ago #

    This thread was so helpful, as I have been wanting to make some of these same changes to my theme. Alchymyth, you made it so easy, especially for someone who doesn't know anything about this stuff. Thanks a ton.

    I wonder if I could add my own questions on customizing my twenty eleven child theme --

    1) Is there a way to remove the search form from the header completely, leaving only the search form in the sidebar? I'm afraid I messed around with the code before I knew what a child theme was and sort of bungled it, and now it's all wrong. :) Have a child theme now, but want to get rid of that top search bar completely...

    2) I would like to add the sidebar exactly as it is on my homepage to all singular entries, so that if you click on an entry title, when that entry comes up you can see the sidebar as well. Is there a simple way to do that?

    3) Instead of the generic links that say "previous" and "next" in the top right of the singular entries, I would like them to say the actual title of the previous and next entries.

    I don't have any idea on whether those are easy fixes or complicated ones, so I apologize in advance if I'm asking for an uncouth amount of information. Thanks for any help you can give!

    nikkibeard.com

  16. alchymyth
    Forum Moderator
    Posted 3 years ago #

    1)
    possibly the easiest way is to add something like this to style.css of the child theme:
    #branding #searchform { display:none; }

    2)
    refer to: http://www.transformationpowertools.com/wordpress/twenty-eleven-sidebar-on-single-posts-and-pages

    3)
    copy single.php into the child theme and edit this section there:

    <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">←</span> Previous', 'twentyeleven' ) ); ?></span>
    						<span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></span>

    for instance to:

    <span class="nav-previous"><?php previous_post_link( '%link' ); ?></span>
    						<span class="nav-next"><?php next_post_link( '%link' ); ?></span>

    or keeping the arrows, to:

    <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">←</span> %title', 'twentyeleven' ) ); ?></span>
    						<span class="nav-next"><?php next_post_link( '%link', __( '%title <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></span>

    http://codex.wordpress.org/Function_Reference/next_post_link

  17. nikbea
    Member
    Posted 3 years ago #

    Boom! Done! You are genius and that was fun. Thanks so much for your help -- I feel like a web wizard. :)

  18. jamesbra
    Member
    Posted 3 years ago #

    Great post, I am trying to add an address line and phone number, etc. maybe a map link to locator. All to the right of the site title above the header (to make use of the white space above the header) w/out affecting the site title as it is by default. Would like to achieve by adding to child theme css. I thought it would be a simple and common query but have found no info, except to replace title w/ logo, remove, reduce, etc.

    site: http://www.littlepictures.com

  19. AVSoffice
    Member
    Posted 3 years ago #

    Regarding the Twenty-Eleven upgrade. I seem be experiencing a glitch.

    It appears that the Tiki favicon has taken over my website's favicon. I originally had used plugin enetitled All in One icons. Also, all my files .ico, .png are not working. Getting either blank icons or red x placeholders.

    I went into the child them, and header .php and added some code. Also uploaded the favicons to my root directory, but still not getting back my favicons.

    I don't believe it is because of the WordPress 3.3 upgrade, because my other websites are working fine.

    Any help would be greatly apperciated.

    Thank you.

  20. AVSoffice
    Member
    Posted 3 years ago #

    I am still hoping for a reply to my post. My site address is AVSoffice.com.

    [Regarding the Twenty-Eleven upgrade. I seem be experiencing a glitch.

    It appears that the Tiki favicon has taken over my website's favicon. I originally had used plugin enetitled All in One icons. Also, all my files .ico, .png are not working. Getting either blank icons or red x placeholders.

    I went into the child them, and header .php and added some code. Also uploaded the favicons to my root directory, but still not getting back my favicons.

    I don't believe it is because of the WordPress 3.3 upgrade, because my other websites are working fine.

    Any help would be greatly apperciated.

    Thank you. ]

  21. bhd1234
    Member
    Posted 2 years ago #

    Hi Everyone, I am working with the Twenty Eleven WP theme and am having a bit of trouble. If you go to my site here you will notice that when you scroll down the page, the text moves but the background stays stationary. I would like to know how to change the CSS code so that the background moves with the body text. Thanks in advance for your help.

  22. AVSoffice
    Member
    Posted 2 years ago #

    @bhd1234, I love your background, where did you find it, and is there library out there?

    I also would like to know how I can freeze the navigation bar, and have the body scroll up? http://www.avsoffice.com.

  23. kennypreston
    Member
    Posted 2 years ago #

    Hi guys,

    I used twentyeleven for a friend's site who copies news items from the content of an email and pastes them into a post of twentyeleven. The site looks fine in IE, but in firefox all the text extends beyond and above the sidebar on the right side of the page.

    Would you please tell me how I can get that text to stay where it belongs, within the content area, as it already does stay in IE?

    This is the site.. http://www.gwizreport.com

    Thanks,

    Kenny

  24. beatsbydrdre
    Member
    Posted 2 years ago #

    I don't believe it is because of the WordPress 3.3 upgrade, because my other websites are working fine.

  25. kennypreston
    Member
    Posted 2 years ago #

    Hi guys,

    I used twentyeleven for a friend's site who copies news items from emails as HTML and pastes these into posts of twentyeleven. In spite of the HTML formatting, the site looks good in IE, but in firefox all the text extends beyond its column and above the sidebar on the right side of the page.

    Would you please tell me how I can get that text to stay within its column, as it does stay in IE?

    This is the site

    Thanks

Topic Closed

This topic has been closed to new replies.