How to add more .custom.gk-headers

February 2014 WordPress Theme
GK User
Sat Jan 28, 2017 12:50 pm
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 :D
User avatar
Expert Boarder

Joshua M
Mon Jan 30, 2017 9:02 am
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)
User avatar
Moderator

GK User
Thu Feb 02, 2017 5:35 pm
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;
}
User avatar
Expert Boarder

GK User
Thu Feb 02, 2017 5:37 pm
But when i use <div class="custom gk-header4">
<div>
The image is not showing
User avatar
Expert Boarder

Joshua M
Fri Feb 03, 2017 9:29 am
Could you provide your website URL where this header is displayed?
User avatar
Moderator

GK User
Fri Feb 03, 2017 5:40 pm
I dont have it online now. What do you exactly need? http://praktijksysteemtherapiegroningen.nl/
User avatar
Expert Boarder

Joshua M
Sun Feb 05, 2017 8:56 pm
I need to see the website where the issue is visible. I can't check what's wrong without inspecting the site.
User avatar
Moderator

GK User
Mon Feb 06, 2017 2:38 pm
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.
User avatar
Expert Boarder

Joshua M
Tue Feb 07, 2017 9:24 am
css code seems to be fine, but can't see what's wrong if I can't see the issue.
User avatar
Moderator

GK User
Mon Feb 13, 2017 5:42 pm
Is there an easier way to add more frontpage images?
User avatar
Expert Boarder

Joshua M
Tue Feb 14, 2017 9:50 am
Could you provide a screenshot or more details which frontpage images exactly do you mean?
User avatar
Moderator

GK User
Tue Feb 14, 2017 3:57 pm
User avatar
Expert Boarder

GK User
Tue Feb 14, 2017 3:58 pm
I want to add on every single page another frontpage images
User avatar
Expert Boarder

Joshua M
Wed Feb 15, 2017 9:08 am
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
User avatar
Moderator

GK User
Wed Feb 15, 2017 12:32 pm
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?
User avatar
Expert Boarder

Joshua M
Thu Feb 16, 2017 9:28 am
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.
User avatar
Moderator

GK User
Thu Feb 16, 2017 10:10 am
i added new custom gk-header4,5,6,7,8,9 But it is not working somehow.
http://praktijksysteemtherapiegroningen.nl/aanmelding/
User avatar
Expert Boarder

Joshua M
Thu Feb 16, 2017 10:18 am
I can't see correct css code for this page:
Code: Select all
.custom.gk-header7 {
...
}
User avatar
Moderator

GK User
Thu Feb 16, 2017 10:45 am
.custom.gk-header7 {'../images/header7_bg.jpg'}

?
User avatar
Expert Boarder

GK User
Thu Feb 16, 2017 10:48 am
.page-id-1595 .custom.gk-header7 {
background-image: url(../images/header7_bg.jpg);
}

Also not working
User avatar
Expert Boarder

GK User
Thu Feb 16, 2017 10:55 am
Joshua M wrote: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?
User avatar
Expert Boarder

GK User
Thu Feb 16, 2017 11:19 am
Already solved the problem i made a mistake in the code. Sorry !
User avatar
Expert Boarder

GK User
Thu Feb 16, 2017 12:36 pm
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
User avatar
Expert Boarder

GK User
Thu Feb 16, 2017 12:47 pm
User avatar
Expert Boarder

Joshua M
Thu Feb 16, 2017 11:13 pm
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.
User avatar
Moderator

GK User
Fri Feb 17, 2017 9:51 am
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 !
User avatar
Expert Boarder

Joshua M
Fri Feb 17, 2017 10:16 am
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');
}
User avatar
Moderator

GK User
Sun Feb 19, 2017 1:36 pm
I tried but i was not working. And i also got problems that the other pages are not full responsive for mobile
User avatar
Expert Boarder

Joshua M
Sun Feb 19, 2017 10:58 pm
What pages exactly? and what screen resolution?
User avatar
Moderator


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.