Support » Theme: Purple Pastels » Fixed Width

  • Resolved karen@thewiles.net

    (@karenthewilesnet)


    I love your Purple Pastels theme. It is perfect for my site: http://fibromighty.com/

    I need the site to be fixed width so the header doesn’t keep moving. I don’t see where the adjustable width is set up in the editor section. Can you please let me know.
    thanks!
    k

Viewing 15 replies - 1 through 15 (of 19 total)
  • Theme Author esmi

    (@esmi)

    Forum Moderator

    I’m glad you like the theme. I think your new header is excellent and really makes the the theme look quite different. 🙂

    In order to fix the width of the outer-wrapper, you’ll need to start customising the CSS. Have you installed a custom CSS plugin? Or would you prefer to create a custom child theme? There is a basic child theme available at http://quirm.net/themes/purple-pastels/purple-pastels-child/

    You just need to be aware that, if you do use a child theme, you’ll have to set up your custom header image and title font again. How are you implementing that custom header font?

    I usually just edit the raw CSS in the editor under appearance. Would that work?
    All i did was change the header image under appearance also. I uploaded a 960 × 139 pixels image to fill that spot.

    Theme Author esmi

    (@esmi)

    Forum Moderator

    I usually just edit the raw CSS in the editor under appearance. Would that work?

    No – please do not do that! The next time you update the theme (and you are going to keep it updated, aren’t you?), all of your changes will be wiped out. You either need to use a custom CSS plugin or a child theme to protect your changes.

    Ok I created a child theme called Purple Pastel Child. Now just to make it fixed with.

    Theme Author esmi

    (@esmi)

    Forum Moderator

    Ok – try adding:

    #outer-wrapper {
    margin:0 auto;
    width:1000px;
    max-width:1000px;
    }

    to your child’s stylesheet and adjust those two width values to suit.

    That adjusts the entire page. not just the inner wrapper.
    http://fibromighty.com/

    Theme Author esmi

    (@esmi)

    Forum Moderator

    It’s the #outer-wrapper you will need to customise if you want a fixed width site.

    i’m sorry i mis-typed. I pasted in the outer-wrapper code that you provided into the child stylesheet. It adjusted the whole page instead of holding the inside fixed position. I tried adding position:fixed also. I can’t get it to stay fixed width and i just keep messing up your design. Ideas? See it at http://fibromighty.com/

    Theme Author esmi

    (@esmi)

    Forum Moderator

    I’m not seeing any difference…

    Theme Author esmi

    (@esmi)

    Forum Moderator

    Are you still having problems?

    Yes. I think part of it is my screen wasn’t updating so i switched to IE browser (that i hate). Now the background is covered by the middle content. ug. http://fibromighty.com/

    Theme Author esmi

    (@esmi)

    Forum Moderator

    I’m still not seeing any difference. However, you seem to have an error ion your child’s stylesheet:

    #outer-right {
    	background:url(..images/right.png) no-repeat right top fixed;
    
    #outer-wrapper {
    	background:url(../images/bottom.png) repeat-x bottom left fixed;
    	color:#404040;
    margin:0 auto;
    width:960px;
    position:fixed;
    }

    should just be:

    #outer-wrapper {
    margin:0 auto;
    width:960px;
    }

    I made that change. thanks. I had done that originally but again suspect that i wasn’t seeing updates. So it is fixed in IE but not in firefox. Firefox it is full screen with no background. My client really wants that butterfly background.

    Theme Author esmi

    (@esmi)

    Forum Moderator

    Um – something seems very wrong with the site now. What did you do?

    Welcome to my world. nothing since we talked last. Here is what my stylesheet looks like.

    /*
    Theme Name:     Purple Pastels Child
    Description:    fixed
    Author:         sbolton
    Template:       purple-pastels
    
    (optional values you can add: Theme URI, Author URI, Version)
    */
    
    @import url(".../purple-pastels/style.css");
    
    #outer-wrapper {
    margin:0 auto;
    width:960px;
    
    }
Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Fixed Width’ is closed to new replies.