Add image and text under title and above columns (DePo Masthead)

  • Author
  • #595409


    Is it possible in the DePo Masthead theme to add an image and line of text beneath the title but above the three columns? If so, how would I go about doing that?

    The blog I need help with is


    Yes you can, but the text will have to be incorporated into the image since with CSS, you can’t really add text. (Actually you can add text, but the problem is not all browsers will see it, namely IE which still has the largest market share).

    Basically you would add a background image to #container h1.sitename and then adjust everything so that the image was below the title. Likely there are a handful of other adjustments to positions that would need to take place as well.

    Can’t go much further than the general stuff above till we know the size of the image at the very least.



    I guess there wouldn’t be a way to add an editor to manage inserting an image/text as indicated above in the same way as there is an editor that manages posts within the columns, would there?


    Not really. Well it could be done, but it would be a serious pile of code to do that. The designer of DePo Masthead decided not to include a header image in the theme.



    Thank you.

    On a side note:

    When I insert the code: #home .post {border-left: 1px solid #c0c0c0 !important} to turn the two interior vertical column borders to gray, it turns the far left border dark gray at the same time. Anyway to correct for that?

    I tried inserting #home .post {border-center: 1px solid #c0c0c0 !important}, but it turns the two interior borders to a darker gray.


    The problem is that all three of the posts on the main page have the exact same classes applied to them. There isn’t a different class for the left (as there really should be since it does not need a left border).

    What you would have to do is to target the posts by post ID. The problem with this is that as you add new posts, you would have to continually change the CSS so that the new post had no border, and then add a border to the previous post.

    This is just my opinion from working with DePo Masthead over the years, but it is a seriously poorly designed theme.



    I appreciate your candid analysis. Would you recommend any alternative that is close to DePo Masthead that is easier to work with? I would like to keep the three column theme.


    Masthead is the only three-column theme here, so it is pretty much the only choice unfortunately.




    Last question: Referencing what you mentioned above, how would I incorporate text into an image?

    I really appreciate your willingness to share your expertise. Thank you.



    Is it possible in the DePo Masthead theme to add an image and line of text beneath the title but above the three columns? If so, how would I go about doing that?

    Wouldn’t a div in a text widget and reposition it using CSS work here? Something like this:


    <div id="mySubtitle">
    My Subtitle


    #container {position: relative;}
       margin: auto;
       top: XXpx;
       position: absolute;

    Replacing XX with an actual int value.

    Something like that should work.


    @devblog, I should have thought of that. I need more coffee perhaps.



    @devblog, Thanks for the suggestion. I’ll try it out and post back.



    @devblog, How do I go about inserting a div in a text widget? I apologize for my ignorance. Newbie here.


    Write it just like his example and replace “my subtitle” with the text that you want.

    <div id="mySubtitle">
    My Subtitle

    Then add the second part to the CSS and adjust the top value to position it below the title and/or image you wanted to insert.



    I tried the above but was unable to get it to work. Isn’t the text widget confined to the sidebar and has no application to the header? Any further help with this would be greatly appreciated.


    That is what the position absolute takes care of.

    If you put the text widget back into the sidebar (bottom) I can take a look and work out the exact code for you.


    You know, you could even put the image into the text widget as well and then if you later wanted to change the image, it would not require editing the CSS.

The topic ‘Add image and text under title and above columns (DePo Masthead)’ is closed to new replies.