Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Styling an Individual Element Already Styled in a Stylesheet

    Hi, I have a list of tabs the headers (H2) of which are styled in a stylesheet, I now want to style an individual tab to be a certain color but cant seem to be able to do this.
    When I set the color locally the stylsheet style overides anything?

    HTML

    Code:

    <div class="tabber">

    <div class="tabbertab">

    <h2>Title I want to change</h2>
    <p>Content
    </p>

    </div>

    <div class="tabbertab">

    <h2>Title 2</h2>
    <p>Content
    </p>

    </div>

    </div>

    CSS

    Code:

    .tabberlive .tabbertabhide {
    display: none;
    }

    .tabber {
    padding: 0px;
    }

    .tabberlive {
    margin-bottom: 10px;
    }

    ul.tabbernav {
    margin: 0;
    padding: 0px 0;
    color: #202020;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: normal;
    }

    ul.tabbernav li {
    list-style: none;
    margin: 0;
    display: inline;
    }

    ul.tabbernav li a {
    padding: 3px 0.5em;
    border-bottom: none;
    text-decoration: none;
    }

    ul.tabbernav li a:link {
    color: #202020;
    background: #DDDDDD;
    margin: 0px 5px 0px 0px;
    }

    ul.tabbernav li a:visited {
    color: #202020;
    background: #DDDDDD;
    }


    ul.tabbernav li a:hover {
    background: #666666;
    color: #FFFFFF;
    text-decoration: none;
    }

    ul.tabbernav li.tabberactive a {
    background: #333333;
    color: #FFFFFF;
    text-decoration: none;
    }

    ul.tabbernav li.tabberactive a:hover {
    background: #333333;
    color: #FFFFFF;
    }

    .tabberlive .tabbertab {
    background: #FFFFFF;
    padding: 10px 0px 0px 0px;
    }

    .tabberlive .tabbertab h2 {
    display: none;
    }

    .tabberlive .tabbertab h3 {
    display: none;
    }

    .tabbertab cite {
    font-size: 11px;
    margin: 0px;
    padding: 0px;
    }

    How could I set the H2 Title so I could style just that one?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello millsy007,
    There are a few different ways. If this is only happening the one time, maybe inline styles would be fine to use.
    I'd probably do it by giving that <h2> an id or class, <h2 class="active"> , and and change it's color by styling that.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by millsy007 View Post
    Hi,
    When I set the color locally the stylsheet style overides anything?
    Yes. You may style it locally. Not an elegant solution, but a safe one.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New Coder
    Join Date
    Feb 2009
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, I tried but:

    <h2 style="color:#FFFF99">Platinum</h2>

    doesnt change anything?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    That should work millsy007,
    Maybe it's the color you've picked? What is the background color of the behind the h2?

    Inline styles should always over-ride styles from the attached or linked CSS. See this example with the text of the document set to #fff -
    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	background: #000;
    	color: #FFF;
    }
    </style>
    </head>
    <body>
    <h1>white</h1>
    <h2 style="color:#FFFF99">Platinum</h2>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Feb 2009
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    It seems no matter what I set locally (color, size etc) the css is setting the style.
    The tab section is using javascript to set styles could this be a factor?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Can we see a link to the test site? It would help to see your code and js.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Feb 2009
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    HTML:

    Code:
    <div class="tabber">
    
    <div class="tabbertab">
    
    <h2>Title I want to change</h2>
    <p>Content
    </p>
    
    </div>
    
    <div class="tabbertab">
    
    <h2>Title 2</h2>
    <p>Content
    </p>
    
    </div>
    
    </div>
    CSS:

    Code:
    .tabberlive .tabbertabhide {
    	display: none;
    	}
    
    .tabber {
    	padding: 0px;
    	}
    
    .tabberlive {
    	margin-bottom: 10px;
    	}
      
    ul.tabbernav {
    	margin: 0;
    	padding: 0px 0;
    	color: #202020;
    	font-size: 12px;
    	font-family: Arial, Tahoma, Verdana;
    
    	}
    
    ul.tabbernav li {
    	list-style: none;
    	margin: 0;
    	display: inline;
    	}
    
    ul.tabbernav li a {
    	padding: 3px 0.5em;
    	border-bottom: none;
    	text-decoration: none;
    	}
    
    ul.tabbernav li a:link {
    	color: #202020;
    	background: #DDDDDD;
    	margin: 0px 5px 0px 0px;
    	}
    	
    ul.tabbernav li a:visited {
    	color: #202020;
    	background: #DDDDDD;
    	}
    	
    
    ul.tabbernav li a:hover {
    	background: #666666;
    	color: #FFFFFF;
    	text-decoration: none;
    	}
    
    ul.tabbernav li.tabberactive a {
    	background: #333333;
    	color: #FFFFFF;
    	text-decoration: none;
    	}
    
    ul.tabbernav li.tabberactive a:hover {
    	background: #333333;
    	color: #FFFFFF;
    	}
      
    .tabberlive .tabbertab {
    	background: #FFFFFF;
    	padding: 10px 0px 0px 0px;
    	}
    	
    .tabberlive .tabbertab h2 {
    	display: none;
    	}
    	
    .tabberlive .tabbertab h3 {
    	display: none;
    	}
    
    .tabbertab cite {
    	font-size: 11px;
    	margin: 0px;
    	padding: 0px;
    	}
    JS:

    Code:
    function tabberObj(argsObj)
    {
      var arg; /* name of an argument to override */
    
      /* Element for the main tabber div. If you supply this in argsObj,
         then the init() method will be called.
      */
      this.div = null;
    
      /* Class of the main tabber div */
      this.classMain = "tabber";
    
      /* Rename classMain to classMainLive after tabifying
         (so a different style can be applied)
      */
      this.classMainLive = "tabberlive";
    
      /* Class of each DIV that contains a tab */
      this.classTab = "tabbertab";
    
      /* Class to indicate which tab should be active on startup */
      this.classTabDefault = "tabbertabdefault";
    
      /* Class for the navigation UL */
      this.classNav = "tabbernav";
    
      /* When a tab is to be hidden, instead of setting display='none', we
         set the class of the div to classTabHide. In your screen
         stylesheet you should set classTabHide to display:none.  In your
         print stylesheet you should set display:block to ensure that all
         the information is printed.
      */
      this.classTabHide = "tabbertabhide";
    
      /* Class to set the navigation LI when the tab is active, so you can
         use a different style on the active tab.
      */
      this.classNavActive = "tabberactive";
    
      /* Elements that might contain the title for the tab, only used if a
         title is not specified in the TITLE attribute of DIV classTab.
      */
      this.titleElements = ['h2','h3','h4','h5','h6'];
    
      /* Should we strip out the HTML from the innerHTML of the title elements?
         This should usually be true.
      */
      this.titleElementsStripHTML = true;
    
      /* If the user specified the tab names using a TITLE attribute on
         the DIV, then the browser will display a tooltip whenever the
         mouse is over the DIV. To prevent this tooltip, we can remove the
         TITLE attribute after getting the tab name.
      */
      this.removeTitle = true;
    
      /* If you want to add an id to each link set this to true */
      this.addLinkId = false;
    
      /* If addIds==true, then you can set a format for the ids.
         <tabberid> will be replaced with the id of the main tabber div.
         <tabnumberzero> will be replaced with the tab number
           (tab numbers starting at zero)
         <tabnumberone> will be replaced with the tab number
           (tab numbers starting at one)
         <tabtitle> will be replaced by the tab title
           (with all non-alphanumeric characters removed)
       */
      this.linkIdFormat = '<tabberid>nav<tabnumberone>';
    
      /* You can override the defaults listed above by passing in an object:
         var mytab = new tabber({property:value,property:value});
      */
      for (arg in argsObj) { this[arg] = argsObj[arg]; }
    
      /* Create regular expressions for the class names; Note: if you
         change the class names after a new object is created you must
         also change these regular expressions.
      */
      this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
      this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
      this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
      this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
      this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
    
      /* Array of objects holding info about each tab */
      this.tabs = new Array();
    
      /* If the main tabber div was specified, call init() now */
      if (this.div) {
    
        this.init(this.div);
    
        /* We don't need the main div anymore, and to prevent a memory leak
           in IE, we must remove the circular reference between the div
           and the tabber object. */
        this.div = null;
      }
    }
    
    
    /*--------------------------------------------------
      Methods for tabberObj
      --------------------------------------------------*/
    
    
    tabberObj.prototype.init = function(e)
    {
      /* Set up the tabber interface.
    
         e = element (the main containing div)
    
         Example:
         init(document.getElementById('mytabberdiv'))
       */
    
      var
      childNodes, /* child nodes of the tabber div */
      i, i2, /* loop indices */
      t, /* object to store info about a single tab */
      defaultTab=0, /* which tab to select by default */
      DOM_ul, /* tabbernav list */
      DOM_li, /* tabbernav list item */
      DOM_a, /* tabbernav link */
      aId, /* A unique id for DOM_a */
      headingElement; /* searching for text to use in the tab */
    
      /* Verify that the browser supports DOM scripting */
      if (!document.getElementsByTagName) { return false; }
    
      /* If the main DIV has an ID then save it. */
      if (e.id) {
        this.id = e.id;
      }
    
      /* Clear the tabs array (but it should normally be empty) */
      this.tabs.length = 0;
    
      /* Loop through an array of all the child nodes within our tabber element. */
      childNodes = e.childNodes;
      for(i=0; i < childNodes.length; i++) {
    
        /* Find the nodes where class="tabbertab" */
        if(childNodes[i].className &&
           childNodes[i].className.match(this.REclassTab)) {
          
          /* Create a new object to save info about this tab */
          t = new Object();
          
          /* Save a pointer to the div for this tab */
          t.div = childNodes[i];
          
          /* Add the new object to the array of tabs */
          this.tabs[this.tabs.length] = t;
    
          /* If the class name contains classTabDefault,
    	 then select this tab by default.
          */
          if (childNodes[i].className.match(this.REclassTabDefault)) {
    	defaultTab = this.tabs.length-1;
          }
        }
      }
    
      /* Create a new UL list to hold the tab headings */
      DOM_ul = document.createElement("ul");
      DOM_ul.className = this.classNav;
      
      /* Loop through each tab we found */
      for (i=0; i < this.tabs.length; i++) {
    
        t = this.tabs[i];
    
        /* Get the label to use for this tab:
           From the title attribute on the DIV,
           Or from one of the this.titleElements[] elements,
           Or use an automatically generated number.
         */
        t.headingText = t.div.title;
    
        /* Remove the title attribute to prevent a tooltip from appearing */
        if (this.removeTitle) { t.div.title = ''; }
    
        if (!t.headingText) {
    
          /* Title was not defined in the title of the DIV,
    	 So try to get the title from an element within the DIV.
    	 Go through the list of elements in this.titleElements
    	 (typically heading elements ['h2','h3','h4'])
          */
          for (i2=0; i2<this.titleElements.length; i2++) {
    	headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
    	if (headingElement) {
    	  t.headingText = headingElement.innerHTML;
    	  if (this.titleElementsStripHTML) {
    	    t.headingText.replace(/<br>/gi," ");
    	    t.headingText = t.headingText.replace(/<[^>]+>/g,"");
    	  }
    	  break;
    	}
          }
        }
    
        if (!t.headingText) {
          /* Title was not found (or is blank) so automatically generate a
             number for the tab.
          */
          t.headingText = i + 1;
        }
    
        /* Create a list element for the tab */
        DOM_li = document.createElement("li");
    
        /* Save a reference to this list item so we can later change it to
           the "active" class */
        t.li = DOM_li;
    
        /* Create a link to activate the tab */
        DOM_a = document.createElement("a");
        DOM_a.appendChild(document.createTextNode(t.headingText));
        DOM_a.href = "javascript:void(null);";
        DOM_a.title = t.headingText;
        DOM_a.onclick = this.navClick;
    
        /* Add some properties to the link so we can identify which tab
           was clicked. Later the navClick method will need this.
        */
        DOM_a.tabber = this;
        DOM_a.tabberIndex = i;
    
        /* Do we need to add an id to DOM_a? */
        if (this.addLinkId && this.linkIdFormat) {
    
          /* Determine the id name */
          aId = this.linkIdFormat;
          aId = aId.replace(/<tabberid>/gi, this.id);
          aId = aId.replace(/<tabnumberzero>/gi, i);
          aId = aId.replace(/<tabnumberone>/gi, i+1);
          aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
    
          DOM_a.id = aId;
        }
    
        /* Add the link to the list element */
        DOM_li.appendChild(DOM_a);
    
        /* Add the list element to the list */
        DOM_ul.appendChild(DOM_li);
      }
    
      /* Add the UL list to the beginning of the tabber div */
      e.insertBefore(DOM_ul, e.firstChild);
    
      /* Make the tabber div "live" so different CSS can be applied */
      e.className = e.className.replace(this.REclassMain, this.classMainLive);
    
      /* Activate the default tab, and do not call the onclick handler */
      this.tabShow(defaultTab);
    
      /* If the user specified an onLoad function, call it now. */
      if (typeof this.onLoad == 'function') {
        this.onLoad({tabber:this});
      }
    
      return this;
    };
    
    
    tabberObj.prototype.navClick = function(event)
    {
      /* This method should only be called by the onClick event of an <A>
         element, in which case we will determine which tab was clicked by
         examining a property that we previously attached to the <A>
         element.
    
         Since this was triggered from an onClick event, the variable
         "this" refers to the <A> element that triggered the onClick
         event (and not to the tabberObj).
    
         When tabberObj was initialized, we added some extra properties
         to the <A> element, for the purpose of retrieving them now. Get
         the tabberObj object, plus the tab number that was clicked.
      */
    
      var
      rVal, /* Return value from the user onclick function */
      a, /* element that triggered the onclick event */
      self, /* the tabber object */
      tabberIndex, /* index of the tab that triggered the event */
      onClickArgs; /* args to send the onclick function */
    
      a = this;
      if (!a.tabber) { return false; }
    
      self = a.tabber;
      tabberIndex = a.tabberIndex;
    
      /* Remove focus from the link because it looks ugly.
         I don't know if this is a good idea...
      */
      a.blur();
    
      /* If the user specified an onClick function, call it now.
         If the function returns false then do not continue.
      */
      if (typeof self.onClick == 'function') {
    
        onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
    
        /* IE uses a different way to access the event object */
        if (!event) { onClickArgs.event = window.event; }
    
        rVal = self.onClick(onClickArgs);
        if (rVal === false) { return false; }
      }
    
      self.tabShow(tabberIndex);
    
      return false;
    };
    
    
    tabberObj.prototype.tabHideAll = function()
    {
      var i; /* counter */
    
      /* Hide all tabs and make all navigation links inactive */
      for (i = 0; i < this.tabs.length; i++) {
        this.tabHide(i);
      }
    };
    
    
    tabberObj.prototype.tabHide = function(tabberIndex)
    {
      var div;
    
      if (!this.tabs[tabberIndex]) { return false; }
    
      /* Hide a single tab and make its navigation link inactive */
      div = this.tabs[tabberIndex].div;
    
      /* Hide the tab contents by adding classTabHide to the div */
      if (!div.className.match(this.REclassTabHide)) {
        div.className += ' ' + this.classTabHide;
      }
      this.navClearActive(tabberIndex);
    
      return this;
    };
    
    
    tabberObj.prototype.tabShow = function(tabberIndex)
    {
      /* Show the tabberIndex tab and hide all the other tabs */
    
      var div;
    
      if (!this.tabs[tabberIndex]) { return false; }
    
      /* Hide all the tabs first */
      this.tabHideAll();
    
      /* Get the div that holds this tab */
      div = this.tabs[tabberIndex].div;
    
      /* Remove classTabHide from the div */
      div.className = div.className.replace(this.REclassTabHide, '');
    
      /* Mark this tab navigation link as "active" */
      this.navSetActive(tabberIndex);
    
      /* If the user specified an onTabDisplay function, call it now. */
      if (typeof this.onTabDisplay == 'function') {
        this.onTabDisplay({'tabber':this, 'index':tabberIndex});
      }
    
      return this;
    };
    
    tabberObj.prototype.navSetActive = function(tabberIndex)
    {
      /* Note: this method does *not* enforce the rule
         that only one nav item can be active at a time.
      */
    
      /* Set classNavActive for the navigation list item */
      this.tabs[tabberIndex].li.className = this.classNavActive;
    
      return this;
    };
    
    
    tabberObj.prototype.navClearActive = function(tabberIndex)
    {
      /* Note: this method does *not* enforce the rule
         that one nav should always be active.
      */
    
      /* Remove classNavActive from the navigation list item */
      this.tabs[tabberIndex].li.className = '';
    
      return this;
    };
    
    
    /*==================================================*/
    
    
    function tabberAutomatic(tabberArgs)
    {
      /* This function finds all DIV elements in the document where
         class=tabber.classMain, then converts them to use the tabber
         interface.
    
         tabberArgs = an object to send to "new tabber()"
      */
      var
        tempObj, /* Temporary tabber object */
        divs, /* Array of all divs on the page */
        i; /* Loop index */
    
      if (!tabberArgs) { tabberArgs = {}; }
    
      /* Create a tabber object so we can get the value of classMain */
      tempObj = new tabberObj(tabberArgs);
    
      /* Find all DIV elements in the document that have class=tabber */
    
      /* First get an array of all DIV elements and loop through them */
      divs = document.getElementsByTagName("div");
      for (i=0; i < divs.length; i++) {
        
        /* Is this DIV the correct class? */
        if (divs[i].className &&
    	divs[i].className.match(tempObj.REclassMain)) {
          
          /* Now tabify the DIV */
          tabberArgs.div = divs[i];
          divs[i].tabber = new tabberObj(tabberArgs);
        }
      }
      
      return this;
    }
    
    
    /*==================================================*/
    
    
    function tabberAutomaticOnLoad(tabberArgs)
    {
      /* This function adds tabberAutomatic to the window.onload event,
         so it will run after the document has finished loading.
      */
      var oldOnLoad;
    
      if (!tabberArgs) { tabberArgs = {}; }
    
      /* Taken from: http://simon.incutio.com/archive/2004/05/26/addLoadEvent */
    
      oldOnLoad = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = function() {
          tabberAutomatic(tabberArgs);
        };
      } else {
        window.onload = function() {
          oldOnLoad();
          tabberAutomatic(tabberArgs);
        };
      }
    }
    
    
    /*==================================================*/
    
    
    /* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
    
    if (typeof tabberOptions == 'undefined') {
    
        tabberAutomaticOnLoad();
    
    } else {
    
      if (!tabberOptions['manualStartup']) {
        tabberAutomaticOnLoad(tabberOptions);
      }
    
    }

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    This bit here changes the color and background of the "Title I want to change" button -
    Code:
    ul.tabbernav li.tabberactive a {
    	background: #333333;
    	color: #FFFFFF;
    	text-decoration: none;
    	}
    This works here for me -
    Code:
    ul.tabbernav li.tabberactive a {
    	background: #f00;
    	color: #fc6;
    	text-decoration: none;
    	}
    The js doesn't appear to do any of that.
    Am I misunderstanding your question?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Feb 2009
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, but my issue is that I only want to style one of the tabs not all of them.

    So for

    Code:
    <div class="tabber">
    
    	<div class="tabbertab">
    
    		<h2>Title I want to change</h2>
                    <p>Content
    		</p>
    		
    	</div>
    
    	<div class="tabbertab">
    
    		<h2>Title 2</h2>
                    <p>Content
    		</p>
    		
    	</div>
    
    	</div>
    I would only want to style:

    Code:
    <h2>Title I want to change</h2>

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Your .js is re-assinging id's and classes along with building the ul's. It gives <h2>Title I want to change</h2> the class .tabberactive which can be styled from the CSS I quoted.
    This is a very confusing way to make a list, not to mention that it does not work for anyone with javascript disabled.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New Coder
    Join Date
    Feb 2009
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I agree that it is confusing and not so broswer friendly but it is used on a wordpress theme I have installed.
    I just want to make that one H2 tage be styled differently, where would I need to do this, if I alter the .tabberactive class surely they would all change?

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by millsy007 View Post
    Thanks, I agree that it is confusing and not so broswer friendly but it is used on a wordpress theme I have installed.
    I just want to make that one H2 tage be styled differently, where would I need to do this, if I alter the .tabberactive class surely they would all change?
    Did you try it? There is only one .tabberactive on the markup I ended up with so it changes the "Title I want to change" just fine. I did not study that .js to figure out how it decides what h2 gets what class.
    I have also never messed with wordpress, but this does seem like a backward way of doing things. You are locked into this js? There is no way to just not use it?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #14
    New Coder
    Join Date
    Feb 2009
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My understanding is that the tabberactive is simply the tab that has been clicked on, this will change as I will have more than 2 tabs.
    Ideally I want a way to specifically style the <h2>Title I want to change</h2> tab locally?
    I am pretty much locked into this code, I didnt imagine it would be so tricky to alter one tags style, guess I was wrong

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Just try
    Code:
    ul.tabbernav li.tabberactive a {
    	background: #f00;
    	color: #fc6;
    	text-decoration: none;
    	}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •