WebsiteBaker Community Forum
WebsiteBaker Support (2.13.x) => General Help & Support => Topic started by: applepie on July 24, 2023, 02:08:24 AM
-
Hi I am looking for someone who can help customising templates.
-
What exactly are you looking for in terms of assistance?
-
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.
-
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.
-
Hello, did you get my message? Some CSS issues I am trying to work out.
Thanks
-
Hello, send me the link and what you need to do.
But for CSS issues you should search solutions on google.
-
Hi, I have sent you an email. Did you get it?
Thanks
-
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,
........; 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 (http://www.DeepL.com/Translator) (free version)
-
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.
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 (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 (https://www.derekprince.com/en-gb)
Thank you.
-
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
-
Do we understand this correctly
The footer of Revero should look like the footer of the page?
https://www.derekprince.com/en-gb (https://www.derekprince.com/en-gb)
-
Yes, that is correct. Black footer with the logo on right follow by sublinks and social media icons.
Thank you.
-
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)
-
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.
-
Here is a quick adjustment of the color and height. Is this the direction it should go?
https://wbneu.umojasingers.de/ (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.
<!--==========================
Footer
============================-->
<footer id="footer">
<div class="container">
.
.
.
.
</footer><!-- #footer -->
the logo was inserted
<!--==========================
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
#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;
}
-
Here is a quick adjustment of the color and height. Is this the direction it should go?
https://wbneu.umojasingers.de/ (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.
<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;
}
-
I am also just a beginner.
Hopefully someone else can help you out.
-
We need a link to your real installation.
Nobody knows what you have done, but if see it we can better help.
-
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?
-
WebsiteBaker has its own tool for editing CSS and php files.
Download this tool from here (https://addon.WebsiteBaker.org/pages/en/browse-add-ons.php?download=02D8BA1)
The tool Addon File Editor can then be accessed in the backend under Admin Tools.
-
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:
<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.
<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 (https://wbneu.umojasingers.de/)
How the icons and the menu look then is changed in the css file
Translated with www.DeepL.com/Translator (http://www.DeepL.com/Translator) (free version)
-
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.
-
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
-
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?
-
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.
-
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
It is helpful to know there is similar template available. I havent seen this before. Thank you.
-
Then we are curious about the final result.
If you like, you can post us the link of the finished work here.
-
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
I installed this template from the template page and it is completely different from yours. How do I get a copy shown here?
Thanks
-
As I still have the template Revero and not the template Birdoj installed on my test site.
Maybe it's time to hire a professional to do the "redesign", yes that will cost a little money, but it will be done in 1-2 weeks incl. consultation with you.
This is the right place in the forum (https://forum.WebsiteBaker.org/index.php/topic,32082.0.html)