QueHow

A How-To and wiki Blog

  • Operating System
    • Windows
      • Windows 10
      • Windows 7
    • Linux
  • Software
    • Application Software
    • Microsoft Office
      • Outlook
      • Word
      • PowerPoint
  • Internet
    • Browsers
      • Mozilla Firefox
      • Google Chrome
    • CMS
    • Tips & Tricks
  • Website
    • ecommerce
    • Google
    • Social Networking
    • General Websites
  • Mobile
  • Email
    • Gmail
  • Wiki

How to Edit Template CSS in Joomla 3.x

By Neha T Leave a Comment

The CSS is an acronym for Cascading Style Sheets. It represents the way in which the HTML content will appear. The motive behind creating the css is to treat the document data and its presentation separately, such that, the flexibility and the accessibility increases.

Creating a separate css file, would help in sharing the similar formatting in various html pages, that may result in the reduced complexity and the redundancy.

There are basically three types of css :

  • Inline: The inline style can be used for the individual css which will not be used repeatedly in your webpage as it is applied to the specific tag, explicitly.
  • Internal: This style sheet can be implemented to design a whole webpage by including it in the header file.
  • External: This style sheet is basically a file with an extension “.css” which is linked to the html pages and a single change in that file would reflect the same change in all the pages or in the website associated with it. This style sheet results in the reduced time, less complexity and the less occupied space.

Sometimes you need to edit the css embedded in your template to change the appearance of your website. This tutorial will guide you how to edit template css in Joomla 3.x by following the simple steps as explained below.

Steps to Edit Template CSS in Joomla 3.x

Step 1: Once you are logged in as an Administrator, On the dashboard, click on “Extensions” option and then select “Template Manager” from the drop down list.

how to edit template css in joomla-step1

Step 2: Click on the “Template” that you want to edit, under the “Template section” as shown in the figure.

Keep in mind, not to click on the template name under the style section, if you do so, then you”ll not be able to edit the template files instead, you will be only able to edit the style, such as heading, layout settings, etc.

how to edit template css in joomla-step2

Step 3: Now go to the css folder, once you click on that, many css files will be displayed, select the one you want to modify.

how to edit template css in joomla-step3
Step 4: I have clicked on “print.css”, you will find the code associated with the file , at the right side of it. Here you can see that,“text align” is set to “center” as highlighted in the figure shown below.

You can change the text alignment, margin, background and other attributes according to their availability in your template.

how to edit template css in joomla-step4

Step 5: As, I described above, you can change any of the attributes, I have changed the text alignment to “justify” from “center” as shown below.

Once you are done with the changes, click on “Save &  Close” button.

how to edit template css in joomla-step5

Step 6: Once the changes have been made,  you”ll see the message “File successfully saved”.

how to edit template css in joomla-step6

You Might Also Like:

How to Edit a Template in Joomla 3.x How to Edit the Copyright Footer in Joomla in 3.x How to Install a New Template in Joomla 3.x How to edit Signature in Outlook 2010 How to View Module Positions in Joomla 3.x How to Position a Module in Joomla 3.x How to Change a File Extension in Windows 7 How to create a zip file using terminal in Ubuntu 14.04

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Most Viewed

  • How to Install and Use TELNET in Ubuntu
  • How to install Hindi fonts in MS Word
  • How to Change a File Extension in Windows 10?
  • How to create a flipkart account in 3 simple steps
  • How to Change Monitor Refresh Rate in Windows 10?
  • How to install IIS on Windows 10
  • How to Insert Clickable Checkbox in MS Word 2016?
  • How to Set Auto Reply in Outlook 2016?
  • How to Login as Administrator in Windows 10?
  • How to Check RAM Size and System Type in Windows 10?

Recent Additions

  • How to Download Private Instagram Stories?
  • How to Slow Motion a Video in PowerDirector?
  • How to Check Who Unfollow You On Instagram?
  • How to Use Boomerang on Instagram?
  • How to Edit Video in PowerDirector?
  • How to Mute Someone’s Stories or Posts on Instagram?
  • How to Hide and Unhide Posts on Instagram?
  • How to Change Video Background in PowerDirector?
  • How to Make a Video Call on Instagram?
  • How to Chat on Instagram?

Related Searches

  • How to unsubscribe from snapdeal email alerts
  • How to Enable Pop-up Blocker in Firefox?
  • How to Show Hidden Files in Windows 7
  • How to Change Monitor Refresh Rate in Windows 10?
  • How to enable picture in gmail chat window

Copyright © 2021 · QueHow · Contact Us