Joomla Templates Club 406,261 posts

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#201436

To modify the JA News Featured module’s appearance as above I added the following css in custom.css

}
.ja-zinfp-featured-wrap {
/* background: url(“../../images/curl-bg-ltr.png”) no-repeat right -1px; */
/* margin-top: -13px; */
}
.ja-zinfp {
background: #f3f3f3;
border: 1px solid #ccc;
/* border-top: 5px solid #ccc; */
border-left: 0;
margin-right: 4px;
}
.ja-zinfp-featured-wrap .ja-zinfp-featured .ja-zincontent-img {
background: #000;
margin: 0;
/* padding: 5px 7px 0 5px; */
}

to this test site http://jat333.globalprintmonitor.net

But the changes are not displaying. What did I do wrong?

BTW: This site also illustrates that featured articles imported by j2xml are shy, i.e. not displaying in JA News Featured module.

---

Attachments:

1. 
2. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#550078

What is the file path of your custom.css file?

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#550093

Hi Tom,

from FileZilla it seems to be: globalprintmonitor.net/httpdocs/jat4t333/templates/ja_teline_iv_t3/css/custom.css

/jat4t333/ being the site’s root folder.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#550095

I believe the correct file path within which you should be making your modifications is —>
/templates/ja_teline_iv_t3/css/mod_janews_featured.css

The custom.css option may not work – as this involves a module rather than a core/base template file.

Another method may be the ISOLATE TEMPLATE SETTINGS option.

[Eragon H Friend Eragon HJoin date: July 2014Posts: 468Downloads:1Uploads:39 Thanks: 5 Thanked: 156 times in 149 posts]

#550138

In this case, you can add “!important” after each element in custom.css to make it work. For example:

.ja-zinfp-featured-wrap .ja-zinfp-featured .ja-zincontent-img {
background: #000 !important;
margin: 0 !important;
/* padding: 5px 7px 0 5px; */
}

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#550164

Tom,

First I tried the approach you pointed me to as described below:

<blockquote>
7. Add new CSS/JS file

To add new CSS or JS file, add the file to folder:

• CSS file: {root}/templates/{template-name}/local/css
• JS file: {root}/templates/{template-name}/local/js

Next, copy file: etc/assets.xml to folder: local/etc then define the JS and CSS file.

• // Define JS file
• <scripts>
• <file>js/custom/your-script.js</file>
• </scripts>
• // Define CSS file
• <stylesheets>
• <file>css/custom/your-style.css</file>
• </stylesheets>

</blockquote>

It had no effect so I guess I didn’t get it quite right. See screen shots below.

The direct editing of the modules css did work, of course. Can you see what I did wrong with my first approach?

Tim

Next CSS edits I want to do: See if you can find a way to do them other than direct editing of the module’s css.

}
.ja-zinfp-featured-wrap .ja-zinfp-featured h2.ja-zintitle a {
color: #333
text-decoration: none;
}
.ja-zintitle > a {
font-family: Helvetica, Arial, Georgia, Cambria, “Times New Roman”, Times, serif;
text-transform: none;
font-weight: bold;
color: #069
}
.ja-zinfp-featured-wrap .ja-zinfp-featured h2.ja-zintitle {
font-size: 175%;
line-height: 1.275;
/* background: #000 */
padding: 8px 12px;
}

---

Attachments:

1. 
2. 
3. 

[Eragon H Friend Eragon HJoin date: July 2014Posts: 468Downloads:1Uploads:39 Thanks: 5 Thanked: 156 times in 149 posts]

#550322

Hi Tim,

Have you tried my suggestion? Kindly let me know if it helped

Best

1 user says Thank You to Eragon H for this useful post

1. timtecsa

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#550530

Hi Eragon,

Yes that does seem to work. I’ve only tested it on one css edit but it looks promising.

Tim

More tests: All edits in custom.css only.

}
.ja-zinfp-featured-wrap .ja-zinfp-featured h2.ja-zintitle {
font-size: 175%;
line-height: 1.2 !important;
background: #fff !important;
padding: 8px 12px;
}
body {
background-color: #fff
color: #666 !important;
font-family: Verdana, Arial, sans-serif !important;
font-size: 12px;
line-height: 20px;
margin: 0;
}
.ja-zinfp-featured-wrap .ja-zinfp-featured h2.ja-zintitle a {
color: #666 !important;
text-decoration: none;
}

However, I tried to update the left quotes icon in sec nav (bootstrap.css) with the following in custom.css but it has no effect. Should give an icon “icon-facetime-video” in place of the left quotes icon.

.icon-facetime-video:before {
content: “f03d” !important;
}

---

Attachments:

1. 
2. 

[Author]

Posts