Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #3145


    So far, I am happy with the Habitat theme. I just have a few questions to tweak the formatting and style.

    For reference the site is located at

    1. On links, how do I remove the underline that is under it.

    2. I am using drop cap short code on the main page, where it says “Team News” (first drop cap on the right) is there a way to make it so a few posts from the Blog feeds into this area? Not sure if this can be done with a widget, If so, how would this be done?

    3. I would like to add a thin line or graphic that goes across the width of the page at the top of the footer similar to the purple line above the footer on

    4. On my flickr badge that is on the bottom of the main page, for some reason some black is coming through. I am not sure if it is the background color of the page. Is there a way to tweak the code so it is transparent and is the background color(#202020) of the main page container or make the table tighter so the black does not come thru. I have tried changing this without luck. Below is the code if you have suggestions.

    <!– #flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;} #flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;} #flickr_icon_td {padding:0 5px 0 0 !important;} .flickr_badge_image {text-align:center !important;} .flickr_badge_image img {border: 0px transparent !important;} #flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;} #flickr_badge_uber_wrapper a:hover, #flickr_badge_uber_wrapper a:link, #flickr_badge_uber_wrapper a:active, #flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#cc3333;} #flickr_badge_wrapper {background-color: transparent;} #flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;} –>

    <table id=”flickr_badge_uber_wrapper” border=”0″ cellspacing=”3″ cellpadding=”0″>



    <td><script src=”″ type=”text/javascript”></script>

    <table id=”flickr_badge_wrapper” border=”0″ cellspacing=”3″ cellpadding=”0″>







    <!– End of Flickr Badge –>

    thank you for your help.



    1) Open up style3.css and replace:

    text-decoration: underline;


    text-decoration: none;

    2) Habitat doesn’t support widgets in the page content area at the moment. You can use a recent post shortcode plugin like: though

    3) You can easily add a line by using the hr shortcode. At the end of your page content add:



    [hr top]

    A nice line like here: will seperate the main content from your footer afterwards.

    4) Try to add following to style.css:

    #flickr_badge_uber_wrapper td{
    background: none transparent !important;
    border:none !important;


    Thanks for the great support. I will check out the plug-in.

    I had a few other questions:

    1. How do I adjust the height of the footer? I would like the copyright info and social media icons just under the line that was added and there is a big space now.

    2. Also, I am implementing a forum and other widgets from Wild Apricot and am also getting the black underneath in the main container as seen here if you scroll (Not sure if there is a way to get rid of the scrollers, but would like to?)

    Here is the code used:

    <iframe width=’860px’ height=’400px’ frameborder=’no’ src=’′></iframe>
    <font style=’color:#ccc;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;’>Powered by Wild Apricot Membership Website Software

    3. I also notice this black in the main container (bottom half of page) for pages I have not added content too. Is there a way to change it to #202020 with out changing the black in the big background with background image? Example –

    Thanks again! : )



    1) In style.css delete following code or adjust the height value as you like:


    2 + 3) You can set a min-height attribute for the main content but I would suggest to adjust the bg image instead. However if you would like to add the min-height open up style.css and search for:

    position: relative;
    z-index: 3;

    replace it with:

    position: relative;
    z-index: 3;
    min-height: 500px;

    Adjust the min height value as you like :)


    Thank you. I tried both deleting and adjusting the footer code as described in #1. But it did not work – You can see that there is still a very large footer at the home page of

    I would like to have the area under the line only be about 100 pixel, but it doesn’t seem to get any smaller after I adjusted the css.

    thanks again.



    This footer spacing is also caused by the padding attached to various elements. Try adding this code to the end of style.css:

    #top .fullwidth .entry { padding: 40px 40px 0; }
    #wrapper_main { padding-bottom: 0; }

    You can also edit the Flickr code you added, find and remove this code:

    <p><!-- End of Flickr Badge --><br>
    <span class="hr "></span></p>

    The hr code adds top and bottom padding of 38px.


Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘A few Habitat style questions’ is closed to new replies.