New Theme Styling missing

Everything to do with Joomla! 5.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 667
Joined: Fri Oct 02, 2015 3:28 pm

New Theme Styling missing

Post by JurajB » Sun Apr 21, 2024 10:45 am

Hello.
I have a new own theme.
I have kunena there and its absolutely missing formatting.
What to do.

User avatar
AMurray
Joomla! Exemplar
Joomla! Exemplar
Posts: 9817
Joined: Sat Feb 13, 2010 7:35 am
Location: Australia

Re: New Theme Styling missing

Post by AMurray » Sun Apr 21, 2024 9:25 pm

Without further information such as a link to the problem page(s) and also what template ("theme" is a Wordpress term) you're using we can't assist.

I would put the question to both the Kunena and template developer teams.

But we need to see the pages that are showing the problem first.
Regards - A Murray
General Support Moderator

User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 667
Joined: Fri Oct 02, 2015 3:28 pm

Re: New Theme Styling missing

Post by JurajB » Mon Apr 22, 2024 10:04 am

As I said I have my own template..
Its blank absolutelly without loading any joomla scripts.
What scripts and styling do I need to include to keep the extensions working, I mean probably bootstrap and some other css.
I cant show you the page because its under development and constantly changing.
Thanks for help.

User avatar
AMurray
Joomla! Exemplar
Joomla! Exemplar
Posts: 9817
Joined: Sat Feb 13, 2010 7:35 am
Location: Australia

Re: New Theme Styling missing

Post by AMurray » Tue Apr 23, 2024 12:12 am

I'm not a developer so my answer is based on my joomla use experience.

I suppose (and just a guess) you would have to at least load the Bootstrap 5 through the CDN link (if not already there listed in the <head> section of your template index.php), such as:

Code: Select all

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
Similarly, perhaps you also need to load other aspects like JQuery or Font Awesome (if using them).

Suggest you take a look also at Cassioepeia's code (as an example) and see if there are any other scripts that it uses, which may be relevant to the whole of Joomla no matter what template you're using, including JQuery or Font Awesome etc.
Regards - A Murray
General Support Moderator

User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 667
Joined: Fri Oct 02, 2015 3:28 pm

Re: New Theme Styling missing

Post by JurajB » Tue Apr 23, 2024 4:55 am

Thank you!

User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 667
Joined: Fri Oct 02, 2015 3:28 pm

Re: New Theme Styling missing

Post by JurajB » Tue Apr 23, 2024 7:50 am

https://givingames.com/index.php
How to get rid of white background? I want background to be transparent not overriding my default color background.

User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 667
Joined: Fri Oct 02, 2015 3:28 pm

Re: New Theme Styling missing

Post by JurajB » Tue Apr 23, 2024 10:33 am

Anybody?

gws
Joomla! Champion
Joomla! Champion
Posts: 5992
Joined: Tue Aug 23, 2005 1:56 pm
Location: South coast, UK
Contact:

Re: New Theme Styling missing

Post by gws » Tue Apr 23, 2024 10:52 am

Change the colour here;
body {
margin: 0;
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-font-size);
font-weight: var(--bs-body-font-weight);
line-height: var(--bs-body-line-height);
color: var(--bs-body-color);
text-align: var(--bs-body-text-align);
background-color: var(--bs-body-bg);------------------------------->this one.
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;

User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 667
Joined: Fri Oct 02, 2015 3:28 pm

Re: New Theme Styling missing

Post by JurajB » Tue Apr 23, 2024 10:58 am

In which file?
Thank you very much!
edit: there is no file with such parameter

gws
Joomla! Champion
Joomla! Champion
Posts: 5992
Joined: Tue Aug 23, 2005 1:56 pm
Location: South coast, UK
Contact:

Re: New Theme Styling missing

Post by gws » Tue Apr 23, 2024 11:36 am

edit: there is no file with such parameter
There certainly is when I use the browser inspect.

User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 667
Joined: Fri Oct 02, 2015 3:28 pm

Re: New Theme Styling missing

Post by JurajB » Tue Apr 23, 2024 1:03 pm

can somebody tell which file I need to edit?
edit: I have edited numerous parameters but no use, and no exact match.
Please...

Mr. Wimpy
Joomla! Explorer
Joomla! Explorer
Posts: 461
Joined: Fri Dec 02, 2005 10:46 am
Location: The Netherlands

Re: New Theme Styling missing

Post by Mr. Wimpy » Tue Apr 23, 2024 3:06 pm

To remove the background-color from body, add the following to your own CSS:

Code: Select all

body { background-color: transparent; }
* Are you using Cassiopeia?
Create a child so you don't loose your edits when updating Joomla...
You can then also add CSS to your user.css file.

User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 667
Joined: Fri Oct 02, 2015 3:28 pm

Re: New Theme Styling missing

Post by JurajB » Tue Apr 23, 2024 3:47 pm

Yes, I will definetly create a child, thanks for that (>'.')--v
I have html set to gradient color and its working, but body { background-color: transparent; } is no use. As you see the components still throws white color and its not nessessity.

User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 667
Joined: Fri Oct 02, 2015 3:28 pm

Re: New Theme Styling missing

Post by JurajB » Tue Apr 23, 2024 4:17 pm

Anybody? Looks I have work to do to help joomla documentation these things... :") Who will join and discuss with me?
Thanks!

Mr. Wimpy
Joomla! Explorer
Joomla! Explorer
Posts: 461
Joined: Fri Dec 02, 2005 10:46 am
Location: The Netherlands

Re: New Theme Styling missing

Post by Mr. Wimpy » Tue Apr 23, 2024 4:19 pm

but body { background-color: transparent; } is no use.
Where did you put it? I don't see it in devtools...

User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 667
Joined: Fri Oct 02, 2015 3:28 pm

Re: New Theme Styling missing

Post by JurajB » Tue Apr 23, 2024 4:41 pm

<style>
@font-face {
font-family: 'Heavitas'; /*a name to be used later*/
src: url('https://givingames.com/fonts/Heavitas.ttf'); /*URL to font*/
}

body { background: transparent; background-color: transparent; }

.htmlstyle {
background: linear-gradient(0deg, #AC0943 0%, #65366B 50%, #eb8f34 100%);
margin: 0;
color: #000000;
text-shadow: 0px 0px 2px #FFFF99;
text-indent: 20px;
tab-size: 2;
line-height: 1.5;
letter-spacing: 1px;
font-family: Heavitas;
width: 100%;
height: 100%;
margin: 0;
padding: 10px;
display:block;
box-sizing: border-box;
}
</style>

Still white color...

User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 667
Joined: Fri Oct 02, 2015 3:28 pm

Re: New Theme Styling missing

Post by JurajB » Tue Apr 23, 2024 4:48 pm

I have also tried divs background color to transparent, but its no use.

User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 667
Joined: Fri Oct 02, 2015 3:28 pm

Re: New Theme Styling missing

Post by JurajB » Wed Apr 24, 2024 7:00 am

Guys how so this cant be solved?
Look at here:
https://givingames.com/
Still there is the white background.

Mr. Wimpy
Joomla! Explorer
Joomla! Explorer
Posts: 461
Joined: Fri Dec 02, 2005 10:46 am
Location: The Netherlands

Re: New Theme Styling missing

Post by Mr. Wimpy » Wed Apr 24, 2024 7:54 am

It's the order of styles...

Your custom CSS is followed by this file that adds the white background thus overriding your own background-color:

Code: Select all

https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
Make sure your custom CSS loads after this (or any) style.

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1667
Joined: Tue Jun 30, 2020 12:17 pm

Re: New Theme Styling missing

Post by Pavel-ww » Wed Apr 24, 2024 8:16 am

JurajB wrote:
Wed Apr 24, 2024 7:00 am
Guys how so this cant be solved?
Look at here:
https://givingames.com/
Still there is the white background.
Hi.

It is not clear why are you trying to make your own template if you have no skills and understanding?

Why are you loading this from a third -party server? Firstly, this is fundamentally not the right approach. Secondly, in Joomla it is on board.
1.jpg
--

With the advent of the Cassiopea Child Template option, the creation of your own templates from scratch has lost all meaning. Especially if you do not have sufficient skills.

I would suggest you do the following:
1) Switch to Cassiopea
2) Remove your template completely as it is useless
3) Create Cassiopea child template
4) Copy index.php from Cassiopea parent to Cassiopea child and edit everything you need there, with the exception of part that inside <head>...</head>



Thus, you will receive all the necessary scripts and styles in the right order, including Bootstrap.

Further, you can copy from Cassiopea parent to Cassiopea child other files as necessary and edit them.

When you do all this, if the problem remains, come back here. Then we can give you the right code and indicate in which file to place it.
You do not have the required permissions to view the files attached to this post.

User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 667
Joined: Fri Oct 02, 2015 3:28 pm

Re: New Theme Styling missing

Post by JurajB » Wed Apr 24, 2024 1:08 pm

I have created child template... removed head stuff... now its missing formating when you click for example discuss and whats more, the white color is still there
Dont you need some team to write about joomla code so you have bigger documentation base? I think there is lot of space for this.

gws
Joomla! Champion
Joomla! Champion
Posts: 5992
Joined: Tue Aug 23, 2005 1:56 pm
Location: South coast, UK
Contact:

Re: New Theme Styling missing

Post by gws » Wed Apr 24, 2024 1:45 pm

removed head stuff.
No you Haven't =>div {
background: transparent; background-color: transparent;
}

body { background: transparent; background-color: transparent; }
.htmlstyle {
background: linear-gradient(0deg, #AC0943 0%, #65366B 50%, #eb8f34 100%);
margin: 0;
color: #000000;
text-shadow: 0px 0px 2px #FFFF99;
text-indent: 20px;
tab-size: 2;
line-height: 1.5;
letter-spacing: 1px;
font-family: Heavitas;
width: 100%;
height: 100%;
margin: 0;
padding: 10px;
display:block;
box-sizing: border-box;
}
Errors => <anonymous> https://givingames.com/index.php/discussions:1011
discussions:1011:12
Uncaught TypeError: ed.require is not a function
<anonymous> https://givingames.com/index.php/discussions:1193
discussions:1193:21
Uncaught TypeError: ed.require is not a function
<anonymous> https://givingames.com/index.php/discussions:

Mr. Wimpy
Joomla! Explorer
Joomla! Explorer
Posts: 461
Joined: Fri Dec 02, 2005 10:46 am
Location: The Netherlands

Re: New Theme Styling missing

Post by Mr. Wimpy » Wed Apr 24, 2024 1:52 pm

Look at your code in devtools now.
You can clearly see the issue that I pointed to: The bootstrap CSS overrides your own CSS.
You need to change the order of your CSS.

Move your custom CSS after the bootstrap CSS.
Bootstrap has the white background-color for body, and because it is loaded after your own CSS it overrides your background-color

And please add back the head stuff
Else Joomla won't load the necessary assets.

Mr. Wimpy
Joomla! Explorer
Joomla! Explorer
Posts: 461
Joined: Fri Dec 02, 2005 10:46 am
Location: The Netherlands

Re: New Theme Styling missing

Post by Mr. Wimpy » Wed Apr 24, 2024 2:35 pm

To get you started:

1. Copy the index.php file from Cassiopeia into your Child

2. To add bootstrap css: Within the php part add

Code: Select all

$wa->useStyle('bootstrap.css');
3. To add your custom CSS: Within the php part add

Code: Select all

$wa->addInlineStyle('
   /* Here's where you add your custom inline styles */
   /* Though considder using the user.css file */
   @font-face { (...) }
   body { background-color: transparent; }
   .htmlstyle { (...) }
   /* Considder cleaning up .htmlstyle { }: you have double properties and some properties are not necessary */ 
');
4. To add bootstrap js: Within the php part, only add the bootstrap js you need

Code: Select all

$wa->useScript('bootstrap.abc');
/* Replace abc with the filename (without extension) located in /media/vendor/bootstrap/js */
/* i.e. $wa->useScript('bootstrap.alert'); adds the alert.min.js file*/

User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 667
Joined: Fri Oct 02, 2015 3:28 pm

Re: New Theme Styling missing

Post by JurajB » Wed Apr 24, 2024 2:48 pm

1. what file besides index.php do I need to copy? some css?
2. can I add my own bootstrap I mean 5.3.3 because I think Joomla has 5.3.2
3. styling is not working and background is still white :) ...

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1667
Joined: Tue Jun 30, 2020 12:17 pm

Re: New Theme Styling missing

Post by Pavel-ww » Wed Apr 24, 2024 3:09 pm

JurajB wrote:
Wed Apr 24, 2024 2:48 pm
1. what file besides index.php do I need to copy? some css?
2. can I add my own bootstrap I mean 5.3.3 because I think Joomla has 5.3.2
3. styling is not working and background is still white :) ...
1) You can create user.css in /media/templates/site/cassiopeia_CHILD/css/ for your code if you returned back <head></head> part. As for other files - copy only those files that you want to edit. There are no other recommendations.

2) What is the point of chasing the latest version of Bootstrap? This will receive an automatic update in any case with Joomla in future.

3) Default <head></head> part and user.css will solve this problem. You do not need to connect anything additionally.
Last edited by Pavel-ww on Wed Apr 24, 2024 3:11 pm, edited 1 time in total.

User avatar
JurajB
Joomla! Guru
Joomla! Guru
Posts: 667
Joined: Fri Oct 02, 2015 3:28 pm

Re: New Theme Styling missing

Post by JurajB » Wed Apr 24, 2024 3:09 pm

I forgot the ordering...
https://givingames.com/index.php/blog
Its working! Thank you guys!
:)


Post Reply

Return to “Templates for Joomla! 5.x”