New Theme Styling missing

JurajB · 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.

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.

JurajB · 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.

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.

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

Thank you!

JurajB · 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.

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

Anybody?

gws · 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;

JurajB · 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 · 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.

JurajB · 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 · 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.

JurajB · 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.

JurajB · 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 · 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...

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

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

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

JurajB · 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 · 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.

Pavel-ww · 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.

JurajB · 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 · 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

12
Uncaught TypeError: ed.require is not a function
<anonymous> https://givingames.com/index.php/discussions:1193
discussions

21
Uncaught TypeError: ed.require is not a function
<anonymous> https://givingames.com/index.php/discussions:

Mr. Wimpy · 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 · 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*/

JurajB · 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

...

Pavel-ww · 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.

JurajB · 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!

The Joomla! Forum™

New Theme Styling missing

New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing

Re: New Theme Styling missing