Backgrounds for Title Area

[formidablefemale]

How can I place different backgrounds just for the title area for pages, posts, and course page areas using the sleek header? I would also like a  bold line (for design) before the title as well. Using demo 1 without sample data. Thanks.

[H.K. Latiyan]

Please go to wp-admin->appearance->customize->header->header style, and select transparent header. This header looks like sleek header only but in this header there is a background image in the header and the title area. You can change the title background image on any page by editing the page in backend.

[sandy]

@formidablefemale: Please clarify (and share screenshots), is this the same question as continuation form the emails. If yes, then it would be really helpful if you can share all the details here as well. For now I am assuming that this is the same request and adding the missing details in the question.  

[H.K. Latiyan]

Add this css in your appearance->customize->custom css: .pagetitle:before { content: ''; width: 4px; height: 50%; display: block; background: #444; position: absolute; left: -30px; } This will add the line on the left of the title, refer: http://prntscr.com/cc3rnr

[formidablefemale]

Thank you! The line before the site title works but still looking for a resolution for the ability to make different backgrounds for the site title instead of the eggshell background. You see the attachment in screen 1? I would like to use a photo background for just the area in red. I would also like to be able to adjust the opacity. And the ability to do this on different posts and pages. I hope this clarify things.

[Anshuman Sahu]

Okay can you please confirm if you want the something like this : http://themes.vibethemes.com/wplms/skins/demo2/event-directory/

[formidablefemale]

No that's not it. The idea is to have the sleek header just as it is in the screenshot with only the site title having a background image. Only the area selected in red should have a background and not the header or nav menu.

[Anshuman Sahu]

Okay please try adding the code given in your wplms-customizer.php file in wplms customizer plugin : add_action('wp_head','add_title_background'); function add_title_background(){   global $post;   if($post->post_type=='page'){     $url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );     if(isset( $url[0] ))     echo '<style>section#title {             background: url("'.$url[0].'") !important;             background-size: cover !important;             background-position: 50% 50% !important;           }</style>';   }   } then the featured image that you will set in your page will be set as background image of title. 

[formidablefemale]

That worked! Thank you! What is the recommended size for the image so that it will fit? Also, a question about the modern theme login pop up. For some reason, the hover is still blue although I made all the necessary changes in the customizer. Everything else works through the customizer except for this. Do you have some code that will fix this hover color button and the hover color for all the liks on the site?

[Anshuman Sahu]

Well the recommended size is 1920 X 400 . For login hover color please try adding the following css in your wp-admin -> appearance -> customize -> custom css  : #vibe_bp_login #wplogin-modal .btn-default, #vibe_bp_login #wplogin-modal .btn-block{ background-color: #ff1e94 !important; } 

[Author]

Posts