WordPress.org

Ready to get started?Download WordPress

Forums

Frontier
[resolved] Is this layout feasible? (23 posts)

  1. Ian Schoonover
    Member
    Posted 9 months ago #

    My client put this layout together and I'm just wondering how feasible it would be to make these kinds of changes to your frontier theme in order to adopt this layout..
    See link to layout HERE

    Basically the header stretches 100% across the top of the page while the content area remains somewhere around 960px, but then he wants the slider to extend out 20-30 pixels on either side of the content area.

    Not sure if this is even worth pursuing, but I thought I would ask.

    Thanks in advance,
    Ian

  2. Marvel Labs
    Member
    Posted 9 months ago #

    Ian,

    You can do the changes by changing the stylesheet, feasibility depends upon the browser used on users end, if the theme is responsive you can use css3 tags specifying the min and max width.

    use Custom Css feature if your theme supports it.

    Marvel Labs

  3. ronangelo
    Member
    Theme Author

    Posted 9 months ago #

    Not sure if this is even worth pursuing, but I thought I would ask.

    It's possible if you want to do it.

    1. For the header you can either just incorporate the design of the header part with the image used for the site's background. So visually it would look like the header extends the whole width since they have the same image on the top part.
    OR
    This other solution which I think is better. You can disable the top bar and header on the options, leaving only the main menu. Then add a text widget on the "Body Widget Area". It is automatically placed on top of the page outside of the container. Place your image or other needed things on that text widget.

    2. For the slider, you can apply a negative property to the sliders container ex. left: -100px; then adjust the width to balance/stretch it on the right side. You'll have to change all the overflow: hidden; to overflow: visible; on the elements that contains the slider. It might be better if you place the slider on the "Below Menu" widget area so you only have a few overflows to change. I'm not sure how all of this would affect the responsiveness though.

  4. Ian Schoonover
    Member
    Posted 9 months ago #

    thanks for the feedback guys, I'll start playing with those suggestions now. I'm sure more questions will arise once I've gotten my hands dirty..

    -ian

  5. Ian Schoonover
    Member
    Posted 9 months ago #

    @ronangelo
    So I was working on the header, everything was looking great. Then I went back to work on it some more and while I was working, the site began to disintegrate in front of me, somewhere between saving the CSS and previewing the changes I lost all my custom CSS settings and for whatever reason the site is all in one skinny column.
    Any idea how I can restore it, or do I have to start over?
    Really strange..

    Thanks,
    Ian

  6. Ian Schoonover
    Member
    Posted 9 months ago #

    *update*

    It would appear that all of the settings were cleared, including content width, etc. thus causing the site to look like it did. I've managed to get everything back, except for the custom CSS.

    Do you think this is a sign of being hacked? Or perhaps just a bug of some sort..

  7. ronangelo
    Member
    Theme Author

    Posted 9 months ago #

    @iantskon

    It would appear that all of the settings were cleared, including content width, etc. thus causing the site to look like it did. I've managed to get everything back, except for the custom CSS.

    That is strange. The options should only be cleared when the "restore defaults" button is clicked, and even then it should contain the default values. I really have no idea what might have caused this. You only entered css codes right?

    You could add this to extend the body widgets.

    .widget-body {
        display: block;
        margin: 0;
    }
  8. Ian Schoonover
    Member
    Posted 9 months ago #

    So I may have hit reset instead of save by mistake while having the window shrunk down, lesson learned. I'm seeing the importance of backing up the custom CSS.

    Are there any backup plug-ins or methods that you would recommend? (for the wordpress site itself, database, etc.)

    How about security?

    BTW. the code above works great, I was using text-(#) {width: 100%;} which was kind of buggy and bottom margins had to be set to negative.

    Thanks,
    Ian

  9. Ian Schoonover
    Member
    Posted 9 months ago #

    @ronangelo
    1. So I have the header created, but I am unsure of how to position the image and text inside of the "white" logo/header area so that it remains in the same position regardless of browser size
    See example of positioning here
    Right now everything is floating left, it looks great on the mobile version, but when I had it positioned where I wanted it via margin-left, etc., it would move as I re-sized the browser.

    2. Everything was working with the slider until I changed the overflow of the "below menu" id to overflow: visible; which mde it disappear (the image(s) that is, the navigation arrows/circles are floating above the article area.
    I left everything intact, so if you change the below menu to visible in your element inspector, you will see what I am saying.

    If you're able to help with this I'd really appreciate it.
    Thanks in advance,

    Ian

  10. ronangelo
    Member
    Theme Author

    Posted 9 months ago #

    1. Try wrapping the widget's contents in their own div then do the same thing you did with your 4th text-widget which is adding a width then floating to center.
    Ex.

    <div id="header-content-wrap">
       <img id="header_logo" />
       <span id="text"></span>
    </div>
    
    #header-content-wrap {
       width: 970px;
       margin: 0 auto;
       max-width: 100%;
    }

    With wrapping things in their own container, you could also just use one text widget instead of 4.

    2. Try these.

    #container {overflow: visible;}
    #below-menu {
       overflow: visible;
       clear: both;
    }
  11. Ian Schoonover
    Member
    Posted 9 months ago #

    This worked great, now I'm just trying to get it so the fixed slide show returns to flexible from 1100px and under, i can do it in the chrome console, but can't seem to pin the right class or id. I'll play with it more tomorrow.
    Thanks again, you're always a huge help, dunno what I'd do without the great support!

    Ian

  12. Ian Schoonover
    Member
    Posted 9 months ago #

    @ronangelo
    I can't figure out how to change the height of each list element within the "slice show - slide show" to become max-height: 100%; after the browser is below 1100px in width, as it is now the slider becomes responsive below 1100px, but the height of one of the list elements is leaving a big space beneath the carousel.
    When I view it in firebug, I am able to get it to work by changing the "inline element" for each slide from height: 350px to max-height: 100%
    but how do I change that in my CSS?

    Thanks,

    Ian

  13. ronangelo
    Member
    Theme Author

    Posted 9 months ago #

    I can't figure out how to change the height of each list element within the "slice show - slide show" to become max-height: 100%;

    max-height isn't used to set height.

    Try to add this in the 1100px media query

    li.cycle-slide {height: auto !important;}
  14. ronangelo
    Member
    Theme Author

    Posted 9 months ago #

    div.sliceshow-slideshow, li.cycle-slide {height: auto !important;}
  15. Ian Schoonover
    Member
    Posted 9 months ago #

    ahh! that works perfectly.
    I tried the height: auto; before, but on the wrong id.
    thanks for the support! definitely going to continue using your theme(s) for future clients.

    ian

  16. Ian Schoonover
    Member
    Posted 9 months ago #

    @Ronangelo
    This header is becoming the bane of my existence >.<

    So I put the header into one text widget, and it's working well, except when I re-size the window down between 440px and 650px (width) then the text area that belongs within the white region of the header floats down into the orange area. I've tried fixing it by giving the text area DIV a background of white and adjusting the left padding by various %'s, but this didn't work too well and seemed kind of like a sketchy way to solve the problem. So I guess the question is, how can I make the white DIV stretch height-wise to contain the text when the text DIV floats due to screen size?

    Here's some previews of what happens at various sizes between 440 and 650
    one
    two

    Thanks!

  17. Ian Schoonover
    Member
    Posted 9 months ago #

    Something else I noticed, which isn't a huge deal, but would be nice if it weren't there. There's a thin 1px white line at the bottom of the home page slider. Any idea how to fix this? I tried re-sizing some of the containers, but nothing worked.

  18. Ian Schoonover
    Member
    Posted 9 months ago #

    btw, obviously this stuff is more about my site and less about your frontier theme at this point, so if you decide you'd rather not spend any more time on all of these questions just say so, I know your time is valuable.
    Thanks,

    Ian

  19. ronangelo
    Member
    Theme Author

    Posted 9 months ago #

    @iantskon

    This header is becoming the bane of my existence >.<

    Remove the white div's height then add overflow: hidden;
    If you need that area to be a specific height when on desktop then the best approach would be to re-edit the logo image and change its height so that the div will follow.
     

    There's a thin 1px white line at the bottom of the home page slider.

    After a little hide and seek :)

    .sliceshow-slideshow .slides > li {border-bottom: none;}

     

    btw, obviously this stuff is more about my site and less about your frontier theme at this point, so if you decide you'd rather not spend any more time on all of these questions just say so, I know your time is valuable.

    No trouble at all. If I happen to be here on the forums and if I happen to know the answers, then why not.

  20. Ian Schoonover
    Member
    Posted 9 months ago #

    @ronangelo

    You've done it again! Thanks again for all your help. Hopefully I won't have to bother you again on this project. :P
    Cheers!

    Ian

  21. Ian Schoonover
    Member
    Posted 9 months ago #

    @ronangelo
    and of course I have another question not but 18 hours later..

    Remember when we changed the #container to overflow: visible to allow the slider to expand its edges? Firefox doesn't like that code, it looks fine on the front page with the slider, but on every other page without the slider we get this.
    If I change the #container to hidden then it solves that issue.
    So my question is, how do I get only the front page's container overflow to be visible, while the remaining pages remain hidden?

    Thanks

  22. ronangelo
    Member
    Theme Author

    Posted 9 months ago #

    The <body> tag outputs a class unique to every page. You can add that before the #container.

    body.home #container {overflow: visible;}
  23. Ian Schoonover
    Member
    Posted 9 months ago #

    good to know! Thanks a million.

Reply

You must log in to post.

About this Theme

About this Topic