Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Drop down effect on header image

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #249707
    [email protected]
    Participant

    Hi all,

    Hoping for a little help with a couple of things. I’ve used WordPress for a couple of sites before but have never actually learned to write/edit the CSS myself, although I have gone through various tutorials etc. (so be kind, please). My problems are:

    1. I would like to remove the drop down effect when my header image loads. The website address is http://www.bluefoxfinance.com.au – when loading you will see the page load before the image, then it will ‘drop down’ after a small delay, but I would rather remove that effect.
    2. I would like to add a page border/padding to the left/right of the page (I think that is what I need to do for the desired effect) – i.e. make the edges of the page the background colour (blue), not the grey it currently is.

    Thanks in advance, I appreciate any help offered.

    #249708
    [email protected]
    Participant

    In regards to the border problem. I have tried adding a simple border i.e.

    body {
    border: 220px solid red;
    }

    (Among other variations)

    But that comes with a few problems:
    – The top right hand corner of page is unaffected;
    – There are half-trapezoid shapes overlaying the border where the page section changes (i.e. where that little dip is wherever the colour changes);
    – It is no longer mobile friendly.

    Also, if there is a way to post screenshots to this forum, that would be super helpful?

    #249721
    Shikkediel
    Participant

    Also, if there is a way to post screenshots to this forum, that would be super helpful?

    You could always make a screenshot, put it on a image sharing site and link to it here. You can use HTML for this in your post.

    <img src="yourlink.jpg" alt="">
    

    I’ve been doing this myself, so when people click it they go to the image directly:

    <a href="yourlink.jpg"><img src="yourlink.jpg" alt=""></a>
    

    As to the first part of your question, that animation is all wrapped up in the main script here at the bottom. It’ll be difficult to extract anything from that and change the effect. I have not looked at the border issue yet.

    #249723
    Shikkediel
    Participant

    Sorry for going off-topic… just reporting a few glitches with the new layout.


    @chriscoyier

    Posting it here because the first one is that it doesn’t seem possible to post new topics? Page looks nice but there’s no options to submit anything. Second bug is with the code above that has overflow. Hovering it is creating an odd effect, making it not possible to drag the scrollbar.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.