WordPress.org

1. garlione
   Member
   Posted 6 months ago #
   

   Hi
   I have problem with the design for my footer on site http://www.r4a.se/effecta

   I have 3 widgets in the footer and I want each one of them to use 1/3 of the width of the site. Now they are all ligned up close together to the left. This is the code:

   /* =Footer  : Footer Widgets
   -------------------------------------------------------------- */
   
   #footer-widgets {
   	width: 100%;
   
   	background-color: #F9F9F9;
   	border-top: 1px solid #EEEEEE;
   	margin-top: 30px;
   	padding: 20px 0;
   }
   
   #footer-widgets-wrapper {
   	margin-bottom: -30px;
   }
   
   #footer-widgets .widget {
   	-webkit-box-sizing: border-box;
   	-moz-box-sizing: border-box;
   	box-sizing: border-box;
   	color: #777;
   	float: left;
   	margin-bottom: 30px;
   	padding: 0 15px;
   	word-wrap: break-word;
   }
   
   #footer-widgets .widget img {
   	height: auto;
   
   	max-width: 100%;
   }
   
   #footer-widgets h2.widgettitle {
   	color: #333;
   	font-family: "Terminal Dosis";
   	font-size: 1.2em;
   	font-weight: 400;
   	margin-bottom: 20px;
   }
   
   #footer-widgets a {
   	color: #505050;
   	text-decoration: none;
   }
   
   #footer-widgets li {
   	line-height: 1.6em;
   }
   
   #footer {
   	border: transparent;
   	border-width: 0 1px;
   	color: #888;
   	color: #999999;
   	font-size: 0.85em;
   	margin-bottom: 35px;
   	padding: 0px 5px;
   	text-align: center;
   }
   
   #footer .copyright {
   	margin-bottom: 0.75em;
   }
   
   #footer .designed {
   }
   
   #footer a {
   	color: #777;
   	text-decoration: none;
   }

   [please apply the forum guidelines when posting code - http://codex.wordpress.org/Forum_Welcome#Posting_Code - posting css code is actually not needed if you post a link to your site]
   What do I change?

2. alchymyth
   The Sweeper & Moderator
   Posted 6 months ago #
   

   for general formatting problems, try working with a browser inspection tool such as Firebug to find out which styles are responsible for formatting the widgets.

   you should for instance find:

   #footer-widgets .widget { ... }

   where you could add:

   margin-left: 2.3%; min-width: 31%;

3. garlione
   Member
   Posted 6 months ago #
   

   Thank you so much alchmyth!

   One more thing. My contact form takes up a whole page. I cannot add stuff on the side of the contact form. How do I do?

   http://www.r4a.se/effecta/?page_id=96

4. alchymyth
   The Sweeper & Moderator
   Posted 6 months ago #
   

   might be complicated as the theme is tagged 'one-column'

   a few ideas:
   - either try to use a 'column' plugin to split the page content into columns and add some different stuff to the second column;
   http://wordpress.org/extend/plugins/search.php?q=page+columns

   - or much more advanced:

   consider to create a page template; http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates

   which includes the call for a sidebar; http://codex.wordpress.org/Function_Reference/get_sidebar

   for which you will need to create a widget area; http://codex.wordpress.org/Widgetizing_Themes

   and which you will need to format with some added css.

5. garlione
   Member
   Posted 6 months ago #
   

   My theme supports columns, but when i Choose for example 2 columns, nothing seems to change. I don´t know how to put text or images into the different columns.

6. alchymyth
   The Sweeper & Moderator
   Posted 5 months ago #
   

   My theme supports columns

   interesting - I checked 'origami' and could not detect any build-in column support.

   possibly contact the developer of your theme directly.

7. garlione
   Member
   Posted 5 months ago #
   

   Okey, maybe it does not, but I have the option to the right on each page, how many columns i want. Don´t know how they function though.

   I have installed Easy Columns now.

   I have tried to implement this and I put it at the top of the page in the page editor (not in the html editor).

   [wpcol_2third id="" class="" style=""]Two Thirds Column[/wpcol_2third] [wpcol_1third_end id="" class="" style=""]Third Column[/wpcol_1third_end]

   But how do I use this? What comes up is text at the top of the page saying:
   Two thirds column Third Column

Reply

You must log in to post.