WordPress.org

Ready to get started?Download WordPress

Forums

Footer problem (7 posts)

  1. garlione
    Member
    Posted 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year 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

Topic Closed

This topic has been closed to new replies.

About this Topic