Protostar nav-pills problem

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
francisco-drm
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Tue Dec 20, 2011 7:16 pm

Protostar nav-pills problem

Postby francisco-drm » Sat Dec 15, 2012 2:58 pm

Hi,

I tried to change everything on the .css and i am unable to change the blue background on the blue active pill.

Does anyone know how to solve this?

Thank you
Francisco
Last edited by imanickam on Sun Dec 16, 2012 3:44 am, edited 1 time in total.
Reason: Moved the topic from the forum General Questions/New to Joomla! 3.0 to the forum Default template: Protostar in Joomla! 3.0

User avatar
ranwilli
Joomla! Master
Joomla! Master
Posts: 18463
Joined: Sun Feb 19, 2006 6:47 pm
Location: Toledo, OH
Contact:

Re: Protostar nav-pills problem

Postby ranwilli » Sat Dec 15, 2012 4:36 pm

Get and use Firebug for firefox... it'll make a css expert out of you in no time

Be sure to watch the videos
Don't HACK the Joomla! core. Extend and Override.
http://harpervance.com -
Live Joomla! Help available at the site M-F, 9-12 am edt 2-5pm edt.
by appointment on evenings and weekends.

francisco-drm
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Tue Dec 20, 2011 7:16 pm

Re: Protostar nav-pills problem

Postby francisco-drm » Sat Dec 15, 2012 9:33 pm

Thank you for your reply but i use it for years already. The problem is that i dont have any background-color#08c line under the menu-pills active entry

Anyone with real solutions please?

Thank you in advance

User avatar
ranwilli
Joomla! Master
Joomla! Master
Posts: 18463
Joined: Sun Feb 19, 2006 6:47 pm
Location: Toledo, OH
Contact:

Re: Protostar nav-pills problem

Postby ranwilli » Sat Dec 15, 2012 11:46 pm

Have you looked at other <a> tags?
Don't HACK the Joomla! core. Extend and Override.
http://harpervance.com -
Live Joomla! Help available at the site M-F, 9-12 am edt 2-5pm edt.
by appointment on evenings and weekends.

MrValentin
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Mon Oct 15, 2012 12:01 am

Re: Protostar nav-pills problem

Postby MrValentin » Sun Dec 16, 2012 5:00 pm

Have a look at this block in /templates/protostar/index.php from line 102 to 123:

Code: Select all

<style type="text/css">
      body.site
      {
         border-top: 3px solid <?php echo $this->params->get('templateColor');?>;
         background-color: <?php echo $this->params->get('templateBackgroundColor');?>
      }
      a
      {
         color: <?php echo $this->params->get('templateColor');?>;
      }
      .navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
      .btn-primary
      {
         background: <?php echo $this->params->get('templateColor');?>;
      }
      .navbar-inner
      {
         -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
         -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
         box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
      }
   </style>


.nav-pills > .active > a, .nav-pills > .active > a:hover might be what is causing you trouble.

The variables templateColor and templateBackgroundColor are defined in:

    Extensions > Template manager > My Default Style (Protostar) > Options


#08C is the default template color.

Note: to override these rules you have to be as specific as them in your css file. Let's say you have this:

HTML

Code: Select all

<div class="green">
   <a href="#">
      Link 1
   </a>
   <span>
      <a href="#">
         Link 2
      </a>
   </span>
</div>
<div>
   <a href="#">
      Link 3
   </a>
</div>

and

CSS

Code: Select all

.green > a { /* A link that is immediatly inside an element with the class "green" */
   color: green;
}

a { /* Any link */
   color: red;
}


Link 1 will be green, but Link 2 and Link 3 will be red. That is because a browser uses a more specific rule to render an object over a less specific one. If it finds two rules as specific, it takes the last one.

Therefore, if you don't want to modify index.php, since your changes will disappear when you update your template, be more specific in your template.css.

marcemig
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Tue Aug 23, 2005 12:20 pm

Re: Protostar nav-pills problem

Postby marcemig » Sun May 25, 2014 8:53 pm

MrValentin gave us a really good answer! I was not able to make my css take precedence over the definitions in the index.php file, so I edited the index.php.

In my case, I changed the variable

Code: Select all

<?php echo $this->params->get('templateBackgroundColor');?>

to a fixed value

Code: Select all

transparent;

and of course this worked.

I never use the original template, I always start with a renamed copy, so there is not the problem of loosing changes in an upgrade.

By the way, I don´t really got the point of protostar hard coding styles in the index.php file. it seems more difficult to edit. i would prefer all css in css´s files.


Return to “Templates for Joomla! 3.x”

Who is online

Users browsing this forum: No registered users and 9 guests