WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Twenty Eleven] Two-Column Theme Increase Width Content + Remove UP Border Navi (35 posts)

  1. pucklitaay
    Member
    Posted 1 year ago #

    Hi guys,

    I'm using TwentyEleven as a two-column theme and I'm working with a child theme.
    I want to know what to add to the style.css of my child theme to increase the width of the content.

    Next to that I'm also wondering how to remove the upper grey border in my navigation. I've seemed to remove the rest of the borders but the only one that stays on the page is the upper one and i can't seem to get rid of it!

    My site is closed, but here's a screenshot of what it looks like with the upper border: http://i50.tinypic.com/zsmhdu.png.

    Thanks in advance.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you pastebin.com your HTML and CSS for one page relevant?

  3. pucklitaay
    Member
    Posted 1 year ago #

    /*
    Theme Name:            Twenty Eleven Child
    Theme URI:                http://oneofpoints.com
    Description:                Child theme for the Twenty Eleven Theme
    Author:                         Puck Litaay
    Author URI:                 http://oneofpoints.com/about/
    Template:                    twentyeleven
    Version:                       0.1.
    */ 
    
    @import url(http://fonts.googleapis.com/css?family=Questrial|Montserrat);
    @import url(http://fonts.googleapis.com/css?family=Alegreya+SC);
    @import url("../twentyeleven/style.css"); 
    
    #site-title a {
        color:  #000;
    } 
    
    #branding #searchform {
    display:none;
    }
    
    #access a {
     font-family: 'Questrial', serif; !important;
     font-size: 20px !important;
     text-transform:uppercase;
     color: #000 !important;
     display:block;
     line-height:3.333em;
     text-decoration:none;
     padding:0 1.2125em;
    }
    
    #access a:focus {
    background:white;
    }
    
    #access li:hover > a,#access ul ul :hover > a,#access a:focus {
    background:#1983d1; /* changes bg color of drop-down menus that have the mouse over them */
    color:white !important; /* changes text color when moused over */
    }
    
    #access {
    background:white;
    -webkit-box-shadow:rgba(0,0,0,0) 0 0 0;
    -moz-box-shadow:rgba(0,0,0,0) 0 0 0;
    box-shadow:rgba(0,0,0,0) 0 0 0;
    }
    
    #access ul ul a {
    background:white;
    border-bottom:0;
    color:#515151;
    font-size:14px;
    font-weight:normal;
    height:auto;
    line-height:1.4em;
    width:168px;
    padding:5px 15px;
    }
    
    .entry-title {
    	clear: both;
    	color: #222; /*Change This to whatever color you want*/
    	font-size: 24px; /*Change This to size you want*/
            font-family: 'Alegreya SC', serif; !important;
            text-transform: uppercase;
    	font-weight: bold;
    	line-height: 1.5em;
    	padding-bottom: .3em;
    	padding-top: 15px;
    }
    
    img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img
    {border: none;}

    This is my CSS, the html can be found here pastebin.com

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    To increase the width of the content.

    Can you specify which element?

    Next to that I'm also wondering how to remove the upper grey border in my navigation.

    Apply;

    #branding {
     border-top: 0;
    }
  5. pucklitaay
    Member
    Posted 1 year ago #

    I think it's the entry or the entry-content in the style.css

    Thanks that code worked. :)

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Is this what you mean?

    #content {
     width: yourWidth;
    }

    http://www.w3schools.com/cssref/pr_dim_width.asp

  7. pucklitaay
    Member
    Posted 1 year ago #

    Yes, I think it is. I edited the width but it isn't working still.
    In the twenty eleven theme the page where the posts are displayed, the content area, is smaller then the header. I want to increase the width so it's bigger and it matches the header's 1000px

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you post what you have attempted, when changing the width?

  9. pucklitaay
    Member
    Posted 1 year ago #

    just this: #content {
    width: 800px;
    }

    With a random width

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    There may be some style overriding it that I can't replicate, so try adding !important on the end.
    E.g

    width: 800px !important;

    http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

  11. pucklitaay
    Member
    Posted 1 year ago #

    Thanks, that was indeed the case, but now I want to move that same area to the right. How do I do this then? :)

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    Do you want to swap the sidebar and content positions around?

  13. pucklitaay
    Member
    Posted 1 year ago #

    Yes. I like the way the way that the sidebar is positioned on the right and the content on the left. I just want to move the content position more to the left so it matches the start of the header. :)

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try;

    #secondary {
     float: left;
    }
    
    #primary {
     float: right;
    }
  15. pucklitaay
    Member
    Posted 1 year ago #

    I just place this in my style.css of the child theme?

  16. pucklitaay
    Member
    Posted 1 year ago #

    I added it, but it doesn't work - even when I add !important;

  17. Andrew
    Forum Moderator
    Posted 1 year ago #

    This is what it looks like
    http://awesomescreenshot.com/037e9t627
    Ignore the code on the left

  18. pucklitaay
    Member
    Posted 1 year ago #

    That's weird, the actual website shows the sidebar on the right side. This is what it looks like:

    http://awesomescreenshot.com/0ade9u9d2

    As you can see not entirely right, I just have to move the content to the left and the sidebar to the right. But how I do not know.

  19. Andrew
    Forum Moderator
    Posted 1 year ago #

    Sorry I meant "This is what the swapped sidebar and content positions look like".

  20. pucklitaay
    Member
    Posted 1 year ago #

    Oh okay! But I want to maintain the sidebar on the right - and how do I get the positions like that then? Because the previous code didn't work. :)

  21. Andrew
    Forum Moderator
    Posted 1 year ago #

    I couldn't tell you anything further than the float: left and float: right code I previous mentioned, as this is what I used to create the screenshot.
    It seems this problem lies with CSS specificity, as other styles, not visible in the CSS and HTML you posted, are overriding styles I suggest to you.
    If you can, will you post us the URL of the page relevant?

  22. pucklitaay
    Member
    Posted 1 year ago #

    I can provide you with a guest login so you can see the page.

  23. pucklitaay
    Member
    Posted 1 year ago #

    Would that be okay?

  24. Andrew
    Forum Moderator
    Posted 1 year ago #

    Posting the login on forums will let anyone see it.

  25. pucklitaay
    Member
    Posted 1 year ago #

    Can I sent it via e-mail? Via the contact form of your website perhaps?

  26. Andrew
    Forum Moderator
    Posted 1 year ago #

    Perhaps.

  27. pucklitaay
    Member
    Posted 1 year ago #

    I sent it to via e-mail. As you can see in the regular Twenty Eleven theme: http://wordpress.org/extend/themes/twentyeleven there's a white space left from the content. Don't know if this has to do with the positioning or if there's a way to remove this white space?

  28. Andrew
    Forum Moderator
    Posted 1 year ago #

    Where were you adding this CSS:

    #secondary {
     float: left;
    }
    
    #primary {
     float: right;
    }
  29. pucklitaay
    Member
    Posted 1 year ago #

    In the stylesheet of my child theme

  30. Andrew
    Forum Moderator
    Posted 1 year ago #

Topic Closed

This topic has been closed to new replies.

About this Topic