A few Habitat style questions « Support Forum | Kriesi.at

Support Forum » Habitat

A few Habitat style questions

6 posts from 3 voices

Started 2 years ago by lanikita
Latest reply from James Morrison
This topic is not resolved

Tags:

lanikita
Member

Hi-

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.


<table id="flickr_badge_uber_wrapper" border="0" cellspacing="3" cellpadding="0">
<tbody>
<tr>
<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">
<tbody></tbody>
</table>
</td>
</tr>
</tbody>
</table>


thank you for your help.

Posted 2 years ago #
Dude
Dude
Hey,
1) Open up style3.css and replace:
```
a{
text-decoration: underline;
}
```
with:
```
a{
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]
```
or
```
[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;
}
```
Posted 2 years ago #
lanikita
Member

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! : )

Posted 2 years ago #
Dude
Dude
Hey,
1) In style.css delete following code or adjust the height value as you like:
```
#wrapper_footer_bottom{
height:160px;
}
```
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:
```
.content{
position: relative;
float:left;
width:580px;
z-index: 3;
}
```
replace it with:
```
.content{
position: relative;
float:left;
width:580px;
z-index: 3;
min-height: 500px;
}
```
Adjust the min height value as you like :)
Posted 2 years ago #
lanikita
Member

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.

Posted 2 years ago #
James Morrison
Former Team Member
Hey,

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><br>
<span class="hr "></span></p>
```
The hr code adds top and bottom padding of 38px.

James
Posted 2 years ago #