We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 38873
    • 10 Posts
    Hello, again! Thanks for your help smiley

    I have a question about changing the style (background color) for new menu item. I don't know if you guys understand what exactly I mean....I have horizontal top menu (Home | Promotions | Shop ), and I added a new menu item called "New arrivals" and I would like to change the background of it.
    Well technically I know how to do that, but the problem is - I do not have access to the modx root folder to change the external stylesheet.
    I tried to use an internal styling in head section ,but it didn't work out....

    Maybe I'm doing smth wrong...

    Maybe guys you could help me out? [ed. note: dii-ii last edited this post 14 years, 7 months ago.]
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      CSS will first use inline styling (using style="background:yellow;" as an attribute to the HTML element), then page-level styling (using a style block in the HTML head section), then finally what's in the external stylesheet.

      So using a style block in the template head will override the external stylesheet. What does the HTML for the menu look like when viewing the page source in your browser?
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 38873
        • 10 Posts
        Quote from: sottwell at Mar 03, 2012, 11:45 AM
        What does the HTML for the menu look like when viewing the page source in your browser?
        It looks like this:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <title>Mēbeles | Vanesa </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="/assets/templates/vanesa/style.css" type="text/css" media="screen" />
        
        	<link rel="shortcut icon" href="/assets/templates/vanesa/favicon.ico" />
        
        	<script language="javascript" type="text/javascript" src="/assets/js/jquery-1.5.2.min.js"></script>
        
        	<script language="javascript" type="text/javascript" src="/assets/templates/vanesa/scripts.js"></script>
        
        	<base href="http://vanesa.lv/" />
         <link type="text/css" rel="stylesheet" href="assets/snippets/shopkeeper/style/default/style.css" />
        
            <script type="text/javascript">
              var shkOptions = {
                clStuffCont: 'div.shk-item,td.shk-item',
                lang: 'latvian',
                currency: 'Ls',
                orderFormPage: 'lv/grozs.html',
                cartTpl: ['cartTpl-lv','',''],
        	cartType: 'small',
        	flyToCart: 'image',
        	style:'default'
        	};
              jQuery(document).ready(function(){
                jQuery(shkOptions.clStuffCont).shopkeeper();
              });
            </script>
            <script src="assets/snippets/shopkeeper/lang/latvian-UTF8.js" type="text/javascript"></script>
            <script src="assets/snippets/shopkeeper/js/shopkeeper.js" type="text/javascript"></script>
          
        
        
        	  
        
        	<script type="text/javascript">
        
        	
        
        	  var _gaq = _gaq || [];
        
        	  _gaq.push(['_setAccount', 'UA-7127512-1']);
        
        	  
        
        	  _gaq.push(['_trackPageview'] );
        
        	
        
        	  (function() {
        
        		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        
        		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        
        		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        
        	  })();
        
        	
        
        	</script>
        </head>
        
        <body>
        
        	<div id="body-bg1">
        
        		<div id="body-bg2">
        
        			<div id="wrapper">
        
        				<div id="wrapper2">
        
        					<a href="lv.html" title="Vanesa " class="logo"></a>
        
        					<!-- lv 4428 -->
        
        <div class="basket box1 border1 shop-cart" id="shopCart">
        
        	<div class="box2">
        
        		<div id="cartInner">
        
        			Grozā:<br />
        
        			<span id="cartEmpty" align="center">0 sk.</span>
        
        		</div>
        
        	</div>
        
        </div>
        
        					<div class="lang">
        
        						<a href="lv.html" class="active">latviešu</a>   <a href="ru.html">русский</a><br />
        
        												<form name="search" action="lv/meklesanas-rezultati.html" method="post" id="search-form" class="box1 border1">
        
        							<div class="box2">
        
        								<input name="advSearch" type="hidden" value="allwords" /> 
        
        								<input type="text" name="search" value="Ko Jūs meklējat?" onfocus="if(this.value='Ko Jūs meklējat?')this.value='';" onblur="if(this.value=='')this.value='Ko Jūs meklējat?';" />
        
        								<button type="submit"></button>
        
        								<div class="clear"></div>
        
        							</div>
        
        						</form>
        
        					</div>
        
        					<br class="clear" />
        
        					<div id="menu" class="box1 border1">
        
        						<ul><li class="first dark"><a href="/lv/vanesa-fabrika.html" title="Vanesa Fabrika" >Vanesa Fabrika</a></li>
        <li class=" orange"><a href="/lv/akcijas.html" title="Akcijas" >Akcijas</a></li>
        <li class=" Pink"><a href="/lv/jaunumi.html" title="Jaunumi" >Jaunumi</a></li>
        <li class=" "><a href="/lv/korpusa-mebeles.html" title="Korpusa mēbeles" >Korpusa mēbeles</a></li>
        <li class=" "><a href="/lv/mikstas-mebeles.html" title="Mīkstās mēbeles" >Mīkstās mēbeles</a></li>
        <li class=" "><a href="/lv/virtuves.html" title="Virtuves" >Virtuves</a></li>
        <li class=" "><a href="/lv/birojam.html" title="Birojam" >Birojam</a></li>
        <li class=" "><a href="/lv/gulamistabai.html" title="Guļamistabai" >Guļamistabai</a></li>
        <li class="last "><a href="lv/informacija/kontakti.html" title="Kontakti" >Kontakti</a></li>
        </ul>
        
        					</div>
        
        </head>
        
        <body>
        


        Well as you see my webpage is not in English. But I need help with the line : < li class=" Pink" > < a href="/lv/jaunumi.html" title="Jaunumi" > Jaunumi< / a > < /li >

        If I try to use stuyle box inside the head section..id doesn't work for me....maybe I'm doing smth wrong.