0
Welcome Guest! Login
0 items Join Now

SOLVED css files path Gantry 5

Last Post
Search Topic

  • SOLVED css files path Gantry 5

    Posted 9 years 7 months ago
    • Good morning,
      I'm starting with the implementation of templates with gantry 5, I would like to know where I find the CSS files of the page to make changes.

      In the previous version of gantry, the path was /public_html/template /[template]/less.
      Which is the path in this new version?

      Thanks
    #1240748
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: SOLVED css files path Gantry 5

    Posted 9 years 7 months ago
    • You can find the files in the ROOT/templates/TEMPLATE_DIR/scss directory where ROOT is the root directory of the Joomla site and TEMPLATE_DIR is the template directory for the Gantry-powered template. It contains files specific to the theme.
    #1240762

  • Re: SOLVED css files path Gantry 5

    Posted 8 years 11 months ago
    • New to using Gantry 5.

      My question is how do I convert a CSS file to an SCSS file? Do I just change the file extension? I need to add a Custom CSS file to Salient on Gantry 5 and am just not quite sure if I can do as normal and create a CSS file and insert the CSS and then name it SCSS using a Text editor? Do I then place this file in the templates/rt_salient/scss folder? Do I need to do anything in the Gantry Backend for the file to be recognized?

      This is the CSS I need to use:


      @charset "UTF-8";
/* CSS Document */

/* Table Custom CSS Start */
<style>
/*styles for graphic info (hed, dek, source, credit)*/
.rg-container {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	margin: 0;
	padding: 1em 0.5em;
	color: #1a1a1a;
}
.rg-header {
	margin-bottom: 1em;
}
.rg-hed {
	font-weight: bold;
	font-size: 1.4em;
}
.rg-dek {
	font-size: 1em;
}
.rg-source-and-credit {
	width: 100%;
	overflow: hidden;
}
.rg-source {
	margin: 0;
	float: left;
	font-weight: bold;
	font-size: 0.75em;
}
.rg-source .pre-colon {
	text-transform: uppercase;
}
/*styles for graphic*/
table.rg-table {
	width: 100%;
	margin-bottom: 0.5em;
	font-size: 1em;
	border-collapse: collapse;
	border-spacing: 0;
}
table.rg-table * {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	text-align: left;
	color: #333;
}
table.rg-table thead {
	border-bottom: 1px solid #ddd;
}
table.rg-table th {
	font-weight: bold;
	padding: 0.5em 0;
	font-size: 0.85em;
}
table.rg-table td {
	padding: 0.5em 0;
	font-size: 0.9em;
}
table.rg-table .highlight td {
	font-weight: bold;
}
table.rg-table tr {
	border-bottom: 1px solid #ddd;
	color: #222;
}
table.rg-table th.number, td.number {
	text-align: right;
}
table.rg-table.zebra tr:nth-child(even) {
	background: #efefef;
}
table.rg-table tr.highlight {
	background: #efefef;
}
@media screen and (max-width: 400px) {
.rg-container {
	max-width: 400px;
	margin: 0 auto;
}
table.rg-table {
	display: block;
	width: 100%;
}
table.rg-table tr.hide-mobile, table.rg-table th.hide-mobile, table.rg-table td.hide-mobile {
	display: none;
}
table.rg-table thead {
	display: none;
}
table.rg-table tbody {
	display: block;
	width: 100%;
}
table.rg-table td:last-child {
	padding-right: 0;
	border-bottom: 2px solid #ccc;
}
table.rg-table tr, table.rg-table th, table.rg-table td {
	display: block;
	padding: 0;
}
table.rg-table td[data-title]:before {
	content: attr(data-title) ":A0";
	font-weight: bold;
	display: inline-block;
	content: attr(data-title);
	float: left;
	margin-right: 0.5em;
	font-size: 0.95em;
}
table.rg-table tr {
	border-bottom: none;
	margin: 0 0 1em 0;
	padding: 0.5em 0;
}
table.rg-table tr:nth-child(even) {
	background: none;
}
table.rg-table td {
	padding: 0.5em 0 0.25em 0;
	border-bottom: 1px dotted #ccc;
	text-align: right;
}
table.rg-table td:empty {
	display: none;
}
table.rg-table .highlight td {
	background: none;
}
table.rg-table tr.highlight {
	background: none;
}
table.rg-table.zebra tr:nth-child(even) {
	background: none;
}
table.rg-table.zebra td:nth-child(even) {
	background: #efefef;
}
}
</style>
/* Table Custom CSS End */



      Cheers,
      J
    #1298233
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: SOLVED css files path Gantry 5

    Posted 8 years 11 months ago
    • SCSS is a file format than has CSS as its parent. So it uses the same syntax as CSS. The difference being is has newer evolved properties and additonal features such as nesting code blocks that the parent CSS doesn't have.

      Bottom line is any valid CSS code also works on SCSS(also known as SASS).
    #1298448

  • Re: SOLVED css files path Gantry 5

    Posted 8 years 11 months ago
    • Thanks kindly Dan!
    #1298551
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: SOLVED css files path Gantry 5

    Posted 8 years 11 months ago
    • JEREMY RWAKAARA wrote:
      Thanks kindly Dan!

      No problem...glad to help.
    #1299210

Time to create page: 0.054 seconds