Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Member
    Join Date
    Feb 2011
    Posts
    40
    Member #
    26969
    Liked
    1 times
    Hi,

    I cannot work out how to make the NEWS column on my home page the same width as the FESTIVAL column. See here: www.circus11.com/wordpress

    The news column is a widget for Wordpress called Twitter Widget Pro.

    Would anyone be able to help me make both columns equal?

    Thanks in advance. CSS code is below:

    /* =Content
    ----------------------------------------------- */

    .page-title {
    border-bottom: 1px solid #ccc;
    border-top: 3px solid #000;
    font-family: 'KorolevBold', Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.025em;
    margin: 0 0 24px 0;
    padding: 2px;
    text-transform: uppercase;
    }
    .hentry {
    margin: 0 0 2em;
    }
    .single .hentry {
    margin: 0 0 1.7em;
    }
    .sticky {
    background: #fff9c0;
    border-top: 3px solid #d9d4a3;
    border-bottom: 1px solid #D9D4A3;
    padding: 1.7em;
    }
    .sticky .entry-meta {
    display: none;
    }
    .entry-title {
    font-size: 19px;
    letter-spacing: 2px;
    line-height: 24px;
    padding-left: 35px;
    }
    .entry-title a {
    color: #000;
    }
    .entry-meta {
    color: #888;
    font: 12px "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
    }
    .entry-meta a {
    color: #888;
    }
    .entry-meta a:hover {
    color: #df0000;
    }
    .byline {
    display: block;
    position: absolute;
    left: -9000px;
    }
    .entry-content,
    .entry-summary {
    width: 90%;
    padding-top: 10px;
    padding-right: 120px;
    padding-left: 35px;
    font-size: 14px;
    line-height: 19px;
    font-family: 'MuliRegular', Arial, sans-serif;;
    }
    .entry-content h1,
    .entry-content h2,
    .entry-content h3,
    .entry-content h4 {
    margin-bottom: 0.425em;
    }
    .entry-content h1,
    .entry-content h2 {
    font-size: 28px;
    line-height: 34px;
    }
    .entry-content h1 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.425em;
    }
    .entry-content h3 {
    letter-spacing: 0.025em;
    text-transform: uppercase;
    }
    .entry-content h4 {
    color: #888;
    font-size: 17px;
    font-style: italic;
    }
    .entry-content h5,
    .entry-content h6 {
    font-weight: bold;
    }
    .entry-content h5 {
    font-size: 12px;
    }
    .entry-content h6 {
    font-size: 10px;
    }
    .entry-content table {
    border: 1px solid #ccc;
    margin: 0 -1px 24px 0;
    text-align: left;
    }
    .entry-content tr th,
    .entry-content thead th {
    font: 12px "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
    font-weight: bold;
    line-height: 18px;
    padding: 9px 12px;
    }
    .entry-content tr td {
    border-top: 1px solid #ccc;
    padding: 6px 12px;
    }
    .entry-content tr.odd td {
    background: #f2f7fc;
    }
    .entry-content table dl {
    margin: 0;
    }
    .entry-content .gallery {
    margin: 0 auto 1.7em;
    }
    #content .gallery .gallery-item {
    float: left;
    margin-top: 0;
    text-align: center;
    width: 33.333%;
    }
    #content .gallery .gallery-caption {
    color: #888;
    font-size: 12px;
    margin: 0 0 0.7em 0;
    }
    #content .gallery dl {
    margin: 0;
    }
    #content .gallery img {
    padding: 4px;
    }
    #content .gallery br+br {
    display: none;
    }
    #content .attachment img { /* single attachment images should be centered */
    display: block;
    margin: 0 auto;
    }
    .page-link {
    font-weight: bold;
    margin: 0 0 1.7em;
    word-spacing: 0.25em;
    }
    .page-link a {
    font-weight: normal;
    }
    .entry-info {
    clear: both;
    color: #888;
    font-size: 13px;
    position: relative;
    }
    .entry-info a {
    color: #888;
    }
    .entry-info a:hover {
    color: #df0000;
    }
    .entry-info p {
    margin: 0;
    }
    .entry-info .comments-link a {
    color: #333;
    display: block;
    float: right;
    font-weight: bold;
    margin: -2px 1px 0 5px;
    padding: 2px 10px;
    text-decoration: none;
    }
    .entry-info .comments-link a:hover {
    background: #222;
    background-image: -moz-linear-gradient(100% 100% 90deg, #111, #333);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#111));
    -moz-border-radius: 14px;
    border-radius: 14px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    }
    .entry-info .edit-link {
    clear: both;
    }
    .button {
    color: #fff;
    border: 1px solid #000;
    background: #fff;
    font-family: 'KorolevBold', Arial, sans-serif;
    font-size: 15px;
    font-weight: normal;
    text-align: center;
    letter-spacing: 1px;
    margin: 0 286px 30px;
    cursor: pointer;
    }
    .button:hover {
    color: #000;
    border: 1px dashed #000;
    }
    .button:active {
    color: #000;
    border: 1px dashed #000;

    }

  2.  

  3. #2
    Member
    Join Date
    Feb 2011
    Posts
    40
    Member #
    26969
    Liked
    1 times
    Update: I can reduce the width of the FESTIVAL text area but this then reduces the width of the text are on each page of the site. Do I need to create a new container div just for the home page in order to achieve what I want to do?

    Here is where the widget is controlled:

    Code:
    /* =Widgets
    ----------------------------------------------- */
    
    .widget-area {
        overflow: hidden;
    }
    .widget-area,
    .widget-area input {
        font-size: 12px;
        line-height: 18px;
    }
    .widget-area ul ul a {
        text-decoration: none;
    }
    .widget-area ul ul a:hover {
        text-decoration: underline;
    }
    .widget-area ul {
        list-style: none;
        margin: 0;
    }
    .widget-area ul ul {
        list-style: square;
        margin: 0 0 1.5em 1.5em;
    }
    .widget-area ul ul ul {
        margin-bottom: 0;
    }
    .widget-area ul ul li {
        padding: 4px 0;
    }
    .widget-title {
        font-family: 'KorolevBold', Arial, sans-serif;
        font-size: 19px;
        letter-spacing: 2px;
        margin: 0 0 10px 0;
        padding-left: 0px;
        text-transform: uppercase;
    }
    .widget-container {
        width: 200px;
    }

  4. #3
    Member
    Join Date
    Feb 2011
    Posts
    40
    Member #
    26969
    Liked
    1 times
    Is there anyone who could shed any light on this matter? Thanks :-)

  5. #4
    Member
    Join Date
    Feb 2011
    Posts
    40
    Member #
    26969
    Liked
    1 times
    OK so I tried to give it a go myself.

    I made a new wordpress page template and copied and pasted the code from the default page template I was using.

    I then added two new divs: <div class="festival-content"> and <div class="news-content">

    I then added the following into my CSS:

    Code:
    .festival-content {
        width: 50%;
        padding-top: 10px;
        padding-right: 0px;
        padding-left: 35px;
        font-size: 14px;
        line-height: 19px;
        font-family: 'MuliRegular', Arial, sans-serif;
    
        }
    
    .news-content {
        width: 50%;
        padding-top: 10px;
        padding-right: 0px;
        padding-left: 35px;
    Can anyone tell me why?

    As far as I can't see why the widget isn't displaying as I copied the exact code from the page template I was using before in which is was working...?

  6. #5
    Member
    Join Date
    Feb 2011
    Posts
    40
    Member #
    26969
    Liked
    1 times
    :banghead:

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    WOW - your divs are getting pretty messed up. I'm not sure how to help, but fix your divs and then we'll see what I can suggest.

    <div id="content-box">
    <div id="container" class="full-width">
    <div id="content" role="main">
    <div id="post-48" class="post-48 page type-page status-publish hentry">
    <h1 class="entry-title">FESTIVAL</h1>
    <div class="festival-content">where does this div close?
    <div class="news-content">where does this div close?
    <p>For five days ...</p>this is festival content and should not be inside the news div
    </div><!-- .entry-content -->
    </div><!-- #post-## -->
    </div><!-- #content -->
    </div><!-- #content-container -->
    </div><!-- #content-box -->

    Also, for some of your divs you're using pixels, others percentages - as a rule it's not a good idea to mix the two.

    NOTE - your threads all seem to be WordPress questions, which is natural, since your site is a WP site.
    But you stand a better chance of getting good answers if you post in the WordPress forum, since some of the stuff has to do with the PHP as well as the HTML and CSS, and is specific to WP.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  8. #7
    Member
    Join Date
    Feb 2011
    Posts
    40
    Member #
    26969
    Liked
    1 times
    Hi AlphaMare,

    I know my divs etc seem to be getting pretty messed up. This is my second attempt at a editing a wordpress theme. I have also asked my question in the wordpress for as you suggested.

    I have now closed my div tags as per your suggestion.

    Here is my new home page template code:

    PHP Code:
    <?php
    /**
    * Template Name: Home Page
    * @package WordPress
    * @subpackage Coraline
    * @since Coraline 1.0
    */

    get_header(); ?>

            <div id="container" class="full-width">
                <div id="content" role="main">

                <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

                    <div id="post-<?php the_ID(); ?><?php post_class(); ?>>
                        <h1 class="entry-title"><?php the_title(); ?></h1>
                        <div class="festival-content">
                        <div class="news-content">
                            <?php the_content(); ?>
                            <?php wp_link_pages( array( 'before' => '<div class="page-link">' __'Pages:''coraline' ), 'after' => '</div>' ) ); ?>
                            <?php edit_post_link__'Edit''coraline' ), '<span class="edit-link">''</span>' ); ?>
                        </div><!-- .entry-content -->
                    </div><!-- #post-## -->

                    <?php if ( comments_open() ) comments_template''true ); ?>

                <?php endwhile; ?>

                        </div><!-- #festival-content -->
                    </div><!-- #news-content -->
                </div><!-- #content -->
            </div><!-- #content-container -->

    <?php get_footer(); ?>

  9. #8
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by Oliver, post: 223307
    Hi AlphaMare,

    I know my divs etc seem to be getting pretty messed up. This is my second attempt at a editing a wordpress theme. I have also asked my question in the wordpress for as you suggested.
    Hi - That's the problem with editing a premade theme - you can so easily break things.

    If you like WP and are going to be using it often, look into frameworks and child themes - the framework carries the core code and the child theme you create does the styling, so you have much more flexibility.

    Check out this video - it's a good intro to theming for WP.
    Oliver likes this.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  10. #9
    Member
    Join Date
    Feb 2011
    Posts
    40
    Member #
    26969
    Liked
    1 times
    Thank you for the link. I am going to attempt to rebuild my website next week from scratch using a child theme.

    Once again thanks for all your help.
    AlphaMare likes this.

  11. #10
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by Oliver, post: 223342
    Thank you for the link. I am going to attempt to rebuild my website next week from scratch using a child theme.

    Once again thanks for all your help.
    YAY! I hope you will find child themes as much fun as I do!
    Keep me posted on your progress - PM me if you want to.
    Or go check out my site (digitalisite.ca) where I have a bunch of WP examples in my portfolio, and send me an e-mail from the contact form on the site.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:24 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com