WordPress.org

Ready to get started?Download WordPress

Forums

Twentyeleven auto-resizing (responisve) tilte (9 posts)

  1. whereskarlo
    Member
    Posted 1 year ago #

    Hi,

    I replaced my site title with a logo. I'm using the twentyeleven theme.

    I would like to make the logo responsive so that it will resize together with the rest of the page. I currently have the following in my twentyeleven custom stylesheet:

    #site-title {
    	text-indent:-9999px;
    }
    #site-title a {
    	background:url('http://www.whereskarlo.com/wp-content/uploads/2012/09/logo.png') no-repeat;
    	size:cover;
    	display:block;
    	height:146px;
    	width:473px;
    }

    I know I need to mess with the size option and tried calling these things:

    -webkit-background-size:cover;
    	-moz-background-size:cover;
    	-o-background-size:cover;
    	background-size:cover;

    How can I make it work? Thanks a ton!!

  2. stoatoffear
    Member
    Posted 1 year ago #

    Instead of a background image, if you use an image <img> positioned absolutely and make it a percentage of the width of it's relatively-positioned container (such as the body), it will change size when the browser window is re-sized.
    See http://www.cbt-eastbourne.co.uk for an example of an image in the background resizing using this method.
    Other elements need to move in order for them to work properly with the <img> as it re-sizes - I have used JQuery to assign different style sheets to the page as the browser window changes size. I don't think this is very satisfactory, but with a third of visits to this site being from mobile devices we can say that it works for the user.

  3. whereskarlo
    Member
    Posted 1 year ago #

    Thanks for the reply, but that is slightly too technical for me to execute and I'd probably just leave it as is.

    Is there a reason the image in the title doesn't respond to the auto-resize code I added?

  4. stoatoffear
    Member
    Posted 1 year ago #

    No - wait, try background-size:100%;
    and maybe background-position:50% 50%

  5. whereskarlo
    Member
    Posted 1 year ago #

    I was hoping to do it in CSS3 and using the custom CSS editor. Do I need to add a class somewhere? Sorry I am still new to this but reading and trying to learn.

    html {
    	background: url(images/bg.jpg) no-repeat center center fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    }

    Thanks a ton!!

  6. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    The custom CSS editor? Is this a wordpress.com site or a self-hosted WordPress install?

  7. whereskarlo
    Member
    Posted 1 year ago #

    It's self-hosted at http://www.whereskarlo.com. I was referring to the twentyeleven theme which comes with a custom CSS editor that let's you make a custom stylesheet. I currentlu have the following in it:

    #site-title {
    	text-indent:-9999px;
    }
    
    #site-description {
    	text-indent:-9999px;
    	height:1px;
    }
    
    #site-title a {
    	background:url('wp-content/uploads/2012/10/logo2.png') no-repeat;
    	display:block;
    	height:146px;
    	width:473px;
    }
  8. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Um - no. There's no custom CSS editor in the Twenty Eleven theme.

    If you are referring to the Editor in the Appearance sub-menu, then that amends the theme's main CSS anything in there. And you should never edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

  9. whereskarlo
    Member
    Posted 1 year ago #

    I just realized it is part of jetpack, it is under appearance but called "Edit CSS." It creates a custom stylesheet that loads after the original one.

Topic Closed

This topic has been closed to new replies.

About this Topic