Basic WebDesign - Tutorials

Details

Written by: Bjørn Ove Bremnes

Parent Category: Tips & Tricks

Category: Basic WebDesign - Tutorials

Published: 18 January 2021

The dark mode is the new Black, and it keeps your eyes from getting light exhausting. And it also looks great in the browser. The Dark mode is not native in either Joomla 3 or Joomla 4 (as of my knowledge). But there is a solution if you don’t want to use a plugin for your browser. You can simply override the CSS with a custom.css file in the backend of Joomla. By default this is built into Joomla Core, you only need to add the file. Read how to do this here. 

If you want to protect your eyes against constraining, you may use dark mode as an override in the Joomla Isis template at the Backend.

Nowadays, you can get plugins for the browser that makes the browser to apply dark mode by default. However, this corrupts the look of your Backend. One of these is “Dark Mode for Google Chrome” I find this to be handy on several sites, but not on the Backend for Isis template. 

There are some different ways to do this, you may only want the browser plugin override, but a better way to do this is to apply a CSS override in the “custom.css” file in Administrator template Isis.

How to apply the override?

To apply this override, you need to go into your Isis template. You can follow this tutorial for adding custom CSS to your Backend template.

Thanks to Alexsey, we will all be able to use this override from his GitHub page. 

There may be other solutions or overrides to apply, you can add an extension to do this in the JED, but I always find that Core works the best for these additions, It's also quite easy to apply. 

Details

Written by: Bjørn Ove Bremnes

Parent Category: Tips & Tricks

Category: Basic WebDesign - Tutorials

Published: 29 December 2020

In Joomla, it’s possible to use CSS more effectively than most people realize. You can, if wanted personalize each page just by adding a CSS class to the menu link.

Joomla offers in most modern templates the ability to target either the title or the page’s alias. It makes customized CSS very easy, using the page class as a master class for each page’s underlying divs or text-styles.

If the template doesn’t offer this, you can use a feature built into Joomla Core. This feature lets you add an extra class to the page when using the menu;  by adding a ¨"Page Class" in the “Page Display” tab when you create the menu link.

Let me give an example. If you want to have another look at the Heading-Tag and add more space to your paragraphs and add another color to that particular page’s background. First, create the article. Go to Content -> Article -> Add New Article

Create the content of your choice. I use JCE Editor, but the principle is the same in all editors. When you are finished writing, save the article. From there, you head over to The Menu -> Main Menu (Or the menu of your choice) -> Add New Menu Item. Create the menu title and add a link to the article.

When you now go to the tab “Page Display,” add a class in the “Page Class” (remember to put a space before the name, if not, it could end up with the class “Item-page[your class]".

Now in the CSS, if you target the class with nested subclasses, you can style this specific page. Let’s say the page has the class “my-class”. In the CSS, this will be:

.my-class {
background: #000000;
}
.my-class h1 {
font-size: 2.5rem;
}
.my-class p {
margin: 2rem 0;
}

Note that putting the background color on the “my-class” will impact the whole page. To narrow it down to only be under the content, you can do:

.my-class div[itemprop=\'articleBody\'] {
background: #000000;
}

Details

Written by: Bjørn Ove Bremnes

Parent Category: Tips & Tricks

Category: Basic WebDesign - Tutorials

Published: 30 October 2020

Is it possible to make content sliders using pure CSS & HTML only? - Read through and find out more. I will show you some smart tricks that make an awesome reusable slider using only HTMl & CSS.

Have you ever written a long article with mutch specifications inside? - These articles have their way to become very long and hard to read. There is an excellent way to intrigue your users to read more using content sliders.

The trick is to use HTML-tag <details> and <summary> in combine this will trigger the HTML to create a slider. It’s easy and fast to set up, and I will show you how to do this in easy steps.

Step 1: Create the HTML outlay

This is what we will make:

To ensure reusable code, I have decided to wrap the code in a <div>. This way, we will ensure that you can maintain the same style for every slider that contains the outer <div>-class.

Now let’s get into it!

The first thing to do is to set the outer <div>. You can achieve this by saying:

<div class=”slider”> …… </div>

The content will get the outer class of .slider, which you can be given styles by using CSS.

Step 2-1: Create the slider HTML

Now its time to create the actual slider inside the <div class=”slider”>, this is done by defining the slide using the HTML-tag <details>. The syntax for the complete slider will be:

<details>
<summary>{title of the slider}</summary>
<p>Content<p>
</details>

The summary tag contains the title and stays on top when the slider is collapsed and folded out.

Step 2-2 Decide if you like to style the content inside the slider using a <div>-class.

This way, you can have multiple sliders on one page and specify each slider’s <div> to be unique. The syntax can now look as followed:

<details>
<summary>{title of the slider}</summary>
<div class=”slider-content”>
<h1>Welcomme to the specifications</h1>
<p>Hello to you!</p>
</details>

You can use any HTML inside the slider; this way, you can target the contents with plain CSS

The slider out of the box looks very straightforward. To edit this, you can use CSS to override the look if you like.

Step 3 Style slider with CSS

It is relatively easy to manipulate the look of the slider with CSS. IN this example, we will use:

.slider {
	padding: 2em;
	margin: 0;
	font-family: Arial, sans-serif;
}
.slider summary {
	padding: 1em;
	background: #ffda05;
	margin-bottom: 1em;
	cursor: pointer;
	outline: none;
	border-radius: 0.3em;
	font-weight: bold;
	transition: background 0.3s;
}

 .slider summary:hover {
	background: #ffe036;
}
.slider details[open] summary ~ * {
	animation: sweep 0.5s ease-in-out;
}
@keyframes sweep {
	from 
 {
		opacity: 0;
		margin-top: -10px;
	}
	to {
		opacity: 1;
		margin-top: 0;
	}
}