Member Avatar for jKidz

Hi Friends,
I want to add this css style to existing template.

.citems {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #000;
    line-height: 20px;
    border-bottom-width: thin;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: dotted;
    border-left-style: none;
    border-top-color: #000;
    border-right-color: #000;
    border-bottom-color: #333;
    border-left-color: #000;
    text-indent: 10px;
}



@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');

How can I do this?
Are there any plugin or should I link new style sheet.
If so, how can I link new style sheet?

  • 3 Contributors
  • 2 Replies
  • 364 Views
  • 4 Months Discussion Span
  • Latest Post Latest Post by mavensays

Dani AI

Generated

Good options were already mentioned by and (head-injection plugins and custom-code modules). For a stable, maintainable site the best practice is to place your extra rules into a single stylesheet inside your template and let Joomla load it — that keeps CSS versioned, avoids extra plugins, and is easier to manage long-term.

Create a file like templates/your_template/css/custom.css and put your CSS there. Then add this to your template's index.php (place it before the <jdoc:include type="head" /> call) so Joomla prints the link in the document head:

<?php
defined('_JEXEC') or die;

$doc = JFactory::getDocument();
$doc->addStyleSheet(JUri::base() . 'templates/' . $this->template . '/css/custom.css');

If you prefer not to edit files on disk you can use the Template Editor in the backend (Extensions → Templates → Templates → [your template] → Edit files) to create the CSS and add the PHP line. Quick alternatives: a Custom HTML module that contains a <style> block (published to a debug/head position) or a head-inject extension are OK for quick tests, but they scatter styles and can be harder to keep organized.

Troubleshooting tips: after adding the file clear Joomla and browser cache, view page source to confirm the stylesheet link, and check DevTools Network for 404s or blocked fonts. If styles don’t apply, check selector specificity or CSS ordering. Back up the template before editing and, if your template has a built-in custom.css (or equivalent), use that so future template updates won’t overwrite your changes.

Recommended Answers

All 2 Replies

Member Avatar for gabrielcastillo

Here is a good plugin to help you: Click Here

If you want to learn to do this yourself, you can read this artical.

Member Avatar for mavensays

Hola,

There are multiple ways to do this:

1) You can use custom code modules/plugins like:
http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules/3668

Or

http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules/15251

These modules give you a blank space to write your own css or html code. Now you can publish them in debug position (& choose which pages/menu items you want effected by this css code).

2) If you wish to have the css code added to the template directly, look for the style.css (mostly named this in most templates) and your css code.

If you can tell us what template you are using we can help you more :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.