Image size – columnist

  • Author
    Posts
  • #1050234

    helenawilles
    Member

    How can I change the size, background colour and mouseover behaviour for the image in the top left hand corner? The background is currently black and I get a fine line on the left edge and I also don’t like it becoming a black square when I mouseover. Is is possible that this image changes with each page, but not randomly?

    The blog I need help with is helenawillesdesign.wordpress.com.

    #1050597

    How can I change the size, background colour and mouseover behaviour for the image in the top left hand corner?

    To change the background color for the image in the top left corner of The Columnist theme, add this to your Appearance → Custom Design → CSS editor:

    #masthead .thumbnail {
    	background-color: yellow;
    }

    Change the “yellow” color name to a color code of your choice:
    http://automattic.github.com/Iris/

    Here is a CSS example of changing the size:

    #masthead .thumbnail,
    #masthead .thumbnail img {
    	width: 200px;
    	height: 200px;
    }
    #1050598

    The background is currently black and I get a fine line on the left edge and I also don’t like it becoming a black square when I mouseover.

    I don’t see the line on the left edge on the demo site http://thecolumnistdemo.wordpress.com/ and it looks like http://helenawillesdesign.wordpress.com/ is currently using the Bueno theme, so I can’t find where you’re seeing that. If you still need help, please post a link to where the problem is happening.

    #1050600

    Is is possible that this image changes with each page, but not randomly?

    This code will change out the image. To limit it to a specific page, you would need to check the page source of the page you’d like to use it on and add the page ID to the front of the selector. For example, you would change “#masthead .thumbnail img” to “#page-id-2 #masthead .thumbnail img”.

    #masthead .thumbnail img {
    	display: none;
    }
    
    #masthead .thumbnail {
    	background: url(http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png) no-repeat;
    	width: 176px;
    	height: 145px;
    	display: block;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    	filter: alpha(opacity=100);
    	opacity: 1;
    	-webkit-transition: background 0.3s ease;
    	-moz-transition: background 0.3s ease;
    	-o-transition: background 0.3s ease;
    	-ms-transition: background 0.3s ease;
    	transition: background 0.3s ease;
    }
    #masthead .thumbnail:hover {
    	background: red;
    	width: 176px;
    	height: 145px;
    	display: block;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    	filter: alpha(opacity=90);
    	opacity: .9;
    	-webkit-transition: background 0.3s ease;
    	-moz-transition: background 0.3s ease;
    	-o-transition: background 0.3s ease;
    	-ms-transition: background 0.3s ease;
    	transition: background 0.3s ease;
    }

    This code is a slightly different example I came up with while testing stuff out. It uses two images instead of leaving one as a background color and the effect with the example logo images I used turned out kinda cool:

    #masthead .thumbnail img {
    	display: none;
    }
    
    #masthead .thumbnail {
    	background: url(http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png) no-repeat;
    	width: 176px;
    	height: 145px;
    	display: block;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    	filter: alpha(opacity=100);
    	opacity: 1;
    	-webkit-transition: background 0.5s ease;
    	-moz-transition: background 0.5s ease;
    	-o-transition: background 0.5s ease;
    	-ms-transition: background 0.5s ease;
    	transition: background 0.5s ease;
    }
    #masthead .thumbnail:hover {
    	background: url(http://s.wordpress.org/about/images/wordpress-logo-simplified-bg.png) no-repeat;
    	width: 176px;
    	height: 145px;
    	display: block;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    	filter: alpha(opacity=90);
    	opacity: .9;
    	-webkit-transition: background 0.5s ease;
    	-moz-transition: background 0.5s ease;
    	-o-transition: background 0.5s ease;
    	-ms-transition: background 0.5s ease;
    	transition: background 0.5s ease;
    }

    These examples should help get you started. Note that you can take these and try changing around the options to get different effects.

    #1050609

    helenawilles
    Member

    Thanks! I will try this and start a new thread.

The topic ‘Image size – columnist’ is closed to new replies.