WordPress.org

Ready to get started?Download WordPress

Forums

Duena
Change width of entire theme? (9 posts)

  1. MatthewDavies88
    Member
    Posted 8 months ago #

    I am using the Duena theme and I am trying to change the maximum width it can be when the browser window is fully open, I donĀ“t want it to take up so much of the page..I want it to be around 75% (much like http://www.nciku.com)

    I have read the other posts on this problem but they are unfortunately unsolved.

    Do I have to change many different lines of script and files or is there one universal piece of code to change this?

  2. linux4me2
    Member
    Posted 8 months ago #

    You'd probably get more of a response to this if you post a link to your site. That way, more than just the people using the Duena theme can take a look at your site and suggest a fix.

  3. BuggyLemon
    Member
    Posted 7 months ago #

    Hi. I really need to know how to do this as well for rangolisweets.net

    If someone would be so kind as to share their knowledge on how to change this with me, I would be really grateful.

    Thank you.

  4. BuggyLemon Per the forum welcome please post your own topic.

    http://wordpress.org/support/theme/duena#postform

  5. SideKick Dan
    Member
    Posted 7 months ago #

    the issue you're going to have is that the width of the main page and all interior widget and page areas are set using media queries. You can change the main page width, but a span12 width at full screen width is still going to want to resolve to the same width. It will require a little customization. You can try to open the child templates bootstrap responsive css file and edit the .container class width from 1170px down to what you want that is bracketed within the @media (min-width:1200px) media query area. similar to below. Alternatively you can insert the following code to your custom css file and change the pixel width to suit your taste.

    @media (min-width: 1200px) {
    
    .container,
      .navbar-static-top .container,
      .navbar-fixed-top .container,
      .navbar-fixed-bottom .container {
        width: 1170px !important;
      }
    }

    The problem you might have is that at full screen width some elements/widget areas within the page might stay wide. To fix these you'll need to edit the .span# classes to fit within the new narrower container you set. Then you may have to edit the .span classes widths across the board until you fix it. These samples are if you just override the bootstrap respnsive css in your custom css and not change the core files. If you change the core files you can but there's no need for the !important statements.

    @media (min-width: 1200px) {
    
    .container,
      .navbar-static-top .container,
      .navbar-fixed-top .container,
      .navbar-fixed-bottom .container {
        width: 1170px !important;
      }
    
    .span12 {
        width: 1170px !important;
      }
      .span11 {
        width: 1070px !important;
      }
      .span10 {
        width: 970px !important;
      }
      .span9 {
        width: 870px !important;
      }
    
    ...so on and so forth.
    
    }

    You might also need to set the next media query down in size too from

    @media (min-width: 768px) and (max-width: 979px) {

    to

    @media (min-width: 768px) and (max-width: 800px) {

    in the core files.

    It's a bit more advanced, so the desire to have a different width has to be strong and for a good reason to bother. In all honesty it shouldn't matter much. Wider width gives you more room for white space which helps people actually see page elements easier and faster with greater conversion rates as in modern ux ui design.

    It could be that by adding the first piece of code at the top, you don't have any issues. Experimentation sometimes is required. I tried to find a file already customized on the internet to pop in but couldn't

    Best REgards,
    Danny :)

  6. BuggyLemon
    Member
    Posted 7 months ago #

    ...Wow...

    It worked...

    I don't know how to thank you Dan...

    Thank you for taking out so much time to help. God bless you.

  7. SideKick Dan
    Member
    Posted 7 months ago #

    Glad it worked! :) Let me know if it causes any weird display issues when you size the screen down and up. you can check your pages using this nice online tool i like to use for checking mobile responsiveness

    http://quirktools.com/screenfly/

    Best Regards,
    Danny :)

  8. MatthewDavies88? Has your problem been resolved? This topic has been taken over by other people.

    Note: I am not making my happy face right now. The reason people are asked to open their own topic is that it is amazingly inconsiderate to ignore the original poster and take over someone else's topic.

    http://codex.wordpress.org/Forum_Welcome#Where_To_Post

    You would not like being treated that way.

  9. SideKick Dan
    Member
    Posted 7 months ago #

    Hey Jan,

    sorry if i offended you, not my intent by any means. You guys do a lot of hard work for people here for not charge. which is highly valued! :)

    However, the answer i shared with the css applied to both buggy and matthew since they're both using the same duena template. ( i checked the header of buggy's site to double check he was using the same template as matthew) hence why i thought they'd both appreciate it. I can repaste the code in for Matthew, but if you can pop the post back that had the answer that would be helpful since i don't keep record of the exact code. I'll have to go back in and redo suggestion for the answer again.

    Best Regards,
    Danny :)

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.