If you have troubles since the update to WordPress 4.5 please read this post before opening a new thread.

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 http://southerncaliforniacycling.com

    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 http://www.cyclingnews.com/

    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=”http://www.flickr.com/badge_code_v2.gne?count=10&display=random&size=s&layout=h&context=in%2Fpool-socalcycling%2F&source=group&group=808455%40N23″ 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: http://wordpress.org/extend/plugins/yd-recent-posts-widget/ 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: http://www.kriesi.at/themes/habitat/a-little-about-you/basic-shortcodes/ 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 http://southerncaliforniacycling.com/message-board (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=’http://teamredlands.camp7.org/widget/default.aspx?pageId=919692′></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 – http://southerncaliforniacycling.com/about/

    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 http://southerncaliforniacycling.com/

    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.