Author Topic: Template customisation (Read 6331 times)

applepie · « **on:** July 24, 2023, 02:08:24 AM »

Hi I am looking for someone who can help customising templates.

hgs · « **Reply #1 on:** July 24, 2023, 07:53:20 AM »

What exactly are you looking for in terms of assistance?

applepie · « **Reply #2 on:** July 24, 2023, 10:35:34 PM »

Hello, I need help to customise a template on WB template library. It needs some samll adjustments to one of the template. Can someone help me with that please?
Thank you.

hgs · « **Reply #3 on:** July 25, 2023, 07:49:13 AM »

Hello applepie
I have taken the liberty to merge the two topics.

Which template is it ?
What exactly should be customized ?
Maybe I can help.

applepie · « **Reply #4 on:** July 27, 2023, 01:39:44 PM »

Hello, did you get my message? Some CSS issues I am trying to work out.
Thanks

crnogorac081 · « **Reply #5 on:** July 27, 2023, 04:30:06 PM »

Hello, send me the link and what you need to do.

But for CSS issues you should search solutions on google.

applepie · « **Reply #6 on:** July 28, 2023, 12:37:53 AM »

Hi, I have sent you an email. Did you get it?
Thanks

hgs · « **Reply #7 on:** July 28, 2023, 07:50:18 AM »

Sorry, I really missed that email.
A PM would have been the faster way.

But a post of the website and the question here would have been the fastest way, because then many can help.

And now to your question about the black background:

This formatting is controlled in this file.
derekprince-en-gb.3b83e927d.min.css
in the line number 1 look for this entry,

Code: [Select]

........; container-footer-2 { max-width: 100%; background-color: #c22e2e;......unfortunately all fromatings are written in ZN1, that is not so nice to "read" for us humans, but should bring a few milliseconds time saving when calling.

this entry at background-color colors the footer for example red.

With the key F12 you come into the development console of your Webbroser, there you can find out the areas with right-click and examine fast.

Hope this was explained correctly, please add or correct by the "professionals" if it is necessary.

Translated with www.DeepL.com/Translator (free version)

hgs · « **Reply #8 on:** July 28, 2023, 08:28:41 AM »

I think I completely misunderstood your question.
My bumbling explanation would change the black in the footer to red.

I post your email here, then the experts can help you for sure.

Quote

Hi, thanks for your reply. I couldn't find my post and looked everywhere for it. Easier to search with direct message which I am doing now.

I would like to use this template but a different footer.
https://template.WebsiteBaker.org/pages/frontend-templates/demo-jbd.php?template=revero

I tried customising it but my lacked of expereince in CSS didn't help much.

What I would like to merge is the black footer on this website:
https://www.derekprince.com/en-gb

Thank you.

applepie · « **Reply #9 on:** July 28, 2023, 09:17:08 AM »

Hi, changing the colour and size is not a problem. I am trying to merge the two. Revero layout with the footer shown on the second site.
Thanks

hgs · « **Reply #10 on:** July 28, 2023, 10:00:17 AM »

Do we understand this correctly
The footer of Revero should look like the footer of the page?

https://www.derekprince.com/en-gb

applepie · « **Reply #11 on:** July 28, 2023, 10:10:42 AM »

Yes, that is correct. Black footer with the logo on right follow by sublinks and social media icons.
Thank you.

sternchen8875 · « **Reply #12 on:** July 28, 2023, 10:34:07 AM »

Quote from: hgs on July 28, 2023, 07:50:18 AM

unfortunately all fromatings are written in ZN1, that is not so nice to "read" for us humans, but should bring a few milliseconds time saving when calling.

derekprince-en-gb.3b83e927d.min.css is a server-side-compressed CSS-File.
To decompress/unminified this file, download it, rename it to name.min.css and use a online-tool like https://unminify.com/ to decompress this file. Result is a simple CSS-File, easy to read and handle.
if you finish with your work, use another online-tool, to build a minified / compressed file (see https://www.toptal.com/developers/cssminifier)

applepie · « **Reply #13 on:** July 28, 2023, 10:42:35 AM »

Thanks, I will give it a go. At the mean time if anyone come up with the layout before I do, please kindly share.
Thank you all.

hgs · « **Reply #14 on:** July 28, 2023, 11:23:29 AM »

Here is a quick adjustment of the color and height. Is this the direction it should go?
https://wbneu.umojasingers.de/
The changes are searched with the developer tool of the browser (F12) and then changed in the template at the right places.

In the file
index.php
the following adjustments were made.

Code: [Select]

  <!--==========================
    Footer
  ============================-->
  <footer id="footer">
    <div class="container">
.
.
.
.
  </footer><!-- #footer -->

the logo was inserted

Code: [Select]

 <!--==========================
    Footer
  ============================-->
  <footer id="footer">
    <div class="container">
<img src="https://assets-global.website-files.com/60ef8ad6a624ec477fda811d/6101f274c87a2f247062b4ca_logo_derek_prince_uk_01_white.svg" loading="lazy" alt="White Derek Prince Ministries UK logo" class="image-logo-1" width="190" height="41">
.
.
.
  </footer><!-- #footer -->

In the file
style.css

the following changes have been made.
/* Instructions*/ these are the original values

zn 680

Code: [Select]

#footer {
  /*background: #f2f5f8;
  padding: 0 0 30px 0;*/
  font-size: 14px;
  background: #000;
  max-width: 100%;
  background-color: #111;
  padding-top: 60px;
  padding-bottom: 200px;
}
.
.
.
#footer .credits {
  text-align: center;
  font-size: 13px;
  /*color: #555;*/
  color: #fff;
}

applepie · « **Reply #15 on:** July 29, 2023, 05:17:41 AM »

Quote from: hgs on July 28, 2023, 11:23:29 AM

Here is a quick adjustment of the color and height. Is this the direction it should go?
https://wbneu.umojasingers.de/
The changes are searched with the developer tool of the browser (F12) and then changed in the template at the right places.

Yes, I got this far. I am having trouble adding the sublinks and the social media icons. The icons kept pushing to the next line. Not sure if I got it right.

Code: [Select]

<div class="columns"></div>
<div class="column"></div>
<div class="column2"></div>

.columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 10px;
    width: 100%;
}

.column {
    column-width: auto;
    float: right;
}

.column2 {
    column-width: auto;
    float: left;
}

hgs · « **Reply #16 on:** July 29, 2023, 09:42:51 AM »

I am also just a beginner.

Hopefully someone else can help you out.

dbs · « **Reply #17 on:** July 29, 2023, 09:58:11 AM »

We need a link to your real installation.
Nobody knows what you have done, but if see it we can better help.

applepie · « **Reply #18 on:** July 31, 2023, 01:15:12 AM »

Quote from: dbs on July 29, 2023, 09:58:11 AM

We need a link to your real installation.

I am working from harddrive/off line. I can see you are an expert from your website. I simply try to combine two templates. I am only CSS beginner. I am trying to work out the CSS for the footer that looks like the image attached. I know the CSS I did above is not right. That is the limit of my knowledge. Is the a CSS editor avaialble online?

hgs · « **Reply #19 on:** July 31, 2023, 07:56:15 AM »

WebsiteBaker has its own tool for editing CSS and php files.
Download this tool from here

The tool Addon File Editor can then be accessed in the backend under Admin Tools.

hgs · « **Reply #20 on:** July 31, 2023, 08:24:58 AM »

As a beginner, I simply looked at the code sections in index.php.

The template REVERO has the links to social media in the header.

The section looks like this:

Code: [Select]

     <div class="social-links float-right">
        <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
        <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
        <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
        <a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a>
        <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
      </div>

swap the # with the correct URL's to activate the link.

I simply copied this section in the footer area.

Code: [Select]

  <footer id="footer">
    <div class="container">
<img src="https://assets-global.website-files.com/60ef8ad6a624ec477fda811d/6101f274c87a2f247062b4ca_logo_derek_prince_uk_01_white.svg" loading="lazy" alt="White Derek Prince Ministries UK logo" class="image-logo-1" width="190" height="41">
        
            <div class="social-links float-right">
        <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
        <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
        <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
        <a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a>
        <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
      </div>

The menu at WebsiteBaker is realised with "ShowMenu2".
I have also copied the code from the header area to the footer area.

You can see the result on my Testsite

How the icons and the menu look then is changed in the css file

Translated with www.DeepL.com/Translator (free version)

applepie · « **Reply #21 on:** July 31, 2023, 08:58:13 PM »

Thanks, I managed to get that far. Looking at it closer I realised it is two colums, ie, logo on float left left and the links on float right.

hgs · « **Reply #22 on:** August 01, 2023, 11:00:36 AM »

Currently the Footer area is without subdivision.

Where what is placed there is pure css statement.

How to divide a the footer into several areas ( left area, middle , right area) is beyond my beginner knowledge.

Hope a professional can help there

dbs · « **Reply #23 on:** August 01, 2023, 11:20:51 AM »

On our template site we have several templates with the wished footers (e.g. the 3rd, 4th, 5th template).
The 3rd is https://template.WebsiteBaker.org/pages/frontend-templates/demo-jbd.php?template=birdoj

What you need from there is the html of the footer + the css styles of the used css classes.
Helps this?

hgs · « **Reply #24 on:** August 01, 2023, 01:21:44 PM »

Thanks for the link, even a beginner can check how it was solved, or use this template.
The language switcher in the footer, like on the original site, will also be a challenge.

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

Author Topic: Template customisation (Read 6331 times)