[Antoon]

Hi,

I have the following problems with the footer:

– i have made a table and i want to center it.
– is there a way to get calibri font as default font
and that the font shows on a iPhone or android phone.
– How can i change the fontsize from this text:
“Volg het Rode Kruis afd. Beuningen”

Link to the site:

rodekruisbeuningen.nl

thanks for the response.

Antoon

[Mahesh]

@antoon: I checked your site and it says “Maintenance mode is enabled”.
Let me know further.

Regards,
Mahesh

[Antoon]

Hi Mahesh,

Maybe you can reach the site with this link:

rodekruisbeuningen.nl/home

Regards,

Antoon

[Mahesh]

@antoon: Thanks, now I can check the site. Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

/* Center the table */
.footer table {
    margin: auto;
}
/* Set calibri font as default */
body {
    font-family: "Calibri";
}
/* Change font-size of the text */
.footer > p {
    font-size: 20px;
}

Regards,
Mahesh

[Antoon]

@mahesh: Thanks

The footer is more to the right but still not centered and how to get calibri to show up on a iPhone or android phone.

[Mahesh]

@antoon:
Hi Antoon,

By footer do you mean Volg het Rode Kruis afd. Beuningen text??
Let me know further.

Android and iPhone only supports ttf font, so you’ll need to manually upload calibri.ttf font to your site and then add that font-family in CSS and use it. For example

@font-face {
    font-family: myCalibri;
    src: url(path_to_font) format('truetype');
}

body {
    font-family: myCalibri, "Calibri";
}

Hope this helps.

Regards,
Mahesh

[Antoon]

@mahesh:

Hi Mahesh,

Yes i did mean Volg het Rode Kruis afd. Beuningen text as footer.
i add above to CCS but nothing has changed.
and the table in the footer is still not in the center.

Regards,
Antoon

[Mahesh]

@antoon:
Hi Antoon,

The above CSS is not complete it is just an example. For that you’ll need to first upload the ttf font in to your site’s folder somewhere way yoursite/wp-content/uploads and then in add the following Custom CSS:

@font-face {
    font-family: myCalibri;
    src: url(yoursite/wp-content/uploads/calibri.ttf) format('truetype');
}

body {
    font-family: myCalibri, "Calibri";
}

Note: Please change the path in the above CSS to your site’s relative path.

Do you mean to center everything in the footer? Even the table’s content? If so add the following CSS:

.footer, 
.footer table td, th {
    text-align: center;
}

Let me know if any problem.

Regards,
Mahesh

[Antoon]

@mahesh:

The above post is not working.
Next problem i have add a “bar in the footer and when i take a look on my phone the bar is not changing to the size of the responsive site. what is wrong and how can i fix this? is there a plugin to solve my problem? if i buy the pro version on how many sites can i place the theme? and can is solve the problem with this?

Regards,
Antoon

[Mahesh]

@antoon: Have you uploaded the font file to you site? If not please upload it first. Then get the full path to that font file and place in the CSS src, then only it will work.

And as for the bar in the footer, you are using table for that, and for you have inline style defining the width of the table, which is causing the responsive issue. You should not use fix width as far as you want the responsive design.
I don’t know the exact plugin, but you can get an appropriate one from https://wordpress.org/plugins/

Buying a Pro version theme, you can use it for as many site as you’ve owned unless its for the 3rd party.

Regards,
Mahesh

[Antoon]

@mahesh: Yes i have uploaded the font file.
the font in the footer bar has changed, but the table beneath is still in a different font.

For the bar is there a way to remove the bar in responsive mode?

Regards,
Antoon

[Mahesh]

@antoon:
I checked your site and for some reasons, I still can’t see the Calibri font in the mobile devices, may be the issue of server caching. Please try clearing server cache and check again.
And for removing the footer bar in responsive mode:
First you’ll need to put a id(footer-bar) for the table displaying the bar and use the following CSS:

@media screen and (max-width: 480px) {
    #footer-bar {
        display: none;
    }
}

Regards,
Mahesh

[Antoon]

@Mahesh: thanks for the code for above it works.

Maybe there is something wrong in my CSS:

#header-menu #access { background: none #569DDB}

#header-menu ul.menu a {
    color: #fff;
    font-family: "Calibri";
    font-weight: bold;
    font-size: 18px;
}

#site-generator td {
    text-align: center;
}

.footer { background: #569DDB; font-family: Calibri; font-side: 18px; color: #FFF; } 
.footer td {padding: 0; text-align: left; text-valign: top; align: center}

#header-menu ul.menu li:hover > a,
#header-menu ul.menu a:focus {
	background: none transparent;
	text-decoration: underline;
        color: #FFFFFF;
       }

#header-menu ul.menu li {
    border-right: 1px solid #569DDB;
}

/* Center the table */
.footer table {
    margin: auto;
}
/* Set calibri font as default */
body {
    font-family: "Calibri";
}
/* Change font-size of the text */
.footer > p {
    font-size: 20px;
}

#site-generator { background-color: #569DDB; color: #eee; }
#site-generator a { color: #fff;}

@font-face {
    font-family: myCalibri;
    src: url(http://rodekruisbeuningen.nl/wp-content/uploads/calibri.ttf) format('truetype');
}

body {
    font-family: myCalibri, "Calibri";
}

@media screen and (max-width: 680px) {
    #footer-bar {
        display: none;
    }
}

i hope you can help to solve my font problem.

[Antoon]

@mahesh: i have changed my footer.

Is there a way to get the white headers aligned with the text beneath.
I mean “wat kun jij doen?” with “Geef je gift” etc.

I hope you can/will help me again.

Thanks

Regards,

Antoon

[Mahesh]

@antoon:
Hi Antoon,

Please use the following CSS:

@font-face {
    font-family: myCalibri;
    src: url(http://rodekruisbeuningen.nl/wp-content/uploads/calibri.ttf) format('truetype');
}
/* Set calibri font as default */
body {
    font-family: myCalibri, "Calibri";
}

#header-menu #access { 
    background: none #569DDB;
}

#header-menu ul.menu a {
    color: #fff;
    font-family: myCalibri, "Calibri";
    font-weight: bold;
    font-size: 18px;
}

#site-generator td {
    text-align: center;
}

.footer { 
    background: #569DDB; 
    font-family: myCalibri, "Calibri"; 
    font-size: 18px; 
    color: #FFF; 
} 
.footer td {
    padding: 0; 
    text-align: left; 
    vertical-align: top; 
    align: center;
}

#header-menu ul.menu li:hover > a,
#header-menu ul.menu a:focus {
    background: none transparent;
    text-decoration: underline;
    color: #FFFFFF;
}

#header-menu ul.menu li {
    border-right: 1px solid #569DDB;
}

/* Center the table */
.footer table {
    margin: auto;
}

/* Change font-size of the text */
.footer > p {
    font-size: 20px;
}

#site-generator { 
    background-color: #569DDB; 
    color: #eee; 
}
#site-generator a { 
    color: #fff;
}

@media screen and (max-width: 680px) {
    #footer-bar {
        display: none;
    }
}

Hope this helps.

And I don’t quite get your second issue, I didn’t find “Geef je gift” text on the page.

Regards,
Mahesh

[Antoon]

@mahesh:

The text in the footer is now:

Wat kun jij doen?
     > Geef een gift
     > Word donateur
     > Word vrijwilliger
     > Wat kun je nog meer doen?

What i want to see:

Wat kun jij doen?
> Geef een gift
> Word donateur
> Word vrijwilliger
> Wat kun je nog meer doen?

Thanks your answer for the last post and already for this post.

Regards,

Antoon

[Mahesh]

@antoon: Please add the following CSS:

.footer-item ul {
    margin-left: 0;
}

Regards,
Mahesh

[Antoon]

@mahesh:

It works!!!!

Thanks

Antoon

[Mahesh]

@antoon: Glad to know your issue is resolved. Have a nice day!

Regards,
Mahesh

[Author]

Posts