Need help? Check out our Support site, then


Customise HUM theme

  1. awaywiththespoons
    Member

    Hello!
    Thanks for the feedback.
    (see post: http://en.forums.wordpress.com/topic/centre-the-whole-page?replies=3#post-1161799).

    Hum is much more like my website and I think will look fab with a few adjustments. Please could you advise me on what needs to be changed below:

    1. Search -I do not need a search, but cannot find it in the widgets
    2. padding -I want to be able to adjust the positioning of both side bar and posts.
    3. post "shadow background" I'd like it to be totally minimalist. so, can I get rid of the "shadowy post background"? -to be more like balkan (the theme I had before).
    4. roll-over GIF for the header image (which I edited the JS for my website http://www.beccarose.co.uk), is it possible to animate the rollover with a gif thought css?
    5. rollover images in menu for "website" and "about" (like in http://www.beccarose.co.uk). I will try and do this with image widgets and html, unless you think it'd be better to edit css?

    Thanks very much!

    becca

    The blog I need help with is blog.beccarose.co.uk.

  2. awaywiththespoons
    Member

    one more thing which I forgot: is there a way to get rid of the frames on the images? I tried to find where the options may be in media settings, but no luck.

    The frames are not on all images -I can't tell if it is random, or if there is an option "to frame or not to frame". In any case, I'd just like to know how to make images without frame please.

    Thanks

  3. thesacredpath
    Staff

    First off, http://www.beccarose.co.uk/ is self-hosted so you need to inquire over at http://wordpress.org/support/ as that is where the self-hosted version of WordPress is supported. These forums are for those that are hosted here at WordPress.com. Second choice would be ask the designer of your theme for help, although they may want to charge you for that, or perhaps refuse to do it at all. It just depends on the designer.

  4. awaywiththespoons
    Member

    Hello!

    Thanks for the feedback, but I think there is a confusion!

    the blog I am editing is http://blog.beccarose.co.uk it is hosted on wordpress.com. I made the other site on wordpress.org, but do not need to make any changes to it, I included the link for reference only!

    I am very happy to add the CSS myself (rather than paying someone to make the changes), but need help with the code (just like most people posting on this forum!).

    The most important things (to start with) are 1. getting rid of the sporadic image frames and 2. getting rid of the shadow layer of the scrolling posts.

    any help on this would be very much appreciated!

    thanks,

    becca

  5. thesacredpath
    Staff

    1 answered in the other thread.

    2. This will get rid of the box shadow.

    #content .hentry {
    box-shadow: none;
    }
  6. 1. Search -I do not need a search, but cannot find it in the widgets

    Link for reference: http://en.forums.wordpress.com/topic/get-rid-of-search-widget-in-hum?replies=4#post-1220889

  7. 2. padding -I want to be able to adjust the positioning of both side bar and posts.

    To help me visualize how much space elements take up, I will sometimes add colored borders in a preview so I can see where all the pieces fall. Try just previewing with the following CSS to see what I mean:

    #page {
        border: 1px solid red;
    }
    #main {
    	border: 1px solid green;
        overflow: hidden;
    }
    #branding {
    	border: 1px solid blue;
    }

    To find which selectors to use to adjust the sidebar and posts, I right-clicked on each of those things, selected the "Inspect Element" option, and looked at the HTML that were displayed until I found where any widths or margins were set. Then I experimented with different numbers. (The colored borders from above really help with this part.) Then I came up with this which increases the main container (#page) and the main content area and footer, as well as the left sidebar (#branding) by 100 pixels each:

    #page {
    	max-width: 1060px;
    }
    
    #main, #colophon {
    	margin-left: 320px;
    }
    #branding {
    	margin-right: 40px;
    	width: 280px;
    }

    You can adjust those numbers and experiment until you find the widths that you're looking for.

  8. 4. roll-over GIF for the header image (which I edited the JS for my website http://www.beccarose.co.uk), is it possible to animate the rollover with a gif thought css?

    WordPress.com doesn't offer the option to add JavaScript, but you can swap out a background image on hover using CSS only. Here's an example you can start with. It uses the WordPress logo for the hover image and you can change the hover url() value and any of the other values as needed:

    #page #branding > a img {
    	display: none;
    }
    #page #branding > a {
    	display: block;
    	width: 180px;
    	height: 192px;
    	background: url("http://beckaroona.files.wordpress.com/2013/04/cropped-becca0.jpg") center no-repeat;
    }
    #page #branding > a:hover {
    	background: url("http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png") center no-repeat;
    }

    Note that the width can match whatever width you decide to use for the #branding width in the previous example, and you can change the "center" value to something else if needed.

  9. 5. rollover images in menu for "website" and "about" (like in http://www.beccarose.co.uk). I will try and do this with image widgets and html, unless you think it'd be better to edit css?

    The same principles apply as for #4, except you have to find the exact ID value to target the right menu item (each menu item gets a unique ID), and you'll want to push the text off-screen after you add a background image. Here is an example to get you started:

    #access #menu-item-1643 a {
    	width: 32px;
    	height: 32px;
    	background: url("http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png") no-repeat;
    	text-align: right;
    	text-indent: 9999px;
    }
    #access #menu-item-1643 a:hover {
    	background: url("http://s.wordpress.org/about/images/logos/wordpress-logo-32.png") no-repeat;
    }
    #access #menu-item-1209 a {
    	width: 32px;
    	height: 32px;
    	background: url("http://s.wordpress.org/about/images/logos/wordpress-logo-32.png") no-repeat;
    	text-align: right;
    	text-indent: 9999px;
    }
    #access #menu-item-1209 a:hover {
    	background: url("http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png") no-repeat;
    }

    Change out the widths, heights, and url() values based on your own images.

  10. awaywiththespoons
    Member

    wow. just seen your replies! thanks! will get on to adding this and let you know how it goes!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags