Joomla Templates Club 406,261 posts

[rugarer Friend rugarerJoin date: May 2013Posts: 54Downloads:10Uploads:16 Thanks: 10 Thanked: 1 times in 1 posts]

#192209

Hi

How can I change the color (from the original light green to white), size and boldness of the mainnav menu links as well as the color of ONE Menu link from color (from the original light green to Orange)

as in the image attached or
at this address: http://digilink.co.zw/lextrad/

---

Attachments:

1. 

[rugarer Friend rugarerJoin date: May 2013Posts: 54Downloads:10Uploads:16 Thanks: 10 Thanked: 1 times in 1 posts]

#512131

:((Anyone please help
Im really in a fix have been trying to get this to work the entire day and cant edit.

Would appreciate any kind of help here

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#512225

You must know about css style before making any changes

Open templates/ja_beranis/css/bootstrap.css file

and change links text colour and size In menu


.navbar .nav > li {
float: left;
}
.navbar .nav > li > a {
float: none;
padding: 10px 15px 10px;
color: #a0e9ff
text-decoration: none;
text-shadow: 0 1px 0 #fff
}
.navbar .nav .dropdown-toggle .caret {
margin-top: 8px;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
background-color: transparent;
color: #fff
text-decoration: none;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #fff
text-decoration: none;
background-color: transparent;
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,0.125);
box-shadow: inset 0 3px 8px rgba(0,0,0,0.125);
}
.navbar .btn-navbar {
display: none;
float: right;
padding: 7px 10px;
margin-left: 5px;
margin-right: 5px;
color: #fff
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #f2f2f2
background-image: -moz-linear-gradient(top,#f2f2f2,#f2f2f2)
background-image: -webkit-gradient(linear,0 0,0 100%,from(#f2f2f2),to(#f2f2f2));
background-image: -webkit-linear-gradient(top,#f2f2f2,#f2f2f2)
background-image: -o-linear-gradient(top,#f2f2f2,#f2f2f2)
background-image: linear-gradient(to bottom,#f2f2f2,#f2f2f2)
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#fff2f2f2', GradientType=0);
border-color: #f2f2f2 #f2f2f2 #cccccc
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);

*background-color: #f2f2f2
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
}
.navbar .btn-navbar:hover,
.navbar .btn-navbar:focus,
.navbar .btn-navbar:active,
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar {
color: #fff
background-color: #f2f2f2
*background-color: #e6e6e6
}
.navbar .btn-navbar:active,
.navbar .btn-navbar.active {
background-color: #d9d9d9 9;
}
.navbar .btn-navbar .icon-bar {
display: block;
width: 18px;
height: 2px;
background-color: #f5f5f5
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.25);
box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.btn-navbar .icon-bar + .icon-bar {
margin-top: 3px;
}
.navbar .nav > li > .dropdown-menu:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc
border-bottom-color: #222
position: absolute;
top: -7px;
left: 9px;
}
.navbar .nav > li > .dropdown-menu:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #222
position: absolute;
top: -6px;
left: 10px;
}
.navbar-fixed-bottom .nav > li > .dropdown-menu:before {
border-top: 7px solid #ccc
border-top-color: #222
border-bottom: 0;
bottom: -7px;
top: auto;
}
.navbar-fixed-bottom .nav > li > .dropdown-menu:after {
border-top: 6px solid #222
border-bottom: 0;
bottom: -6px;
top: auto;
}
.navbar .nav li.dropdown > a:hover .caret,
.navbar .nav li.dropdown > a:focus .caret {
border-top-color: #fff
border-bottom-color: #fff
}
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: transparent;
color: #fff
}
.navbar .nav li.dropdown > .dropdown-toggle .caret {
border-top-color: #a0e9ff
border-bottom-color: #a0e9ff
}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: #fff
border-bottom-color: #fff
}
.navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
left: auto;
right: 0;
}
.navbar .pull-right > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu.pull-right:before {
left: auto;
right: 12px;
}
.navbar .pull-right > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu.pull-right:after {
left: auto;
right: 13px;
}
.navbar .pull-right > li > .dropdown-menu .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu {
left: auto;
right: 100%;
margin-left: 0;
margin-right: -1px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.navbar-inverse .navbar-inner {
background-color: #1b1b1b
background-image: -moz-linear-gradient(top,#222222,#111111)
background-image: -webkit-gradient(linear,0 0,0 100%,from(#222222),to(#111111));
background-image: -webkit-linear-gradient(top,#222222,#111111)
background-image: -o-linear-gradient(top,#222222,#111111)
background-image: linear-gradient(to bottom,#222222,#111111)
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
border-color: #252525
}
.navbar-inverse .brand,
.navbar-inverse .nav > li > a {
color: #999
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
}
.navbar-inverse .brand:hover,
.navbar-inverse .brand:focus,
.navbar-inverse .nav > li > a:hover,
.navbar-inverse .nav > li > a:focus {
color: #fff
}
.navbar-inverse .brand {
color: #999
}
.navbar-inverse .navbar-text {
color: #999
}
.navbar-inverse .nav > li > a:focus,
.navbar-inverse .nav > li > a:hover {
background-color: transparent;
color: #fff
}
.navbar-inverse .nav .active > a,
.navbar-inverse .nav .active > a:hover,
.navbar-inverse .nav .active > a:focus {
color: #fff
background-color: #111111
}
.navbar-inverse .navbar-link {
color: #999
}
.navbar-inverse .navbar-link:hover,
.navbar-inverse .navbar-link:focus {
color: #fff
}
.navbar-inverse .divider-vertical {
border-left-color: #111111
border-right-color: #222222
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
background-color: #111111
color: #fff
}
.navbar-inverse .nav li.dropdown > a:hover .caret,
.navbar-inverse .nav li.dropdown > a:focus .caret {
border-top-color: #fff
border-bottom-color: #fff
}
.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
border-top-color: #999
border-bottom-color: #999
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: #fff
border-bottom-color: #fff
}
.navbar-inverse .navbar-search .search-query {
color: #fff
background-color: #515151
border-color: #111111
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
.navbar-inverse .navbar-search .search-query:-moz-placeholder {
color: #ccc
}
.navbar-inverse .navbar-search .search-query:-ms-input-placeholder {
color: #ccc
}
.navbar-inverse .navbar-search .search-query::-webkit-input-placeholder {
color: #ccc
}
.navbar-inverse .navbar-search .search-query:focus,
.navbar-inverse .navbar-search .search-query.focused {
padding: 5px 15px;
color: #444
text-shadow: 0 1px 0 #fff
background-color: #fff
border: 0;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.15);
-moz-box-shadow: 0 0 3px rgba(0,0,0,0.15);
box-shadow: 0 0 3px rgba(0,0,0,0.15);
outline: 0;
}
.navbar-inverse .btn-navbar {
color: #fff
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #0e0e0e
background-image: -moz-linear-gradient(top,#151515,#040404)
background-image: -webkit-gradient(linear,0 0,0 100%,from(#151515),to(#040404));
background-image: -webkit-linear-gradient(top,#151515,#040404)
background-image: -o-linear-gradient(top,#151515,#040404)
background-image: linear-gradient(to bottom,#151515,#040404)
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0);
border-color: #040404 #040404 #000000
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);

*background-color: #040404
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.navbar-inverse .btn-navbar:hover,
.navbar-inverse .btn-navbar:focus,
.navbar-inverse .btn-navbar:active,
.navbar-inverse .btn-navbar.active,
.navbar-inverse .btn-navbar.disabled,
.navbar-inverse .btn-navbar {
color: #fff
background-color: #040404
*background-color: #000000
}
.navbar-inverse .btn-navbar:active,
.navbar-inverse .btn-navbar.active {
background-color: #000000 9;
}

[rugarer Friend rugarerJoin date: May 2013Posts: 54Downloads:10Uploads:16 Thanks: 10 Thanked: 1 times in 1 posts]

#513440

HI Ninja Lead,

Ive been trying yo go through the code u sent above, as well as the one I have, but i cant find the code to change the size or the colour. Is there a specific line of code i can look at, than to go through the entire code line by line.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#513500

It would be great if you can include url of your site. I would need to take a closer look at your site.

[Ivan Busic Friend Ivan BusicJoin date: November 2014Posts: 17Downloads:15Uploads:5 Thanks: 13]

#540305

Hi!

I tried to find the code to change the font size, but unsuccessfully. Can anyone help? I need to change the size of text in the menu.

Thx! :-[

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

#540306

<em>@trasty 434069 wrote:</em><blockquote>Hi!

I tried to find the code to change the font size, but unsuccessfully. Can anyone help? I need to change the size of text in the menu.

Thx! :-[</blockquote>

Assuming you are using the J3.x/T3V2 version of JA Beranis – and if you haven’t yet done so . . . .

Create a new file called “custom.css” within file path –> /templates/ja_beranis/css
(so the file will then be –> /templates/ja_beranis/css/custom.css)

Within that custom.css file, paste the CSS rules previously suggested by NinjaLead

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Does this make any difference ???

[Ivan Busic Friend Ivan BusicJoin date: November 2014Posts: 17Downloads:15Uploads:5 Thanks: 13]

#540317

Unfortunately there are no changes! Joomla! 3.3.1 and T3 V2.0.2 is installed.

I just want to change the font size in MENU to 14px, nothing more. 🙁

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

#540318

Assuming you are using the J3.x/T3V2 version of JA Beranis – and if you haven’t yet done so . . . .

Create a new file called “custom.css” within file path –> /templates/ja_beranis/css
(so the file will then be –> /templates/ja_beranis/css/custom.css)

Within that custom.css file, paste the following CSS rule:


.t3-mainnav .navbar .nav > li > a, .t3-mainnav .navbar .nav > li > span {
font-size: 14px;
font-weight: 500;
padding: 10px 20px 10px 0;
text-shadow: none;
text-transform: uppercase;
}

With this rule, you can style the font for your main nav menu as you wish.

Does That Help?

2 users say Thank You to TomC for this useful post

1. Ivan Busic
2. riparafiles

[Ivan Busic Friend Ivan BusicJoin date: November 2014Posts: 17Downloads:15Uploads:5 Thanks: 13]

#540319

Thank you very much TomC! :laugh:

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

#540320

<em>@trasty 434087 wrote:</em><blockquote>Thank you very much TomC! :laugh:</blockquote>

Glad to have been of assistance . . . . All the best with your continuing site development. 😎

1 user says Thank You to TomC for this useful post

1. Ivan Busic

[Author]

Posts