Joomla Templates Club 406,261 posts

[alekseyg Friend alekseygJoin date: June 2011Posts: 40Downloads:0Uploads:14 Thanks: 11]

#166849

Hi, I have a couple questions how to:
1. change default black colour on slider around an image
2. change backgroud black colour on magazine menu
3. change width and colour of lines (to grey) in magazine menu.

details on screenshot

---

Attachments:

1. 

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

#403636

Before I begin, I need to say that the following tips and suggestions are based on which particular color theme and menu scheme one is using. In other words, without being able to see YOUR particular site, the suggestions below are based on MY Teline IV based site and the color theme I am using (i.e. red) and menu scheme I am utilizing (i.e. mega menu)

<em>@alekseyg 256378 wrote:</em><blockquote>
1. change default black colour on slider around an image</blockquote>

This one kind of depends on the color theme you are using. For example, I use the “red” color theme, so the css for this element can be found at: templates/teline_iv/core/themes/red-color/css/color.css

Find the code that looks like this (at/around line 113 or so):


.ja-zinfp-featured-border:hover h2.ja-zintitle a, .ja-zinfp-featured h2.ja-zintitle a:hover, .ja-zinfp-featured h2.ja-zintitle a:active, .ja-zinfp-featured h2.ja-zintitle a:focus {
background-color: #750000;

}
In my particular example above, I have the background color set at #750000 – which is a deep red.
You can change it to whatever color you want.

NOTE: You may also need to check templates/teline_iv/html/mod_janews_fp/default/style.css
(at/around line 57 – same method)

<em>@alekseyg 256378 wrote:</em><blockquote>
2. change backgroud black colour on magazine menu</blockquote>

It depends on the particular menu style you are using (i.e. mega, css, dropline, split). If you are utilizing the mega-menu (for example), the CSS to modify this element can be found in templates/teline_iv/css/menu/mega.css

at/around line 49, find the following:


.ja-megamenu ul.level0 li.over a.mega, ul.level0 li.haschild-over a.mega {
background: #000;
}
You simply change the background color to whatever color you want.

Similar code can be found within the other menu type css files. (For example, in the css.css file, it’s at line 65)

<em>@alekseyg 256378 wrote:</em><blockquote>
3. change width and colour of lines (to grey) in magazine menu.
</blockquote>

The border for the top of the main navigation can be found at templates/teline_iv/css/template.css

at/around line 844, find the following:


#ja-mainnav .main {
border-top: 1px solid #CCCCCC;
margin-bottom: 12px;

}
You can change the parameters of the top line/border of the main nav there.

As for the bottom border line, again it depends on the particular color theme and menu scheme you are using (mega, css, etc.)
I am using the mega menu, so I would look in templates/teline_iv/core/theme/red-color/css/color.css

at/around line 47, find the following:


.ja-megamenu {
border-color: #750000;

}
change the color to whatever you want.

NOTE: If that does not work on it’s own, also look at templates/teline_iv/css/menu/mega.css

at/around line 19, find:


.ja-megamenu {
border-bottom: 5px solid #000000;
padding: 0;

}
you should be able to modify both the color and width of the border there.

As a bit of constructive advice, I STRONGLY recommend you utilize an online web-development tool/add-on such as FIREBUG (http://getfirebug.com/) – that is, if you are using the FireFox web browser. This tool is INVALUABLE in figuring out the various elements (especially CSS) that are controlling any given element of your site.

If you’re using IE or Chrome, I’m quite certain there are similar tools/add-ons available (I just don’t know what they are).

Hope some of that helps.

TOM

2 users say Thank You to TomC for this useful post

1. khartoumgateway
2. dallacosta

[alekseyg Friend alekseygJoin date: June 2011Posts: 40Downloads:0Uploads:14 Thanks: 11]

#403661

<em>@tcraw1010 256406 wrote:</em><blockquote> For example, I use the “red” color theme, so the css for this element can be found at: templates/teline_iv/core/themes/red-color/css/color.css

Find the code that looks like this (at/around line 113 or so):


.ja-zinfp-featured-border:hover h2.ja-zintitle a, .ja-zinfp-featured h2.ja-zintitle a:hover, .ja-zinfp-featured h2.ja-zintitle a:active, .ja-zinfp-featured h2.ja-zintitle a:focus {
background-color: #750000;

}
</blockquote>

I use blue color on my site rus-up.ru, and I didn’t find such code in templates/ja_teline_iv/core/themes/blue-color/css

---

Attachments:

1. color.txt

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

#403667

<em>@alekseyg 256438 wrote:</em><blockquote>I use blue color on my site rus-up.ru, and I didn’t find such code in templates/ja_teline_iv/core/themes/blue-color/css</blockquote>
Do me a favor and go into Template Manager in your administration backend and, under the “Global Settings” tab – CSS & Javascript compress – select “No” for “Compress CSS.”

That way, I will be better able to find the location of the CSS you need to modify.

THANKS !!

[alekseyg Friend alekseygJoin date: June 2011Posts: 40Downloads:0Uploads:14 Thanks: 11]

#403706

<em>@tcraw1010 256444 wrote:</em><blockquote>Do me a favor and go into Template Manager in your administration backend and, under the “Global Settings” tab – CSS & Javascript compress – select “No” for “Compress CSS.”

THANKS !!</blockquote>
I did it…

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#403708

Could you give me a link to your page as you said?

[alekseyg Friend alekseygJoin date: June 2011Posts: 40Downloads:0Uploads:14 Thanks: 11]

#403722

<em>@khoand 256500 wrote:</em><blockquote>Could you give me a link to your page as you said?</blockquote>
http://www.rus-up.ru

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#403723

<em>@alekseyg 256530 wrote:</em><blockquote>http://www.rus-up.ru</blockquote>
You change this code from /templates/ja_teline_iv/html/mod_janews_fp/default/style.css in the line #47

.ja-zinfp-featured h2.ja-zintitle a {
background: black; < change this line
border-bottom: 1px solid #CCC;
color: #CCC;
padding: 8px 12px;
text-decoration: none;
}

[alekseyg Friend alekseygJoin date: June 2011Posts: 40Downloads:0Uploads:14 Thanks: 11]

#403742

after above changes i have following problems in IE with slider and tabs

---

Attachments:

1. 

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#403748

I’ll go at this from scratch simply because I do not want to go through and test all of the above.

Let’s start with the slider and when we have that working go onto the menu.

The background colour is made up of a number of elements but all are in templates>ja_teline_IV>html>mod_janews_fp>default>style.css
from line 54 to line 90ish as pointed out above. There are border colours, background colours
and a different blue colour of the on-mouseover effect. Should be simple to style


.ja-zinfp-featured h2.ja-zintitle a {
background: none repeat scroll 0 0 #00000;
border-bottom: 1px solid #CCCCCC;
color: #CCCCCC;
display: block;
padding: 8px 12px;
text-decoration: none;

}

.ja-zinfp-featured-border:hover h2.ja-zintitle a, .ja-zinfp-featured h2.ja-zintitle a:hover, .ja-zinfp-featured h2.ja-zintitle a:active, .ja-zinfp-featured h2.ja-zintitle a:focus {
background: none repeat scroll 0 0 #006699;
color: #FFFFFF;

}

.ja-zinfp-featured .ja-zincontent-wrap {

}

.ja-zinfp-featured .ja-zincontent {
margin: 0;
padding: 0 0 8px;

}

.ja-zinfp-featured .ja-zincontent-img {
background: none repeat scroll 0 0 #000000;
border-color: #000000 #000000 -moz-use-text-color;
border-style: solid solid none;
border-width: 5px 5px 0;
margin: 0;
overflow: hidden;

}

.ja-zinfp-featured-border:hover .ja-zincontent-img {
background: none repeat scroll 0 0 #006699;
border-color: #006699;

}

Simply change the colour codes to what you desire.

2 users say Thank You to Phill for this useful post

1. alekseyg
2. dallacosta

[alekseyg Friend alekseygJoin date: June 2011Posts: 40Downloads:0Uploads:14 Thanks: 11]

#403803

thanks, it works, will continue to tune my site tomorrow

[Author]

Posts