<
CSS has from the age of the Internet been a part of doing websites. It is an easy but useful way to design an article. There are several ways to write CSS in Joomla, you can use an external file to store all CSS codes in, you can use an extension to include the code, or you can write CSS directly in the content. In this article, I will give some look into how I do it.
In this article, I will show you three different ways to use CSS in an article. The easiest thing is to use an extension to add CSS to the article. There are several extensions in the JED (Joomla Extensions Directory) that gives this opportunity. One of the popular is Sourcerer from Regular Labs. But its also possible to do in-line CSS coding in every article, but this can be very ineffective in large articles, the third and maybe most used is to put the CSS codes into the template as eighter an external file or in the CSS capabilities of the template itself. In modern template-Framework is this common, the disadvantage of this is that you always need access to the backend to add extra CSS in your site.
W3C CSS verified: W3c.org is setting the standards for CSS
If you prefer to do the CSS coding inline as you write an article, you must bear in mind that you will NOT be able to reuse the CSS on any other articles and you must repeat the same thing for every content with the same code. This could look like this:
<a href="/home" style="background-color:#ff0000;color:#ffffff;">Home</a>
This will output: Home
If you use an external file as a CSS source, it is normally located under the css folder in your template directory. And its usually called custom.css or user.css, the downside with this is that you need access to either FTP or bee logged in to the backend as a Super Administrator.
If you want to use an extension to insert CSS in an article, you can not reuse the CSS codes without having it in every article that contains the same style.
A combination of the option 2 and 3, will give the easiest result and you can standardize some of the CSS styles in a file and add styles in that applies to certain articles at one addon at the end of the written article.
- LET ME KNOW IF YOU KNOW ANY OTHER WAYS TO DO THIS IN THE COMMENTS BELOW -
Have you ever made a website with Joomla and you are getting the title "Home" with a large h1-header-tag? You can either hide the tag completely on all content, or you must specify it to be hidden on every page/article you make. There is a third and maybe smarter way to do this.
When you add a menu item in Joomla it displays the content with a h1 header-tag, this heading is coming from the Menu title. And is easy to hide using CSS styling. There are however two different ways to use CSS for this. The first hide it completely on every page, option two is to include a CSS class tag to the menu link.
If you don't mind hiding the title on every page, you can set "Show Page Heading" to "No". This can be overridden in every menu link you add, but if you set it in "Option" it will be set as default.
If you want to hide the Page-title only on certain pages you will need to add a CSS class tag to the menu link. This is done in the Tab "Page Display" under "Page Class". NOTE! Remember to add space before you add the tag of your choosing, we use the class " header-hide" in the example. You can than add the following tag in your main CSS file
The <h1> tag is the title from the men you link created.
/* Hide Page Header */
.header-hide .page-header h1 {
display:none;
}
If you want to hide both the Menu title and the article title you can use this code.
/* Hide Page Header */
.header-hide .page-header {
display:none;
}
- LET ME KNOW IF YOU KNOW ANY OTHER WAYS TO DO THIS IN THE COMMENTS BELOW -
Have you ever been frustrated by styling a page for then realize that every image contains a white line underneath, I saw this trick on Youtube and tried it with Joomla. The result was that line disappeared. This issue resides from the early internet when we've to use inline images in the text.
IN INternerts early days it was very common to use images inside a text, back then there was eighter Desktops or Laptops that were used as surf method. The internet has evolved since those days, and we now use images on top of the text. Therefore it's very useful to hide the line that displays under the image. Here are two examples that show this:
Earlier:
This was how images displayed shown on a website without adding the new CSS property. The border is showing whitespace.
NOW:
The trick is to set the image to display block.
img {
display: block;
}Thanks to Kevin Powell and this video on Youtube, that showed this.
- LET ME KNOW IF YOU KNOW ANY OTHER WAYS TO DO THIS IN THE COMMENTS BELOW -
Sponsored link
