Special Header Question

  • Author
    Posts
  • #1584726

    marcosbhd
    Member
    #header {
    	background: transparent url('http://torch.cs.dal.ca/~bate/wallpaper/yourmove1600x1200.jpg') no-repeat scroll center;
    	height: 600px;
    	padding-top: 115px;
    	position: relatively;
    	overflow-x: hidden;
    	box-shadow: inset 0 0 10px 1px #000000;
    }

    the picture is the: chess pieces

    Is there a way that I can change the header picture either by predetermining other pictures similar to a slide show, randomizing it, or causing a hover effect (as in when people hover above it it shifts)?

    I hate that only once header is there all the time. Preferably with CSS I doubt I could get it to work with changing the theme settings on wordpress since this was a customization itself.

    The blog I need help with is marcosbhd.wordpress.com.

    #1584899

    Hi, on the Triton Lite theme, there isn’t a random header feature, and this isn’t something that can be added with CSS. You could create a second image and use that as a “hover” image when someone hovers over the existing image. To do that, create a second header image the exact size of the existing image (1600px x 1200px), upload it to your media library, add the following CSS to your custom CSS and put the URL of that newly uploaded image between the quote marks where it says, URL_OF_IMAGE.

    #header:hover {
        background: url("URL_OF_IMAGE") no-repeat scroll center center rgba(0, 0, 0, 0);
    }
    #1584900

    marcosbhd
    Member

    Fantastic thank you!

    #1584901

    marcosbhd
    Member

    Sacred path is there a way to add social buttons to my page on the top of my page?

    #1584931

    Yes, where exactly did you want to add them?

    #1585088

    marcosbhd
    Member

    Ideally under the blog title Omega Delta Phi (well under the sub heading)

    or vertically along side one of my bottom widgets (the left) – contact info

    or vertically along my page

    #1585159

    This can be done. What you would want to do is to put your social icons into a Text Widget in the footer since the footer widget area is visible on all pages. We can then move that widget up and into position in the header area. One thing I will note is that we have to use position: absolute; to do this which means that there will be a bit of shifting of the position of the icons depending on whether someone is logged into WordPress (admin bar at top) or not logged in, the spacing between the title and the social icons will change depending on whether you are logged in or not.

    Here are some links on using a Text widget and creating linked images in text widgets.

    Text Widget
    Text Widget Links

    Once you have the text widget in the footer, let us know and we can help move it up and position it in the header area.

    #1585185

    marcosbhd
    Member

    I set up random ones Ill change them later but they are set. Is there a way to move my video up as well?

    #1585263

    Hi, the following is a start. Once you get your final icons into the text widget, there may be some adjustments needed. The following works for the most part, but starts to come apart at when the browser window is narrower than the content area. Give it a try and see what you think. Right now I have it spaced down from the title and description so it aligns properly when one is logged in. When one is logged out, there will be more space between the description and the social icons.

    body.container {
        position: relative;
    }
    
    #text-9 {
        position: absolute;
        top: 300px;
        width: 100%;
        text-align: center;
        left: 50%;
        margin-left: -50%;
    }
    #1585264

    On the video, the following centers it in the header area below the social icons and returns it to its width of 400px.

    #text-8 {
        position: absolute;
        top: 350px;
        width: 100%;
        text-align: center;
        left: 50%;
        margin-left: -50%;
    }
    
    #text-8 .textwidget iframe {
        width: 400px !important;
    }
    #1585300

    marcosbhd
    Member

    Sacredpath – I am so thankful to have you guys here. I cant thank you enough!!

    Godbless you!

    #1585301

    You are welcome.

The topic ‘Special Header Question’ is closed to new replies.