SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wordpress, Zenon lite

    I just started building a website and since I'm new to all this, I'm using wordpress. As a theme I chose Zenon lite, a theme with a slider and underneath it are 4 boxes. I would really like my homepage to be 'scrollfree', the problem now is that there's still about 1 cm left to scroll down. Since the text I'm using in the blocks is really short, I would like to make the blocks smaller. Is there any way to make the blocks about 1-2 cm shorter? And where should I be looking to change it? Sorry if its all a bit abstract, but like I mentioned, I'm new to all of this.

    Thanks!

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    151 Post(s)
    Tagged
    3 Thread(s)
    Hi and welcome to SitePoint.

    Are you using the default implementation as shown here: http://zenonlite.towfiqi.com/ ?

    If so you can alter the height of the box by editing the file style.css.
    On line 90 there is the declaration:

    .midrow_blocks
    Code:
    .midrow_blocks{ width:970px; height:190px; padding: 0 15px; background:#fff; border:1px solid #ececec; float:left; margin-top:50px;  position:relative;}
    You can change the height to whatever you need here.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for the quick reply! Have been looking for some time now, just couldn't find it myself.

  4. #4
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    151 Post(s)
    Tagged
    3 Thread(s)
    No problem, if you use Chrome then it has some built in developer tools that you can use.
    If you right click on the element you want to look at and go to 'Inspect Element' it gives you a load of useful information that you can play about with.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  5. #5
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to bother you again, but I'm having another problem. I finally were able, thanks to your help, to change the size of the blocks, but now I don't know how to make the 'extra' room disappear. At the place where formerly the boxes were, is now some open space. This meaning there is stil room to scroll on the homepage. Perhaps you could help me again?

    Thanks!

  6. #6
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    151 Post(s)
    Tagged
    3 Thread(s)
    Have a look around the midrow_ definitions and see which ones alter the height.
    Some of them have heightxxpx defined which sets it to a specific height, others are reliant on the content to give them height.

    Tweak some of them and see what happens.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    If that doesn't help, feel free to post a link to your site so we can take a look.

  8. #8
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've tried nearly al the values, couldn't find it unfortunately. You can find the link here, if you could help that would be great!.

    Thanks!

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Around line 97 in your style sheet, you have this:

    Code:
    .mid_block_content {
    border-right: 1px solid rgb(236, 236, 236);
    height: 185px;
    margin-top: -35px;
    padding: 25px 10px 0;
    }
    Just remove or edit that height.

    However, beware of setting heights on content at all, especially elements that contain text. It can easily makes your pages break, such as when people increase text sizes.

    I would suggest you remove all these heights:

    Code:
    .midrow_blocks {
    width: 970px;
    height: 100px;
    padding: 0 15px;
    background: white;
    border: 1px solid rgb(236, 236, 236);
    float: left;
    margin-top: 50px;
    position: relative;
    }
    Code:
    .midrow_block {
    float: left;
    width: 220px;
    height: 175px;
    padding-top: 15px;
    overflow: hidden;
    }
    Code:
    .mid_block_content {
    border-right: 1px solid rgb(236, 236, 236);
    height: 185px;
    margin-top: -35px;
    padding: 25px 10px 0;
    }
    Then I'd remove the right border from each midrow_block_content and instead put it on midrow_block:

    Code:
    .midrow_block {
    width: 220px;
    padding-top: 15px;
    overflow: hidden;
    display: table-cell;
    border-right: 1px solid rgb(236, 236, 236);
    }
    I'd also remove float left from the above and instead use display: table-cell (in blue).

    Then, add display: table to midrow_blocks_wrap:

    Code:
    .midrow_blocks_wrap {
    width: 970px;
    display: table;
    }
    and remove the float: left from there.

    That will make the layout work a lot better.

  10. #10
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That looks way better indeed, thanks you. Only problem now is that the colors has changed?

  11. #11
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind, found the problem. Thanks so much for all the help!

  12. #12
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just one last question, a forum told me to add this the stylesheet to make the letters bigger: body #topmenu ul li a{font-size:18px!important;}
    Problem now is that some of the letters are smaller than others, is that just the style or is a wrong edit?

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Make sure to place display: table on .midrow_blocks_wrap rather than display: table-cell.

    What colors have changed? It looks the same to me. You haven't added in the right borders to .midrow_block. Is that what you mean?

  14. #14
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No the colors were different but found out what I did wrong, so changed it back.
    Just 2 last questions, a forum told me to add this the stylesheet to make the letters bigger: body #topmenu ul li a{font-size:18px!important;}
    Problem now is that some of the letters are smaller than others, is that just the style or is a wrong edit?

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by basbvr View Post
    Problem now is that some of the letters are smaller than others, is that just the style or is a wrong edit?
    They all look the same to me. Could you post a screen shot of what you are seeing?

    Quote Originally Posted by ralph.m View Post
    Make sure to place display: table on .midrow_blocks_wrap rather than display: table-cell.

  16. #16
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    image001.jpg

    Haven't been able to get it scrollfree aswell, is it even usefull to keep trying?

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Here's what is looks like on a proper computer (Mac):

    font.png

    Maybe it's just a quirk of how the font displays on a PC.

    Quote Originally Posted by basbvr View Post
    Haven't been able to get it scrollfree aswell, is it even usefull to keep trying?
    Not sure what you mean, but you should let content scroll if it doesn't fit in the browser window.

  18. #18
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The person I'm helping with this site is hammering on and on about him wanting a homepage without the possibility to scroll down, he wants the entire homepage to be seen without the need to scroll.

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    He's an e-jit. As web designers, we have to educate clients. What does he want people to see on a mobile phone? A title and nothing else?

    If you use

    Code:
    body {overflow:hidden;}
    any content that is not visible on the screen won't be accessible.

  20. #20
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    151 Post(s)
    Tagged
    3 Thread(s)
    I agree with Ralph, it is practically impossible as screen sizes differ so much.
    I have a 27" Mac with a 22" LG attached to it but I also have a 15" screen attached to my laptop which I use for browsing!

    Then as Ralph says, you have to factor in mobile devices and tablets!
    Its all good fun......!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  21. #21
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I complety agree with you, however, after calling him he still refuses to let go of his 'scroll free' home page. Maybe you have any good ideas for the design? Or should I just tell him it isn't going to work?
    The people who created the site for his company told him it was important, thats why he really wants this kind of homepage. As you can see his site is really simple and basic, not what I had in mind for my design, perhaps you can see a compromise between my site and his?

  22. #22
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,788
    Mentioned
    151 Post(s)
    Tagged
    3 Thread(s)
    Well we certainly empathise with you!

    You have a little it of space to play with around the header text and you could lose the pagination numbers.
    That should bring you closer to the height.

    Failing that you would have to reduce the height of the slider to a point that would make a slider pointless!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  23. #23
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    He probably misunderstood what he was told. Often it's said that the most important content should site "above the fold", meaning that it should be on screen without scrolling. Whether that's true or not is debatable, but anyhow, if you have more content on a page than can fit, you either scroll to it, or hide it so that no one can get to it. That's a pretty stark pair of options, and the right choice is obvious.

  24. #24
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Spoke to him again, its either a homepage without scrolling or it's nothing at all. So I'm afraid a new design is necessary, thank you so much for all the support though! If there's any way I might be able to help you, let me know.

  25. #25
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind, managed to make it small enough so he agreed. I had to remove the entire footer, including the numbers for te slide. Perhaps you know a way to include the numbers in the slideshow itself?

    Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •