Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Div with dynamic background img and text on top

    Hello.

    *Disclosure--I'm really not that knowledgeable with css so any help on this is much appreciated.

    I'm trying to get this effect as my masthead on pages within my Virb site http://thatguy.virb.com/featured

    However, the page description is dynamically changed using Virb's admin and I don't know where to begin to change the description CSS to get it to look like this.

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    you do or don't know where the CSS code is located? so you can edit it. if you do I can tell you what code to edit and what to change it too, but I have never worked with virb so I dont know how get to their code.
    Last edited by SeattleMicah; 06-01-2012 at 12:35 AM.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SeattleMicah View Post
    you do or don't know where the CSS code is located? so you can edit it. if you do I can tell you what code to edit and what to change it too, but I have never worked with virb so I dont know how get to their code.
    Thanks, SeattleMicah. Yes, I think so. I have the following code for my page that I believe is what I must edit
    Code:
    div#page_wrapper {
        background: <virb get="customize.colors.background_page" />;
        z-index: 1;
        overflow: hidden;
    }
    div#page {
    	width:960px;
    	margin:0 auto;
    	padding:25px 0 15px;
    	overflow: hidden;http://trentwalton.com/2011/01/18/controlling-web-typography/
    	border-top: 1px solid <virb get="customize.colors.line_page" />;
    	border-bottom: 1px solid <virb get="customize.colors.line_page" />;
    }
    body.index div#page {padding-bottom: 0;}
    #page div#description {
        position: relative;
    	padding: 0;
    	width:600px;
    }
    
    
    
    
    
        #page #description p, #page #description h2, #page #description h3, #page #description h4, #page #description h5, #page #description h6 {
            padding: 0 0 15px 0;
        }
        
        #page #description ul li, #page #description ol li {padding: 0 0 5px 0;}
        #page #description h2 {line-height: 1.3;}
    div#share {
        display: block;
        position: relative;
        clear: both;
        padding: 10px 0 0 0;
    }
    #page #title {
        display: none;
    }
    Thanks for your help!

  • #4
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    just wondering, but is there a paragraph or description you can enter in? that might overlay the image? if so can you insert a description and update it please.

    also can you find where to edit the html?

    this is what we need to edit, and it looks like to get what you want we need to put a class on this H1 tag so we can edit this header.

    PHP Code:
    <div id="description">
      <
    h1>Title Here</h1>
         <
    p>
           <
    img width="960" height="600" src="http://g.virbcdn.com/_f/cdn_images/resize_1024x1365/1f/ContentImage-2471-31075-testMasthead.jpg">
         </
    p>
    </
    div
    hopefully you can find the html, if you can try this

    PHP Code:
    <div id="description">
      <
    h1 class="titleoverlay">Title Here</h1>
         <
    p>
           <
    img width="960" height="600" src="http://g.virbcdn.com/_f/cdn_images/resize_1024x1365/1f/ContentImage-2471-31075-testMasthead.jpg">
         </
    p>
    </
    div
    and add this to your css page

    PHP Code:
    h1.titleoverlay {margin-top:50px;
    <!--if 
    you need left margin-->
    margin-left:50px;

    Last edited by SeattleMicah; 06-01-2012 at 01:15 AM.

  • Users who have thanked SeattleMicah for this post:

    Persistent1 (06-01-2012)

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, SeattleMicah. But no luck with the that code change (css and html) I republished the page http://thatguy.virb.com/featured ..thought that would do it, but it's unaffected.

    Other ideas?

  • #6
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    Do you mean you changed wat i suggested and it didn't work? or you couldn't find where to make those changes?

  • #7
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I made the changes you recommended.

  • #8
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    ah I see ya its pushing everything down.

    You could try and put a z-index:10; inside of that new h1.titleoverlay {z-index:10;} along with those changes that should bring the header forward.

    nevermind that wont seem to work, ill have to look at this further since adding that class didn't work. hopefully someone else can chime in.
    Last edited by SeattleMicah; 06-01-2012 at 05:36 PM.

  • #9
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Is it an inheritance thing? What I mean is ..are the styles being over-ruled because this page inherits a parent style or something?


  •  

    Posting Permissions

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