Home Bottom

Support Area Forums Foundation Home Bottom

Viewing 8 posts - 1 through 8 (of 8 total)
URL to the page in question: http://
  • Author
    Posts
  • #32155
    Erick Rolfson
    Participant

    Dear Sir,

    I want to add the donation widget on the right hand side and my posting on the left side.

    Could you please tell me how to adjust in Home Button. How can I add two different widget Horizontally

    thanks

    Attachments:
    #32157
    Bill Robbins
    Moderator

    Hello Erick,

    Quick question for you. Are you wanting to use the home page layout, or a more traditional layout with the content on the left and a sidebar on the right? Let me know and we’ll go from there.

    Thanks,
    Bill

    #32181
    Erick Rolfson
    Participant

    I want to use the home page layout. There is two option the home top and the home bottom.

    I want to split the home bottom to part. the left side I want to put my posts, and the right side I want to put my widgets. I looked at the demo website it could be split, but when I tried I got the widgets under the posts.

    Thanks for your help

    #32182
    Bill Robbins
    Moderator

    Thanks for letting me know Erick. You can do that. It’s all about the order the widgets are placed in. You’ll want to place the featured post widget first in the list and the other widgets below that. That will cause your posts to be on the left with the rest of the widgets lined up on the right.

    If you decide to swap sides with widgets on the left and posts on the right (like the demo), place one “normal” sized widget first and then the featured post widget second. Then add any additional widgets after it. That will cause the home bottom area to have the layout like the demo does.

    Let me know if you run into any trouble.

    Have a great week,
    Bill

    #32190
    Erick Rolfson
    Participant

    Thank you so much for your quick response, I were be able to fit the recent comments and Facebook widget, but when I were not able to adjust the donation widget on the side. In addition, I try to show up the Facebook and twitter logo on the NavBar but I couldn’t do you have any tutorial that shows it.

    Second question is ,If i want to change the font type for the whole website, which file should I look it.
    Thank you very much for your help.

    #32192
    Bill Robbins
    Moderator

    Glad that helped out. On the home page, the donation widget takes on a full width “bar” form instead of typical widget. If you need to change that you’ll want to do a bit of editing.

    1. Go to the Appearance section in your WordPress dashboard and choose Edit.
    2. From the list of files on your right, choose style.css
    3. Scroll near the bottom until you see this section and delete it:
      
      	/* Donate Widget
      	----------------------------------------------- */
      	
      	#home-widgets .donate {
      		position: relative;
      		width: 100%;
      		height: 66px;
      		padding: 0;
      		overflow: hidden;
      		color: #fff;
      		background-color: #4A4A4A;
      		background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.24)), to(rgba(0, 0, 0, 0)));
      		background-image: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 100%);
      	}
      	
      	#home-widgets .donate h4.widget-title {
      		position: relative;
      		float: left;
      		font-size: 24px;
      		padding-top: 23px;
      		padding-bottom: 23px;
      		background-image: none;
      		margin: 0;
      		background-color: #71B7E8;
      		background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.24)), to(rgba(0, 0, 0, 0)));
      		background-image: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 100%);
      	}
      	
      	#home-widgets .donate-graph-holder {
      		width: 440px;
      		float: left;
      		position: relative;
      		margin-left: 28px;
      		margin-top: 11px;
      		margin-right: 15px;
      	}
      	
      	#home-widgets .donate-graph-cover {
      		border-radius: 35px;
      		width: 100%;
      		height: 44px;
      		position: relative;
      		overflow: hidden;
      		-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.52);
      		-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.52);
      		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.52);
      		background-color: rgba(0, 0, 0, 0.25);
      	}
      	
      	.ie7 #home-widgets .donate-graph-cover, 
      	.ie8 #home-widgets .donate-graph-cover { /* Sets Color In IE 8 */
      		background-color: #000;
      	}
      	
      	#home-widgets .donate-graph-highlight {
      		height: 44px;
      		position: absolute;
      		top: 0;
      	}
      	
      	#home-widgets .donate-description {
      		position: absolute;
      		width: 100%;
      		text-align: center;
      		z-index: 5;
      		top: 13px;
      		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.62);
      	}
      	
      	#home-widgets .donate-end {
      		position: relative;
      		float: left;
      		margin: 19px 0 0 28px;
      	}
      	
      	#home-widgets .donate-end p {
      		padding: 0;
      		margin: 0;
      		font-size: 20px;
      	}
      	
      	#home-widgets .donate-form {
      		float: right;
      		margin: 12px 10px 0 0;
      	}
      	
      	#home-widgets .donate-form input.button {
      		padding-top: 13px;
      		padding-bottom: 13px;
      		margin: 0;
      		position: relative;
      		top: 0;
      		font-size: 16px;
      	}
      	
      	#home-widgets .donate-form p {
      		position: relative;
      		top: 11px;
      	}
      
    4. Save your changes.

    That will remove the bar form of that widget.


    The social icons in the navigation bar are added via a separate navigation menu. There are instructions on how to implement that in the theme instructions at https://support.organizedthemes.com/foundation/ in the navigation menus section.


    You can change the typography of the site by going to the Appearance section in your WordPress dashboard and clicking on theme options. The styling tab there has options for most of the type used on the site.

    Let me know if you run into trouble,
    Bill

    #32198
    Erick Rolfson
    Participant

    Thank you for quick response. two more question.

    1.Sir I want my own font which called “tempus-sans-itc” to the template. could you please guide me with that.

    2. I want to turn the action widget background to snow white. I tried to do that in the customization part, but it did not work. when I select the white it shows still little creamy.

    Thank you for your help.

    #32200
    Bill Robbins
    Moderator

    Erick,

    Unfortunately I do not know of simple way to add a font to a theme that way. There’s a quick tutorial at http://premium.wpmudev.org/blog/custom-fonts-css/?utm_expid=3606929-52.ZpfeUjXqSWOCaoohIqoFQQ.0&utm_referrer=https%3A%2F%2Fwww.google.com%2F that can give you the basics of how you would do go about adding the font to your server.

    Typically the easiest options are to stick with a service like Google Fonts (that’s part of the theme) or TypeKit (https://wordpress.org/plugins/typekit-fonts-for-wordpress/) which serves fonts from Adobe.


    The action widget uses a slight gradient in the background. You can remove it this way:

    1. Go to your theme options page and choose the Style tab.
    2. Scroll down to the Custom CSS box and add this:
      
      .widget.action {
      	background-image: none;
      }
      
    3. Update your settings.

    Hope that helps out,
    Bill

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Home Bottom’ is closed to new replies.