How to add more .custom.gk-headers

Hi I tried to add a new css .custom.gk-header4 but it is not working. Can someone explain me how i can add a .custom.gk-header4,5,6 etc?

Thanks

Hi,

You should add your css code for i.e. custom.gk-header4 class, but you need also add this class "custom gk-header4" to your widget (Widget Rules button) ref. https://www.gavick.com/documentation/wo ... dget-rules (Styles section)

I added this code in the stuff.css

/* Header IIII */
.custom.gk-header4 {
background: url('../images/header4_bg.jpg') no-repeat center center;
background-size: cover;
padding: 100px 120px 30px;
text-align: left;
}
.gk-header4 small {
color: #fff;
font-size: 17px;
font-style: italic;
}
.gk-header4 h1 {
color: #fff;
font-size: 48px;
font-weight: 400;
margin: 0;
}
.gk-header4 .gk-avatar {
margin: 0 auto 40px auto;
position: relative;
width: 530px;
}
.gk-header4 .gk-avatar img {
border: 3px solid #fff;
border-radius: 50%;
}
.gk-header4 .gk-avatar a {
border: 1px solid #fff;
border-radius: 50%;
color: #fff;
font-size: 32px;
height: 72px;
line-height: 73px;
margin: -36px 0 0 0;
position: absolute;
text-align: center;
text-indent: 5px;
top: 50%;
width: 72px;
}
.gk-header4 .gk-avatar i { color: #fff; }
.gk-header4 .gk-avatar .gk-fb { left: 0; }
.gk-header4 .gk-avatar .gk-twitter { right: 0; }
.gk-header4 small {
display: block;
}

But when i use <div class="custom gk-header4">
<div>
The image is not showing

Could you provide your website URL where this header is displayed?

I dont have it online now. What do you exactly need? http://praktijksysteemtherapiegroningen.nl/

I need to see the website where the issue is visible. I can't check what's wrong without inspecting the site.

But what i did with adding the code, was that the right way to do it or did i forgot something. The website is already online so i cannot make issues visble.

css code seems to be fine, but can't see what's wrong if I can't see the issue.

Is there an easier way to add more frontpage images?

Could you provide a screenshot or more details which frontpage images exactly do you mean?

http://praktijksysteemtherapiegroningen.nl/ On the frontpage the image

I want to add on every single page another frontpage images

You have to use a lot of header widgets and set widget rules - to display correct widget on specific page. More informations about widget rules may be found here:
https://www.gavick.com/documentation/wo ... dget-rules

Yes i understand. But i am using <div class="custom gk-header2"> for example.
So i have make like a lot of header widgets right?
Widget 1: <div class="custom gk-header3">
Widget 2: <div class="custom gk-header4">
Widget 3:<div class="custom gk-header5">

So do i copy the style and paste in override css? and change the number and the image url? And that will do the work?

Yes it will work, instead of using widget rules and another widget on each page, you can use the same widget wiht i.e. this structure: <div class="custom gk-header2"> and change the background using css only (depends on the displayed page)

for the frontpage:

Code: Select all

.home .custom.gk-header3 {
    background-image: url(../images/header3_bg.jpg);
}


for the page with id - 1621:

Code: Select all

.page-id-1621 .custom.gk-header3 {
    background-image: url(../images/header-for-page-1621_bg.jpg);
}


and similar for other pages. It will be easier I think.

i added new custom gk-header4,5,6,7,8,9 But it is not working somehow.
http://praktijksysteemtherapiegroningen.nl/aanmelding/

I can't see correct css code for this page:

Code: Select all

.custom.gk-header7 {
...
}


.custom.gk-header7 {'../images/header7_bg.jpg'}

?

.page-id-1595 .custom.gk-header7 {
background-image: url(../images/header7_bg.jpg);
}

Also not working

I can't see correct css code for this page:

Code: Select all

.custom.gk-header7 {
...
}


i added this code in the override.css
/* Header VII */
.custom.gk-header7 {
background: url('../images/header7_bg.jpg') no-repeat center center;
background-size: cover;
padding: 100px 120px 30px;
text-align: left;
}
.gk-header7 small {
color: #fff;
font-size: 17px;
font-style: italic;
}
.gk-header7 h1 {
color: #fff;
font-size: 48px;
font-weight: 400;
margin: 0;
}
.gk-header7 .gk-avatar {
margin: 0 auto 40px auto;
position: relative;
width: 730px;
}
.gk-header7 .gk-avatar img {
border: 3px solid #fff;
border-radius: 70%;
}
.gk-header7 .gk-avatar a {
border: 1px solid #fff;
border-radius: 70%;
color: #fff;
font-size: 32px;
height: 72px;
line-height: 73px;
margin: -37px 0 0 0;
position: absolute;
text-align: center;
text-indent: 7px;
top: 70%;
width: 72px;
}
.gk-header7 .gk-avatar i { color: #fff; }
.gk-header7 .gk-avatar .gk-fb { left: 0; }
.gk-header7 .gk-avatar .gk-twitter { right: 0; }
.gk-header7 small {
display: block;
}

Did i forget something?

Already solved the problem i made a mistake in the code. Sorry !

After this one:

/* Header VIII */
.custom.gk-header9 {
background: url('../images/header9_bg.jpg') no-repeat center center;
background-size: cover;
padding: 100px 120px 30px;
text-align: left;
}
.gk-header9 small {
color: #fff;
font-size: 19px;
font-style: italic;
}
.gk-header9 h1 {
color: #fff;
font-size: 49px;
font-weight: 400;
margin: 0;
}
.gk-header9 .gk-avatar {
margin: 0 auto 40px auto;
position: relative;
width: 930px;
}
.gk-header9 .gk-avatar img {
border: 3px solid #fff;
border-radius: 90%;
}
.gk-header9 .gk-avatar a {
border: 1px solid #fff;
border-radius: 90%;
color: #fff;
font-size: 32px;
height: 92px;
line-height: 93px;
margin: -39px 0 0 0;
position: absolute;
text-align: center;
text-indent: 9px;
top: 90%;
width: 92px;
}
.gk-header9 .gk-avatar i { color: #fff; }
.gk-header9 .gk-avatar .gk-fb { left: 0; }
.gk-header9 .gk-avatar .gk-twitter { right: 0; }
.gk-header9 small {
display: block;
}

And make another header10 they are not wokring. Can someone explain why? Does this have to do because their is a one in it? 10,11,12

http://praktijksysteemtherapiegroningen.nl/over-mij/

I can't see the problem - it works when I change the html code to <div class="custom gk-header10">
but I'm not sure why did you add this css code:

Code: Select all

.gk-header10 h1 {
    color: #fff;
    font-size: 410px;
    font-weight: 400;
    margin: 0;
}


and the header text is enormous.

Aah that is the probem i replaced all the 9 to 10 etc etc so its also (off course) changed the other number stupid. But thanks !

If you are using the same structure for your headers, there's no need co duplicate all css code (with changed gk-header-1, gk-header2 etc) it's enough to use different backgorund images:

Code: Select all

.custom.gk-header4 {
background-image: url('../images/header4_bg.jpg');
}

.custom.gk-header5 {
background-image: url('../images/header5_bg.jpg');
}


... etc

.custom.gk-header12 {
background-image: url('../images/header12_bg.jpg');
}


I tried but i was not working. And i also got problems that the other pages are not full responsive for mobile

What pages exactly? and what screen resolution?