Background picture with white text on subpage?

Is it possible to create a subpage on the frontpage or on other main page where you only have a background picture with white text on top of it (as the frontpage) as for example on this site https://newspring.cc/groups?

And if not, do a lot of changes need to be made to the template, to make it work?

Hope you can help,

Regards,

Winston

Hi,

Yes, it's possible, example is here:
https://demo.gavick.com/wordpress/steak ... age_id=404

Add new page and select "One page" as a template, featured image will be used as a background, please check full documentation:
https://www.gavick.com/documentation/th ... /#one-page

Hi Piotr,

That wasn't exactly what I had in mind. I have seen that it is possible to place a title on the header, but there is no description in the tutorial to place a linked text, button or an icon on top of the picture. On the frontpage of this theme it is possible. And I am also looking to do this on a second picture that is not on the top (header) but in the middle. (see the webpage that I placed as an example)

And if not possible "out of the box", can this be tweaked into what I want with some simple steps?

Hope that I have explained myself a little better this time.

Regards,

Winston

Try to use Frontpage template again with your new page and change the content. The background will be the same as on your frontpage, but you can override it manually with css:

Code: Select all

.page-id-632 #gk-header {
background-image: url('path-to-your-image')!important;
}


change page-id-ID to your page ID.

Thanks Piotr,
that is helping me a lot! I did the changes and it is working fine.

My second request is still not working properly. The text on the second picture is standard black, but I can change the color to white, but the links are blue/black and that is not working on the pictures. How can I change the links to white and maybe even that the text on the pictures stays white (as in the frontpage module). I made a testsite, so you can see what it looks like right now. http://neu.oasefcg.de/?page_id=1626

The Steakhouse template is really what I was looking for. And it fits us like a glove. Thanks for the great job that you guys are doing!

blessings,

Winston

Hi,

Did you solve the issue? because links (icons) are in the same colors like on your frontpage.

No, the problem isn't solved yet. With the first picture (frontage) it is working fine and the icons show in white. But the second picture (that should be the second subpage) the link (icons) are light blue / black. What code should I use to override that css so the second picture looks like that on the first picture?

Thank you for your patience,

Winston

Here another example of what I want to do: http://www.northpointe.org
Please scroll down to the second picture, after the white Part (Join us this weekend) there is the text: Latest Message, etc. written in white. with a link to watch current events. That is what I am trying to accomplish on my page: A subpage or a subpart where the background is a picture and texts of links written in white on top of it.

Sorry if I am poor in explaining what I mean, but I am quite new to wordpress, but I am learning a lot though.

Again, thank you for your patience,

Winston

Sorry, I thought that we are talking about first image and icons in the header, please change this subpage conent to the followign to have two column layout:

Code: Select all

<div class="gk-description-wrap custom">
  <div class="gk-cols" data-cols="2">
<div>
<h3><span style="color: #ffffff;">Die Oase möchte das Miteinander (Gemeinschaft) auf zwei Ebenen fördern</span></h3>
</div>
<div><a class="button button-border" href="http://neu.oasefcg.de/?tribe_events_cat=oase-gruppen">Kalender Oase Gruppen</a><ul class="gk-short-menu">
   <li data-scroll-reveal="enter bottom over .5s after .25s" data-scroll-reveal-id="8" data-scroll-reveal-initialized="true" data-scroll-reveal-complete="true"><a href="http://neu.oasefcg.de/?page_id=780"><i class="fa fa-newspaper-o"></i> Aktuelles</a></li>
        <li data-scroll-reveal="enter bottom over .5s after .25s" data-scroll-reveal-id="9" data-scroll-reveal-initialized="true" data-scroll-reveal-complete="true"><a href="http://neu.oasefcg.de/?page_id=873"><i class="fa fa-microphone"></i> Predigten</a></li>
   <li data-scroll-reveal="enter bottom over .5s after 1s" data-scroll-reveal-id="10" data-scroll-reveal-initialized="true" data-scroll-reveal-complete="true"><a href="http://neu.oasefcg.de/?post_type=tribe_events"><i class="fa fa-calendar-o"></i> Kalender</a></li>
         <li data-scroll-reveal="enter bottom over .5s after 1s" data-scroll-reveal-id="11" data-scroll-reveal-initialized="true" data-scroll-reveal-complete="true"><a href="http://neu.oasefcg.de/?page_id=760"><i class="fa fa-users"></i> Oasegruppen</a></li>
   <li data-scroll-reveal="enter bottom over .5s after 1.25s" data-scroll-reveal-id="12" data-scroll-reveal-initialized="true" data-scroll-reveal-complete="true"><a href="#location"><i class="fa fa-location-arrow"></i> Standort</a></li>
</ul></div>
</div>
</div>


Then please add the following css code:

Code: Select all

 .gk-description-wrap.custom .button-border {
    border-color: #fff!important;
    color: #fff!important;
 }

 .gk-description-wrap.custom .gk-short-menu li {
   display: inline-block;
   margin: 20px 10px;
 }

 .gk-description-wrap.custom .gk-short-menu li a {
  color: #fff!important;
 }


Yes! That is what I meant! Thank you! I need to experiment a little more to get the format the way I want.
Regards,
Winston

I have another request. On my testsite http://neu.oasefcg.de/?page_id=1626 I have embedded a page with a html5 element for the widgetkit media player. <audio src="audio.mp3" type="audio/mp3"></audio> But the element doesn't centers on the page. What code is needed to override the css?

Hi,

Try to add the following css code:

Code: Select all

.frontpage-block-wrap .mejs-container {
    margin: 0 auto;
}


Thanks again, all worked fine!

Regards,

Winston